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

接下來，還是進(jìn)入正題吧！

一：創(chuàng)建工程

1,打開cocostudio啟動(dòng)器，在啟動(dòng)器找到動(dòng)作編輯器（Animation Editor，***個(gè)編輯器）

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

在菜單欄中的的文件菜單（Alt+F）中選擇***個(gè)新建項(xiàng)目（Ctrl+N）

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

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

二：添加資源

1,準(zhǔn)備資源

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

2,添加到編輯器

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

3,檢查資源

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

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

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

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

我們找了一個(gè)彩色的背景圖片，先加進(jìn)來（這個(gè)層級(jí)默認(rèn)是按照添加先后排序，也可以手動(dòng)修改）。

接下來再加一個(gè)艙門層。我們?nèi)?biāo)號(hào)為0的艙門層圖片，這幾張連續(xù)的圖片是組成一個(gè)動(dòng)畫的關(guān)鍵。

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

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

四：為layer配置多資源

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

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

艙門層同理

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

五：制作一個(gè)簡單的旋轉(zhuǎn)動(dòng)畫

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

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

六：制作序列幀動(dòng)畫

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

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

步驟：

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

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

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

七：制作多個(gè)動(dòng)畫

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

步驟：在動(dòng)作列表，選中Animation1,點(diǎn)擊鼠標(biāo)右鍵，選擇復(fù)制動(dòng)畫。

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

步驟：選擇layer1的***幀，在“渲染資源”屬性中選擇一個(gè)新的貼圖。這里只有兩幀，因?yàn)槲矌馁N圖是否替換并沒有什么影響，所以可以偷個(gè)懶。

其他的幾個(gè)動(dòng)畫也使用相同的修改方法。

八：整理

1,修改動(dòng)作名稱

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

2：整理幀

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

九：小結(jié)

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

[[92406]]

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

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