交换的宽度和高度值

Question

Explanation

For some reason, width and height values are being swapped in my game (as you can see below) that is set to be in landscape orientation. This way, the sprite that should be centered in the screen, is totally off the right position.

---

Code

You can download it here .

GameScene

import SpriteKit

class GameScene: SKScene {

    override func didMoveToView(view: SKView) {

        print("width:", self.frame.width)
        print("height:", self.frame.height)

        //Sprite
        let sprite = SKSpriteNode (imageNamed: "sprite")
        sprite.anchorPoint = CGPointZero
        sprite.position = CGPoint(x: self.frame.width / 2 - sprite.frame.width / 2, y: self.frame.height / 2 - sprite.frame.height / 2)
        addChild(sprite)
    }
}

GameViewController

import UIKit
import SpriteKit

class GameViewController: UIViewController {

    override func viewDidLoad() {
        super.viewDidLoad()

        // Set view size.
        let scene = GameScene(size: view.bounds.size)

        // Configure the view.
        let skView = view as! SKView
        skView.showsFPS = true
        skView.showsNodeCount = true

        /* Sprite Kit applies additional optimizations to improve rendering performance */
        skView.ignoresSiblingOrder = true

        /* Set the scale mode to scale to fit the window */
        scene.scaleMode = .ResizeFill

        skView.presentScene(scene)
    }

    override func supportedInterfaceOrientations() -> UIInterfaceOrientationMask {
        if UIDevice.currentDevice().userInterfaceIdiom == .Phone {
            return .Landscape
        } else {
            return .Landscape
        }
    }
}

Thanks in advance,
Luiz.

Answer 1

If you go to targets-General in your xCode project (where you set version number, bundle ID etc) did you untick portrait? You also might have to check your info.plist to see if all portrait entries are removed for both devices.

You approach unfortunately is bad practice a lot of tutorials teach you and I would not continue like this.

If you use "scaleMode ResizeFill" or set the scene size to "view.bounds" your game will never look consistent on all devices. Furthermore all your values (sprite sizes, font sizes, physics values etc) will also not be the same on devices different to the one you are testing on.

Basically you will have to adjust for all of this on like 5-6 devices and its madness, especially using xCode simulator. Trust me I have been there before with 2 games and it nearly killed me. Its a game of game of "yeah this looks about right".

Dont go through this, so what you should do is

1) Change your scene size to the default scene size used by xCode

  GameScene(size: CGSize(width: 1024, height: 768)) // swap if portrait

Note: Check update at bottom

  If you dont do this, and leave it at view.bounds.size, point 2 will not work.

2) Change your scene scale mode to .AspectFill (also default xCode settings).

This way all your stuff will look great on all iPhones. Your values will scale correctly and you save yourself a lot of work. On iPads you will have some extra space at the top and bottom (landscape) or left and right (portrait) which you usually just cover with some more background and have as a non playable area

Your scene basically looks like this now.

The red area is your whole scene size (iPad) but if you run on iPhones you will only see the green bit. In Portrait mode that red area would be on the left and right side.

Thats why y positioning is usually done from the centre because if you use frame.minY or frame.maxY you would be in the red zone and won't see the sprite on iPhones. That red zone you just cover with some more background (your background full screen images should be iPad size).

This also make your game more balanced, because if your would just stretch up your game than it will be easier on iPads because you have more space.

So design your game within the green zone. Than on iPads the only thing you might have to do is move up some UI, like pause button or score label, when you want to show them at the top edge. I do it this way.

 // Some button
 ...
 someButton.position = CGPoint(x: frame.midX, y: frame.midY + 200)
 addChild(someButton)

 if UIDevice.current.userInterfaceIdiom == .pad {
     // set for iPad
 }

 // Some label
 someLabel.positon = CGPoint(x: frame.midX - 100, someButton.position.y) // because its y position is the same as someButton I only have to adjust someButton.position.y on iPads.
 addChild(someLabel)

I would not continue with your approach, even if it means redoing a lot of work.

UPDATE:

It seems with xCode 8 apple changed the default scene size from 1024x768 (768x1024) to 1334x750 (750x1334). I have only played around with those settings for a bit and they seem confusing for a universal game.

So you scene would now look like this and stuff on the xAxis on iPads is offscreen.

That makes no sense as the iPad is clearly not more widescreen than an iPhone. I actually opened a bug report to see what apple says about this so for now I would probably keep it at 1024x768.

Hope this helps

Answer 2

Override viewWillLayoutSubviews in your GameViewController to ensure you get the proper width/height of the view. The implication with this also is that any objects you may instantiate would need to wait until this method has been called.

So you would want to do something like

class GameViewController: UIViewController {

override func viewWillLayoutSubviews() {
    super.viewWillLayoutSubviews()

    // NOTE: Add code to do this only once!
    // Set view size.
    let scene = GameScene(size: view.bounds.size)

    // Configure the view.
    let skView = view as! SKView
    skView.showsFPS = true
    skView.showsNodeCount = true

    /* Sprite Kit applies additional optimizations to improve rendering performance */
    skView.ignoresSiblingOrder = true

    /* Set the scale mode to scale to fit the window */
    scene.scaleMode = .ResizeFill

    skView.presentScene(scene)
}

Note I didn't try and compile this and it is missing a trailing } . Additionally, you would want to do this only once, I haven't added the code to do that. In my game, my scene is a property so I just check to see if it is nil and if it is, then I create the scene and present.

Answer 3

Following your code and according to how do you want to construct your sprite and position in GameScene you simply must change the scene.scaleMode to AspectFill or AspectFit (depend by what do you want to achieve):

sources :

@available(iOS 7.0, *)
public enum SKSceneScaleMode : Int {

    case Fill /* Scale the SKScene to fill the entire SKView. */
    case AspectFill /* Scale the SKScene to fill the SKView while preserving the scene's aspect ratio. Some cropping may occur if the view has a different aspect ratio. */
    case AspectFit /* Scale the SKScene to fit within the SKView while preserving the scene's aspect ratio. Some letterboxing may occur if the view has a different aspect ratio. */
    case ResizeFill /* Modify the SKScene's actual size to exactly match the SKView. */
}