cocos3d制作射击游戏Word文档下载推荐.docx
《cocos3d制作射击游戏Word文档下载推荐.docx》由会员分享,可在线阅读,更多相关《cocos3d制作射击游戏Word文档下载推荐.docx(27页珍藏版)》请在冰点文库上搜索。
为了制作这个游戏,你需要成为
iOSdeveloperprogram的一员(这样的话,你的程序就能够安装到你的iPhone上面去,不过听说网上有人越狱也可以安装,知道的朋友麻烦给个链接,谢谢!
)同时,需要安装Xcode和cocos2d框架。
如果你之前已经安装过cocos2d了,那接下来这部分就不要看了。
(如果想使用新的cocos2d版本,只需要把之前安装的目录下面的模板文件全部删除,再按照下面的指令重新安装即可)。
如果你重来没有安装过cocos2d的话,那么只需要按照下面的指令序列,一步步地安装到你的mac上面就行了。
∙首先下载Cocos2D
.确定获得最新版本--作者写这篇文章的时候是1.0.0-rc2版本,目前是1.0.0-rc3版本。
虽然不是稳定版本,但是,没关系,其实很稳定啦!
:
)
∙双击下载下来的文件,并且解压缩到一个安全的位置。
∙打开Terminal(Applications\Utilities\Terminal),然后使用cd命令定位到刚刚解压缩的cocos2d文件夹下面去。
然后运行./install-templates.sh来安装xcode模板,如下面所示:
$cdDownloads
$cdcocos2d-iphone-1.0.0-rc2
$./install-templates.sh-f-u
如果一切顺利的话,你应该会看到终端里面一系列的输出语句:
“Installingxxxtemplate”。
然后重新启动Xcode,祝贺你,您已成功安装cocos2d了!
Hello,Cocos2D!
让我们首先创建一个“HelloWorld”cocos2d工程。
打开Xcode,选择File\New\NewProject,然后选iOS\cocos2dtemplate,接下来点Next,并且把工程命名为SpaceGame,再点Next并选择一个文件夹作为你的工程的保存路径,最后点Create。
编译并运行工程,你将会看到一个“HelloWorld”出现在屏幕的正中间。
添加相关资源文件
为了做这样一个iphone游戏,你将需要一些跟太空主题相关的图片资源和声音资源。
你可以直接下载我老婆制作的太空游戏资源。
因此,请直接下载吧,并且把它解压到你的硬盘的某个目录下面去。
一旦你解压完这些资源以后,把Backgrounds,Fonts,Particles,Sounds和Spritesheets文件夹拖到Resouces分组下面去。
(基本上,除了Classes文件夹以外,其它所有的文件压都拖到Resource目录下面去)
确保“Copyitemsintodestinationgroup’sfolder(ifneeded)”被复选中,然后点击Finish。
当你做完这些事之后,你的工程的分组看起来会是下图所示的样子:
如果你很好奇,你可以随便看看你刚刚向工程里面添加进去了一些什么东西。
下面是完整的内容列表:
∙Backgrounds:
一些背景图片,你等下会使用它们来制作一个滚动背景。
里面包含星系,太阳,和空间异常(它移动速度比较慢),还有一组空间尘埃图片(它们会出现在背景前面,而且会移动地稍微快一点)
∙Fonts:
使用GlyphDesigner制作的位图字体,我们将使用这些字体来在游戏中显示文字。
∙Particles:
使用
ParticleDesigner制作的一些特殊的粒子效果。
在这里,我们用来创建星星飞动的效果。
∙Sounds:
一些与太空相关的背景音乐和音效。
使用GarageBand
和
cxfr制作的。
∙Spritesheets:
一张格式为pvr.ccz的大图片,里面包含了游戏中将要用到的许多小图片,比如陨石,太空船等。
这个文件使用TexturePacker制作的---如果你想使用pvr.ccz文件格式的话,你可能就需要使用这个工具。
当然pvr.ccz格式的优点就是文件小,加载速度快。
如果你还没安装上面任何一款工具的话,也不用担心!
对于这个教程来说,你完全不需要他们,你可以使用我已经制作好的这些资源就够了。
以后,如果有条件,你可以再去试试上面提到的工具。
下面就是Sprites.pvr.ccz文件,它看起来如下图所示:
你可能会奇怪,为什么要把所有的这些图片都弄成这样一张大图呢?
因为,首先,它可以帮助节省内存,同时还可以提高性能。
接下来,让我们开始coding吧!
)
添加一个太空船
首先,让我们在屏幕上添加一艘太空船吧!
打开HelloWorldLayer.h文件,然后在@interface里面添加两个实例变量:
CCSpriteBatchNode*_batchNode;
CCSprite*_ship;
第一个变量(_batchNode)是必须的,因为我们将把所有的图片存储在一张图片里面,然后使用这个BatchNode就可以仅使用一次opengl调用来做所有的绘图操作。
第二个变量(_ship)代表屏幕上的太空飞船。
接下来,打开HelloWorldLayer.m,并且把init方法改成下面的样子:
-(id)init
{
if((self=[superinit])){
_batchNode=[CCSpriteBatchNodebatchNodeWithFile:
@"
Sprites.pvr.ccz"
];
//1
[selfaddChild:
_batchNode];
//2
[[CCSpriteFrameCachesharedSpriteFrameCache]addSpriteFramesWithFile:
Sprites.plist"
//3
_ship=[CCSpritespriteWithSpriteFrameName:
SpaceFlier_sm_1.png"
//4
CGSizewinSize=[CCDirectorsharedDirector].winSize;
//5
_ship.position=ccp(winSize.width*0.1,winSize.height*0.5);
//6
[_batchNodeaddChild:
_shipz:
1];
//7
}
returnself;
}
让我们一句一句地解释上面的代码:
1.使用一张大的图片创建一个CCSpriteBatchNode对象来批处理所有的对象的描绘操作。
接收的参数是Sprites.pvr.ccz。
2.把CCSpriteBatchNode添加到当前层里面去,这样就可以绘制它的所有的孩子对象。
3.加载Sprites.plist文件,它里面包含了这张大图里面的所有的小图的位置坐标信息。
这样,你以后可以非常方便地使用spriteWithSpriteFrameName来提取一张张小图片来初使化一些精灵。
4.使用SpaceFlier_sm_1.png图片来创建一个精灵,注意这张图片是大图里的一个子图。
5.使用CCDirector来获得屏幕的大小---我们接下来会用到这个大小。
6.设置飞船的位置在屏幕宽度的10%,高度的50处。
注意,飞船的中心点位置默认是飞船的中心。
7.把ship当作batchNode的一个孩子添加进去,这样的话,这些精灵就会被批处理显示出来。
编译并运行工程,你将会看到你的飞船图片出现在屏幕上面啦!
添加视差滚动
我们已经有一个很酷的飞船在屏幕上了,但是,它看起来就好像坐在那里一样,毫无生气!
我们可以通过往里面添加视差滚动背景来解决这个问题。
但是,等一下,到底什么是视差滚动了?
视差滚动,简单来说,就是“移动背景中的一些图片比其它图片慢一点点”,打个比方,一个背景中的物体有远有近,近的背景移动地快(比如地面),远的背景移动地慢(比如天空),这样子就会形成景深不一样的视差效果出来。
想要在cocos2d里面使用视差滚动效果非常简单。
你只需要做3步就ok了:
1.创建一个CCParallaxNode,然后把它加到层中去。
2.创建你想要滚动的元素,然后通过调用CCParallaxNode的addChild:
parallaxRatio:
positionOffset方法把这些元素添加进去。
3.移动CCParallaxNode来滚动背景。
这样的话,CCParallaxNode就会根据parallaxRatio的不同,或快或慢地移动它里面添加的元素了。
让我们看看这个过程具体是怎样的。
打开HelloWorldLayer.h,然后在@interface里面加入下面代码:
CCParallaxNode*_backgroundNode;
CCSprite*_spacedust1;
CCSprite*_spacedust2;
CCSprite*_planetsunrise;
CCSprite*_galaxy;
CCSprite*_spacialanomaly;
CCSprite*_spacialanomaly2;
然后,转到HelloWorldLayer.m文件,在init方法的底部加入下面的代码:
//1)CreatetheCCParallaxNode
_backgroundNode=[CCParallaxNodenode];
[selfaddChild:
_backgroundNodez:
-1];
//2)Createthespriteswe'
lladdtotheCCParallaxNode
_spacedust1=[CCSpritespriteWithFile:
bg_front_spacedust.png"
_spacedust2=[CCSpritespriteWithFile:
_planetsunrise=[CCSpritespriteWithFile:
bg_planetsunrise.png"
_galaxy=[CCSpritespriteWithFile:
bg_galaxy.png"
_spacialanomaly=[CCSpritespriteWithFile:
bg_spacialanomaly.png"
_spacialanomaly2=[CCSpritespriteWithFile:
bg_spacialanomaly2.png"
//3)Determinerelativemovementspeedsforspacedustandbackground
CGPointdustSpeed=ccp(0.1,0.1);
CGPointbgSpeed=ccp(0.05,0.05);
//4)AddchildrentoCCParallaxNode
[_backgroundNodeaddChild:
_spacedust1z:
0parallaxRatio:
dustSpeedpositionOffset:
ccp(0,winSize.height/2)];
_spacedust2z:
ccp(_spacedust1.contentSize.width,winSize.height/2)];
_galaxyz:
-1parallaxRatio:
bgSpeedpositionOffset:
ccp(0,winSize.height*0.7)];
_planetsunrisez:
ccp(600,winSize.height*0)];
_spacialanomalyz:
ccp(900,winSize.height*0.3)];
_spacialanomaly2z:
ccp(1500,winSize.height*0.9)];
编译并运行工程,你将会看到飞船背景了。
然而,这还不是很有趣,因为还没有任何东西在动!
为了移动太空尘埃和相关背景层,你只需要移动一样东西就可以了,那就是parallaxNode。
对于移动parallaxnode的每一个y值,灰尘就会移动0.1y值,同时背景会移动0.05y值。
为了移动parallax节点,你只需要飞一帧更新一下它的位置就可以了。
打开HelloWorldLayer.m文件,加入下列的代码:
(添加位置注意看注释)
//Addtoendofinitmethod
[selfscheduleUpdate];
//Addnewupdatemethod
-(void)update:
(ccTime)dt{
CGPointbackgroundScrollVel=ccp(-1000,0);
_backgroundNode.position=ccpAdd(_backgroundNode.position,ccpMult(backgroundScrollVel,dt));
编译并运行工程,你会看到,使用parallax来做视差滚动效果真是太简洁了!
然后,运行几秒钟之后,你会发现一个问题:
背景滚动完之后没有了!
我们只得到了一个黑色的屏幕!
那真是太糟糕了!
好,接下来,看看我是怎么解决的吧!
连续地滚动
我们想要背景保持无限地连续滚动效果。
我们的做法就是,当背景移出屏幕的左边的时候,就马上把它移动到屏幕右边的适当的位置上去。
这里有一个小小的问题,目前CCParallaxNode并不支持直接修改它的每个孩子的offset。
你不能够简单地更新它的孩子的坐标点,因为CCParallaxNode每次更新的时候会覆盖那些改变。
不过没关系,我已经制作了一个CCParallaxNode的分类,它可以用来解决这个问题,这个Category可以在项目的资源文件下面的Classes文件夹中找到。
把CCParallaxNode-Extras.h和CCParallaxNode-Extras.m拖到工程中去,同时确保“Copyitemsintodestinationgroup’sfolder”被复选中,然后点击Finish。
然后,在HelloWorldLayer.m中做下列改变来实现连续滚动的效果:
//Addtotopoffile
#import"
CCParallaxNode-Extras.h"
//Addatendofyourupdatemethod
NSArray*spaceDusts=[NSArrayarrayWithObjects:
_spacedust1,_spacedust2,nil];
for(CCSprite*spaceDustinspaceDusts){
if([_backgroundNodeconvertToWorldSpace:
spaceDust.position].x<
-spaceDust.contentSize.width){
[_backgroundNodeincrementOffset:
ccp(2*spaceDust.contentSize.width,0)forChild:
spaceDust];
NSArray*backgrounds=[NSArrayarrayWithObjects:
_planetsunrise,_galaxy,_spacialanomaly,_spacialanomaly2,nil];
for(CCSprite*backgroundinbackgrounds){
background.position].x<
-background.contentSize.width){
ccp(2000,0)forChild:
background];
编译并运行工程,这时你可以看到有一个无限连续滚动的背景了!
添加星星
没有哪一个太空射击游戏是没有星星在旁边飞的!
同样的,我们也可以创建相应的星星图片,并且把它当作paralla节点的一个孩子添加进去。
但是,这里我们不想这么做,因为星星是一个非常好的介绍粒子系统的例子。
粒子系统能够让你使用同样的精灵创建大量的小对象,并且非常高效。
cocos2d给了你很多配置粒子系统的参数,ParticleDesigner这个工具可以使这些参数的配置可视化。
但是,这个教程里面,我们不会涉及如何调整粒子系统的各项参数,我们使用已经做好的星星的粒子效果。
只需要在init方法中把它简单地添加进来即可:
NSArray*starsArray=[NSArrayarrayWithObjects:
Stars1.plist"
@"
Stars2.plist"
Stars3.plist"
nil];
for(NSString*starsinstarsArray){
CCParticleSystemQuad*starsEffect=[CCParticleSystemQuadparticleWithFile:
stars];
starsEffectz:
通过把粒子系统加到层中去,接着它会自动运行起来。
编译并运行代码,你现在可以看到好多星星在屏幕上飞过了!
使用加速计来移动飞船
到目前为止,还是很好,但是,如果我们不能控制飞船的移动的话,那就不是一个完整的游戏!
这里,我们将采用加速计来移动太空飞船。
当用户沿着x轴方向倾斜设备的时候,飞船就会上下移动。
这个功能实际上非常容易实现。
首先,在HelloWorldLayer.h里面的@interface里面添加一个成员变量,用来记录飞船沿着y轴方向每秒移动的点的个数。
(这个点不一定等于一个实际的像素点,如果是Retina的设备,一个点=2个像素)
float_shipPointsPerSecY;
然后,在HelloWorldLayer.m中做如下修改:
//1)Addtobottomofinit
self.isAccelerometerEnabled=YES;
//2)Addnewmethod
-(void)accelerometer:
(UIAccelerometer*)accelerometerdidAccelerate:
(UIAcceleration*)acceleration{
#definekFilteringFactor0.1
#definekRestAccelX-0.6
#definekShipMaxPointsPerSec(winSize.height*0.5)
#definekMaxDiffX0.2
UIAccelerationValuerollingX,rollingY,rollingZ;
rollingX=(acceleration.x*kFilteringFactor)+(rollingX*(1.0-kFilteringFactor));
rollingY=(acceleration.y*kFilteringFactor)+(rollingY*(1.0-kFilteringFactor));
rollingZ=(acceleration.z*kFilteringFactor)+(rollingZ*(1.0-kFilteringFactor));
floataccelX=acceleration.x-rollingX;
floataccelY=acceleration.y-rollingY;
floataccelZ=acceleration.z-rollingZ;
floataccelDiff=accelX-kRestAccelX;
floataccelFraction=accelDiff/kMaxDiffX;
floatpointsPerSec=kShipMaxPointsPerSec*accelFraction;
_shipPointsPerSecY=pointsPerSec;
//4)Addtobottom