使用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！謝謝你們！