使用SpriteBuilder制做Cocos2D游戏彻底中文教程（三）

使用SpriteBuilder时间轴作一个角色动画（Animate a Character using SpriteBuilder's Timeline）

让咱们学习如何用SpriteBuilder时间轴来建立动画。在咱们的游戏中，咱们想位于投石车的后面添加一只带动画的熊：

建立一个新的.ccb文件

 熊将有它本身的.ccb文件。在你的SpriteBuilder项目中建立一个名为“Bear.ccb”（顶栏：文件>新建>文件）的新Interface file，并选择节点为根容器：

咱们须要两张图像来组成这只熊：没有胳膊的身体，以及作动画的单独的胳膊。将bearnoarms.png和beararm.png添加到根节点：

将bearnoarms.png在偏好设置面板上设置位置（0.0，0.0）。设置beararm.png的锚点为（0.0，1.0），它的位置为（-5.0，10.0）。们须要设置臂的锚点，由于咱们要旋转它。当咱们也用一个旋转动画（rotation）到一个CCNode上时，他将围绕着设置的锚点旋转-手臂（这应该是在图片左上角的肩附近的）。

插曲（Interlude）：基于关键帧动画

在您建立实际动画以前，你须要的对基于关键帧动画有基本的了解。当你使用关键帧来建立动画时，你须要定义一个值在超过必定时间时如何变化。您能够经过定义的终值和时间戳来定义这些值的变化。例如，对于咱们的臂的旋转，咱们能够定义三个时间 - 值对：

秒	旋转度
0	0
1	90
2	0

有关基于关键帧动画的特别之处在于，定义时间戳之间的值补间。这意味着，您已经定义的那些之间的每一个值是经过一些数学函数计算。假设咱们大部分时间使用的是线性补间动画，这意味着：根据以上表格，在0.5秒旋转值会是...？正确：45度。

进行动画设置

编辑时间轴

如今，咱们能够给北极熊的手臂作动画了。在Spritebuilder中每一个动画都是在本身的时间轴上定义的。若是您有一个对象拥有多个动画，你能够添加多个时间轴的.ccb文件。对于咱们的熊来讲，咱们开始只有一个动画。一个好的作法是像动画发生在该对象上同样给时间轴命名，因此咱们将咱们的时间表从新命名为“ArmAnimation”。 咱们还须要设置咱们的动画的持续时间 - 设置为2秒：

添加关键帧

如今是时候加入咱们前面所描述的三个关键帧了。关键帧在时间轴上屏幕底部进行建立。使用该窗格右上角的控制，能够放大和缩小：

经过往右拖动左边的滑块上的时间码来放大。选择熊的手臂而后建立三个关键帧旋转 0，1和2秒。当时间标记设置到上述时间时在键盘上按r键，分别更新每个的旋转值为-15，20，-15：

单击时间轴面板上的播放按钮来进行动画预览。

最后，咱们须要将这个动画连接到他自己，这样它在咱们玩游戏的时候会重复执行：

这样，咱们的熊的动画就制做完成啦！

 

原文：

https://www.makegameswith.us/tutorials/getting-started-with-spritebuilder/animating-spritebuilder/

使用SpriteBuilder添加自定义对象(Add Custom Objects Using SpriteBuilder)

在 Peeved Penguins项目中Seals是坏人。咱们的目标是干掉全部的Seals。你须要发射penguins来干掉他们。因此接下来，咱们要在SpriteBuilder建立的Seals和penguins的对象。

企鹅（penguins）

让咱们先从企鹅开始。咱们但愿企鹅（penguin）和海豹（seal）各自拥有.ccb文件，由于它们将被映射到不一样的Objective-C类。这容许咱们在咱们的游戏中加入发射机制后能把企鹅和海豹区分开来。

建立一个新的接口文件（顶栏：文件>新建>文件），而后选择Sprite为根节点：

如今，你须要为企鹅设置图像。最简单的方法是从在在屏幕底部的时间轴上选择根节点（咱们的CCSprite），一旦你选择了CCSprite，转到右侧窗格而后再“Sprite Frame”属性设置为flyingpenguin.png 图像:

如今你应该看到在舞台中央的企鹅形象。

后来，当咱们执行游戏，咱们但愿从咱们的弹弓中射这些企鹅。这意味着咱们须要把这些企鹅变成物理对象，以及使他们能够在场景中与其余物理机构互动。

选择企鹅，打开第三个选项卡，勾选“启用物理（Enable physics）”。一旦您选中该框，你会看到4个粉红色的点造成一个矩形。这个形状表明你的物理身体的形状：

默认状况下，这个机构是一个正方形。对于咱们的飞行企鹅一个circle彷佛是一个更好的选择，因此在相应的下拉列表改变物理形状：

注意，能够拖动粉红色的点以调节物理身体的大小和位置。

如今，咱们有一个正确的图像和物理组织的CCSprite了。最后，你须要设置这个接口文件的自定义类的属性。最后，将这个自定义类的属性的接口文件连接到的Objective-C类（后面将详细讨论）。打开第二个选项卡，并设置自定义类属性：

如今咱们的企鹅对象已经建好了，下面将学习如何建立一个CCSprite的子类。

雪豹（Seal）

你如今应该可以建立Seal.ccb文件了。重复全部你作企鹅的步骤：

• 建立一个新的接口文件（CCSprite做为根节点）

• 选择正确的sprite图片（seal.png）

• 设置一个物理体（一个圆，形状将再次这样作）

• 设置自定义类

在Xcode中建立类

值得重申的是一个.ccb文件的“自定义类”的属性会在您的SpriteBuilder项目的.ccb文件和你的Xcode项目的Objective-C类之间的创建联系。

对于咱们的例子中，这意味着每当有人加载Seal.ccb或Penguin.ccb文件，Spritebuilder将初始化咱们连接的自定义类（海豹和企鹅）。

为了能正确运行，咱们须要在Xcode中建立的海豹和企鹅的Objective-c类。打开PeevedPenguins.xcodeproj。建立两个新的类（顶栏：File>New>File>Objective-C Class) 名为"Penguin" and "Seal" ，让他们成为CCSprite的子类，由于Penguin.ccb和Seal.ccb的根节点是CCSprites还有：

请在项目的Source 文件夹下建立新的文件以保持一致的结构：

测试项目一切能正常工做

既然咱们已经作了一堆的变化，最好进行一次良好的测试，已保障咱们继续进行下一步前，程序可以正常运行。最重要的是咱们要检查咱们的代码链接工做正常。首先打开"Penguin.m" 而后在 @implementation 和 @end 之间加上这一段：

- (id)init {
    self = [super init];
    if (self) {
        CCLOG(@"Penguin created");
    }
    return self;
}

到目前为止，一切都很好。如今，出于测试目的，咱们应该尝试从咱们的源代码中手动加载这两个文件（penguin.ccb和seal.ccb），来调用咱们的自定义的init方法。

打开文件“AppDelegate.m”。添加两行这个方法的底部：

- (BOOL)application:(UIApplication *)application didFinishLaunchingWithOptions:(NSDictionary *)launchOptions
{
    [...]
    [self setupCocos2dWithOptions:cocos2dSetup];
    [CCBReader load:@"Penguin"];
    [CCBReader load:@"Seal"];
    return YES;
}

如今，咱们的应用程序开始时，penguin.ccb和seal.ccb文件应当即加载，使Seal和Penguin对象进行初始化。两个日志消息就会出如今你的控制台日志。运行应用程序并检查控制台正确的输出：

若是一切正常了，你应该能够看到一个"Penguin created" 和 "Seal created"的消息在控制台日志中。恭喜！。

若是您没有看到消息，请返回并检查您是否已经执行此页面上的每一步。

原文：

https://www.makegameswith.us/tutorials/getting-started-with-spritebuilder/penguins-seals/

在下一节中将介绍如何使用Spritebuilder制做开始菜单及游戏场景！转载请说明出处，wealpan将和您一块儿学习Spritebuilder！谢谢你们！