IOS development-game screen adaptation (SpriteKit)

IOS development-game screen adaptation (SpriteKit)

When we develop an App, we usually want it to run simultaneously on the iPhone, iPad, and Mac, especially games.

In this way, we need to consider the different resolutions of different devices, which is troublesome to process.

For example, according to the official practice, we need to provide such as xx.png, xx@2x.png, xx@3x.png, xx ~ IPad.png, and xx ~ Different pictures like iPad@2x.png,

In addition, it is annoying to write a large number of Code such as if (...) {...} else if {...} in the program to distinguish different devices.

In particular, individual developers like me can get so many pictures.

So my practice is to fix a size to be compatible with different devices.

Here, I will draw all the images I need based on the screen size of 2048*1536. That is to say, the size of our background image is 2048*1536. Other images are also drawn based on this ratio.

Then, when loading each scenario, set the scene size to 2048*1536 and display as AspectFill.

For the default SpriteKit project, make a simple modification as follows: (GameViewController. swift)

/// GameViewController. swift // ZombieConga /// Created by Colin on 14/12/21. // Copyright (c) 2014 icephone. all rights reserved. // import UIKitimport SpriteKitclass GameViewController: UIViewController {override func viewDidLoad () {super. viewDidLoad () let myScene = GameScene (size: CGSize (width: 2048, height: 1536) myScene. scaleMode =. aspectFill let myView = self. view as SKView myView. showsFPS = true myView. showsNodeCount = true myView. ignoresSiblingOrder = true myView. presentScene (myScene)} override func prefersStatusBarHidden ()-> Bool {return true }}

Why?

We know that. 2048*1536 is the resolution of iPad Retina. It is also the highest resolution in the device we need to adapt. So I chose this size. Make it compatible with devices with low resolution. (Images will not be distorted. Of course, unnecessary overhead is inevitable, but it is better to prepare a set of images for each device)

That is to say, 2048*1536 is perfectly displayed on iPad Retina. What about other devices? Here we need to rely on AspectFill.

Let's take a look at the figure below:

The entire orange area indicates the actual size of our scenario. The area in the black box indicates the actual size of the scenario displayed on the device.

Check out iPad Retina. The orange area perfectly matches the area in the black box, that is, it can be fully displayed on the device.

Let's look at iPhone4S again. Its actual resolution should be 960*640 (shown on a horizontal screen), but the area in the Black Box is indeed 2048*1136, 2.1 times the original resolution.

This is due to AspectFill. Users who have been familiar with iOS development should know that AspectFill is a mode of image display. It keeps the aspect ratio of the scaled image, and the image may not be fully displayed. (It can be understood that the two directions are scaled together. When both directions reach the screen size, the scale-in is stopped. At this time, the image that reaches the screen size will be truncated due to the subsequent contraction. Therefore, the display is incomplete)

Similarly, the display effect of iPhone 6.

? IPad Retina [or 1.33]: Displayed as-is to fit the 2048x1536 screen size.
? IPad Non-Retina [or 1.33]: Aspect fill will scale a 2048x1536 playable area by 0.5 to fit the 1024x768 screen size.
? IPhone 4S [or 1.5]: Aspect fill will scale a 2048x1366 playable area by 0.47 to fit the 960x640 screen size.
? IPhone 5 [or 1.77]: Aspect fill will scale a 2048x1152 playable area by 0.56 to fit the 1136x640 screen size.
? IPhone 6 [or 1.77]: Aspect fill will scale a 2048x1152 playable area by 0.64 to fit the 1334x750 screen size.
? IPhone 6 Plus [or 1.77]: Aspect fill will scale a 2048x1152 playable area by 0.93 to fit the 1920x1080 screen size.

In general, this method is used to unify operations between different devices (our operations are subject to the scenario size of 2048*1536 ).

However, we can intuitively see from the image that some areas in the scenario are incomplete. For example, if an iPhone 6 genie is placed at (0, 0), it may not be seen. If the genie is not big enough, because (0, 0) point is no longer in the display area of the device screen.

However, compared with the general one-by-one adaptation, I still highly recommend the above practices.