建立一個可以播放動畫的區域，相當於(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');
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中文網其他相關文章！
