pixi.js # 中文版基础教程

admin管理员组

文章数量:1794759

pixi.js # 中文版基础教程

本篇博客为转载文章，原文地址：github/Zainking/Learningpixi

Pixi教程

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

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

目录：

介绍

安装

安装 Pixi

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

Pixi 精灵

把图像加载进纹理缓存

显示精灵（sprite）

使用别名

一些关于加载的其他知识

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

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

监视加载进程

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

定位精灵

大小和比例

角度

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

使用一个纹理贴图集

加载纹理贴图集

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

移动精灵

使用速度属性

游戏状态

键盘响应

将精灵分组

局部位置和全局位置

使用 ParticleContainer 分组精灵

用 Pixi 绘制几何图形

矩形

圆形

椭圆

圆角矩形

线

多边形

显示文本

碰撞检测

一个 hitTestRectangle 函数

实例学习: 宝物猎人

用 setup 函数初始化游戏

创建游戏场景

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

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

创建血条

创建提示文本

开始游戏

移动猎人

限制移动范围

移动泡泡怪们

碰撞检测

处理到达出口和结束游戏

一些关于精灵的其他知识

展望未来 i.Hexi ii.Babylonjs

支持这个工程

介绍

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>标签应该看起来像是这样：

本文标签： 基础教程中文版pixijs