pixijs使用教程--基礎篇

標籤：style   blog   http   io   color   os   ar   使用   java   

Pixi.js使用WebGL，是一個超快的HTML5 2D渲染引擎。作為一個Javascript的2D渲染器，Pixi.js的目標是提供一個快速的、輕量級而且是兼任所有裝置的2D庫。提供無縫 Canvas 回退，支援主流瀏覽器，包括案頭和移動。 Pixi渲染器可以開發人員享受到硬體加速，但並不需要瞭解WebGL。

線上Demo

Pixi.js的GitHub首頁上，列舉了很多線上Demo。

GitHub：https://github.com/GoodBoyDigital/pixi.js/

官網： http://www.pixijs.com/

API :http://www.goodboydigital.com/pixijs/docs/

官方教程：http://www.goodboydigital.com/pixi-js-tutorial-getting-started/

https://github.com/GoodBoyDigital/pixi.js 打包下載後，解壓，在example裡邊有23個應用樣本。

需要說明的是，有些樣本需要使用http才能瀏覽，也就是說file://的方式有些資源是無法顯示的。

=========================================================================

// 建立一個PIXI的執行個體，並展示出來，通常需要六步
// 1：建立一個舞台
// 2：建立一個畫布
// 3：把畫布插入DOM中
// 4：建立一個精靈
// 5：把精靈加入畫布
// 6：把畫布加入舞台

 

// 名詞解釋
// 舞台(stage):
// A Stage represents the root of the display tree.
// Everything connected to the stage is rendered
// 所有要渲染的對象都必須串連到舞台中才能被顯示出來
// 舞台處於整個樹形展示結構的最底層，可以理解為背景
// demo :
// var stage = new PIXI.Stage(0xFFFFFF);
//
// 畫布(renderer):
// 選用canvas或webGL進行渲染的一個地區
// demo:
// var renderer = PIXI.autoDetectRenderer(400, 300);
//
// 紋理(texture):
// 可以理解成一種封裝圖片的結構，它本身不能直接用於顯示
// 可以通過精靈用於顯示
// demo:
// var texture = PIXI.Texture.fromImage("bunny.png");
//
//精靈(sprite):
// 可以直接用於舞台顯示的對象,可以理解為DOM中的element.
// 精靈可以直接用圖片建立
// 也可以先通過建立紋理，再於紋理建立精靈
// demo :
// 1：var sprite = new PIXI.Sprite.fromImage(‘assets/image.png‘);
// 2：var texture = PIXI.Texture.fromImage("bunny.png");
// var sprite = new PIXI.Sprite(texture);

//  sprite.position.x = 30; //沒有單位

//  sprite.position.y = 20; // 這就和給element設定樣式是一樣的道理。

// 關於對精靈的操作，參考官方樣本
//
// 事件(event)：
// PIXI庫在精靈和舞台上提供了事件,用於互動.
// demo:
// stage.click = function(data){
// var event = data.originalEvent
//
// }
// sprite.click = function(data){
//var event = data.originalEvent
//var target = event.target
////阻止預設行為,sprite.buttonMode = false;
//event.preventDefault();
//
// }
//
// 此外，還有.mousedown,.mouseover,.mouseout,
// .mousemove,.mouseup ,.mouseupoutside ,
// .touchstart,.touchend,.tap
//
// 需要注意的是對於有事件的精靈，通常需要設定sprite.interactive = true
// 對於作按鈕用的精靈，需要設定sprite.buttonMode = true;
// 與DOM的事件不同的是，精靈中的事件，是進行了二次封裝的，
// 通常需要用var event = data.originalEvent來與普通dom中的event對象保持一至
// 不過又不完全相同，如data.originalEvent.stopPropagation()就不起作用.

// 關於stopPropagation的問題，我問過pixijs的開發人員，他回覆說stopPropagation是dom中的概念，在webGL中是沒有的，所以不能說是pixi的問題。
// 下面使用PIXI庫顯示一張圖片的簡單例示：
//
/**
var stage = new PIXI.Stage();
var renderer = PIXI.autoDetectRenderer(400, 300);

document.body.appendChild(renderer.view);
var sprite = new PIXI.Sprite.fromImage(‘bunny.png‘);
stage.addChild(sprite);

*/
//
// 直接貼出上面的代碼，在網頁上只能看到漆黑的背景而看不到圖片
// 這是因為精靈的建立是非同步，必須等載入完圖片之後才能把精靈加入舞台中
//
// 這有兩種解決方式：
// 第1種就是不斷的去重新整理舞台。
// 如:
// requestAnimFrame(animate);
// function animate(){
// renderer.render(stage);
// requestAnimFrame(animate);
// }
// 第2種是在圖片載入完成的回調中執行。這僅限於不需要重複重新整理的精靈、
// 如：
// sprite.texture.baseTexture.on(‘loaded‘,function(){
//renderer.render(stage);
// })
//

// 在項目中實踐的時候發現用基於baseTexture的loaded事件有兩個問題
// 1：如果圖片載入失敗怎麼辦？
// 2：同時載入多張圖片的時候，有些沒有觸發loaded回調
//
// 經過實踐，找到一個更加穩妥的辦法
// var img = new Image();
// img.src = ‘bunny.png‘;
// img.onload = function(){
// var baseTexture = new PIXI.BaseTexture(this);
// var texture = new PIXI.Texture(baseTexture);
// var sprite = new PIXI.Sprite(texture);
// stage.addChild(sprite);
// renderer.render(stage);
// }

//批量載入圖片的時候實踐證明也是適用的。

//最後，請用localhost://xxxxxx的方式進瀏覽

細心的比較也許你會發現，我和官方的樣本不相同，官方使用了requestAnimFrame( animate )，而然我這裡沒有用，為什嗎？因為我只是要顯示一張圖片而已，沒有必要不斷的去重新整理舞台。requestAnimFrame( animate );這個是在精靈有動畫的時候才需要用到。當然，如果不考慮效能，對一張靜態圖不斷的重新整理也沒有什麼問題。

完整的樣本：

var stage = new PIXI.Stage(0xFFFFFF);        var renderer = PIXI.autoDetectRenderer(400, 300);        document.body.appendChild(renderer.view);        var sprite = new PIXI.Sprite.fromImage(‘bunny.png‘);        stage.addChild(sprite);        sprite.texture.baseTexture.on(‘loaded‘,function(){            renderer.render(stage);        })        sprite.interactive = true        stage.click = stage.tap = function(data){            console.log(data.originalEvent.target);            //alert(‘you hit the stage‘)        }        sprite.mousedown = sprite.touchstart =function(data){            // stop the default event...            data.originalEvent.preventDefault();            this.data = data;            this.alpha = 0.9;            this.dragging = true;            console.log(‘mousedown‘);        }        sprite.mouseup = sprite.mouseupoutside = sprite.touchend = function(data){            this.alpha = 1            this.dragging = false;            // set the interaction data to null            this.data = null;            console.log(‘mouseup‘);        };        sprite.mousemove = sprite.touchmove = function(data){            if(this.dragging){                var newPosition = this.data.getLocalPosition(this.parent);                this.position.x = newPosition.x;                this.position.y = newPosition.y;                console.log(‘mousemove‘)                renderer.render(stage);            }        }        //requestAnimFrame(animate);        function animate(){               renderer.render(stage);               requestAnimFrame(animate);           }

以上建立的是通過pixi建立靜止的精靈，及事件邦定。這個在官方沒有找到樣本，特補充一下。（或許pixi就是為動畫而生的，所以沒有考慮這種簡單的需求了）

如果需要動畫效果的精靈，官方提供了多種方法。這裡就不再細述了。我目前正在研究這一塊，有興趣的可以和我一起交流！

 

pixijs使用教程--基礎篇