Swift language Combat Promotion-9th chapter game-Parkour panda-9-10 removal platform with parallax scrolling

Source: Internet
Author: User
Tags addchild set background

9.9 removing platforms outside the scene

Use as a platform is a steady stream of production, if you do not pay attention to destruction, the platform will accumulate more, although in the game scene can not see. Dozens of can not see the problem, the tens of thousands of of them? Millions of of them?

So let's see how to remove the platform, what kind of platform needs to be removed? And how to remove it? As we have said before, when the platform completely removes the game scene, it can be removed. You need to do two operations, 1 are removed from the Platform factory class, and 2 are removed from the platform array.

And, because the platform is one after the other, we don't need to traverse the platform array every time to make a judgment on each platform. You just need to do this test on the leftmost and first platform. This test is best suited for the Move method.

Func Move (speed:cgfloat) {//traverse all the changes of the for P in platforms{//x coordinates animate horizontally moving animation p.position.x-= speed}//Remove platform if platforms[0]. Position.x <-platforms[0].width {platforms[0].removefromparent () platforms.removeatindex (0)}}

9.10 Parallax Scrolling Background

What is parallax scrolling? It refers to allowing multi-layered backgrounds to move at different speeds, creating a three-dimensional movement that results in a very good visual experience.

And our game is also used in this technology. Such as:

In the game of Parkour Panda, our background is divided into two layers. The first layer is closer to the game window and the colors are more vivid and move faster. The second layer is to simulate a distant scene, so the color is lighter, the contrast is weaker, and the movement speed is slower.

So, in our code, we can use the moving speed movespeed defined in the Gamescene to give the value of the movespeed of the first layer background 1/5 to the Moveseed value of the second layer background 1/20. This creates a rolling inspection.

After the parallax scrolling, we also need to understand a cyclic scrolling algorithm. Because we can't create a new background like a platform. We're going to do this with a loop-rolling algorithm.

First of all, our background images can be seamlessly bridged. So how many seamless graphs do you need to make up the background? The criterion is: When the first picture is removed from the screen, the rest of the graph can fill the game screen in the x-axis direction. See:

In a situation like this, only two background images are required. So we're going to use two seamless background graphs to illustrate what a circular scroll is. Is the initial situation:

When moving to the position of figure 9-17, jump directly to the position of Figure 9-18, and then continue to move to the left to form a circular scroll. As we can see, when we jump back, in the game scene, the background is visually unchanged, but it has actually started a new scroll.

The principle is complete, let's look at the specific code. We create a new background class with the class name background, inherited from Sknode.

In the background class we define two arrays, one to store the close-up, and the other to store the vision:

Near background array ar arrbg = [Skspritenode] ()//remote background array var arrfar = [Skspritenode] ()

We are building the code in the method init to generate the background. Because the vision picture is relatively small, you need to complete the circular scrolling to 3 images.

The algorithm for cyclic scrolling is unloaded in the Move method, and the Move method, like the Move method of the Platform factory class, receives a parameter that represents speed, which is 1/5 of movespeed in Gamescene. Because the vision speed moves more slowly, its x-coordinate change value is One-fourth of the close-up.

    look at the full code:

Import Spritekitclass Background:sknode {//near background array var ARRBG = [Skspritenode] ()//distance background array var Arrfar = [Skspri Tenode] () override Init () {super.init ()//get texture var fartexture = sktexture (imagenamed: "B" in a distant background) Ackground_f1 ")//distance background from 3 chapters seamless graph cohesion and become var farBg0 = Skspritenode (texture:fartexture) Farbg0.anchorpoint = C Gpointmake (0, 0) farbg0.zposition = 9 Farbg0.position.y = var farBg1 = Skspritenode (textu re:fartexture) Farbg1.anchorpoint = cgpointmake (0, 0) farbg1.zposition = 9 Farbg1.position.x = farBg        0.frame.width farbg1.position.y = farbg0.position.y var farBg2 = Skspritenode (texture:fartexture)         Farbg2.anchorpoint = cgpointmake (0, 0) farbg2.zposition = 9 Farbg2.position.x = farBg0.frame.width * 2 FARBG2.POSITION.Y = Farbg0.position.y self.addchild (farBg0) self.addchild (FARBG1) sel      F.addchild (FARBG2)  Arrfar.append (FARBG0) arrfar.append (FARBG1) arrfar.append (FARBG2)//near background texture V AR texture = sktexture (imagenamed: "background_f0")//near background consists of 2 chapters seamless graph composed of var bg0 = Skspritenode (texture:texture ) Bg0.anchorpoint = cgpointmake (0, 0) var bg1 = Skspritenode (texture:texture) Bg1.anchorpoint = Cgpo Intmake (0, 0) bg1.position.x = bg0.frame.width Bg0.zposition = Bg1.zposition = Ten Bg0.posit ION.Y = BG1.POSITION.Y = Bg0.position.y self.addchild (bg0) self.addchild (BG1) arrbg.append (  BG0) Arrbg.append (BG1)} required init (coder Adecoder:nscoder) {fatalerror ("init (coder:) have not            been implemented ")}//Move method func Move (speed:cgfloat) {//through traversal to get the background, and then make a change in x direction for the BG in ARRBG {            Bg.position.x-= speed}//cyclic scrolling algorithm if arrbg[0].position.x + Arrbg[0].frame.width < speed { Arrbg[0].position.x = 0 arrbg[1].position.x = arrbg[0].frame.width}//Vision ditto for long in Arrfar {            Far.position.x-= SPEED/4} if arrfar[0].position.x + Arrfar[0].frame.width < SPEED/4 { arrfar[0].position.x = 0 arrfar[1].position.x = arrfar[0].frame.width arrfar[2].position.x = arr Far[0].frame.width * 2}}

Ping Tai Factory class like the Panda class, we need to declare a BG variable in Gamescene.

lazy var bg = BackGround ()

Then load it in the Didmovetoview method, which is a little earlier than the panda Panda.

Self.addchild (BG)

Background scrolling also needs to be implemented in the Gamescene update

Bg.move (MOVESPEED/5)

Now that the gamescene has changed a lot, let's take a look at the complete code:

Import Spritekitclass gamescene:skscene,protocolmainscene{lazy var panda = Panda () lazy var platformfactory = Plat Formfactory () lazy var bg = BackGround ()//move speed var movespeed:cgfloat = 15//Determine how far the last platform is still completely into the game scene var L astdis:cgfloat = 0.0 override func Didmovetoview (View:skview) {//Scene background color let Skycolor = Skcolor (red:113 /255,green:197/255,blue:207/255,alpha:1) Self.backgroundcolor = skycolor//Set Background Self.addchild (BG)//Set an initial position for the panda panda.position = Cgpointmake (200, 400)//show the panda in the scene SELF.ADDC Hild (Panda)//Add the Platform factory to the View Self.addchild (platformfactory)//width of the screen to the Platform factory class Platformfactory.scenew Idth = self.frame.width//set proxy platformfactory.delegate = self} override func Touchesb            Egan (Touches:nsset, Withevent event:uievent) {//When the panda state is running, play the jump action if Panda.status = = Status.run { Panda.jump ()}else if Panda.status = = status.jump {//When the state is jumping, perform a roll animation Panda.roll ()}} Overri De func update (currenttime:cftimeinterval) {Lastdis-= movespeed if Lastdis <= 0 {println (" Build new Platform ") Platformfactory.createplatformrandom ()} platformfactory.move (Self.movespeed) bg.m Ove (MOVESPEED/5)} func ongetdata (dist:cgfloat) {Self.lastdis = dist}}

Finally, let's run it and see how it works. Well, everything is perfect. Wait, there seems to be something wrong with the platform, running behind the background.

Well, by examining the code we found that the background is set to Zposition, the value is 9, 10. This property determines the rendering order. The smaller the first render, the smaller the more in the back. Then the solution to this bug is simple. As long as the platform in the position set a larger, such as 20, can be solved.

So we switch to the platform class and add a sentence to the last line of the OnCreate method:

Self.zposition = 20

Run again, this time normal.

My public number.

I wrote a book: "Swift language Combat Promotion" http://item.jd.com/11641501.html

Swift language Combat Promotion-9th chapter game-Parkour panda-9-10 removal platform with parallax scrolling

Related Article

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.