推薦整理分享[置頂] Cocos2d-JS中使用CocosStudio資源——幀動(dòng)畫（1）([置頂]電影名字《收件人不詳》)，希望有所幫助，僅作參考，歡迎閱讀內(nèi)容。

文章相關(guān)熱門搜索詞:[置頂] chill your life,[置頂] chill your life,[置頂]JM259194,[置頂] chill your life,[置頂] clauvio,Twitter小老鼠,[置頂] clauvio,Twitter小老鼠,[置頂] chill your life,[置頂] chill your life,內(nèi)容如對(duì)您有幫助，希望把文章鏈接給更多的朋友！

在本篇博客中，我們將通過一個(gè)在Cocos2d-JS中使用從CocosStudio導(dǎo)出的幀動(dòng)畫資源的例子，來簡(jiǎn)要介紹以下內(nèi)容：利用ActionTimeLine進(jìn)行動(dòng)畫切割，如何使用導(dǎo)出的幀動(dòng)畫資源。關(guān)于幀動(dòng)畫，由于內(nèi)容繁雜。我們將分為兩篇進(jìn)行介紹。本篇將主要介紹資源的準(zhǔn)備工作，下一篇將主要介紹資源的使用問題。

按照原來的進(jìn)度安排，幀動(dòng)畫和骨骼動(dòng)畫我準(zhǔn)備最后介紹。但是，看到好多朋友非常期待動(dòng)畫的講解，于是就修改了一下計(jì)劃。其實(shí)，關(guān)于幀動(dòng)畫，前幾天就大體研究明白了，這幾天一直圍繞著一個(gè)“坑”，怎么都爬不出來。那就是：setFrameEventCallFunc方法總是回調(diào)不成功，后來經(jīng)過和很多人交流，貌似這是一個(gè)Bug，而且ActionTimeLine中的bug還不止這一處。

額，希望官網(wǎng)盡早給出回應(yīng)，盡早修復(fù)吧。當(dāng)然了，也有可能我用的不對(duì)。如果有用得明白的朋友，歡迎指點(diǎn)，歡迎討論。

這里要特別感謝幫助我很多的兩個(gè)朋友：這路沒剎車的和wxhqforever，給你們的熱情幫助點(diǎn)個(gè)贊??！

第一步：從官網(wǎng)下載相應(yīng)的示例，BattleScene。效果圖如下：

其實(shí)，我們只使用中間那個(gè)拿著叉子的大鯊魚。

第二步：制作我們使用的CocosStudio項(xiàng)目：

為什么要自己制作CocosStudio項(xiàng)目？

對(duì)于官網(wǎng)提供的資源：一、我們并不需要那么復(fù)雜，因?yàn)槲覀冎v的重點(diǎn)在于如何使用資源，而不是如何制作資源，所以要進(jìn)行適當(dāng)?shù)睾?jiǎn)化。二、官網(wǎng)提供的資源，特別是關(guān)于幀動(dòng)畫部分，和我們現(xiàn)在使用的環(huán)境并不匹配，出現(xiàn)版本兼容問題，所以我們要進(jìn)行適當(dāng)?shù)馗膭?dòng)。

1.目標(biāo)概覽：我們最終的制作效果如下：

2.導(dǎo)入資源，創(chuàng)建節(jié)點(diǎn)：創(chuàng)建項(xiàng)目后，我們需要導(dǎo)入如下資源：generalshark.csd和generalshark_png文件夾及其中的文件。導(dǎo)入后，創(chuàng)建一個(gè)新節(jié)點(diǎn)：Shark.csd。效果如下：

3.復(fù)制資源到新節(jié)點(diǎn)：雙擊generalshark.csd文件，在動(dòng)畫面板中選擇全部資源（Ctrl + A），并復(fù)制（Ctrl + C），再雙擊Shark.csd文件，并在動(dòng)畫面板中選擇后粘貼（Ctrl + V）。最后，刪除generalshark.csd文件。部分截圖如下：

全部選中時(shí)的狀態(tài)：

粘貼后Shark.csd的狀態(tài)：

PS:這里要說明一下，為什么要這么費(fèi)事地復(fù)制粘貼。因?yàn)榘姹静患嫒荨Ｄ氵x中g(shù)eneralshark.csd后，會(huì)發(fā)現(xiàn)屬性說明中是這樣的：

你選中Shark.csd后，會(huì)發(fā)現(xiàn)屬性說明中是這樣的：

而且，你從顏色上就可以看出差別，Shark.csd和generalshark.csd的顏色也是不一樣的。

4.設(shè)計(jì)布局：請(qǐng)直接將Shark.csd和三個(gè)Button按鈕拖入到Scene中進(jìn)行相應(yīng)的布局，具體布局請(qǐng)參照第一步中的目標(biāo)概覽。

5.非常重要?。?！將Shark.csd切割為不同的動(dòng)畫，操作結(jié)果如下圖所示：

PS:進(jìn)入動(dòng)畫管理界面的方法為，點(diǎn)擊動(dòng)畫面板中長(zhǎng)得有點(diǎn)像“一支筆”的那個(gè)按鈕。這步操作必須認(rèn)真完成，至于這么做的好處，我們將在下篇博客中詳細(xì)闡述。

第三步：發(fā)布資源。注意發(fā)布設(shè)置中應(yīng)該將數(shù)據(jù)格式改為JSON格式，發(fā)布位置你可以選擇Cocos Code IDE中所創(chuàng)建的項(xiàng)目的res文件夾即可，當(dāng)然，也可以另選其他文件夾。具體發(fā)布設(shè)置如下圖：

為了便利大家，下面提供CocosStudio項(xiàng)目資源的百度云下載鏈接： 鏈接： 密碼：9vjw

第一步：創(chuàng)建Cocos2d-JS項(xiàng)目，并將Cocos Studio發(fā)布的資源res，拷貝到項(xiàng)目的res文件夾下或直接發(fā)布到項(xiàng)目的res文件夾下。

PS:創(chuàng)建項(xiàng)目的時(shí)候，分辨率默認(rèn) x 就可以了，方向選擇豎向。

第二步：修改project.json文件，在modules中添加cocostudio。在jsList中添加FrameAnimationScene.js和resource.js。具體代碼如下：

第三步：在resource.js文件中指定所需的各種資源，以備后期加載使用。具體代碼如下：

第四步：非常非常重要的一步，你需要修改main.js文件，將其中的：cc.view.setDesignResolutionSize(,,cc.ResolutionPolicy.SHOW_ALL);改為cc.view.setDesignResolutionSize(, , cc.ResolutionPolicy.SHOW_ALL);。

雖然，我們選擇的方向是豎向，但是不知道為什么，當(dāng)創(chuàng)建項(xiàng)目的時(shí)候?qū)捀哌€是為,。而，豎向的時(shí)候?qū)捀邞?yīng)該為,。所以，要進(jìn)行相應(yīng)的修改才能正常運(yùn)行。如果你想看不該的效果，可以嘗試一下，會(huì)有驚喜哦。

main.js的具體代碼如下：

關(guān)于幀動(dòng)畫的準(zhǔn)備工作，到這里就算結(jié)束了。你可以自己運(yùn)行一下CocosStudio項(xiàng)目中的Shark.csd中的動(dòng)畫效果，看一看。下篇中，我們將要詳細(xì)講解在CocosCodeIDE中如何使用幀動(dòng)畫資源。

特別說明：幀動(dòng)畫，顧名思義，是通過一幀一幀播放來達(dá)到動(dòng)畫效果的。與骨骼動(dòng)畫相比，有很多缺點(diǎn)。其中比較明顯的有：如果要達(dá)到逼真效果，那么圖片資源文件相對(duì)來說會(huì)非常大，圖片數(shù)量也會(huì)非常多。

但是，官網(wǎng)的示例給我們提出了一種重要的改進(jìn)措施。你可以打開官網(wǎng)示例中的BattleScene進(jìn)行查看。你會(huì)發(fā)現(xiàn)，雖然使用的是幀動(dòng)畫，但是官網(wǎng)示例將整個(gè)人物分解為幾個(gè)部分，每個(gè)部分一張圖片。每個(gè)部分在每一幀的變化組成了整個(gè)人物在每一幀的變化。

這種“類骨骼動(dòng)畫精髓”的幀動(dòng)畫，有效地改進(jìn)了幀動(dòng)畫在控制圖片資源數(shù)量和大小方面的控制能力。

關(guān)于如何制作出優(yōu)秀的幀動(dòng)畫，已經(jīng)超出了本系列教程的范圍，我們?cè)谶@里就不再詳細(xì)闡述了。

[置頂] Cocos2d-JS中使用CocosStudio資源——幀動(dòng)畫（2） 在本篇博客中，我們將通過一個(gè)在Cocos2d-JS中使用從CocosStudio導(dǎo)出的幀動(dòng)畫資源的例子，來簡(jiǎn)要介紹以下內(nèi)容：利用ActionTimeLine進(jìn)行動(dòng)畫切割，如何使用導(dǎo)

Cocos2d開發(fā)手記——bug篇（一） Cocos2d開發(fā)手記——bug篇（一）初學(xué)Cocos2d，期間遇到了很多的問題，而今天遇上了一個(gè)很小的bug卻也困擾了我很長(zhǎng)時(shí)間，關(guān)于Layer中的boolinit()方法在繼承

關(guān)于 html5 播放 vo 遇到的一些問題 Duang...html5audio標(biāo)簽的使用啦。當(dāng)然必須要在支持的瀏覽器上啦。。。好吧代碼html代碼audiosrc=vo/example.mp3controls=controlsloop=trueautoplay=autoplayid=myAudioYourbrowserd