SpriteKit game development: [4] screen adaptation skills, spritekit Game Development

SpriteKit game development: [4] screen adaptation skills, spritekit Game Development
Screen adaptation skills

Multi-screen resolution is really the opposite for developers! As the saying goes: If the screen is too different, I will stick to the southeast branch ~

However, for game development, once you understand the screen adaptation principle, it will be invincible to numerous screen resolutions.

When starting game development, We preset a "original screen" to draw various game elements on the original screen;

When the game is actually deployed on devices with different resolutions, the "raw screen" (ying) system (she) is then used to bring the game to the actual screen.

In the process of ing to the actual screen, if the aspect ratio of the "actual screen" is different from that of the "original screen", you must consider how to adjust the adaptation.

For example, the original screen is like this:

The lazy solution is, Directly ignore the original proportion of the "original screen", scale according to the actual proportion of the screen, the "original screen" deformation but completely drawn to the device screen. This type of laziness affects the gaming experience of General players and is not recommended.

Which of the following solutions is easier and more effective?, Scale the "original screen" to the size that the actual device just shows completely, and draw it to the device screen in the center, at this time, it may be because there is a gap between the "original screen" and the "actual screen" during the ing process (black filling ).

It seems that the second solution is very effective, but for players with strong (chu) Force (nv) Disease (zuo), the Black borders highlighted on the screen cannot be tolerated.

SoThe recommended solution isThird, scale the "original screen" in the original proportion to be able to fill the entire device screen with a fill (although some content is beyond the screen and cannot be displayed to the player ). That is to say, the video content that players on different devices will see when playing the same game will be different. (For example, figure 3 and figure 4 on the left)

For details about how to set up three screen mappings, see SpriteKit game development (3) screen size mode

If you choose the third solution to adapt to different screens, we need to pay attention to one problem --Effective regions of the game. Because players with long and thin devices (iPhone5/5S) can see less area of the game than those with wide and fat devices (iPad/iPhone4/4S, therefore, the effective area of the game should be the smallest game area that players on all devices can see. Therefore, you only need to place the game elements in the valid region when creating the game (restrict players' operations in the valid region.

For Apple devices:

We should adopt the "original screen" as the fattest ratio (2048*1536) and the "Effective Area" as the "Effective Area" as the shortest ratio (2048*1152. (That is, ensure that the operation within 192 (1536-1152)/2) pixels of the original screen boundary is invalid)

The specific implementation code is very simple: in GameViewController. swift: (Note that the vertical screen is 1536*2048, and the horizontal screen is 2048*1536)

class GameViewController: UIViewController {    override func viewDidLoad() {        super.viewDidLoad()        let scene = GameScene(size:CGSize(width: 1536, height: 2048))        let skView = self.view as SKView        scene.scaleMode = .AspectFill                       skView.presentScene(scene)    }}

How to calculate the effective regions of a game:

        func initPlayableRect()        {            let tempWidth = size.height / 16.0 * 9.0            let tempMargin = (size.width - tempWidth) / 2            playableRect = CGRect(x: tempMargin, y: 0, width: tempWidth, height: size.height)        }

The following is a small game you are writing in the past two days. The red line is the effective area of the game. These are the screen adaptation results of three different resolutions:

Above