请选择 进入手机版 | 继续访问电脑版
一、背景说明

最近有一个需求,大概就是做一个 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 中引入。基本的代码如下:
[code][/code]看上面的 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,欢迎提交代码,提交新的动作和动画。代码应该非常简单易懂,扩展新的动作应该也不复杂。
分享到 :
0 人收藏

2 个回复

倒序浏览
余温散尽  中级会员 | 2018-12-6 09:45:24
你应该直接用phaser,也是基于pixi.js,是当下的热门开源引擎!
我本善良  高级会员 | 2018-12-6 09:45:24
我现在才知道了
您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

Archiver|手机版|小黑屋|翁笔

© 2001-2018 Wengbi.com

返回顶部