简单SpriteKit场景中的资产大小问题

Question

I have set up my Scene as follows:

override func viewDidLayoutSubviews() {

    let scene = GameScene(size: CGSize(width: 1334, height: 750))
    let skView = view as! SKView
    scene.backgroundColor = UIColor.red
    scene.scaleMode = .aspectFit
    skView.presentScene(scene)
    skView.showsFPS = true
    skView.showsNodeCount = true
    print("Screen Size: \(GlobalProperties.screenSize.width) x \(GlobalProperties.screenSize.height)")
    print("Scene Size: \(scene.size.width) x \(scene.size.height)")
} 

As you can see I set the default scene size to 1334 x 750 which is the pixel resolution of iPhone 6,7,8

I created a 90x50 asset as well as a background and inserted it as follows:

override func didMove(to view: SKView) {
    let bg = SKSpriteNode(texture: SKTexture(imageNamed: "DemoBackgroundVertical"))
    bg.position = CGPoint(x: frame.midX, y: frame.midY)
    bg.zPosition = -10
    bg.size = frame.size
    self.addChild(bg)

    let melon = SKSpriteNode(texture: SKTexture(imageNamed: "CuteMelon"))
    melon.position = CGPoint(x: frame.midX, y: frame.midY)
    print(melon.size)
    self.addChild(melon)
}

So now the scene size in points is 667 x 375, the scene size in pixels is 1334 x 750, and I placed the asset in the 1x Universal group

Am I correct that while running this on an iPhone 8 simulator the scale mode should not matter as the aspect ratio is identical to the 1334 x 750 size I set the scene to initially?

Here is the issue, if in Photoshop I create an identical scene of 667 x 375 and insert a 90x50 asset it looks like this : https://imgur.com/a/BuW2HLI

But a screenshot of the iphone 8 simulator has the watermelon asset much smaller relatively as such: https://imgur.com/flMtdfG

Why is this the case? Any guidance would be greatly appreciated.

Answer 1

In your case, you want to be using the 2x slot or reorganize your project in a better way.

Setting the default scene size to 1334x750 gets you a scene size of 1334x750, not 667x375, as in 2668 pixels by 1500 pixels . This means your SpriteKit engine is actually scaling the scene down from 1334x750 to 667x375, then scaling it back up again. Since coordinates use CGPoint, I always find this as an unnecessary step because 0.5 exists in this space and thus the large numbers causes confusion with people trying to understand how retina display works.

So what you have is a 90x50 asset in a 1334x750 scene, not a 667x375 scene.

First thing I would do is change the scene size to 667x375 so that you know you are working in the 1x coordinate system, not the 2x coordinate system.

Then, try to ignore the whole "pixel" concept. Stick strictly to points. Remember that 1x means points * 1 2x means points * 2 and 3x means points * 3. If you have this in mind. you will find asset creation a lot simpler. Anything in your 1x slot will be the actual size your game uses, and anything placed in your 2x slot and your 3x slot will be double and triple the size respectively, only showing higher detailed graphics in your game without having to do anything with the code

Finally, place your low res 1x graphics into the 1x slot. You will now see that all of your sizes should be mapping correctly. If the 2x hardware scaling does not look pretty, provide the assets into their separate 2x slots to provide better details to the images you need.