pixi-action - 一个类似 cocos2d-x 使用方法的 Pixi.js 动画插件

[50vip]

一、背景说明

最近有一个需求，大概就是做一个 2d 页面小游戏，非常小，小到使用 html + css 也可以实现的，但是想了解一下 html5 的游戏引擎，看了很多，感觉 Pixi.js 的使用上，相对简单，上手更快。但是他的元素动作部分感觉有点麻烦，封装不够。

之前接触过 cocos2d-x 的游戏开发， 以前使用 js 和 lua 都进行过简单的开发，他的动作（ action ）相对使用就非常容易，并且 demo 代码非常详细，上手很快，于是想着参考 Cocos2d-x 的使用 API 方式，来给 Pixi.js 写一个动作插件，需要具有和 cocos2d-x 一样的使用方法。

项目地址：https://github.com/hustcc/pixi-action DEMO 地址：http://git.hust.cc/pixi-action/. 欢迎 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 的同学，估计觉得更加简单。

三、支持的动作

仿照 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 ，欢迎提交代码，提交新的动作和动画。代码应该非常简单易懂，扩展新的动作应该也不复杂。

[samael]

建议实现一下 CCCallFunc

[50vip]

@samael 我做 cocos2d-x 是两年前了， CCCallFunc 是做 callback 吗？具体是什么啊？

pixi.js 的 callback 统一使用监听事件的方式实现。

[samael]

@50vip 有些类似 callback 吧，用 Action 包裹了一个 function ，用于在动作执行过程中运行一段代码。 比如这样：

spr.runAction(cc.sequence(
cc.moveTo(0.3, 0, 0),


))

[samael]

@samael 手抖了。。。 类似这样的
spr.runAction(cc.sequence(
cc.moveTo(0.3, 0, 0),
cc.callFunc(function() {
spr.setPosition(20, 20)
}),
cc.moveTo(0.3, 0, 0),
));

[50vip]

哦，懂了，这个确实需要，今天上午就可以加好~

[50vip]

@samael 忘了 @

[50vip]

@samael 已经加了 CallFunc 。

demo 在此 http://git.hust.cc/pixi-action/res/html/callfunc.html