Swift-multi-layer seamless cycle scrolling background (spritekit game development)

Source: Internet
Author: User
Tags addchild spritekit

In game development, such as parkour games. We need to implement the infinite cyclic scrolling of the background to create the effect of motion. In addition to the single-layer background scrolling, there is parallax scrolling.

Parallax Scrolling is a multi-layered background that moves at different speeds, creating a stereoscopic effect that results in a very good visual experience.
Sample Description:1, the background of this sample 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 the scene in the distance, so the color is lighter, the contrast is weaker, and the movement speed is slower. 2, to achieve circular scrolling. The background chart we are preparing is to be seamless. 3. How many seamless graphs do you need to make a background? The criterion is: When the first picture is moved out of the screen, the remaining figures can fill the game screen in the x-axis direction. (In this case, the vision needs to spell three identical seamless graphs, with close-up of two identical seamless graphs)
Operating Effect:

Sample code:Background class Background.swift
1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465 6667686970717273747576777879808182 import SpriteKit class BackGround :SKNode {    //近处背景数组    var arrBG = [SKSpriteNode]()    //远处背景数组    var arrFar = [SKSpriteNode]()        override init() {        super.init()        //获取远处背景的纹理        var farTexture = SKTexture(imageNamed: "background_f1")        //远处背景由3章无缝图衔接而成        var farBg0 = SKSpriteNode(texture: farTexture)        farBg0.anchorPoint = CGPointMake(0, 0)        farBg0.zPosition = 9        farBg0.position.y = 150                var farBg1 = SKSpriteNode(texture: farTexture)        farBg1.anchorPoint = CGPointMake(0, 0)        farBg1.zPosition = 9        farBg1.position.x = farBg0.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)        self.addChild(farBg2)        arrFar.append(farBg0)        arrFar.append(farBg1)        arrFar.append(farBg2)                        //近处背景纹理        var texture = SKTexture(imageNamed: "background_f0")        //近处背景由2章无缝衔接图组成        var bg0 = SKSpriteNode(texture: texture)        bg0.anchorPoint = CGPointMake(0, 0)        var bg1 = SKSpriteNode(texture: texture)        bg1.anchorPoint = CGPointMake(0, 0)        bg1.position.x = bg0.frame.width        bg0.zPosition = 10        bg1.zPosition = 10        bg0.position.y = 70        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:) has not been implemented")    }        //移动方法    func move(speed:CGFloat){        //通过遍历获取背景,然后做x方向的改变        for bg in arrBG {            bg.position.x -= speed        }        //循环滚动算法        if arrBG[0].position.x + arrBG[0].frame.width < speed {            arrBG[0].position.x = 0            arrBG[1].position.x = arrBG[0].frame.width        }        //远景同上        for far 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 = arrFar[0].frame.width * 2        }    }}


Main Scene class Gamescene.swift

12345678910111213141516171819202122 import SpriteKitclass GameScene: SKScene {    lazy var bg = BackGround()    //背景移动速度    var bgMoveSpeed:CGFloat = 3         override func didMoveToView(view: SKView) {        //场景的背景颜色        let skyColor = SKColor(red:113/255,green:197/255,blue:207/255,alpha:1)        self.backgroundColor = skyColor        //设置背景        self.addChild(bg)    }        override func touchesBegan(touches: NSSet, withEvent event: UIEvent) {    }       override func update(currentTime: CFTimeInterval) {        bg.move(bgMoveSpeed/5)    }}


SOURCE Download: Dynamicbg.zip

Swift-multi-layer seamless cycle scrolling background (spritekit game development)

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.