pixi-action - 一個類似 cocos2d-x 使用方法的 Pixi.js 動畫插件

05-02

一、背景說明

最近有一個需求，大概就是做一個 2d 頁面小遊戲，非常小，小到使用 html + css 也可以實現的，但是想了解一下 html5 的遊戲引擎，看了很多，感覺 Pixi.js 的使用上，相對簡單，上手更快。但是他的元素動作部分感覺有點麻煩，封裝不夠。

之前接觸過 cocos2d-x 的遊戲開發，以前使用 js 和lua 都進行過簡單的開發，他的動作（action）相對使用就非常容易，並且 demo 代碼非常詳細，上手很快，於是想著參考 Cocos2d-x 的使用 API 方式，來給 Pixi.js 寫一個動作插件，需要具有和 cocos2d-x 一樣的使用方法。

項目地址：hustcc/pixi-action DEMO 地址：pixi-action is a plugin for Pixi.js v3.0.8 or higher to create actions and animations easily. API inspired by Cocos2d-x.. 歡迎 star，更加歡迎貢獻代碼。

二、如何使用

首先使用 npm install pixi-action 安裝，或者直接下載 build 目錄代碼到本地。然後在 html 中引入。基本的代碼如下：

var renderer = new PIXI.autoDetectRenderer(800,600);document.body.appendChild(renderer.view);var stage = new PIXI.Container();var sprite1 = new Sprite(resources[res/img/animal.png].texture);var action_move = PIXI.action.MoveTo(500, 400, 2); // 移動動畫var animation = PIXI.actionManager.runAction(cat, action_moveto); // 執行動畫animation.on(end, function(elapsed) { console.log(action end.);});function animate() { window.requestAnimationFrame(animate); renderer.render(stage); PIXI.actionManager.update(); // update actions，這句必須加上}animate();

看上面的 demo 例子是不是很簡單，如果之前用過 cocos2d-x 的同學，估計覺得更加簡單。

三、事件

為了能夠監控動作執行的情況，添加了兩個事件，一個是 start，一個是 end，上述 demo 代碼中有 end 事件監聽的情況。

start - callback(elapsedTime): Fired when the action starts.

end - callback(elapsedTime): Fired when the action is ended.

四、支持的動作

仿照 cocos2d-x，幾乎支持了 cocos2d-x 中所有的動作。目前包括：

ActionMove

PIXI.action.MoveTo(x, y, time);

PIXI.action.MoveBy(x, y, time);

ActionScale

PIXI.action.ScaleTo(scale_x, scale_y, time);

PIXI.action.ScaleBy(scale_x, scale_y, time);

ActionRotate

PIXI.action.RotateTo(rotation, time);

PIXI.action.RotateBy(rotation, time);

ActionBlink

PIXI.action.Blink(count, time);

ActionFade

PIXI.action.FadeIn(time);

PIXI.action.FadeOut(time);

ActionSkew

PIXI.action.SkewTo(x, y, time);

PIXI.action.SkewBy(x, y, time);

ActionPivot

PIXI.action.PivotTo(x, y, time);

PIXI.action.PivotBy(x, y, time);

ActionTint

PIXI.action.TintTo(tint, time);

PIXI.action.TintBy(tint, time);

ActionSequence

PIXI.action.Sequence(actions);

ActionRepeat

PIXI.action.Repeat(action, count);

RepeatForever

PIXI.action.Repeat(action);

ActionDelay

PIXI.action.Delay(time);

通過上述的動作系列，進行組合，可以組合出更加複雜的動畫，以前我使用這些做過一個卡牌反面的效果，很逼真。

五、其他說明

代碼是昨天一天斷斷續續完成，時間緊迫，難免有一些bug，歡迎提交代碼，提交新的動作和動畫。代碼應該非常簡單易懂，擴展新的動作應該也不複雜。