iphone-Cocos2D游戏开发

简介: (1)精灵 指任何可以在屏幕上独立于其他东西而自由移动二维位图图像; (2)精灵表 包含一个以上精灵的图像就叫精灵表。精灵表是一个图像中包含一系列以网格形式存在的精灵图像。,对每个精灵都可以通过他在大图像中的行和列位置进行访问。

(1)精灵

指任何可以在屏幕上独立于其他东西而自由移动二维位图图像;

(2)精灵表

包含一个以上精灵的图像就叫精灵表。精灵表是一个图像中包含一系列以网格形式存在的精灵图像。,对每个精灵都可以通过他在大图像中的行和列位置进行访问。如下:

 

 

更复杂的精灵表,可以称为打包精灵表,他是包含一系列更小子图像的图像,每一个子图像又可以是其他的精灵表或者图像。如下:

 

 

 

复杂的精灵表,我们就无法简单的根据行和列的位置确定每个精灵的位置了,我们通过建立一个plist控制文件,来确定他们的位置。这个控制文件可以通过Zwoptex等工具生成。Zwoptex可以由分散的图像生成精灵表和控制文件。生成的控制文件如下:我们以后再介绍如何生成。

 

 

 

(3)动画

相信动画大家都很熟悉,但cocos2d创建动画的原理是怎么样的呢?

我们通过精灵表定义了动画不同帧的图像,然后利用代码将每个精灵(帧)载入动画并将绘制的精灵显示在屏幕上。这个通过上面的第一个精灵表就可以显示不同方向奔跑的精灵了。

 

 

 

第一行显示向下跑。第二行显示向上跑,第三显示向右,第四显示向左。

 

(4)点阵字

由于OpenGL ES不支持字体,因此字体将被定义成一系列图像,为了做到这点,我们可以通过Hiero和bmfont等工具将字体转化成精灵表,在MAC上可以采用基于JAVA的Hiero版本。生成的png如下:

 

 


(5)贴图地图

当开发角色扮演类的游戏时,将大尺寸的大图像存储在内存上是不可行的。我们可以通过贴图地图,一个二维的网格,每个网格单元都包含了贴图地图中网格单元所在的位置相关信息。贴图通常有以下两个元素:

1.一个包含可用于搭建环境分散贴图图像的精灵表。

2.一个地图文件。用于指定的地图中特定位置应该用到哪个贴图等。

在贴图中,我们可以用Tiled来创建。

(6)粒子系统

我们玩过的一些特效的游戏,他们可以通过两种方式来实现。

一个是运用精灵的动画实现。

一个是运用粒子系统发射器。

粒子系统,是用来模仿某种自然现象的技术。比如现实中的火,烟雾,河流,雨等。一个粒子系统通常有一个粒子发射器,发射器负责产生新粒子,并负责追踪他们在游戏中的过程直至消除。创建一个粒子之后,可以设置的粒子参数有:

1.速度:粒子速度。

2.寿命:粒子存在时间。

3.方向:粒子运动的方向。

4.初始颜色:粒子刚创建的颜色。

5.最终颜色:粒子消除时的颜色。

6.尺寸:粒子的大小。

 

1.精灵表的分类:

 

简单精灵表:精灵表中的图片都具有相同维度

 

复杂精灵表:精灵表中的图片可以具有不同的维度。

 

2.简单精灵表

 

通过SpriteSheet类将提供的图像切割成大小相同的子图像,当一个新的精灵表被实例化时将提供切割时用到的维度,同时也将提供精灵表图像中已用的“间隔”信息。

 

3.复杂精灵表

 

通过PackedSpriteSheet类来解析,该类需要一个图像和控制文件的名称。通过解析该控制文件就能获得精灵表中的精灵的位置和大小。

 

有无控制文件是基本型精灵表和复杂型精灵表间的主要区别。基本的精灵表可以通过简单的网格坐标定位每个精灵的位置,而复杂的精灵表通常精灵大小不一致,为了最大化利用空间,精灵表都是随机分布。

 

控制文件里面包含了每个精灵的在精灵表中的位置和维度,同时控制文件为每张图像分配一个键(key),通过如下图可以看出:一个复杂的精灵表由许多不同大小的形状和图像构成,我们可以通过Zwoptex等工具来生成。

 

 


 

4. Zwoptex工具的使用

 

我们可以通过下载这个工具来生成复杂的精灵表:http://www.zwoptexapp.com/

 

 

 

安装完成后如下:

 

 


 

我们点击create a new document 。如下:

 

 


 

Zwoptex工具有3中不同的输出,如下:

 

(1)为特定的精灵表存储设置和图像的项目文件。

 

(2)精灵表的png图像。

 

(3)plist格式的控制文件。

 

 

 

使用步骤如下:

 

(1)import image:导入要输入的图片

 

   


 

 

 

(2)导入后如下:

 

 


 

(3)左边的参数如下意思:

 

 


 

(4)接下来根据导入的图片进行排序

 

 


 

我们通过设置width和height都为256px。点击layout,即可排序如下:

 

 


 

(5)点击publish settings 进行输出的配置,把输出的路径设置好就可以点击publish输出了。

 

 


 


 

在上一节我们讲了精灵表的一些知识和使用Zwoptex对图片进行了整合和生成plist文件。这一节我们应用上一节的工具重新生成一对精灵表,对精灵进行操作。

1.建立工程

 

建立完工程后,如下:

 

 

 

 

2.载入文件

 

 

 

 

 

 

分别载入以上4个精灵,利用zwoptex生成的plist和png文件如下:

 

 

 

 

 

 

接下来把生成的plist和png导入resources文件中。

3.编程

在HelloWorld中的.m文件的注释掉里面其他的代码,重写如下:

 

 


代码解释如下:

CGSize s = [[CCDirector sharedDirector] winSize];//获取屏幕的尺寸

[[CCSpriteFrameCache sharedSpriteFrameCache] addSpriteFramesWithFile:@"sprite.plist"];//载入我们生成的plist文件到CCSpriteFrameCache的缓冲文件中

//获取精灵表中的第一张图片加载在场景中,并设置他的位置
sprite1 = [CCSprite spriteWithSpriteFrame:[[CCSpriteFrameCache sharedSpriteFrameCache] spriteFrameByName:@"sprite_01.png"]];
sprite1.position = ccp( s.width/2-80, s.height/2);
[self addChild:sprite1];

//获取精灵表中的第二张图片加载在场景中,并设置他的位置
sprite2 = [CCSprite spriteWithSpriteFrame:[[CCSpriteFrameCache sharedSpriteFrameCache] spriteFrameByName:@"sprite_03.png"]];
sprite2.position = ccp( s.width/2+80, s.height/2);
[self addChild:sprite2];

//根据设定的时间更新页面。调用updateSprite方法
[self schedule:@selector(updateSprite:) interval:0.3f];

 

当调用updateSprite方法实现小鸟眨眼睛的更新。

 

 

代码的解释如下:

 

static int sprite1FrameIndex = 0;//标志位置为0
static int sprite2FrameIndex = 4;//标志位置为4
-(void) updateSprite:(ccTime)dt
{

if (++ sprite1FrameIndex > 2) {
sprite1FrameIndex = 1;//进行循环。使精灵1不断执行相同的过程
}
if (++ sprite2FrameIndex > 4) {
sprite2FrameIndex = 3;//进行循环。使精灵2不断执行相同的过程
}
//更新的时候显示其他的精灵图片。
[sprite1 setDisplayFrame:[[CCSpriteFrameCache sharedSpriteFrameCache] spriteFrameByName:[NSString stringWithFormat:@"sprite_%02d.png",sprite1FrameIndex]]];
[sprite2 setDisplayFrame:[[CCSpriteFrameCache sharedSpriteFrameCache] spriteFrameByName:[NSString stringWithFormat:@"sprite_%02d.png",sprite2FrameIndex]]];
}

 

4.运行如下图

 

 

 

5.总结

这一节的重点在于如何对上一节生成的文件进行读取并做成动画效果显示,其中,CCSpriteFrameCache和setDisplayFrame这两个方法较为重要,可以重点掌握一下,以便能够熟练的应用在日常的游戏开发项目中。

一、游戏场景切换

在iPhone游戏开发中,游戏之间的场景开发中有很多动画可以实现,具体实现的动画如下:

 

CCTransitionRotoZoom//从大到小画面缩小并跳动进入

CCTransitionJumpZoom//立体从左边缩小跳动进入

CCTransitionMoveInL//从左边移动进入右边

CCTransitionMoveInR//从右边移动进入左边

CCTransitionMoveInT//从上边移动到入下边

CCTransitionMoveInB//从下边移动到入上边

CCTransitionSlideInL//从左边移动入右边

CCTransitionSlideInR//从右边移动入左边

CCTransitionSlideInT//从上边移动入下边

CCTransitionSlideInB//从下边移动入上边

CCTransitionShrinkGrow//从大到小在中间缩小进入

CCTransitionFlipX//从X轴方向立体翻转

CCTransitionFlipY//从Y轴方向立体翻转



CCTransitionFlipAngular//从右边头翻转进入

CCTransitionZoomFlipX//从X轴方向立体跳动翻转

CCTransitionZoomFlipY//从Y轴方向立体跳动翻转

CCTransitionZoomFlipAngular//从右边立体缩小翻转进入

CCTransitionFade//从中间渐变进入

CCTransitionCrossFade//从外围渐变进入

CCTransitionTurnOffTiles//从格子覆盖上层进入

CCTransitionSplitCols//竖直分三个方块切入

CCTransitionSplitRows//横向分三个方块切入

CCTransitionFadeTR//从左下角向右上角格子渐变进入

CCTransitionFadeBL//从右上角角向左下角格子渐变进入

CCTransitionFadeUp//从下向上渐变进入

CCTransitionFadeDown//从上向下渐变进入

 

 

上面的每个动画都作了解释,当调用的时候要写入如下代码:

    CCScene *sc = [CCScene node];
    [sc addChild:[HelloWorld scene]];
    [[CCDirector sharedDirector] replaceScene:[CCTransitionZoomFlipX transitionWithDuration:ttime  scene:sc]];

 

 

画面中提供了二十六种场景切换的动作,我将贴上demo给大家分享。

 

二、点阵字的实现

在iPhone开发中,我们要实现不同类型的字体,不同变相的字体,我们除了用Photoshop画好图片加载进入之外还可以做点贴字来实现。

(1)点阵字介绍

点阵字能使用OpenGL ES将文本渲染到屏幕上。在点阵字中每个字符由一张图像表示,我们可以通过Hiero生成的点阵字精灵表来实现。Hiero的下载地址为:(http://n4te.com/hiero/hiero.jnlp),我们在windows平台还能利用BMFont(http://www.anglecode.com/products/bmfont) 从TrueType生成点阵字。它提供的功能比Hiero多。

(2)Hiero介绍

Hiero主界面

 

 

从左边的Font里面选择system里面的字体,或者可以加载文件里面的字体,并设置字体的大小或者黑体,斜体等,然后选择在右边的Effects,选择你喜欢的,然后在Rendering设置要用的宽度和高度,之后我们可以选择Reset Cache,设置后的如下:

 

 

然后我们点击File的save bmfont files,如下图:

 

 

 

这样我们就可以得到BMFont的文件了,一个png的精灵表使用的图片和一个fnt的控制文件。

(3)如何使用CCLabelBMFont解析并显示

 

 

在初始化里面写入如下代码:

 

CCLabelTTF *label = [CCLabelTTF labelWithString:@"I'm Andy From CCLabelTTF class" fontName:@"Marker Felt" fontSize:33];

 

CCLabelBMFont *label1 = [CCLabelBMFont labelWithString:@"I'm Andy" fntFile:@"Andy.fnt"];

       

CCLabelBMFont *label2 = [CCLabelBMFont labelWithString:@"I'm Andy2" fntFile:@"Andy2.fnt"];

            // ask director the the window size

CGSize size = [[CCDirector sharedDirector] winSize];

     

            // position the label on the center of the screen

label1.position =  ccp( size.width /2 , size.height/2 +60);

label.position =  ccp( size.width /2 , size.height/2 );

label2.position =  ccp( size.width /2 , size.height/2 -60);

           

            // add the label as a child to this Layer

 [self addChild: label1];

 [self addChild: label];

 [self addChild: label2];

 

这样我们就可以得到我们像上图那样模拟器的显示结果了,这节课讲了场景切换和点阵字,主要是场景的动画实现和如何制作我们想要的点阵字。好了,这节就讲到这里啦,欢迎大家支持哈。



目录
相关文章
|
Android开发 C++ 开发者
《Cocos2D-x权威指南》——1.3 Cocos2D-x与Cocos2D-iPhone的比较
本节书摘来自华章计算机《Cocos2D-x权威指南》一书中的第1章,第1.3节,作者:满硕泉著, 更多章节内容可以访问云栖社区“华章计算机”公众号查看。
990 0