准备开始写一个【PIXI架构】的系列，本来是打算写源码阅读的文章，但是看了一顿源码之后感觉大部分源码很简单，事无巨细的翻译源码也没什么意义，只要懂得大体的代码思路或者说是架构，就能很容易弄明白源码的意思。但是也确实有一些源码需要一些数据结构的知识，最开始的几篇文章会先写一些基础的知识，然后慢慢深入，...

本贴会持续更新有质量的资源，也欢迎大家投稿。 欢迎关注专栏 pixijs游戏开发 pixi.js官方资源 pixi.js github主页 pixi.js 在线例子 pixi v5 教程资源：这里还收录了咱们专栏里面的两个例子哟, 《【教程】用pixi.js制作拼图游戏》和《【教程】使用webpack搭建pixi.js开发环境》两个教程。 社区 pixi.js中文文档 pixi.js...

教程面向已经能简单使用pixi.js的开发者，通过创建一个拼图游戏，来演示怎么完整的开发一款pixi游戏并最终发布。 此教程也被pixi.js官方收录为教程 How to make jigsaw game此项目中你可以学会怎么使用ES6+开发，怎么划分模块，怎么提前加载资源，怎么进行屏幕自适应，怎么播放音频和视频，怎么分层，怎么通过继承pixi类...

本文介绍怎么使用webpack4搭建pixi.js游戏的开发环境，怎么配置babel优化代码(tree shake)、混淆代码、合并代码、并最终将ES6+转换为ES5，怎么优化图片资源并最终发布项目。这篇文章也被pixi.js官方收录为教程 Webpack tutorial with pixi

小精灵冒险 是 Learn Pixi.js 一书中最后一个案例。点击屏幕让小精灵飞起来，小精灵上升时，会拍打翅膀，并且会有小星星产生。如果她撞到柱子上，她会爆炸成一堆小星星。帮助她通过15个柱子的间隙到达终点，界面会显示一个巨大 Finish 标志。

Pixi 内置一组功能有限的用于鼠标交互和触摸交互的方法，但是对于游戏和应用程序所需的丰富交互性，建议使用第三方库来简化操作，这篇文章介绍的是 Tink 库，它有通用的指针对象、拖放精灵、按钮对象、键盘控制 等一些有用的功能。

Pixi 没有内置的碰撞检测系统， 所以这里我们使用一个名为 Bump 的库，Bump 是一个易于使用的2D碰撞方法的轻量级库，可与 Pixi 渲染引擎一起使用。它提供了制作大多数2D动作游戏所需的所有碰撞工具。

Pixi 没有内置补间引擎，但是你可以使用很多很好的开源的补间库，比如 Tween.js 和 Dynamic.js 。如果要制作非常专业的自定义补间效果，可以使用这两个库中的其中一个。但是现在我们要使用的是一个名为 Charm.js 的专门用于 Pixi 的补间库。

平铺精灵是一种特殊的精灵，可以在一定的范围内重复一个纹理。你可以使用它们创建无限滚动的背景效果。要创建平铺精灵，需要使用带有三个参数的 TilingSprite 类（PIXI.extras.TilingSprite）

你如何创造火，烟，魔法和爆炸等效果？你制作了许多小精灵，几十，几百，甚至上千个精灵。然后对这些精灵应用一些物理效果，使它们的行为类似于你尝试模拟的元素。你还必须给他们一些关于它们应该如何出现和消失以及应该形成什么样的模式的规则。这些微小的精灵被称为粒子。你可以使用它们为游戏制作各种特效。

如果你有复杂的游戏角色或交互式对象，你可能希望该角色根据游戏环境中发生的情况，以不同的方式运行。每个单独的行为称为状态。如果你在精灵上定义状态，那么只要游戏中出现与该状态相对应的事件，就可以触发这些状态。比如，通过键盘的方向键控制一个游戏角色时，按下左箭头，角色就向左移动，其实可以理解为，按下左...

说明 看完官方教程中提到的这本书 — Learn Pixi.js ，准备写写读后感了，官方教程中所说的内容，基本上就是书的前4章，所以我就从第5章开始写写吧。 动画精灵指的是按顺序使用一系列略有不同的图像，创建的精灵，之后一帧一帧的播放这些图像，就可以产生运动的幻觉。 也就是说用这种图片 做出这样的效果 要制作动画精灵...

PixiJS 会帮助你用 JavaScript 或者其他 HTML5 技术来显示媒体，创建动画或管理交互式图像，从而制作一个游戏或应用。它拥有语义化的，简洁的 API 接口并且加入了一些非常有用的特性。比如支持纹理贴图集和为精灵（交互式图像）提供了一个简单的动画系统。它也提供了一个完备的场景图，你可以在精灵图层里面创建另一个精...