以一款最近新上線的全新三消游戲《進擊的小怪物》為例，游戲中很多動作都是在CocoStudio種制作的，今天帶領(lǐng)大家使用幀動畫技術(shù)完成下圖中的變色模式下的艙門特效。這可是時空隧道哦。

接下來，還是進入正題吧！

一：創(chuàng)建工程

1,打開cocostudio啟動器，在啟動器找到動作編輯器（Animation Editor，***個編輯器）

2,創(chuàng)建一個新的項目

在菜單欄中的的文件菜單（Alt+F）中選擇***個新建項目（Ctrl+N）

3, 設(shè)置項目名稱

給當前項目取一個名稱，這個項目名稱結(jié)合自己的項目找一個規(guī)律的名稱即可，但是注意不要在項目名稱中添加中文或特殊字符，習(xí)慣命名加空格的建議用下劃線”_”代替。名稱修改后建議將路徑設(shè)為自己動作管理的路徑中，不建議直接使用桌面文件夾，因為桌面在系統(tǒng)奔潰后無法恢復(fù)，且在XP系統(tǒng)下可能會出現(xiàn)打開失敗的問題。

二：添加資源

1,準備資源

我們提前已經(jīng)準備了切圖資源，這些都是一些PNG圖片，這是其中一個變色艙門的幀動畫的所用到的圖片，我這里將這些圖放在一個獨立的文件夾中，另還有一個小怪物的動畫。

2,添加到編輯器

我們將這兩個文件放直接拖拽到資源面板中（也可以通過導(dǎo)入的方式加進來，但拖拽更人性化一些）。

3,檢查資源

導(dǎo)入后的資源面板，這個面板中有一個根節(jié)點叫做“Resources”，因為cocos2d-x圖片數(shù)據(jù)的特殊管理方式，這里的文件都是建議提前整理好路徑關(guān)系的，至少保證不隨意修改已有文件的結(jié)構(gòu)。

另外在整個項目中（整個游戲項目）建議不要使用同名的圖片或資源，保證所有的文件即使是在一個文件內(nèi)也不會有重名的沖突。

三：創(chuàng)建layer節(jié)點

幀動畫是一種比較簡單的動畫，里面只有普通的layer層，這個layer主要用來是顯示圖像信息的，所以只需要在資源面板中拖一張圖片到渲染區(qū)即可(注意：一定要在形體模式下哦~~)。

我們找了一個彩色的背景圖片，先加進來（這個層級默認是按照添加先后排序，也可以手動修改）。

接下來再加一個艙門層。我們?nèi)颂枮?的艙門層圖片，這幾張連續(xù)的圖片是組成一個動畫的關(guān)鍵。

但是拖拽的時候注意拖到渲染的空白區(qū)域，如果拖到已有貼圖的地方會有沖突。

接下來，修該艙門層的坐標位置，設(shè)置為（0,0）點。底層也檢查下是否為（0,0）點。

四：為layer配置多資源

Layer是一個顯示貼圖的層容器，但它可是能放很多東西的哦~因為這個動畫需要重復(fù)利用這兩個layer來實現(xiàn)多個動畫，所以我們可以先為layer配置多個貼圖資源。

我們先選中底圖layer，并在資源面板中將幾個彩色背景一起選中（按住Ctrl再用鼠標點擊）并加到“渲染資源”屬性里。

艙門層同理

為了查看效果可以在“渲染資源”屬性中選擇隨意選取一個圖片看渲染區(qū)是否有改變。

五：制作一個簡單的旋轉(zhuǎn)動畫

這個動畫的背景是一個旋轉(zhuǎn)的效果，雖然效果很炫，但是別擔心，這只是一個屬性變化，So easy！

我們先要選中底圖layer（這里是layer1），然后在指定的幀新建一幀，此時編輯器會將兩幀鏈接起來。我們選中尾幀，并將“旋轉(zhuǎn)”屬性設(shè)置為“-360.00”。這樣一個旋轉(zhuǎn)動畫已經(jīng)完成。點擊播放查看效果。

六：制作序列幀動畫

這個時光艙除了有很炫的旋轉(zhuǎn)外還有一個艙門開啟與關(guān)閉的特效。否則怎么能叫時空艙呢。

不過這個艙門和背景用的技術(shù)不同，它是用序列幀動畫來實現(xiàn)的。不過這個和上一個動畫一樣容易實現(xiàn)。

步驟：

選中l(wèi)ayer2，修改屬性“序列幀間隔”，這個值默認是5，表示每一幀的間隔為5幀。我們修改為3。這個取決于你的圖片變化程度，變化比較大的話盡量減小這個值，以加強視覺效果。

接下來在資源面板選中編號1到7的幾張圖片，并拖拽到動畫幀的對象上。然后···就沒有然后了~~~直接看效果吧~

【注釋：這是一個gif動畫圖片，需要在網(wǎng)頁上（或其他工具）才能顯示】

七：制作多個動畫

這里的幾個幀動畫都是極其類似的，只有底圖的顏色不同而已。所以我們可以利用復(fù)制動畫的功能快速創(chuàng)建多個動畫。

步驟：在動作列表，選中Animation1,點擊鼠標右鍵，選擇復(fù)制動畫。

復(fù)制后的動畫是和***個動畫是完全相同的。我們選擇layer直接修改貼圖即可。

步驟：選擇layer1的***幀，在“渲染資源”屬性中選擇一個新的貼圖。這里只有兩幀，因為尾幀的貼圖是否替換并沒有什么影響，所以可以偷個懶。

其他的幾個動畫也使用相同的修改方法。

八：整理

1,修改動作名稱

為了方便管理，我們需要對各個動作的名稱做統(tǒng)一的管理。點擊動畫，右鍵菜單選擇重命名（F2）。

2：整理幀

由于開始設(shè)置的背景動畫時長和艙門關(guān)閉動畫時長不同，我們可以將背景層的尾幀直接拖拽到和layer2尾幀相同的位置。

九：小結(jié)

通過上面的八個步驟我們已經(jīng)完成了這個艙門的制作，通過簡單的拖拽和屬性修改即可完成漂亮的動畫，相信對于程序來說一定節(jié)省了很多工作量，美術(shù)也可以很容易的上手，而且對于最終的安裝包能減少很大的體積，特別如果你的游戲中有比較大的人物形象的話，在CocoStudio 中還提供了骨骼動畫的支持，原來做一個人物可能需要10M圖片，現(xiàn)在可能幾百K就搞定了。

[[92406]]

順帶說一句，《進擊的小怪物》中，擁有超萌外星小怪物，華麗夢幻的消除特效，強力炫酷的道具，讓您和可愛的小怪物們一起體驗星際大冒險。作為一款全新的三消類游戲，目前在各大應(yīng)用商店均有不錯的表現(xiàn)。

看到這里是不是很心動了呢？趕快到CocoStudio.org官網(wǎng)下載***版本體驗一下吧~~