cocos creator基礎-(十六)自定義的幀動畫播放組件

1: 掌握幀動畫的原理;

2: 完成幀動畫組件的編寫;

3: 代碼中使用幀動畫組件;


通過拖拽圖片進行播放,比引擎的制作方式方便,但動畫不是很靈活


幀動畫播放組件


1: creator播放幀動畫需要通過動畫編輯器去制作;

2: 為了方便控制和使用加入幀動畫代碼播放組件;

3: 屬性設置:

  sprite_frames: 幀動畫所用到的所有的幀;

  duration: 每幀的時間間隔;

  loop: 是否循環(huán)播放;

  play_onload: 是否加載組件的時候播放;

4: 接口設置:

  play_once(end_func); // 播放結束后的回掉函數(shù);

  play_loop(); // 循環(huán)播放;

幀動畫播放原理


1: 對的時間播放顯示對的圖片:

假設以三幀動畫為例,時間間隔就是duration


組件實現(xiàn)代碼

cc.Class({

? ? extends: cc.Component,


? ? properties: {

? ? ? ? // foo: {

? ? ? ? // ? ?default: null, ? ? ?// The default value will be used only when the component attaching

? ? ? ? // ? ? ? ? ? ? ? ? ? ? ? ? ? to a node for the first time

? ? ? ? // ? ?url: cc.Texture2D, ?// optional, default is typeof default

? ? ? ? // ? ?serializable: true, // optional, default is true

? ? ? ? // ? ?visible: true, ? ? ?// optional, default is true

? ? ? ? // ? ?displayName: 'Foo', // optional

? ? ? ? // ? ?readonly: false, ? ?// optional, default is false

? ? ? ? // },

? ? ? ? // ...

? ? ? ? // 幀動畫的圖片, 多張圖片,?

? ? ? ? sprite_frames: {

? ? ? ? ? ? default: [],

? ? ? ? ? ? type: cc.SpriteFrame,?

? ? ? ? },

? ? ? ? duration: 0.1, // 幀的時間間隔

? ? ? ? loop: false, // 是否循環(huán)播放;

? ? ? ? play_onload: false, // 是否在加載的時候就開始播放;

? ? },

? ? // use this for initialization

? ? onLoad: function () {

? ? ? ? this.end_func = null;

? ? ? ? this.is_playing = false; // 加一個變量

? ? ? ? this.play_time = 0; // 播放的時間

? ? ? ? // 獲得了精靈組件

? ? ? ? this.sprite = this.getComponent(cc.Sprite);

? ? ? ? if (!this.sprite) {

? ? ? ? ? ? this.sprite = this.addComponent(cc.Sprite);

? ? ? ? }

? ? ? ? // end

? ? ? ? if (this.play_onload) { // 如果在加載的時候開始播放

? ? ? ? ? ? if (this.loop) { // 循環(huán)播放

? ? ? ? ? ? ? ? this.play_loop();

? ? ? ? ? ? }

? ? ? ? ? ? else { // 播放一次

? ? ? ? ? ? ? ? this.play_once(null);

? ? ? ? ? ? }

? ? ? ? }?

? ? },

? ? play_loop: function() {

? ? ? ? if (this.sprite_frames.length <= 0) {

? ? ? ? ? ? return;

? ? ? ? }

? ? ? ? this.loop = true;

? ? ? ? this.end_func = null;

? ? ? ? this.is_playing = true; // 正在播放

? ? ? ? this.play_time = 0; // 播放的時間

? ? ? ? this.sprite.spriteFrame = this.sprite_frames[0];

? ? },

? ? // 需要播放結束以后的回掉, end_func

? ? play_once: function(end_func) {

? ? ? ? if (this.sprite_frames.length <= 0) {

? ? ? ? ? ? return;

? ? ? ? }


? ? ? ? this.end_func = end_func;

? ? ? ? this.loop = false;

? ? ? ? this.is_playing = true; // 正在播放

? ? ? ? this.play_time = 0; // 播放的時間

? ? ? ? this.sprite.spriteFrame = this.sprite_frames[0];

? ? },

? ? // called every frame, uncomment this function to activate update callback

? ? // 每次游戲刷新的時候

? ? update: function (dt) {

? ? ? ? if(!this.is_playing) {

? ? ? ? ? ? return;

? ? ? ? }

? ? ? ? this.play_time += dt; // 當前我們過去了這么多時間;

? ? ? ? var index = Math.floor(this.play_time / this.duration);

? ? ? ? // 非循環(huán)播放

? ? ? ? if (!this.loop) {

? ? ? ? ? ? if (index >= this.sprite_frames.length) ?{ // 如果超過了椎组,播放結束

? ? ? ? ? ? ? ? this.is_playing = false;

? ? ? ? ? ? ? ? if (this.end_func) {

? ? ? ? ? ? ? ? ? ? this.end_func();

? ? ? ? ? ? ? ? }

? ? ? ? ? ? }

? ? ? ? ? ? else {

? ? ? ? ? ? ? ? this.sprite.spriteFrame = this.sprite_frames[index]; // 修改當前時刻顯示的正確圖片;

? ? ? ? ? ? }

? ? ? ? }

? ? ? ? else { // 循環(huán)播放

? ? ? ? ? ? while(index >= this.sprite_frames.length) {

? ? ? ? ? ? ? ? index -= this.sprite_frames.length;

? ? ? ? ? ? ? ? this.play_time -= (this.sprite_frames.length * this.duration);

? ? ? ? ? ? }

? ? ? ? ? ? this.sprite.spriteFrame = this.sprite_frames[index];

? ? ? ? }

? ? },

});

使用組件的測試代碼

需要播放動畫的節(jié)點掛載組件腳本,設置好資源后,play

var frame_anim = require("frame_anim");

cc.Class({

? ? extends: cc.Component,

? ? properties: {

? ? ? ? // foo: {

? ? ? ? // ? ?default: null, ? ? ?// The default value will be used only when the component attaching

? ? ? ? // ? ? ? ? ? ? ? ? ? ? ? ? ? to a node for the first time

? ? ? ? // ? ?url: cc.Texture2D, ?// optional, default is typeof default

? ? ? ? // ? ?serializable: true, // optional, default is true

? ? ? ? // ? ?visible: true, ? ? ?// optional, default is true

? ? ? ? // ? ?displayName: 'Foo', // optional

? ? ? ? // ? ?readonly: false, ? ?// optional, default is false

? ? ? ? // },

? ? ? ? // ...

? ? ? ? anim: {

? ? ? ? ? ? type: frame_anim,

? ? ? ? ? ? default: null,

? ? ? ? }?

? ? },

? ? // use this for initialization

? ? onLoad: function () {

? ? },

? ? start: function() {


? ? ? ? /*this.anim.play_once(function() {

? ? ? ? ? ? console.log("anim end called");

? ? ? ? });*/

? ? ? ? this.anim.duration = 1;

? ? ? ? this.anim.play_loop();

? ? },

? ? // called every frame, uncomment this function to activate update callback

? ? // update: function (dt) {

? ? // },

});

我也創(chuàng)建了個cocos creator的學習交流群歡迎大家一起來學習點擊鏈接加入群聊【cocos/unity交流群】

最后編輯于
?著作權歸作者所有,轉載或內(nèi)容合作請聯(lián)系作者
  • 序言:七十年代末店枣,一起剝皮案震驚了整個濱河市,隨后出現(xiàn)的幾起案子叹誉,更是在濱河造成了極大的恐慌鸯两,老刑警劉巖,帶你破解...
    沈念sama閱讀 222,729評論 6 517
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件长豁,死亡現(xiàn)場離奇詭異钧唐,居然都是意外死亡,警方通過查閱死者的電腦和手機蕉斜,發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 95,226評論 3 399
  • 文/潘曉璐 我一進店門逾柿,熙熙樓的掌柜王于貴愁眉苦臉地迎上來,“玉大人宅此,你說我怎么就攤上這事机错。” “怎么了父腕?”我有些...
    開封第一講書人閱讀 169,461評論 0 362
  • 文/不壞的土叔 我叫張陵弱匪,是天一觀的道長。 經(jīng)常有香客問我,道長萧诫,這世上最難降的妖魔是什么斥难? 我笑而不...
    開封第一講書人閱讀 60,135評論 1 300
  • 正文 為了忘掉前任,我火速辦了婚禮帘饶,結果婚禮上哑诊,老公的妹妹穿的比我還像新娘。我一直安慰自己及刻,他們只是感情好镀裤,可當我...
    茶點故事閱讀 69,130評論 6 398
  • 文/花漫 我一把揭開白布。 她就那樣靜靜地躺著缴饭,像睡著了一般暑劝。 火紅的嫁衣襯著肌膚如雪。 梳的紋絲不亂的頭發(fā)上颗搂,一...
    開封第一講書人閱讀 52,736評論 1 312
  • 那天担猛,我揣著相機與錄音,去河邊找鬼丢氢。 笑死傅联,一個胖子當著我的面吹牛,可吹牛的內(nèi)容都是我干的卖丸。 我是一名探鬼主播纺且,決...
    沈念sama閱讀 41,179評論 3 422
  • 文/蒼蘭香墨 我猛地睜開眼,長吁一口氣:“原來是場噩夢啊……” “哼稍浆!你這毒婦竟也來了载碌?” 一聲冷哼從身側響起,我...
    開封第一講書人閱讀 40,124評論 0 277
  • 序言:老撾萬榮一對情侶失蹤衅枫,失蹤者是張志新(化名)和其女友劉穎嫁艇,沒想到半個月后,有當?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體弦撩,經(jīng)...
    沈念sama閱讀 46,657評論 1 320
  • 正文 獨居荒郊野嶺守林人離奇死亡步咪,尸身上長有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點故事閱讀 38,723評論 3 342
  • 正文 我和宋清朗相戀三年,在試婚紗的時候發(fā)現(xiàn)自己被綠了益楼。 大學時的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片猾漫。...
    茶點故事閱讀 40,872評論 1 353
  • 序言:一個原本活蹦亂跳的男人離奇死亡,死狀恐怖感凤,靈堂內(nèi)的尸體忽然破棺而出悯周,到底是詐尸還是另有隱情,我是刑警寧澤陪竿,帶...
    沈念sama閱讀 36,533評論 5 351
  • 正文 年R本政府宣布禽翼,位于F島的核電站,受9級特大地震影響,放射性物質(zhì)發(fā)生泄漏闰挡。R本人自食惡果不足惜锐墙,卻給世界環(huán)境...
    茶點故事閱讀 42,213評論 3 336
  • 文/蒙蒙 一、第九天 我趴在偏房一處隱蔽的房頂上張望长酗。 院中可真熱鬧溪北,春花似錦、人聲如沸花枫。這莊子的主人今日做“春日...
    開封第一講書人閱讀 32,700評論 0 25
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽劳翰。三九已至,卻和暖如春馒疹,著一層夾襖步出監(jiān)牢的瞬間佳簸,已是汗流浹背。 一陣腳步聲響...
    開封第一講書人閱讀 33,819評論 1 274
  • 我被黑心中介騙來泰國打工颖变, 沒想到剛下飛機就差點兒被人妖公主榨干…… 1. 我叫王不留生均,地道東北人。 一個月前我還...
    沈念sama閱讀 49,304評論 3 379
  • 正文 我出身青樓腥刹,卻偏偏與公主長得像马胧,于是被迫代替她去往敵國和親。 傳聞我的和親對象是個殘疾皇子衔峰,可洞房花燭夜當晚...
    茶點故事閱讀 45,876評論 2 361

推薦閱讀更多精彩內(nèi)容