swift语言实战晋级-第9章 游戏实战-跑酷熊猫-9-10 移除平台与视差滚动

简介: 原文:swift语言实战晋级-第9章 游戏实战-跑酷熊猫-9-10 移除平台与视差滚动9.9 移除场景之外的平台       用为平台是源源不断的产生的,如果不注意销毁,平台就将越积越多,虽然在游戏场景中看不到。
原文: swift语言实战晋级-第9章 游戏实战-跑酷熊猫-9-10 移除平台与视差滚动

9.9 移除场景之外的平台

 

    用为平台是源源不断的产生的,如果不注意销毁,平台就将越积越多,虽然在游戏场景中看不到。几十个还看不出问题,那几万个呢?几百万个呢?

    所以我们来看看怎么移除平台,那什么样的平台需要移除呢?又如何移除呢?之前我们也说过,当平台完全移除游戏场景的时候就可以进行移除操作了。需要做两个操作,1从平台工厂类中移除,2从平台数组中移除。

而且,因为平台是一个接一个出现的,所以我们不需要每次都遍历平台数组去对每个平台都做判断。只需要对最左边也就是第一个平台做这种检测就可以了。这种检测放在move方法中是最适合不过的了。

 

func move(speed:CGFloat){
//遍历所有
for p in platforms{
//x坐标的变化长生水平移动的动画
p.position.x -= speed
}
//移除平台
if platforms[0].position.x < -platforms[0].width {
platforms[0].removeFromParent()
platforms.removeAtIndex(0)
}
}

9.10 视差滚动背景

 

    什么是视差滚动?它指的是让多层背景以不同的速度移动,形成立体的运动效果,从而带来非常出色的视觉体验。

 

    而我们的游戏中也运用到了这个技术。如下图:

 

    在跑酷熊猫这个游戏中,我们的背景分为两层。第一层更靠近游戏窗口的色彩更鲜艳,移动速度也更快一些。第二层由于要模拟远处的场景,所以颜色更淡一些,对比度更弱一些,移动速度也就更慢一些。

    于是,在我们的编码中,我们可以利用GameScene中定义的移动速度moveSpeed,给第一层背景1/5的moveSpeed的值,给第二层背景1/20的moveSeed的值。这样就形成了视察滚动。

   

    视差滚动讲完,我们还要理解一种循环滚动的算法。因为我们不可能像产生平台那样,源源不断的生成新的背景。我们要用一种循环滚动的算法来实现。

    首先,我们的背景图片是可以收尾无缝衔接的。那么该需要多少张无缝衔接图来组成背景呢?判断标准是:当第一张图移除屏幕外,剩下的图在x轴方向上还能够填满游戏屏幕就够了。看下图:

 

 

    像上图这样的情况,只需要两张背景图就够了。那么我们就用两张无缝衔接的背景图来做说明什么是循环滚动。下图是初始情况:

 

当移动到再上一张图9-17的位置时,直接跳回图9-18的位置,再继续向左移动就形成了循环滚动。我们从下图能看到,回跳的时候,在游戏场景中,背景在视觉上是没有变化的,但实际上已经开始了新的滚动。

 

原理讲完,我们来看看具体的编码。我们新建一个背景类,类名是BackGround,继承自SKNode。

    在背景类中我们定义两个数组,一个用来存放近景,另一个用来存放远景:

//近处背景数组
ar arrBG = [SKSpriteNode]()
//远处背景数组
var arrFar = [SKSpriteNode]()

 

    我们在构造方法init内些生成背景的代码。由于远景图片比较小,所以要完成循环滚动要3张图。

    循环滚动的算法卸写在了move方法中,move方法和平台工厂类的move方法一样,接收一个表示速度的参数,这个参数是GameScene中moveSpeed的1/5。因为远景速度移动要更慢,所以它的x坐标的变化值是近景的四分之一。

    看看完整代码:

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
        }
    }
}

 

    和平台工厂类与熊猫类一样,我们需要在GameScene里申明一个bg变量。

lazy var bg = BackGround()

    然后在didMoveToView方法中加载,要比熊猫panda早一些。

self.addChild(bg)

    背景的滚动也需要在GameScene的update中实现

bg.move(moveSpeed/5)

 

    此时GameScene已经发生了很大的改变,让我们看看完整的代码:

import SpriteKit

class GameScene: SKScene,ProtocolMainScene{
    lazy var panda = Panda()
    lazy var platformFactory = PlatformFactory()
    lazy var bg = BackGround()
    
    //移动速度
    var moveSpeed:CGFloat = 15
    //判断最后一个平台还有多远完全进入游戏场景
    var lastDis:CGFloat = 0.0
    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)
        
        
        //给熊猫定一个初始位置
        panda.position = CGPointMake(200, 400)
        //将熊猫显示在场景中
        self.addChild(panda)
        //将平台工厂加入视图
        self.addChild(platformFactory)
        //将屏幕的宽度传到平台工厂类中
        platformFactory.sceneWidth = self.frame.width
        //设置代理
        platformFactory.delegate = self
       
        
    }
    override func touchesBegan(touches: NSSet, withEvent event: UIEvent) {
        //当熊猫状态为跑的时候播放跳的动作
        if panda.status == Status.run {
            panda.jump()
        }else if panda.status == Status.jump {
            //当状态为跳的时候,执行打滚动画
            panda.roll()
        }
        
    }
    override func update(currentTime: CFTimeInterval) {
        lastDis -= moveSpeed
        if lastDis <= 0 {
            println("生成新平台")
            platformFactory.createPlatformRandom()
        }
        platformFactory.move(self.moveSpeed)
        bg.move(moveSpeed/5)
    }
    
    func onGetData(dist:CGFloat){
        self.lastDis = dist
        
    }

}

 

    最后我们运行一下,看看效果。嗯,一切都非常完美。wait,平台好像有点不对劲,跑到背景后面去了。

好吧,通过检查代码我们发现,背景都设置了zPosition,数值在9,10。这个属性决定了渲染顺序。越小越先渲染,也就是越小越在后面。那么解决这个bug的方法也很简单。只要把平台的在Position设的大一些,例如20,就能解决。

所以我们切换到Platform类,在onCreate方法的最后一行添加一句:

self.zPosition = 20

 

    再运行一下,这回正常了。

 

我的微信公众号

我写的破书:《Swift语言实战晋级》http://item.jd.com/11641501.html

 

 

目录
相关文章
|
11天前
|
机器学习/深度学习 TensorFlow Swift
Swift语言适合多个领域的开发
Swift语言适合多个领域的开发
41 9
|
12天前
|
机器学习/深度学习 人工智能 移动开发
Swift语言作为苹果公司推出的现代编程语言
Swift语言作为苹果公司推出的现代编程语言
26 8
|
12天前
|
机器学习/深度学习 安全 数据挖掘
Swift语言的应用场景非常广泛
Swift语言的应用场景非常广泛
21 4
|
12天前
|
安全 Swift iOS开发
Swift语言
Swift语言
21 4
Swift游戏实战-跑酷熊猫 04 熊猫的跳和滚的动作
原文:Swift游戏实战-跑酷熊猫 04 熊猫的跳和滚的动作   这节内容,我们利用上一节学过的内容,给熊猫添加跳和滚动的动作。同时通过重载touchBegan方法来响应动作。切换跑,跳,滚。
913 0
|
6月前
|
安全 编译器 Swift
IOS开发基础知识: 对比 Swift 和 Objective-C 的优缺点。
IOS开发基础知识: 对比 Swift 和 Objective-C 的优缺点。
404 2
|
4月前
|
Unix 调度 Swift
苹果iOS新手开发之Swift 中获取时间戳有哪些方式?
在Swift中获取时间戳有四种常见方式:1) 使用`Date`对象获取秒级或毫秒级时间戳;2) 通过`CFAbsoluteTimeGetCurrent`获取Core Foundation的秒数,需转换为Unix时间戳;3) 使用`DispatchTime.now()`获取纳秒级精度的调度时间点;4) `ProcessInfo`提供设备启动后的秒数,不表示绝对时间。不同方法适用于不同的精度和场景需求。
156 3
|
7天前
|
安全 Swift iOS开发
Swift 与 UIKit 在 iOS 应用界面开发中的关键技术和实践方法
本文深入探讨了 Swift 与 UIKit 在 iOS 应用界面开发中的关键技术和实践方法。Swift 以其简洁、高效和类型安全的特点,结合 UIKit 丰富的组件和功能,为开发者提供了强大的工具。文章从 Swift 的语法优势、类型安全、编程模型以及与 UIKit 的集成,到 UIKit 的主要组件和功能,再到构建界面的实践技巧和实际案例分析,全面介绍了如何利用这些技术创建高质量的用户界面。
16 2
|
23天前
|
Swift iOS开发 UED
如何使用Swift和UIKit在iOS应用中实现自定义按钮动画
本文通过一个具体案例,介绍如何使用Swift和UIKit在iOS应用中实现自定义按钮动画。当用户点击按钮时,按钮将从圆形变为椭圆形,颜色从蓝色渐变到绿色;释放按钮时,动画以相反方式恢复。通过UIView的动画方法和弹簧动画效果,实现平滑自然的过渡。
41 1
|
1月前
|
Swift iOS开发 UED
如何使用Swift和UIKit在iOS应用中实现自定义按钮动画
【10月更文挑战第18天】本文通过一个具体案例,介绍如何使用Swift和UIKit在iOS应用中实现自定义按钮动画。当用户按下按钮时,按钮将从圆形变为椭圆形并从蓝色渐变为绿色;释放按钮时,动画恢复原状。通过UIView的动画方法和弹簧动画效果,实现平滑自然的动画过渡。
50 5
下一篇
无影云桌面