首先介绍一篇博客文章：cocos2d HOWTO系列之：如何创建帧动画。我初学cocos2d时就发现这篇文章，不过里面的一些内容已经过时了，所以自己又写了一个动画的例子。

我把要点说一下：

1. 制作动画需要的一系列动画图片（比如png文件）。要制作动画png，可根据上面介绍的文章使用Adobe Flash将fla转换为png。也可以使用一些免费软件，将swf转换为png。这里有一些软件：SpriteSheetCreator，SWFSheet，SWFToPNG。大家可以网上搜索一下。
2. 生成png动画系列后，要将其整合成一个png（也就是所谓的sprite sheet）。这里使用的软件就是Zwoptex。使用此软件生成一个png和一个plist，plist记录了每个sprite的x，y，高，宽数据。Cocos2d支持Zwoptex生成的plist格式。不过遗憾的是最近Zwoptex开始收费了。这里提供以前的一个版本，也可以满足我们的要求。Zwoptex-0.4b10.app下载 。
3. 我的程序就是播放一个电扇的动画，按一下就进行动画，再按一下动画就停止。我是修改了HelloWorld程序，添加了一个Object类进行动画处理。唯一要说明的是addSpriteFramesWithFile中要使用的路径是相对路径，我开始一直遇到问题就是因为使用了绝对路径。

源代码下载

2. 解压到/$HOME/Library/Application Support/Developer/Shared/Xcode下

3. 下载cocos2d-iphone 0.99.5，解压到你想要的地方。

3. 在Xcode Preferences中找到Source Tree，输入新变量COCOS2D_SOURCE，让其指向cocos2d-iphone 0.99.5的源代码处。

这样，下次你打开Xcode，你就可以使用我的模板创建cocos2d项目了（注意不要安装随cocos2d-iphone下载的模板），以后每次cocos2d-iphone进行更新，你仅仅需要修改COCOS2D_SOURCE变量（当然前提是cocos2d-iphone的编程接口没有改变）。

• 场景（Scenes）
• 主控器（Director）
• 层（Layers）
• 精灵（Sprites）

场景

场景（通过 CCScene 对象实现）是程序的工作流程中相对独立的部分。有些人可能喜欢称呼其为“屏幕”或“舞台”。你的应用程序可能具有许多场景，但在某刻只能有一个活动的场景。

例如，你的游戏中可能有下列场景：介绍，菜单，第一关，过场一，第二关，过场二，胜利过场，失败过场，高分记录等等。

你可以将每个场景定义成一个独立的程序; 你可以通过某种逻辑将这些场景联系起来（比如当介绍中断或者完成后，就进入菜单场景，第一关成功将进入过场一，而失败则进入失败过场，等等）。

CCScene 是由一个或者多个层（通过 CCLayer 对象实现）组成。场景的外观和行为是通过层来实现的。

CCScene 类家族中还包括一组称为“过渡” （通过 CCTransitionScene 对象实现），它允许你在两个场景之间进行生成一些特殊的过渡效果（比如淡入淡出，滑入效果等等）。

由于场景是 CCNode 的子类，因此可以使用“动作”对场景进行变换。

主控器

CCDirector 是一个负责控制场景变化的元件。

CCDirector 是一个单例对象。它知道当前哪个场景是活动的，它负责处理场景的控制，并允许进行“场景调用”之类的操作（比如在进入另一个场景时，暂停当前场景，并在适当时候返回原始场景）。在CCLayer 要求替换当前场景后，实际上是 CCDirector 进行的场景切换。

另外， CCDirector 还负责OpenGL ES的初始化。

层

CCLayer 拥有整个可进行绘制的区域，并且知道怎样对自身进行绘制。它还可以是半透明的（还可以在某些地方部分或者完全透明），这样可以看到层后的部分。层是对外观和行为进行定义的元件，所以大部分时间我们都说针对 CCLayer 及子类进行编程的。

CCLayer 还是进行事件处理的地方。事件是通过层进行传递直到某些层捕捉并进行处理。

尽管许多程序要求你定义自定义 CCLayer 类，但 cocos2d 提供了一些有用的预定义的层（比如简单的菜单层： CCMenu，颜色层： CCColorLayer， 其他层之间 的多路器：CCMultiplexLayer，等等）。

层还可以包括 CCSprite 对象， CCLabel 对象以及甚至是 CCLayer 对象。

由于层是 CCNode的子类，因此可以使用“动作”对场景进行变换。

精灵

Cocos2d 的精灵与其他程序库描述的精灵一样，是一个可以进行移动，旋转，大小变化，动画等操作的2D图像。

精灵（通过 CCSprite 类实现）可以拥有其它精灵作为其子成员。当一个父成员进行变换时，其所有子成员也将同时进行变换。

由于精灵是 CCNode的子类，因此可以使用“动作”对场景进行变换。

下面是我的设计文档初稿。

项目名称

Portable Game Engine （PGE ）

目标

• 跨平台，希望能支持Windows，Linux，Mac OSX，iPhone，WinCE, Android, Blackberry, Symbian phone 等
• 简单，尽量简化编程接口
• 2D和3D
• 组件可选，以减小目标代码
• 支持Unicode

组件

• 核心：游戏主循环，线程，垃圾收集，插件等
• 图形系统（采用OpenGL或OpenGL ES）：图像（纹理），动画，字体
• 声音系统（采用OpenAL）：音效，音乐，乐器
• 资源管理器：压缩/解压，加密/解密
• 输入：键盘，鼠标及触摸屏（重力感应）
• 网络：Tcp/ip，Http, UDP
• GUI（用户接口）：菜单，文本，按钮，列表框，下拉框，选择框
• 游戏AI
• 游戏Physics

开发按阶段进行。第一阶段开发Windows下的OpenGL 2D引擎，然后移植到iPhone下。

iPhone引领的休闲游戏复兴的风潮似乎已经过热。感谢早些时候Adobe发布的新Flash开发软件beta版，一个新启动的公司OneAppAtATime允许开发者使用Flash开发iPhone程序。从本周开始，此公司为Flash游戏开发者打开了一道大门，他们提供将Flash游戏转换为iPhone游戏并使其获得App Store批准的服务，作为回报他们将收取35%的收入。（也就是说在Apple拿走30%后与开发者平分剩下的70%。）

OneAppAtATime 是Evan “Rabble” Henshaw-Plath的杰作，他们以前曾为源于Yahoo Brickhouse的卫星服务公司Fire Eagle以及传播Twitter的播客公司Odeo工作。

Henshaw-Plath，位于乌拉圭的蒙得维的亚，宣称希望每月生产“数十甚至数百个游戏“。他们的目标是许多Flash游戏的兼职开发者以及由于网上用户不希望付费过去有困难从他们的项目中赚到钱的开发者。

但是在iPhone平台上，人们通常是需要付费的，Henshaw-Plath希望将这些游戏的价格定在$2.99。而且尽管Adobe宣布 计划在2009年底发布Flash专业CS5的公众beta版，OneAppAtATime在竞争中已经抢先一步。Henshaw-Plath宣称他通过乌拉圭大量的Flash开发者获得了先机。

不像它的名称，OneAppAtATime希望成为一个工厂，能够大量生产出尽可能多的程序，但是，Henshaw-Plath特别希望能够改编利用了iPhone特性如重力计，GPS，罗盘和地址簿的程序。例如，一个公司的游戏利用Atari经典的Breakout游戏允许玩家通过前后移动设备来控制他们的摇杆。（由于这些程序还没有通过Apple的批准，你现在还不能玩这个游戏。）

Henshaw-Plath通过其Ruby on Rails顾问公司Cubox注资。他希望通常需要“数百甚至数千美金”开发的每个Flash游戏只需花几天时间转换。

OneAppAtATime正在释放一个怪物；目前已经有大约100,000 iPhone程序，而且有远超此数的Flash游戏存在。具有如此之多的竞争，维持生意并不是件容易的事情。Henshaw-Plath说他的程序将在与其他iPhone程序的竞争中胜出因为用户在购买之前可以通过Flash进行测试。而且他还并不具有对游戏的独家许可证，这样Flash开发者在认为他们可以做得更好时有权与OneAppAtATime竞争。并且公司保证为每个游戏提供大量的公共市场宣传和广告。

原文见：iPhone Users, Get Ready for Flash Games

简单概括一下本教程

上一次教程，我们在一个“空白画布”Xcode项目上渲染了一个实体三角形。然后建立一个顶点数组，通过使用glVertexPointer()告诉OpenGL数据及其格式，再使用glDrawArrays()渲染出来。

今天，我们将使用上次的代码，但把三角形变为正方形。我们仅需要改动其中几行代码。第一部分应该很明显，我们应为正方形指定4点而不是三角形的3点。然后我们通过传递给glDrawArrays()不同的参数告诉OpenGL以不同的方式绘画。

我们开始吧。

定义正方形顶点

打开上次教程的Xcode项目并找到rawView 方法。为riangleVertices[] 常量加上注释-先不要删除，因为当我们讨论变换时会需要用到它们-加入下列代码：

这定义了我们的正方形。注意反时针方向的正方形顶点（4个点）。

然后我们在主体部分为绘制三角形代码加上注释，稍后我们也会用回这些代码的。为三个函数glVertexArray(), glEnableClientState()和glDrawArrays()加上注释并加入下列代码：

这三个函数只有少许不同。

这里唯一的变化是使用了不同的顶点数组，即正方形数组而不是三角形数组。

glEnableClientState()仍然是通知OpenGL从顶点数组绘制（而不是绘制颜色数组或其它）。

最主要的变化就在这里了。上次的教程我们使用GL_TRIANGLES作为第一个参数，3为第三个参数。记住第二个参数代表数组开始位置的偏移量，因为我们的顶点数组只包括了正方形，所以它还是0。

第一参数是OpenGL的绘图模式，你已经见过其中两种。就此机会我讨论一下各种不同的绘图模式。它们是：

GL_POINTS
GL_LINES
GL_LINE_LOOP
GL_LINE_STRIP
GL_TRIANGLES
GL_TRIANGLE_STRIP
GL_TRIANGLE_FAN

我们还没有讨论过点和线，所以我们先把重点放在后面三种与三角形有关的模式。在我开始讲解之前，我要提醒你们一个顶点数组可能包括不止一个三角形，所以虽然你只见过一个顶点数组包括一个对象，但并不限如此。

GL_TRIANGLES – 表示OpenGL将以是三个顶点一组来处理顶点数组。所以，第一组三个顶点代表三角形顶点1，2和3。然后再处理接下来的一组三个顶点，直到数组的尾部。

GL_TRIANGLE_STRIP – OpenGL将从前两个顶点开始，对于各个后续顶点，它将与前两个顶点一起构成三角形。也就是说，squareVertices[6~8]是与squareVerticies[0~2]和squareVerticies[3~5]一起构成三角形的。而squareVertices[9~11]是与squareVertices[3~5]和squareVertices[6~8]构成三角形的。如此这般，完成整个数组。

注意：squareVertices[0~2]表示：

        squareVertices[0]  – X 坐标

        squareVertices[1] – Y 坐标

        squareVertices[2] – Z 坐标

如果你还不明白，我将在随后的示例中进一步说明。

GL_TRIANGLE_FAN – 对于最前面两个顶点之后的每个后续顶点，OpenGL将使用前一个顶点以及第一个顶点构成三角形。所以，对于squareVertices[6~8]，它是通过与squareVertices[3~5] （前一个顶点）和squareVertices[0~2] （第一个顶点）一起构成三角形的。

我们使用的是GL_TRIANGLES_FAN。按下“Build & Go”后，你可以在屏幕上看到如下白色正方形：

回头看看顶点数组。想象一下三角形是这样被绘制从而构成正方形的。OpenGL是这样进行渲染的。

三角形顶点1: squareVertices[0~2]        — 正方形的左上角

三角形顶点2: squareVertices[3~5]        — 正方形的左下角

三角形顶点3: squareVertices[6~8]        — 正方形的右下角

OpenGL使用上叙三点绘制的三角形组成了正方形的左下部分。设想下按对角线从左上角开始到右下角将正方形分成两部分。注意两个三角形是怎样构成的？OpenGL只是画了正方形左下方一半。

注意：squareVertices[0~2]表示：

        squareVertices[0] - X坐标

        squareVertices[1] – Y坐标

        squareVertices[2] – Z坐标

三角形顶点1: squareVertices[9~11]       – 正方形右上方顶点

三角形顶点2: squareVertices[6~8]        — 前一个顶点，右下顶点

三角形顶点3: squareVertices[0~2]        — 第一顶点，左上顶点

只要使用一个新点，OpenGL就能渲染三角形以完成整个正方形的渲染。

GL_TRIANGLE_STRIP

回到代码将glDrawArrays()第一个参数从GL_TRIANGLE_FAN改为GL_TRIANGLE_STRIP：

按 “Build & Go” ，你将看到下列图形：

让我们分析下为什么在绘制方法中的一个变化就会导致我们得不到正方形的结果。OpenGL以以下方法处理顶点数组：

三角形顶点 1: squareVertices[0~2]        — 左上

三角形顶点 2: squareVertices[3~5]        — 左下

三角形顶点 3: squareVertices[6~8]        — 右下

OpenGL现在是使用最前面的三点渲染三角形，因此，正方形左下半部分三角形的渲染已前面例子的结果一样。

三角形顶点 1: squareVertices[9~11]       – 右上

三角形顶点 2: squareVertices[6~8]       — 前一个顶点，右下

三角形顶点 3: squareVertices[3~5]        — 再前一个顶点，左下

OpenGL现在是使用这三点来渲染三角形。在本例中，使渲染的三角形与构成正方形所需的三角形相比，正好翻转了90度。

如果我们用不同方式提供顶点数组，我们有可能像使用GL_TRIANGLE_STRIP获得正确正方形，就像使用GL_TRIANGLE_FAN一样。需要记住绘制方法必须与顶点数组一起考虑，否则有可能得到奇怪的结果，就像我们将FAN改为STRIP时一样。

注意：如果你以不同方式设定顶点数组，使用GL_TRIANGLE_STRIP你仍可以画出正确的正方形。例如：

使用上述三点，可以看到第一个三角形是通过前三个顶点构成的，获得的三角形如下：

现在，通过指定右上顶点（P4），与左上（P3）和右下的再前一个顶点（P2）可以构成一个新三角形。新顶点用橘红，绿色和红色表示如下：

我们正确地绘制了一个正方形。最终的结果是一样的，但需要提醒你的是，指定的顶点数组必须与绘图方法匹配。

结论

我们已经讨论了三角形和正方形。还剩下点和线部分。这两种基元都十分简单，将在下一篇教程中涉及。对于本次教程已经涉及的部分，下次我们将进行混色处理。

在完成了物体着色后，我们将移动和进行3D纹理映射。当然，它不会是Doom 3式的程序，不过我们可以由此开始建立3D物体。然后，我们就将进入3D世界了。

本教程的源代码：AppleCoder-OpenGLES-02.zip

原文见：OpenGL ES 02 – Drawing Primitives 2 – Squares 作者：Simon Maurice  上一篇：opengl-es-01-绘制基本图形1-三角形

下面是你需要下载的音频文件：

• clapping-crowd-studio-01
• tennis-volley-01

注意文件的格式是.caf。你所有音频文件格式必须符合在iPhone上播放的要求。Apple提供了一个工具将音频转换成这种格式。这里是参考。很简单，打开终端输入：

/usr/bin/afconvert -f caff -d LEI16 {INPUT} {OUTPUT}

{INPUT}是输入音频文件路径，{OUTPUT} 是你想要存放的.caf文件路径。

将音频文件添加到项目中

将下载好的音频文件拖放到项目下的Resources文件夹。如果你还希望 安排得更为有序些的话，你还可以建立一个Audio子文件夹。请确定在“copy the files into your project’s directory”检查框上打勾。

添加AudioToolbox.framework到项目

由于我们要用到此框架的一些函数，所以我们必须将此框架加入项目中。右击项目中的Frameworks文件夹选择Add -> Existing Frameworks。在搜索框内输入AudioToolbox.framework 然后选择搜索结果中的框架。（请确定点取了Computer 以搜索整个电脑）。

找到所需框架后，按Add。现在我们已经准备好写代码了……

头文件声明

打开 iTennisViewController.h 加入下列代码：

首先我们看到代码引入AudioServices.h，我们需要使用其中一些函数来播放音频。接下来定义了两个SystemSoundID。它们都是Integers（整数型，也可以使用int，但会引起许多警告信息）。然后打开iTennishViewController.m加入下面代码：

现在我们来初始化声音对象。找到viewDidLoad方法加入下列代码：

很简单吧。第一行是获取音频文件路径。下一行是将路径转换为CFURLRef。最后，加载音频文件并与指定soundID联系起来。注意我们传递的&clappingFileID参数，  这是通过参考地址传递的，因此它允许AudioServicesCreateSystemSoundID方法对其进行修改。我们用同样方法处理击球声。下面，我们可以开始播放了。

声音播放

播放加载好的声音实际上很简单。只需将需要播放文件的soundID传递给AudioServicesPlaySystemSound方法即可。所以播放得分时的鼓掌声只需在reset方法中加入下列代码：

请注意，我们传递的clappingFileID说明我们是要播放鼓掌声。加在gameLoop中加入下列代码将播放球拍击球的声音：

很容易吧？按“Build and Go”试玩我们的游戏吧。源代码下载 。

原文见：iPhone Game Programming Tutorial Part 4 – Basic Game Audio

源码下载地址在Github，直接按“Download”就可以下载了。

为iPhone建立一个OpenGL ES的Xcode项目是很容易的事，特别是在苹果公司的SDK发布时引入了模板的概念后。我们所需要做的只是在适当的地方快速而简单的加入代码。这就是我们今天的主题。

老实说，如果你只是想早点切入OpenGL 教程的主题，你尽可以忽略这一部分。而且这样做，你也不会错失什么，因为有关Xcode设定部分我并不准备过多涉猎。尽管进入教程的最后部分下载项目文件。

启动Xcode并创建Xcode新项目。选择模板“OpenGL ES Application”（见图1），然后将项目存储在你认为方便的地方。 

图1

好，我们假定你肯能以前已经在哪看过这个模板或运行过用这个模板建立的项目。我们说要做的就是移除那个旋转的彩色正方形的有关代码并将其转换成使用深度缓冲的视图（即使其成为“真正的”3D）。

3D空间的2D

像Apple的模板一样，大部分OpenGL教程开始都忽略深度，通常都使用2维坐标系统（X,Y)而不是更复杂的3维坐标系统（X,Y,Z)。你可能已经注意到Apple模板中的正方形定点使用（X,Y)，这是因为他们没有使用深度。

这叫做正交投影。本教程系列的目标是带你进入3D世界。所以我现在不会讨论正交投影；可能稍后的系列会有提及。现在我们直接向3D世界进发吧。

允许Depth Buffer（深度缓存）

我们要作的第一件事是允许深度缓存。Apple示例中的正方形只是一个2D物体，所以根本不需要深度缓存。由于我们需要深度，所以我们必须启用它。Apple已经提供了设定深度缓存的代码，我们正好可以使用。

在编辑器中打开EAGLView.m找到下面代码:

不用多说，把0改为1。这将启用视图设定部分创建深度缓存的代码。代码在createFrameBuffer方法中。现在还不需要考虑太多这段代码。它是Apple写的，应该能正常工作。

现在我们需要启用深度来测试OpenGL。我们要建立一个新方法，它只会被调用一次以使视图正常工作。首先，建立一个新方法setupView并将下面代码加入新方法中：

上述代码通过建立一个映射到世界显示的视区设定了OpenGL操作的环境。我将稍后详细说明，现在注意下面代码：

此代码启用了OpenGL中的深度测试。你需要记住在OpenGL中一旦你启用了什么，你一定要记住在你不需要时要关闭它。由于我们启用深度测试并没有关闭，所以在视图设定中仍然有效。

我们在此定义了清屏时所用的颜色。OpenGLES中所有颜色都必须是RGBA值（即红，绿，蓝和alpha），而不能像OpenGL一样采用RGB值。由于OpenGLES已经知道清屏时采用的颜色，所以清屏时使用定义的黑色。此设定一直保持到我们改变它。

当使用浮点时，颜色值为0->1，而使用无符号字节类型时，可为0->255。数值越大，所代表颜色的密度越高。

好，回到文件最开始我们先前改变的#define处。我们要在这定义一个宏，在我们刚插入的setupView方法中需要用到。

视图绘制 – 画图方法

现在，找到drawView方法。这是本教程的重点。Apple已经提示我们这里是视图绘制的地方。

首先，删除一切，加入下面代码：

上面代码的前三行是设定作图空间。后两行是将作图空间与当前屏幕可见空间进行交换。如果你以前进行过动画或游戏编程工作，那么你应该知道这叫做 “double buffered（双重缓冲）”。

如果不知道，我们解释下：我们创建了两个完全相同的缓冲，一个用于显示给用户，另一个被清理掉然后在其上绘图。在绘制结束后，我们交换这两个视图以便用户看到新的视图。我们之所以不拍麻烦做了这么多事情是为了动画更为平滑。

我们还要加入更多的代码。

首先，在dealloc方法前插入以下代码：

OpenGL有一套错误检查的方法（glGetError())，但是需要将错误码转换成更容易读的格式。上面的代码就是完成这个工作的。

布尔值“visibleCheck”只用于检查当没有错误时此方法是否已被调用。

最后，我们要做的只是在EAGLView.m中找到initWithCoder方法并调用“setupView”方法。在变量“animationInterval”设定之前，加入下面代码调用setupView：

应注意我们只是调用在initWithCoder中setupView方法而不是创建一个新方法，它只应该被调用一次。

下面，打开EAGLView.h！

EAGLView.h

我们只需要在这里加入两个方法的原型：

教程到此结束。

后续…

如果你此时按“build and run”，那么在simulator（模拟器）上只是显示一个空白屏幕。在下一个教程中，我们将在屏幕上绘制一下基本图形，基本图形是指点，线和三角形之类的元素。

代码下载：AppleCoder-OpenGLES-00.zip

原文见： OpenGL ES 00 – Xcode Project Set Up 作者：Simon Maurice

创建启动页面

我们加入的启动页面将淡出到游戏主屏幕。你可以下载此图像加入到项目的Resources（资源）文件夹中。 请选择复选框中“copy this image to the project’s directory（拷贝此 图像至项目目录）”选项。

我们需要加入一个View Controller到我们的项目，它将负责处理启动画面视图。在你的项目中加入一个新的UIViewController的子类文件。取名为SplashViewController，同时选择建立.h文件。

今天就到这里。下次我将引入音频到游戏中。如果有什么问题与建议，write me on Twitter.

源代码在这里下载。

18 Mar 2009 原文见：iPhone Game Programming Tutorial Part 3 – Splash Screen