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 SpriteKit
class 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)