Question

如何使用cocos2d

Answer 1

cocos2d是一个非常强大的开源库，它可以为你开发iphone上面的游戏节省大量的时间。目前支持精灵（sprite）、动画、物理引擎、声音引擎以及许许多多非常酷的图像效果等等。

　　我也是刚开始学习cocos2d，目前已经有许多非常好的教程来教你如何使用cocos2d了。但是，那些都不是我想要的。我真正想要的是一个非常简单，但是可以跑起来的游戏。这个游戏包括怎么使用动画、碰撞检测和播放声音，这就够了，并不需要使用太多高级的特性。最终，我自己做了一个这样的游戏，因此，基于我的一些经验写了这篇教程，希望会对初学者有所帮助。

　　这篇教程将会从头至尾、一步一步地教你如何使用cocos2d来制作一个简单的iphone游戏。你可以按照教程一步步来，或者干脆直接跳到文章的最后，下载样例程序。没错！游戏里面有忍者。

下载并安装cocos2d

　　你可以从下面的链接来下载cocos2d的最新版本（以前是google，现在采用git了） the Cocos2D Google Code page.

　　在你下载完代码以后，你可能想安装非常有用的项目模板。打开终端窗口，然后cd到你的cocos2d解压缩目录下面，输入./install_template.sh

　　请注意，你可以传递一些参数给这个安装脚本，比如你把xcode安装在了一个非标准的目录下面。（或者你有多个版本的sdk安装在你的机器上面）

Hello, Cocos2D!

　　让我们从最简单的HelloWorld项目开始吧！启动xcode，点file->new project，然后选择cocos2d　Application　template来创建一个新的cocos2d项目并把它命名为“Cocos2dSimpleGame”

继续，点编译并运行这个工程模板，如何一切都ok的话，那么你会看到下面的内容：

　　cocos2d是按照“场景”（scene）的概念组织的，对一个游戏来说，就好像某个关卡或者屏幕之类的。比如，你可能需要一个场景来为你的游戏建立初使化菜单界面，另外一个场景当作玩游戏的主要界面，还有一个游戏结束的时候的界面。在一个场景里面，你可以有许多“层”（layer）（这个和photoshop有点类似）。每一个层又可以包含一些结点，比如精灵、标签、菜单等。而且一个结点也可以包含其它的结点。（比如，一个精灵可以包含一个子精灵）

　　如果你看一下样例工程，你会看到只有一个场景HelloWorldScene--我们接下来将会在这个场景里面实现我们的游戏逻辑。继续打开它，你会在init方法里面看到，它把一个带有“Hello　World”字样的标签加到了当前场景中。我们将把这些代码去掉，并且放一个精灵在上面。

增加一个精灵

　　在我们增加一个精灵之前，我们需要一些图片。你可以自己去创建一些，或者使用我可爱的妻子为这个项目所创建的图片: a Player image, a Projectile image, and a Target image.

　　一旦你获得了这些图片，你就可以把它们用鼠标拖到xcode的resource文件夹中去，并且保证“ Copy items into destination group’s folder (if needed)”勾上了。现在，我们拥有自己的图片了，我们先得计算一下，应该把player放在哪里。请注意，cocos2d坐标系的原点在屏幕的左下角，即（0，0）位置在左下角，这与一般的窗口坐标系统在左上角有所区别。x方向往右是正，y方向往上是正。由于项目是landscape（横版）模式，这就意味着右上角的坐标是（480，320）。

　　还有需要注意的是，当我们设置一个对象的位置的时候，这个位置是相对于所加精灵的中心点来加的。因此，如果我们想让我们的player精灵与屏幕的左边界水平对齐，并且垂直居中的话。

那么对于x轴：我们需要设置为［player sprite's width]/2。y坐标设置为[window height]/2。

　　下面有一张图，可以更加清楚一些：

　　好，让他开始射击吧！打开Class文件夹并点击HelloWorldScene.m，然后把init方法用下面的代码替换掉：

复制代码
-(id) init
{
if( (self=[super init] )) {
CGSize winSize = [[CCDirector sharedDirector] winSize];
CCSprite *player = [CCSp www.hbbz08.com rite spriteWithFile:@"Player.png"
rect:CGRectMake(0, 0, 27, 40)];
player.position = ccp(player.contentSize.width/2, winSize.height/2);
[self addChild:player];
}
return self;
}
复制代码
　　编译并运行，你的精灵这时候应该出现在正确的位置上了。但是，这个前景默认是黑的。对于这张忍者图片来说，白色的背景可能看起来更好一些。在cocos2d里面，有一种非常简单的方式来改变层的背景颜色，那就是使用CCColoredLayer类。好，跟我来吧！点击HelloWorldScene.h，然后把HelloWorld接口声明改成下面这样：

@interface HelloWorld : CCColorLayer

然后点击HelloWorldScene.m文件，在init方法里面做一些小小的修改，以便使我们能把层的背景颜色改成白的：