Swift遊戲實戰-跑酷熊貓 10 視差滾動背景

標籤：style   blog   http   color   os   strong   io   檔案   

原理

 

實現

 

勘誤

“實現”的視頻中有個錯誤，如下

背景移動時有個錯誤，看紅色部分，近景歸位時，第二張圖片的下標是1

if arrBG[0].position.x + arrBG[0].frame.width < speed{
           arrBG[0].position.x = 0
            arrBG[1].position.x= arrBG[0].frame.width
  }

 

要點：

什麼是視差滾動：

視差滾動（Parallax Scrolling）是指讓多層背景以不同的速度移動，形成立體的運動效果，帶來非常出色的視覺體驗。

 

如何?：

首先是背景，由兩種背景組成，近點的是青色山坡，遠點的是樹木。我們在move方法中給予近景1/5 的平台移動速度。給遠景1/20 的平台移動速度。就形成了視差滾動。

 

具體代碼：

import SpriteKit//繼承自sknodeclass BackGround :SKNode {    //近處的背景數組    var arrBG = [SKSpriteNode]()    //遠處樹木的背景數組    var arrFar = [SKSpriteNode]()    //構造器    init() {        //執行父類的構造器        super.init()        //遠處背景的紋理        var farTexture = SKTexture(imageNamed: "background_f1")        //遠處背景由3張無縫銜接的圖組成        var farBg0 = SKSpriteNode(texture: farTexture)        farBg0.anchorPoint = CGPointMake(0, 0)        farBg0.position.y = 150               var farBg1 = SKSpriteNode(texture: farTexture)        farBg1.anchorPoint = CGPointMake(0, 0)        farBg1.position.x = farBg0.frame.width        farBg1.position.y = farBg0.position.y               var farBg2 = SKSpriteNode(texture: farTexture)        farBg2.anchorPoint = CGPointMake(0, 0)        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.position.y = 70        bg1.position.y = bg0.position.y        self.addChild(bg0)        self.addChild(bg1)        arrBG.append(bg0)        arrBG.append(bg1)    }    //移動函數    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        }        //迴圈遍曆做遠處背景，做x座標位移        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        }    }}

 

專案檔地址

http://yun.baidu.com/share/link?shareid=3824235955&uk=541995622

 

Swift遊戲實戰-跑酷熊貓系列00遊戲預覽01建立工程匯入素材02建立熊貓類03熊貓跑動動畫04熊貓的跳和滾的動作05踩踏平台是怎麼煉成的06建立平台類以及平台工廠類07平台的移動08產生源源不斷的移動平台09移除情境之外的平台