当前位置:游戏 > 程序开发

使用Cocos2D制作简单的iPhone游戏(1)

来源:游戏邦 编辑:tina 发布时间:2012年05月22日

免责声明:火星网文章来源于作者原创或整理自互联网,仅为提供更多信息,不代表火星时代同意其观点或描述,版权归原作者所有,如需转载,请联系原作者并注明出处,如涉及作品内容、版权或其他问题,请及时与我们联系,我们将在第一时间予以更改或删除,感谢您的理解和包容!

作者:Ray Wenderlich

Cocos2D是个用于iPhone的强大开发库,可以为你的iPhone游戏开发节省大量的时间。它带有精灵支持、炫丽的图像效果、动画、实体库、音效引擎等等内容。

我刚刚开始学习使用Cocos2D,尽管有各种各样的Cocos2D初学教程,但我无法找到我真正想要的教程,即制作一款带有动画、碰撞和音频的简单游戏,不带有过多的高级功能。最终,我自行制作了一款简单的游戏,我觉得需要根据此次开发经验编写教程,以便能为其他初学者所使用。

该教程将知道开发简单iPhone游戏的从头到尾的步骤。你可以按顺序学习,或者直接跳到文章末尾的示例项目上。

下载和安装Cocos2D

你可以从Cocos2D Google Code页面下载Cocos2D。

下载代码后,你需要做的就是安装有用的项目模板。打开末端窗口,输入以下命令:./install-templates.sh -f -u。

必须注意的是,如果你有在非标准directory上安装过XCode,你可以随意将参数输入安装文本中(就像在同一台电脑上有多个SDK版本的做法一样)。

开始

现在,让我们先开始创建简单的“Hello World”项目,并使用刚刚安装的Cocos2D模板来运行。打开XCode并新建Cocos2D项目,选择cocos2d中的“Application”模板,将项目命名为“Cocos2DSimpleGame”。

继续构建并运行这个模板。如果不出差错的话,你将会看到如下画面:


Cocos2D中融入了“界面”的概念,就像游戏中的“关卡”或“屏”一样。比如,游戏主菜单需要一个界面,主动作部分也需要一个界面,游戏结束同样需要一个界面。界面分为多个层(类似于Photoshop),曾包含精灵、标签、菜单等节点。节点也可能包含其他节点(比如精灵中可能有个子精灵)。

看下上述实例项目,你会发现其中只含有一个层,即HelloWorldLayer,我们将在此开始实施主要的游戏玩法。继续将其打开,你会发现现在初始方法中有个名为“Hello World”的标签。我们把这个标签拿走,用精灵来替换。

添加精灵

在我们添加精灵之前,我们需要某些图片。你可以用自己设计的图片,也可以使用这个项目中使用的图片,包括玩家图片、抛射物图片和目标图片。

获得图片后,将它们拖到XCode的资源文件夹中,确认“Copy items into destination group’s folder (if needed)”前打钩。

现在我们已经有图片了,下一步就需要为玩家图片指定位置。必须注意的是,在Cocos2D中屏幕左下角的坐标为(0, 0),往右或往上移动分别使X轴和Y轴值增加。因为这个项目采用的是风景模式,这意味着右上角的坐标为(480, 320)。

还必须注意的是,当我们设定某个物体的位置时,其位置的参考点所添加的精灵的中心点。因而,如果我们要让玩家图表在横轴上与边界对其,纵轴位于中心,我们应该:

1、位置的X轴坐标设置为“(玩家精灵宽度)/2”

2、位置的Y轴坐标设置为“(窗口高度)/2”

下图清晰地显示所设置的玩家精灵的位置:

接下来,打开Classes文件夹,点击HelloWorldLayer.m,将初始方法用以下代码替换:

-(id) init

{

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

CGSize winSize = [[CCDirector sharedDirector] winSize];

CCSprite *player = [CCSprite 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中的层背景的方式之一是使用CCLayerColor。点击HelloWorldLayer.h,将HelloWorld界面声明定义如下:

@interface HelloWorldLayer : CCLayerColor

然后点击HelloWorldLayer.m,对初始方法做以下些许修改就可以将背景设定为白色:

if( (self=[super initWithColor:ccc4(255,255,255,255)] )) {

继续编译运行,你应该会看到精灵正位于白色的背景之上。



精灵正位于白色的背景之上

1 2 3 4 ... 6 下一页