如何在不同分辨率的SpriteKit游戏中正确显示HUD？

Question

我最初使用iOS 8创建了游戏并在iPhone 6S上进行了测试。该游戏在5,5S，6,6 Plus，6S和6S Plus中看起来很好（因为所有设备都具有16：9的相同比率）。从图像中可以看出，音乐按钮偏离右上角。该代码偏移了图像：

 muteButton.position = CGPoint(x: CGRectGetMidX(self.frame) + 920, y: CGRectGetMidY(self.frame) + 480)

我遇到的问题是，如果有人在iPad上试玩这款游戏，它会显示出来。如您所见，底部图形和静音按钮从侧面偏移了很多。

我想这样做，以便对象始终靠近框架/视图的两侧。制作应用程序＆＃34;通用＆＃34;在xCode上也没有解决它。或者我只是为iPad制作一个全新的项目？

Answer 1

不要忘记4s，你会遇到与iPad相同的问题。 SpriteKit没有像UI构建器那样的约束，因此您将不得不通过应用一些数学来适应4：3和16：9设备，或强制使用黑色边框的4：3为16：9 .AspectFit缩放方法。

现在我不确定920和480的来源，但在检测设备时，可能需要在此代码中调整这些数字。确定方面比例的最简单方法是UIScreen.mainScreen().bounds.width/UIScreen.mainScreen().bounds.height，然后从那里开始工作。

Answer 2

解决方案！我想到了！对于那些来自未来的人，也可能需要帮助。这适用于横向和纵向。

注意：您必须将scene.scaleMode设置为.AspectFill才能在所有场景中使用，场景大小必须为2048x1536或1536x2048。这也将使其适用于iPad。

我在课堂上声明了以下变量。

class StartScene: SKScene {
     let playableArea: CGRect
}

然后，我在覆盖init（）函数中有以下代码。

override init(size: CGSize) {

    //1. Get the aspect ratio of the device
    let deviceWidth = UIScreen.mainScreen().bounds.width
    let deviceHeight = UIScreen.mainScreen().bounds.height
    let maxAspectRatio: CGFloat = deviceWidth / deviceHeight

    //2. For landscape orientation, use this*****
    let playableHeight = size.width / maxAspectRatio
    let playableMargin = (size.height - playableHeight) / 2.0
    playableArea = CGRect(x: 0, y: playableMargin, width: size.width, height: playableHeight)

    //3. For portrait orientation, use this*****
    let playableWidth = size.height / maxAspectRatio
    let playableMargin = (size.width - playableWidth) / 2.0
    playableArea = CGRect(x: playableMargin, y: 0, width: playableWidth, height: size.height)

    super.init(size: size)
}

从这里开始，我使用变量playableArea来定位我的对象。

titleChild.position = CGPoint(x: CGRectGetMidX(playableArea), y: CGRectGetMaxY(playableArea) - (titleChild.size.height * 0.90))

效果惊人。在iPhone 4S，5,5S，6,6 Plus，6S，6S Plus和iPad上看起来不错。

如果您想在应用中查看该框以确保您做得正确，请使用以下功能。

func drawPlayableArea() {
    let shape = SKShapeNode()
    let path = CGPathCreateMutable()
    CGPathAddRect(path, nil, playableArea)
    shape.path = path
    shape.strokeColor = SKColor.redColor()
    shape.lineWidth = 8
    addChild(shape)
}

然后只需调用didMoveToView（）函数中的函数来查看红框以确保正确执行代码。这将创建一个可供用户查看的视图大小的红框。既然你有playableArea来保存用户可以看到的框架，你可以将它用于其他事情，比如确保对象没有或不能离开边界等。对于这个截图，我用它来防止用户在设备外移动飞船。