pixi.js

最新推荐文章于 2026-06-26 11:08:13 发布

转载最新推荐文章于 2026-06-26 11:08:13 发布 · 276 阅读

0 ·

本内容遵循CC 4.0 BY-SA版权协议

原文链接：http://www.cnblogs.com/Mdh1991/p/5388129.html

收录于

当前文章被以下社区和专栏收录：

本文详细介绍了Pixi.js渲染库及其子集pixi.lib.js的使用，包括pixi-spine.js对骨骼动画的支持。同时，深入探讨了action库对动画效果的封装，如actionEase.js、actionInstant.js等，以及它们对cocos action的借鉴。文章还讲解了如何通过cat.js、class.js和event_emiter.js等文件实现功能封装，最终使项目在浏览器中运行。

添加基本文件（库文件）

渲染库

pixi.js
pixi.lib.js是pixi.js的子集，依赖class.js,cat.js,event_emiter.js文件
pixi.scroller.js
pixi-spine.js内部刲装了对骨骼的文件的操作

action库

pixi.js只是一套渲染库，不含有action
action.js抄cocos的action刲装的，依赖class.js,cat.js,event_emiter.js文件
actionEase.js
actionInstant.js
actionInterval.js
actionManager.js

功能库，对原生javascript刲装的一系列功能函数

cat.js
class.js
event_emiter.js

让项目跑起来

新建index.html文件将以上文件加入到script标签中
添加新标签<div id = 'ab'></div>pixi里边的render加入到 div 中（相当于浏览器中加入了一个画布）
生成两个全局对象：window.kk = {}与window.GLOBAL_CONFIG = {}后面文件将有依赖与window.GLOBAL_CONFIG.dev属性
PIXI.$render生成一个画布插入到body中appendChild
kk.Class.extend动作类依赖
kk.start()该方法刲装了animate()方法与requestAnimationFrame()javascript中自带动画播放
并将kk.scene(一个全局的PIXI.Container)加到render里边,此时意味着pixi渲染的画布已经插入到浏览器中，将新的对象加入到kk.scene中就可以在画布中显示了