pixi是一个js 的轻量级的游戏类库框架，很适用于做H5的一些canvas动画特效。

这篇文章是关于pixi的入门教程 ，里面的讲解非常的到位细致，是我看到过的文章里讲解的算是最好的了。 

去年快过年看的教程 ，今天再想看的时候发现没找到，不过经过不懈的搜索还是找到 ，那就赶紧给转过来吧。

pixi(入门)

Pixi教程

基于官方教程翻译；水平有限，如有错误欢迎提PR，转载请注明出处。翻译者为htkz（完成了用 Pixi 绘制几何图形 和 显示文本 章节）和zainking(完成了其他所有章节) 另感谢htkz、NearZXH以及HHHHhgqcdxhg对错误及错别字等做出的订正。

这个教程将要一步步介绍怎么用Pixi做游戏或者交互式媒体。这个教程已经升级到 Pixi v4.5.5。如果你喜欢这个教程，你一定也喜欢这本书，它比这个教程多了80%的内容。

目录：

1. 介绍

2. 安装

1. 安装 Pixi

3. 创建舞台（stage）和画布（renderer）

4. Pixi 精灵

5. 把图像加载进纹理缓存

6. 显示精灵（sprite）

1. 使用普通的javaScript Img对象或canvas创建一个精灵

2. 给已经加载的文件设定一个名字

3. 监视加载进程

4. 一些关于Pixi的加载器的其他知识

5. 使用别名

6. 一些关于加载的其他知识

7. 定位精灵

8. 大小和比例

9. 角度

10. 从精灵图（雪碧图）中获取精灵

11. 使用一个纹理贴图集

12. 加载纹理贴图集

13. 从一个纹理贴图集创建精灵

14. 移动精灵

15. 使用速度属性

16. 游戏状态

17. 键盘响应

18. 将精灵分组

1. 局部位置和全局位置

2. 使用 ParticleContainer 分组精灵

19. 用 Pixi 绘制几何图形

1. 矩形

2. 圆形

3. 椭圆

4. 圆角矩形

5. 线

6. 多边形

20. 显示文本

21. 碰撞检测

1. 一个 hitTestRectangle 函数

22. 实例学习: 宝物猎人

1. 限制移动范围

2. 创建游戏场景

3. 创建地牢，门，猎人和宝箱

4. 创建泡泡怪(这个怪物好萌)

5. 创建血条

6. 创建提示文本

7. 用 setup 函数初始化游戏

8. 开始游戏

9. 移动猎人

10. 移动泡泡怪们

11. 碰撞检测

12. 处理到达出口和结束游戏

23. 一些关于精灵的其他知识

24. 展望未来
    i.Hexi
    ii.BabylonJS

25. 支持这个工程

介绍

Pixi是一个超快的2D渲染引擎。这意味着什么呢？这意味着它会帮助你用JavaScript或者其他HTML5技术来显示媒体，创建动画或管理交互式图像，从而制作一个游戏或应用。它拥有语义化的，简洁的API接口并且加入了一些非常有用的特性。比如支持纹理贴图集和为精灵（交互式图像）提供了一个简单的动画系统。它也提供了一个完备的场景图，你可以在精灵图层里面创建另一个精灵，当然也可以让精灵响应你的鼠标或触摸事件。最重要的的是，Pixi没有妨碍你的编程方式，你可以自己选择使用多少它的功能，你可以遵循你自己的编码风格，或让Pixi与其他有用的框架无缝集成。

Pixi的API事实上比起久经沙场又老旧的Macromedia/Adobe Flash API要精致。如果你是一个Flash开发者，将会对这样的API感觉更好。其他的同类渲染框架（比如CreateJS,Starling, Sparrow 和 Apple’s SpriteKit.）也在使用类似的API。Pixi API的优势在于它是通用的：它不是一个游戏引擎。这是一个优势，因为它给了你所有的自由去做任何你想做的事，甚至用它可以写成你自己的游戏引擎。（译者：作者这点说的很对，译者有一个朋友就使用它制作自己的Galgame引擎AVG.js）。

在这个教程里，你将会明白怎样用Pixi的强大的图片渲染能力和场景图技术来和做一个游戏联系起来。但是Pixi不仅仅能做游戏 —— 你能用这个技术去创建任何交互式媒体应用。这甚至意味着手机应用。

你在开始这个教程之前需要知道什么呢？

你需要一个对于HTML和JavaScript大致的了解。你没必要成为这方面的专家才能开始，即使一个野心勃勃的初学者也可以开始学习。这本书就是一个学习的好地方：

Foundation Game Design with HTML5 and JavaScript

我知道这本书是最好的，因为这本书是我写的！

这里有一些好的代码来帮助你开始：

Khan Academy: Computer Programming

Code Academy: JavaScript

选择一个属于你的最好的学习方式吧！

所以，明白了么？

你知道JavaScript的变量，函数，数组和对象怎么使用么？你知道JSON 数据文件是什么么? 你用过 Canvas 绘图 API么?

为了使用Pixi，你也需要在你项目的根目录运行一个web服务器，你知道什么是web服务器，怎么在你的项目文件夹里面运行它么？最好的方式是使用node.js 并且去用命令行安装http-server. 无论如何，你需要习惯和Unix命令行一起工作。你可以在这个视频中去学习怎样使用 Unix当你完成时，继续去学习 这个视频.你应该学会怎样用Unix，这是一个很有趣和简单的和电脑交互的方式，并且仅仅需要两个小时。

如果你真的不想用命令行的方式，就尝试下 Mongoose webserver:

Mongoose

或者来使用Brackets text editor这个令人惊艳的代码编辑器。他会在你点击那个“闪电按钮”的时候自动启动web服务器和浏览器。

现在，如果你觉得你准备好了了，开始吧！

（给读者的小提示：这是一个 交互式的文档.如果你有关于特殊细节的任何问题或需要任何澄清都可以创建一个GitHub工程 issue ，我会对这个文档更新更多信息。）

安装

在你开始写任何代码之前，给你的工程创建一个目录，并且在根目录下运行一个web服务器。如果你不这么做，Pixi不会工作的。

现在，你需要去安装Pixi。

安装 Pixi

这个教程使用的版本是 v4.5.5 你可以选择使用 Pixi v4.5.5的发布页面pixi文件夹下的pixi.min.js文件，或者从Pixi的主要发布页面中获取最新版本。

这个文件就是你使用Pixi唯一需要的文件，你可以忽视所有这个工程的其他文件，你不需要他们。

现在，创建一个基础的HTML页面，用一个<script>标签去加载你刚刚下载的pixi.min.js文件。<script>标签的src属性应该是你根目录文件的相对路径————当然请确保你的web服务器在运行。你的<script>标签应该看起来像是这样：

<script src="pixi.min.js"></script>

这是你用来链接Pixi和测试它是否工作的基础页面。（这里假设 

上一篇：pixi.js教程中文版--基础篇入门
下一篇：没有了