在 pixi 中有一个 loader 类来管理图片的加载，并且在加载完成后调用回调函数处理。
PIXI.loader
.add("images/treasureHunter.json")
.load(setup);在完成图片加载后，PIXI.loader 会自动调用 setup 函数来进行下一步的处理。我们先定义
一个测试方法，看看是否跟预期一样。
function setup() {
console.log("加载完成.");
}
// 测试可以的话就可以，删除setup里面的东西，然后完善舞台。游戏一般要创建两个场景，一个是用来显示正常游戏画面(gameScene)，一个是用来显示游戏结果(gameOverScene)。
var gameScene;
function setup() {
gameScene = new PIXI.Container();
}在容器中要添加所有的材质并创建对应的sprite，如何添加?通过PIXI.loader.resources 可以访问加载的素材。
var gameScene;
function setup() {
gameScene = new PIXI.Container();
}注意：pixi需要在一个服务器上运行，推荐调试的时候使用 http-server 本地服务器，
游戏开始界面场景
游戏结束界面场景（一个显示一个消失）
首先需要创建图形类var graphics = new PIXI.Graphics();
graphics.beginFill(0xFF3300); //图形填充颜色
graphics.lineStyle(4, 0xffd900,1); //图形边框宽度，颜色，透明度
按线条点位坐标绘图
graphics.moveTo(50,50); //图形绘制起点 graphics.lineTo(250, 50); //连线到下一个点 graphics.lineTo(100, 100); graphics.lineTo(50, 50); graphics.endFill(); // 图形结束标志
绘制方块graphics.drawRect(50, 250, 120, 120);
//参数分别为x点，y点坐标。方块长、方块宽
绘制圆角方块graphics.drawRoundedRect(150, 450, 300, 100, 15);
// 前四个参数与绘制方块相同，最后一个圆角半径
绘制圆形graphics.drawCircle(470, 90,60);
//参数为x点坐标、y点坐标、圆形半径 60
首先需要创建一个文字类 var basicText = new PIXI.Text('Basic text in pixi');
随后可以设值x,y坐标 basicText.x = 30;
复杂的带style类
var style = new PIXI.TextStyle({
fontFamily: 'Arial', //字体
fontSize: 36, //字体大小
fontStyle: 'italic', //字体类型（斜体）
fontWeight: 'bold', //加粗
fill: ['#ffffff', '#00ff99'], //由上到下的过渡颜色
stroke: '#4a1850', //文字边框颜色
strokeThickness: 5, //文字边框粗细
dropShadow: true, //阴影
dropShadowColor: '#000000', //阴影颜色
dropShadowBlur: 4, //阴影模糊程度
dropShadowAngle: Math.PI / 6, //阴影角度
dropShadowDistance: 6, //阴影距离
wordWrap: true, //自动换行
wordWrapWidth: 440
});
var richText = new PIXI.Text('Rich text with a lot of options', style);
richText.x = 30;
richText.y = 180;下载本文