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交流群】
