iOS development-game screen adaptation (SpriteKit)

When we develop an app, we usually want it to run on the IPhone, IPad, Mac, and especially the game.

This will require us to consider the different devices different resolution, processing is more troublesome.

For example, according to the official practice, we need to provide such as xx.png, [email protected], [email protected], xx~ipad.png, and [email protected] Such a different picture,

There is also a large number of if (...) written in the program. {...} else if {...} This kind of code to distinguish between different devices, think about it is annoying.

Especially for individual developers like me ... Get so many sets of pictures. It's killing me.

So my approach is to fix a size that is compatible with different devices.

Here, I take the pictures I need, all according to the screen size of 2048 * 1536来 draw. That is, the size of our background map is 2048 * 1536, and other images are drawn according to this ratio.

Then, when each scene is loaded, the scene size is set to 2048 * 1536, and the display is Aspectfill.

As below, the default Spritekit project, do a simple modification: (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 did you do it?

We know. 2048 * 1536 is the resolution of the ipad Retina. It is also the highest resolution in the equipment we need to fit. So I chose this size. Allow it to be compatible with low resolution devices. (Does not cause distortion of the picture, of course, unnecessary overhead is unavoidable, but relative to each device to prepare a set of pictures or more excellent)

That is, 2048 * 1536 is perfectly displayed on the ipad retina. What about the other devices? It's going to depend on Aspectfill.

Simply take a look at the following picture:

The orange whole area represents the true size of our scene. The area within the black wireframe indicates the true size of the scene on the device.

Look at the ipad Retina. His orange area is perfectly matched to the area inside the black wireframe, which means it can be fully displayed on the device.

Look at the iphone4s again. Its real resolution should be 960 * 640 (this is a horizontal screen display), but the area within the black wireframe is indeed 2048 * 1136, which is 2.1 times times the original.

This is due to the aspectfill. It should be known that the Aspectfill is a model of the image display that has been developed in contact with iOS. It keeps the aspect ratio to scale the picture, and the image may not be fully displayed. (It can be understood that the two directions are shrunk together, and when the two directions reach the screen size, it stops shrinking.) The one that reaches the screen size first because of the continuation of the contraction, will cause the image in that direction to be truncated. So the display is not complete)

Similarly, the display effect of IPhone6.

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

In general, using such a method, the operation of different devices is relatively uniform (our operations are based on the scene size 2048*1536).

But from the picture can also be very intuitive to see that some areas of the scene is not complete display. For example, if you put an elf in the (0, 0) point, then you may not see it, if the genie is not big enough, because (0,0) the point is no longer in the device screen display area.

However, relative to the general adaptation, I still prefer the above approach.

iOS development-game screen adaptation (SpriteKit)