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

時間 2019-11-21

標籤 swift 遊戲實戰跑酷熊貓視差滾動背景欄目 Swift 简体版

原文原文鏈接

原理html

實現node

勘誤

「實現」的視頻中有個錯誤，以下數組

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

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

要點：

什麼是視差滾動：函數

視差滾動（Parallax Scrolling）是指讓多層背景以不一樣的速度移動，造成立體的運動效果，帶來很是出色的視覺體驗。動畫

如何實現：spa

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

具體代碼：code

import SpriteKit
//繼承自sknode
class 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
        }
    }
}