建站
咨詢
售后
建站咨詢
新聞中心
以一款最近新上線的全新三消游戲《進(jìn)擊的小怪物》為例，游戲中很多動(dòng)作都是在CocoStudio種制作的，今天帶領(lǐng)大家使用幀動(dòng)畫技術(shù)完成下圖中的變色模式下的艙門特效。這可是時(shí)空隧道哦。
創(chuàng)新互聯(lián)科技有限公司專業(yè)互聯(lián)網(wǎng)基礎(chǔ)服務(wù)商，為您提供內(nèi)江服務(wù)器托管，高防物理服務(wù)器租用，成都IDC機(jī)房托管，成都主機(jī)托管等互聯(lián)網(wǎng)服務(wù)。
接下來(lái)，還是進(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)奔潰后無(wú)法恢復(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è)文件放直接拖拽到資源面板中（也可以通過(guò)導(dǎo)入的方式加進(jìn)來(lái)，但拖拽更人性化一些）。
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)畫是一種比較簡(jiǎn)單的動(dòng)畫，里面只有普通的layer層，這個(gè)layer主要用來(lái)是顯示圖像信息的，所以只需要在資源面板中拖一張圖片到渲染區(qū)即可(注意：一定要在形體模式下哦~~)。
我們找了一個(gè)彩色的背景圖片，先加進(jìn)來(lái)（這個(gè)層級(jí)默認(rèn)是按照添加先后排序，也可以手動(dòng)修改）。
接下來(lái)再加一個(gè)艙門層。我們?nèi)?biāo)號(hào)為0的艙門層圖片，這幾張連續(xù)的圖片是組成一個(gè)動(dòng)畫的關(guān)鍵。
但是拖拽的時(shí)候注意拖到渲染的空白區(qū)域，如果拖到已有貼圖的地方會(huì)有沖突。
接下來(lái)，修該艙門層的坐標(biāo)位置，設(shè)置為（0,0）點(diǎn)。底層也檢查下是否為（0,0）點(diǎn)。
四：為layer配置多資源
Layer是一個(gè)顯示貼圖的層容器，但它可是能放很多東西的哦~因?yàn)檫@個(gè)動(dòng)畫需要重復(fù)利用這兩個(gè)layer來(lái)實(shí)現(xiàn)多個(gè)動(dòng)畫，所以我們可以先為layer配置多個(gè)貼圖資源。
我們先選中底圖layer，并在資源面板中將幾個(gè)彩色背景一起選中（按住Ctrl再用鼠標(biāo)點(diǎn)擊）并加到“渲染資源”屬性里。
艙門層同理
為了查看效果可以在“渲染資源”屬性中選擇隨意選取一個(gè)圖片看渲染區(qū)是否有改變。
五：制作一個(gè)簡(jiǎn)單的旋轉(zhuǎn)動(dòng)畫
這個(gè)動(dòng)畫的背景是一個(gè)旋轉(zhuǎn)的效果，雖然效果很炫，但是別擔(dān)心，這只是一個(gè)屬性變化，So easy！
我們先要選中底圖layer（這里是layer1），然后在指定的幀新建一幀，此時(shí)編輯器會(huì)將兩幀鏈接起來(lái)。我們選中尾幀，并將“旋轉(zhuǎn)”屬性設(shè)置為“-360.00”。這樣一個(gè)旋轉(zhuǎn)動(dòng)畫已經(jīng)完成。點(diǎn)擊播放查看效果。
六：制作序列幀動(dòng)畫
這個(gè)時(shí)光艙除了有很炫的旋轉(zhuǎn)外還有一個(gè)艙門開啟與關(guān)閉的特效。否則怎么能叫時(shí)空艙呢。
不過(guò)這個(gè)艙門和背景用的技術(shù)不同，它是用序列幀動(dòng)畫來(lái)實(shí)現(xiàn)的。不過(guò)這個(gè)和上一個(gè)動(dòng)畫一樣容易實(shí)現(xiàn)。
步驟：
選中l(wèi)ayer2，修改屬性“序列幀間隔”，這個(gè)值默認(rèn)是5，表示每一幀的間隔為5幀。我們修改為3。這個(gè)取決于你的圖片變化程度，變化比較大的話盡量減小這個(gè)值，以加強(qiáng)視覺效果。
接下來(lái)在資源面板選中編號(hào)1到7的幾張圖片，并拖拽到動(dòng)畫幀的對(duì)象上。然后···就沒有然后了~~~直接看效果吧~
【注釋：這是一個(gè)gif動(dòng)畫圖片，需要在網(wǎng)頁(yè)上（或其他工具）才能顯示】
七：制作多個(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)作名稱
為了方便管理，我們需要對(duì)各個(gè)動(dòng)作的名稱做統(tǒng)一的管理。點(diǎn)擊動(dòng)畫，右鍵菜單選擇重命名（F2）。
2：整理幀
由于開始設(shè)置的背景動(dòng)畫時(shí)長(zhǎng)和艙門關(guān)閉動(dòng)畫時(shí)長(zhǎng)不同，我們可以將背景層的尾幀直接拖拽到和layer2尾幀相同的位置。
九：小結(jié)
通過(guò)上面的八個(gè)步驟我們已經(jīng)完成了這個(gè)艙門的制作，通過(guò)簡(jiǎn)單的拖拽和屬性修改即可完成漂亮的動(dòng)畫，相信對(duì)于程序來(lái)說(shuō)一定節(jié)省了很多工作量，美術(shù)也可以很容易的上手，而且對(duì)于最終的安裝包能減少很大的體積，特別如果你的游戲中有比較大的人物形象的話，在CocoStudio 中還提供了骨骼動(dòng)畫的支持，原來(lái)做一個(gè)人物可能需要10M圖片，現(xiàn)在可能幾百K就搞定了。
順帶說(shuō)一句，《進(jìn)擊的小怪物》中，擁有超萌外星小怪物，華麗夢(mèng)幻的消除特效，強(qiáng)力炫酷的道具，讓您和可愛的小怪物們一起體驗(yàn)星際大冒險(xiǎn)。作為一款全新的三消類游戲，目前在各大應(yīng)用商店均有不錯(cuò)的表現(xiàn)。
看到這里是不是很心動(dòng)了呢？趕快到CocoStudio.org官網(wǎng)下載***版本體驗(yàn)一下吧~~
當(dāng)前題目：Cocostudio實(shí)戰(zhàn)教程變色模式艙門制作
當(dāng)前地址：http://www.5511xx.com/article/cddhcoe.html
