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

前端之家收集整理的这篇文章主要介绍了pixi-action - 一个类似 cocos2d-x 使用方法的 Pixi.js 动画插件前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。

一、背景说明@H_403_1@

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

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

@H_301_7@项目地址:https://github.com/hustcc/pixi-action DEMO 地址:http://git.hust.cc/pixi-action/. 欢迎 star, 更加欢迎贡献代码

二、如何使用@H_403_1@

首先使用 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 的同学,估计觉得更加简单。

三、事件@H_403_1@

为了能够监控 动作 执行的情况,添加了两个事件,一个是 start,一个是 end,上述 demo 代码中有 end 事件监听的情况。

@H_301_7@start - callback(elapsedTime): Fired when the action starts.
@H_301_7@end - callback(elapsedTime): Fired when the action is ended.

四、支持的动作@H_403_1@

仿照 cocos2d-x,几乎支持了 cocos2d-x 中所有的动作。目前包括

@H_301_7@ActionMove
PIXI.action.MoveTo(x,y,time);
PIXI.action.MoveBy(x,time);

@H_301_7@ActionScale
PIXI.action.ScaleTo(scale_x,scale_y,time);
PIXI.action.ScaleBy(scale_x,time);

@H_301_7@ActionRotate
PIXI.action.RotateTo(rotation,time);
PIXI.action.RotateBy(rotation,time);

@H_301_7@ActionBlink
PIXI.action.Blink(count,time);

@H_301_7@ActionFade
PIXI.action.FadeIn(time);
PIXI.action.FadeOut(time);

@H_301_7@ActionSkew
PIXI.action.SkewTo(x,time);
PIXI.action.SkewBy(x,time);

@H_301_7@ActionPivot
PIXI.action.PivotTo(x,time);
PIXI.action.PivotBy(x,time);

@H_301_7@ActionTint
PIXI.action.TintTo(tint,time);
PIXI.action.TintBy(tint,time);

@H_301_7@ActionSequence
PIXI.action.Sequence(actions);

@H_301_7@ActionRepeat
PIXI.action.Repeat(action,count);

@H_301_7@RepeatForever
PIXI.action.Repeat(action);

@H_301_7@ActionDelay
PIXI.action.Delay(time);

通过上述的动作系列,进行组合,可以组合出更加复杂的动画,以前我使用这些做过一个卡牌反面的效果,很逼真。

五、其他说明@H_403_1@

代码是昨天一天断断续续完成,时间紧迫,难免有一些bug,欢迎提交代码,提交新的动作和动画。代码应该非常简单易懂,扩展新的动作应该也不复杂。

猜你在找的Cocos2d-x相关文章