Javascript中pixi框架初探

pixi.js

建立渲染器（renderer）

建立一個可以播放動畫的區域，相當於(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。

創建舞台(stage)

舞台相當於一個容器(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);

treasureHunter.json 是材質集的設定文件，setup 是完成圖片載入後所呼叫的回調函數。
PIXI.loader 在載入完成後可以透過 PIXI.loader.resources 來取得載入的圖片。

回呼函數

在完成圖片載入後，PIXI.loader 會自動呼叫 setup 函數來進行下一步的處理。我們先定義
一個測試方法，看看是否跟預期一樣。

function setup() {
    console.log("加载完成.");
}
// 测试可以的话就可以，删除setup里面的东西，然后完善舞台。

建立場景(gameScene)

遊戲一般要創建兩個場景，一個是用來顯示正常遊戲畫面(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 本地伺服器，

• 遊戲開始介面場景

• 遊戲結束介面場景（一個顯示一個消失）

#利用pixi繪製圖形

繪製線條圖形

• 首先需要建立圖形類別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
  

pixi中的文字應用（初）

• 首先需要建立一個文字類別

  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中文網其他相關文章！