《Cocos2D-iPhone 游戏开发之路》第3节 高仿<Flappy Bird>教程(1)

如果你是一个爱玩手游的人，最近的反人类大作《Flappy Bird》对你来说一定不会陌生。作为一个cocos2d游戏开发新手，山寨一款自己的《Flappy Bird》绝对是一个不错的主意。

那么今天就让我带领大家一起使用Xcode5.1及cocos2d-iphone V3来制作一款高仿版本的《Flappy Bird》，在此之前如果你还没有安装cocos2d-iphone V3 请看我的上一篇博文并安装。

先上一张笔者完成的高仿Flappy Bird效果图，跟着本章教程学习，你也可以做到！



好了，废话不多说，教程正式开始！

首先使用cocos2d v3.x 创建一个cocos2d-ios项目，命名为Flappy Bird，设备选择iPad。项目创建好以后，你可以直接运行程序，程序中默认包含了一个hello world主页面和两个演示场景，如果你有兴趣，你可以先在这两个场景里面玩一会儿～。

项目自带的3个场景显然是我们不需要的，所以接下来我们要先对项目文件进行一些清理和设置。首先选中AppDelegate.m文件，删除其导入部分的#import "IntroScene.h"及#import "NewtonScene.h"。

然后删除Classes分类下AppDelegate.h/m之外的的所有其他文件。并在Resources分类下删除所有fire和newton开头的文件。

到此为止，你的项目已经不能通过编译，显然我们的准备工作还未完成。我们删除了原来的HelloWorld场景，那么我们的游戏至少需要一个场景来运行。在Classes分类下新建一个类，继承CCScene，命名为GameScene，并在AppDelegate.m中导入其头文件。

接着修改AppDelegate.m中下列方法（红字内容是需要修改的地方，为了简洁，代码中的自带的注释可能已经删除）：

-(BOOL)application:(UIApplication *)application didFinishLaunchingWithOptions:(NSDictionary *)launchOptions

{

[self setupCocos2dWithOptions:

@{

CCSetupShowDebugStats: @(YES),

CCSetupScreenOrientation: CCScreenOrientationPortrait,

}];

return YES;

}

-(CCScene *)startScene

{

return [GameScene node];

}

让我们看看上面的代码做了什么，cocos2d v3中，SDK为我们封装了CCAppDelegate，没有了之前繁琐的初始化代码，在第一个方法中调用setupCocos2dWithOptions:方法来设置cocos2d引擎的各种参数，红字部分是让设备在竖屏模式下运行。红字上面一段代码的作用是在屏幕左下角显示调试信息。在第二个方法中，我们返回了一个场景作为游戏开始运行时的第一个场景。

在GameScene.m中导入cocos2d.h并添加下列方法：

- (id)init

{

if ((self = [super init])) {

CCNodeColor * backGround = [CCNodeColor nodeWithColor:[CCColor colorWithCcColor3b:ccc3(0, 183, 238)]];

[self addChild:backGround];

}

return self;

}

以上方法创建了一个新的GameScene对象并使用一个颜色节点作为自身的背景颜色。

你的工程现在看起来应该是这样：



如果一切顺利，你的项目应该可以正常编译通过并运行在设备上。当他在设备上跑起来的时候，应该是这样：



空旷的蓝天，没错！左下角第一行的1表示我们的场景中有一个节点，既背景节点。第二行嘛。。。我也不知道！第三行显示了当前程序的FPS，请不要问我什么是FPS。。。。

好了，下面让我们为游戏添加一些背景，如果你仔细观察原版《Flappy Bird》你会发现，其背景其实是一张静态图片。中国有一句古话叫做青出于蓝胜于蓝，那么在我们的高仿《Flappy Bird》中，我们需要的是动态背景，根据文章开头的效果图，我们可以将背景由近到远分为下列层次：1.地面，2.草丛，3.楼房，4.楼房影子，5.云朵。我们可以将他们分别添加到我们的场景中，并按照不同的速度移动，这样遍可以得到非常酷炫的视差滚动效果！别光说不练！让我们用代码来实现炫酷叼炸天的视差滚动背景！

等等！没素材滚个X啊！！！别急～我早就用PS为大家连夜制作了一套高仿版的素材图，并使用TexturePacker打包，这些可不是从图片中扣出来的哦，都是一个一个用像素法画出来的啊！请前往此处下载：http://download.csdn.net/detail/u012561932/6937295 需要5积分，实在没有积分的同学可以发信息或者留下邮箱，我有时间会发给你们。

下载完成后解压将文件拖入工程，别忘了勾上Copy Item...选项。

好了，有了素材，我们继续开始码代码，在GameScene.m中添加以下方法，并在init方法中调用此方法：

- (void)initSpriteFrameCache

{

CCSpriteBatchNode * batchNodeA = [CCSpriteBatchNode batchNodeWithFile:@"imageRes0.pvr.ccz"];

[self addChild:batchNodeA];

[[CCSpriteFrameCache sharedSpriteFrameCache] addSpriteFramesWithFile:@"imageRes0.plist"];

if ([UIScreen mainScreen].scale == 2.f) {

CCSpriteBatchNode * batchNodeB = [CCSpriteBatchNode batchNodeWithFile:@"imageRes1.pvr.ccz"];

[self addChild:batchNodeB];

[[CCSpriteFrameCache sharedSpriteFrameCache] addSpriteFramesWithFile:@"imageRes1.plist"];

}

}

上面的方法将我们打包好的素材加载到了缓存区，这样做可以大大提升程序的运行效率。由于在视网膜屏下的素材较大，使用了2组文件打包，所以如果屏幕的缩放为2倍时（即当前设备为视网膜设备时），还需要加载第二组素材。

把素材都加载到缓存区之后，我们开始来添加我们的背景，在GameScene.m中添加以下方法，并在init方法中上一方法之后调用此方法：

- (void)initBackGround

{

CCSprite * cloud = [CCSprite spriteWithImageNamed:@"cloud.png"];

cloud.anchorPoint = ccp(0, 0);

cloud.position = ccp(0, 150);

[self addChild:cloud];

for (int i = 0; i<6; i++) {

CCSprite * building = [CCSprite spriteWithImageNamed:@"buildingShadow.png"];

building.anchorPoint = ccp(0, 0);

building.position = ccp(i*180, 220);

[self addChild:building];

}

for (int i = 0; i<5; i++) {

CCSprite * building = [CCSprite spriteWithImageNamed:@"building.png"];

building.anchorPoint = ccp(0, 0);

building.position = ccp(i*200, 220);

[self addChild:building];

}

CCSprite * grass = [CCSprite spriteWithImageNamed:@"grass.png"];

grass.anchorPoint = ccp(0, 0);

grass.position = ccp(0, 200);

[self addChild:grass];

CCSprite * ground = [CCSprite spriteWithImageNamed:@"ground.png"];

ground.anchorPoint = ccp(0, 0);

ground.position = ccp(0, 0);

[self addChild:ground];

for (int i = 0; i<15; i++) {

CCSprite * groundMove = [CCSprite spriteWithImageNamed:@"groundMove.png"];

groundMove.anchorPoint = ccp(0, 0);

groundMove.position = ccp(i * 60, 160);

[self addChild:groundMove];

}

}

上述代码中，分别添加了云朵，从左至右6座远处楼房，5坐近处楼房，草丛，地面，及地面上的从左至右15个小斜杠图标。如果你的程序一切正常，那么现在运行你的程序，你应该能看到如下效果：



cool！我们的游戏已经有那么点像样了！可是我们的背景现在只是静止在屏幕上，我们不是要滚动的背景么？？在下一章节的内容中我们将让我们的背景滚动起来！敬请关注！