游戏邦在:
杂志专栏:
gamerboom.com订阅到鲜果订阅到抓虾google reader订阅到有道订阅到QQ邮箱订阅到帮看

解析手机游戏《Tiny Wings》开发步骤(一)

发布时间:2011-06-25 08:54:12 Tags:,,,

相信很多人都不会对《Tiny Wings》感到陌生,都知道它是一款由Andreas Illiger开发的热门手机游戏,其玩法就是控制一只小鸟,让它借助坡度在日落前飞向终点。

乍一看,这游戏的设置非常简单,但这只是一种表象,该游戏的实际制作过程可有不少讲究。游戏中的小山丘及其纹理会动态变化,它使用的是Box2D物理引擎来模拟小鸟的动作。

tiny-wings(from digitaltrends.com)

tiny-wings(from digitaltrends.com)

许多开发者都对这款人气游戏及其开发技巧抱有极大兴趣,本文是根据由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,将其用以下内容来代替:

代码1

代码1

这里要说明一下,有个名为 _hillKeyPoints 的阵列代表我们过后将保存的所有小丘顶峰,以及一个用于控制山丘滚动距离的偏移。

下一步就是开始执行Terrain.m,我们将逐一讲述其中步骤。首先把Terrain.m所有现存内容删除,并逐段添加以下代码:

代码2

代码2

这是让一些随机性小山丘生成关键点的方法,也是一个极为简单的操作过程,由此我们可以得到一个起点。

第一个点位于屏幕左侧,位于Y轴的中间。随后的每一点都会沿着X轴以屏幕一半宽度的距离移动,并且沿着Y轴设置从0至屏幕顶端的数值:

代码3

代码3

用初始化方法调用generateHills创建山丘,以绘图方式简单画出需要调试的每一个点之间的线段,以便我们从屏幕上看到效果:

代码4

代码4

这时候就该考虑山丘的移动方式了——随着小鸟沿着X轴的坡度前行,这些坡度会向左滑移。所以我们就得以-1来增加偏移,切记控制好比例。

这时候基本上可以开始测试效果了。切换到HelloWorldLayer.h以做如下改变:

代码5

代码5

然后切换到HelloWorldLayer.m,再做如下改变:

代码6

代码6

注意你每次敲进代码时,都会将Terrain原来的条纹转变成新的随机性条纹,这可以让测试更加顺手。

另外,当你在更新时调用setTextureRect on _background时,就意味着你想以0.7的数值增加偏移,以便让背景滚动速度比山丘更慢。

这就对了,现在可以编译并运行代码,观察屏幕中线段的走势,它代表山丘顶峰移动的位置:

山丘顶点线段

山丘顶点线段

看到山丘滚动方式,你可能就会发现这并不是理想的《Ting Wings》游戏运行效果。由于我们是随机性选择Y轴,所以这些山丘有时不是太大就是太小。而且X轴也缺乏足够的变化。

但现在你只需通过采用更好的算法,就可以让测试码顺利运行,提高山丘视觉效果,并有效对其进行调试。

你可以稍费点功夫用自己的山丘运行算法,替换generateHills中的代码,也可以选择使用Sergey的操作方式,也就是下文要体现的内容。

更优化的算法

如果你选择Sergey的执行方式,那就请按以下内容替换Terrain.m中的generateHills:

代码7

代码7

具体操作方式如下:

·X轴的增量范围是160+0至40间的随机性数字

·Y轴的增量范围是60+0至40间的随机性数字

·不可时常反相Y轴的偏移

·勿让Y轴数值过于接近顶点或底端(paddingTop,paddingBottom)

·从屏幕最左侧开始,将第二个点硬编至(0, winSize.height/2),这样山丘就会从屏幕左侧开始呈现

现在编译并运行代码,然后就可以看到一个更优化的山丘演示效果,如下图:

改良后的山顶曲线

改良后的山顶曲线

绘制线段

在执行更多操作之前,我们得先做一个主要的运行性能优化。现在我们要画出所有山丘的1000个顶点,虽然我们在屏幕上一次只能看到其中一小部分。

我们可以根据屏幕显示面积简单计划每次需展示多少个顶点,这样有助于节省大量时间,如下图所示:

计算屏幕显示的关键点

计算屏幕显示的关键点

先试试在Terrain.h中添加两个实体变量:

代码8

代码8

然后在Terrain.h的初始化方法之上增加一个新函数resetHillVertices,如下图所示:

代码9

代码9

现在我们可以依次通过每个关键点(