小试Pixi.js

Pixi.js是一个用JavaScript写的2D渲染引擎，可以用来在浏览器里做交互图形、动画和游戏等的“富视觉”应用，主打支持硬件GPU渲染的WebGL API，如浏览器不支持WebGL，Pixi则会退用HTML5 Canvas来渲染。 Pixi主要负责渲染画面，很多其它功能开发者得自己写或搭配其它库来使用，如用来开发网页游戏的Phaser框架就是使用Pixi来做渲染。下面内容选自Learning Pixi.js一书，可以来小试一下Pixi。

备注：例子中的JavaScript用的是ES6，var 变成 let， function（）{} 变成 () => {}。

制作精灵（sprites)

Pixi中的基础建造模块是一个叫做sprite的对象。 sprite就是可以用代码控制的图形。 你可以控制它们的位置、尺寸和一些其他属性，用以制作交互和动画图形。学习如何制作和控制sprite确是学习使用Pixi最重要的事情，如果你知道如何制作和显示sprite，你就离开始制作游戏或者其他任何一种交互程序只有一小步的距离了。

本章， 你将学习在Pixi的Canvas中显示和定位sprite所需的必备知识，包括下列内容：

• 如何制作root container（根容器），叫做stage（舞台）
• 如何新建一个renderer（渲染器）
• 使用加载器加载图形到Pixi的纹理缓存中（texture cache）
• 使用加载后的图形包括tilesets和texture atlases，制作sprite

在开始制作sprite之前，让我们来创建一个用于显示它们的类似长方形的屏幕。

创建renderer和stage

Pixi有一个渲染器对象（renderer）给你用来创建一个显示屏幕。它会自动生成一个HTML 元素并解决在canvas里显示你的图像的问题，但是你还得另外创建一个叫stage的Pixi容器对象（别担心，一会儿你就知道到底什么是容器对象和为什么需要它们了）。这个stage对象将被当作一个根容器（root container），用于显示我们需要Pixi显示的所有东西。下面是创建一个renderer和stage的代码，将这些代码加入你的HTML文档的