CocosCreator入門學習《FlappyBird》(二):動畫系統讓小鳥動過來

顯然不是真的讓小鳥活過來,而是通過幀動畫讓小鳥翅膀動起來,看起來就像是在飛翔一樣。

在層級管理器裏面找到Bird節點並點擊,然後在右邊的屬性檢查器中最下方找到“添加組件”的按鈕,這裏我們選擇添加Animation組件。如圖:

         

然後選中資源管理器中的assets目錄,右鍵創建一個Animation文件夾(用來存放動畫文件)。並且點擊控制檯旁邊的動畫編輯器,這樣我們就可以看到如下界面,如圖:

點擊新建Clip文件按鈕,這個時候會彈出一個系統框,要求你選擇動畫將要放的位置以及動畫名字,這裏我們選擇我們剛纔創建的Animation文件夾,並且動畫名字寫成BirdAnim(名字大家隨便取也可以)。

如果操作無誤,這個時候在IDE的資源管理器的assets\Animation文件夾下面會展示一個BirdAnim的文件,如上圖。

下面我們點擊動畫編輯器左上角按鈕開始編輯動畫

首先,我們點擊Add Property按鈕,選擇cc.Sprite.spriteFrame,然後在屬性列表裏面就會出現一個cc.Sprite.spriteFrame的選項。同時右側還是出現一條紅色的線,官方文檔稱這條線爲軌道,我們也就稱爲“軌道”吧。

然後我們選中Texture文件夾裏面的3張小鳥圖片,一起拖到紅色軌道線上(注意:直到圓形圖片變成箭頭圖標,這樣纔算選中軌道線,鬆開鼠標纔會有效果,感覺有點坑,10次失敗8次,是我沒找對姿勢?)

另外把WraoMode選擇Loop(默認是Default)

操作無誤後,會出現如上圖所示的界面,這時3張圖片重疊在一起,不容易觀察,我們可以通過上方的菱形小圖標調整圖片之間的距離,增加圖片之間的間隔也會使圖片間的切換間隔時間改變,所以這也是一種調整幀動畫間隔時間的方式。

下面是我調整的結果:

右下角的Duration從0.07s變成0.35s,說明3張圖片之間切換間隔時間變長了,點擊播放按鈕,可以在場景編輯器中看到小鳥的翅膀在不斷上下扇動。

但是這個動畫看着有點彆扭,因爲我們動畫播放到第三張之後,立刻重新從第一張播放,中間少了一張翅膀放平的動作,所有有點怪怪的。

知道原因之後,我們給動畫再增加一幀。

這樣再播放看一下,會發現效果好很多了。

在場景編輯器裏面找到保存按鈕,點擊保存一下,然後再點擊保存旁邊的關閉按鈕。

這時Bird的屬性檢查器中Animation顯示應該如下圖

Play On Load選項勾上之後點擊運行,會發現小鳥根本沒有動。

經常在查閱官方文檔(最好的學習工具書)發現Play On Load選項勾上之後默認播放的是Default Clip。從上圖我們可以看到此項爲None。所以我們可以手動把assets\Animation裏面的BirdAnim動畫文件拖到Default Clip裏面來,如下圖:

先別急着運行,先保存(這個操作非常重要,每次修改之後都要先保存再運行看效果),最後運行起來就能看到小鳥在愉快的飛翔了。

 

 

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章