创建一个可以播放动画的区域，相当于(canvas).
//v4.4.2之前的旧写法 //创建 var renderer = PIXI.autoDetectRenderer(w, h, { backgroundColor: 0x1099bb, transparent: true //背景是否设为透明 }); document.body.appendChild(renderer.view); //舞台添加显示对象sprite及每次渲染的监听函数 var stage = new PIXI.Container(); stage.addChild(sprite); animate(); function animate() { renderer.render(stage); requestAnimationFrame(animate); } //v4.4.2之后的新写法 //创建 var app = new PIXI.Application(w, h, { backgroundColor: 0x1099bb, transparent: false //背景是否设为透明 }); //添加显示对象sprite及每次渲染的监听函数 app.stage.addChild(sprite); app.ticker.add(function(delta) {}); document.body.appendChild(app.view);
除了autoDetectRenderer接口，还有 CanvasRenderer 和 WebGLRenderer 接口，
autoDetectRenderer 可以根据客户端对 WebGL 的支持自动创建 WebGL 或 Canvas renderer。
舞台相当于一个容器(Container),添加元素后由渲染器(renderer)渲染舞台。相当于一个顶级的容器。
在pixi.js中有个Container()类，这个类就是一个容器。
var stage = new PIXI.Container(); 添加舞台之后可以由渲染器(renderer)渲染。 renderer.render(stage); // 舞台(stage)搭建完成后渲染出来。。 ***最后
动画中最重要的元素是图片（材质），这一类特殊的图片对象在pixi.js中称为精灵（sprite）,
通过控制sprite的大小，位置及一些其他的属性，可以达到动画的效果。
在pixi中有一个sprite类，可以根据外部的图片（材质）来创建一个可以在pixi中使用的sprite对象。
有三种方式创建：
从某个单独的图片创建
从整个材质图片创建，根据材质上不同的位置和大小截取某部分来创建sprite
从材质集中创建
材质集是一个json文件，定义了某个材质图片里面图片的位置和大小等等，这样做的好处是不用
每次创建sprite都要定义位置和大小，另外一方面修改了材质图片的时候不用修改代码.
在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;
以上是Javascript中pixi框架初探的详细内容。更多信息请关注PHP中文网其他相关文章！
