解析手机游戏《Tiny Wings》开发步骤(一)
相信很多人都不会对《Tiny Wings》感到陌生,都知道它是一款由Andreas Illiger开发的热门手机游戏,其玩法就是控制一只小鸟,让它借助坡度在日落前飞向终点。
乍一看,这游戏的设置非常简单,但这只是一种表象,该游戏的实际制作过程可有不少讲究。游戏中的小山丘及其纹理会动态变化,它使用的是Box2D物理引擎来模拟小鸟的动作。
许多开发者都对这款人气游戏及其开发技巧抱有极大兴趣,本文是根据由Sergey Tikhonov编写的样本对象而撰写的开发教程,主要包括三个环节:
1.必备条件:首先要查看《How To Creat Dynamic Textures with CCRenderTexture》这篇教程,掌握创建山丘及背景纹理的方法。
2.第一部分:本篇将教您创建《Tiny Wings》运行过程中的动态小山丘。
3.第二部分:本篇将教您添加Box2D游戏设置的方法。
当然,领会本教程的前提条件是您已经精通Cocos2D开发技术,假如您还是新手,可能得首先熟悉Cocos2D新手教程的有关内容才行。
开始动工
请先下载Sergey Tikhonov创建的样本对象有关资料。
然后根据File\New\New File的路径创建一个山丘分类,选择iOS\Cocoa Touch\Objective-C class路径,并点击“Next”,创建一个CCNode的子类,点击“Next”,将其命名为Terrain.m,
然后再点击“保存”。
随后打开Terrain.h,将其用以下内容来代替:
这里要说明一下,有个名为 _hillKeyPoints 的阵列代表我们过后将保存的所有小丘顶峰,以及一个用于控制山丘滚动距离的偏移。
下一步就是开始执行Terrain.m,我们将逐一讲述其中步骤。首先把Terrain.m所有现存内容删除,并逐段添加以下代码:
这是让一些随机性小山丘生成关键点的方法,也是一个极为简单的操作过程,由此我们可以得到一个起点。
第一个点位于屏幕左侧,位于Y轴的中间。随后的每一点都会沿着X轴以屏幕一半宽度的距离移动,并且沿着Y轴设置从0至屏幕顶端的数值:
用初始化方法调用generateHills创建山丘,以绘图方式简单画出需要调试的每一个点之间的线段,以便我们从屏幕上看到效果:
这时候就该考虑山丘的移动方式了——随着小鸟沿着X轴的坡度前行,这些坡度会向左滑移。所以我们就得以-1来增加偏移,切记控制好比例。
这时候基本上可以开始测试效果了。切换到HelloWorldLayer.h以做如下改变:
然后切换到HelloWorldLayer.m,再做如下改变:
注意你每次敲进代码时,都会将Terrain原来的条纹转变成新的随机性条纹,这可以让测试更加顺手。
另外,当你在更新时调用setTextureRect on _background时,就意味着你想以0.7的数值增加偏移,以便让背景滚动速度比山丘更慢。
这就对了,现在可以编译并运行代码,观察屏幕中线段的走势,它代表山丘顶峰移动的位置:
看到山丘滚动方式,你可能就会发现这并不是理想的《Ting Wings》游戏运行效果。由于我们是随机性选择Y轴,所以这些山丘有时不是太大就是太小。而且X轴也缺乏足够的变化。
但现在你只需通过采用更好的算法,就可以让测试码顺利运行,提高山丘视觉效果,并有效对其进行调试。
你可以稍费点功夫用自己的山丘运行算法,替换generateHills中的代码,也可以选择使用Sergey的操作方式,也就是下文要体现的内容。
更优化的算法
如果你选择Sergey的执行方式,那就请按以下内容替换Terrain.m中的generateHills:
具体操作方式如下:
·X轴的增量范围是160+0至40间的随机性数字
·Y轴的增量范围是60+0至40间的随机性数字
·不可时常反相Y轴的偏移
·勿让Y轴数值过于接近顶点或底端(paddingTop,paddingBottom)
·从屏幕最左侧开始,将第二个点硬编至(0, winSize.height/2),这样山丘就会从屏幕左侧开始呈现
现在编译并运行代码,然后就可以看到一个更优化的山丘演示效果,如下图:
绘制线段
在执行更多操作之前,我们得先做一个主要的运行性能优化。现在我们要画出所有山丘的1000个顶点,虽然我们在屏幕上一次只能看到其中一小部分。
我们可以根据屏幕显示面积简单计划每次需展示多少个顶点,这样有助于节省大量时间,如下图所示:
先试试在Terrain.h中添加两个实体变量:
然后在Terrain.h的初始化方法之上增加一个新函数resetHillVertices,如下图所示:
现在我们可以依次通过每个关键点(