pixi.js(入門)

1.關於

一個關於HTML5 2D渲染引擎，它的獨特之處在於其擁有了canvas回調功能的WebGL，速度快，能夠兼容所有設備，簡單得說也就是跨平台了，我用的開發工具是WebStorm

2.參考API

https://github.com/kittykatattack/learningPixi

3.基本使用

創建一個PIXI的實例，並展示出來，通常需要以下幾步：

　　1.創建一個畫布 (render)

　　　　Pixi的渲染器對象將默認為WebGL,

　　　renderer = new PIXI.CanvasRenderer(256, 256); OR renderer = new PIXI.WebGLRenderer(256, 256);
　　　renderer.view為<canvas>對象

　　// 通過自動選擇的方式創建畫布（800x500） 　　// 並設置背景為黑色(16進制),第三個參數（options對象）是可選的 　　// 然后將其添加到body中
　　var renderer = PIXI.autoDetectRenderer(800, 500, {backgroundColor : 0x000000}); document.body.appendChild(renderer.view);

　　2.創建一個舞台 (stage)　　

// 之后的對象都存在於舞台之上
    var stage = new PIXI.Container();　　

　　 3.創建一個精靈 (sprite)　　　　　　

    // 使用圖片方式創建背景精靈
    var background = new PIXI.Sprite.fromImage('assets/img/back.png');    

　　4.把精靈加入畫布 

    // 將背景精靈放置於舞台之上
    stage.addChild(background);

5.渲染 Container

　　renderer.render(stage);

 

4.支持的動作

ActionMove
PIXI.action.MoveTo(x, y, time);
PIXI.action.MoveBy(x, y, time);

ActionScale
PIXI.action.ScaleTo(scale_x, scale_y, time);
PIXI.action.ScaleBy(scale_x, scale_y, time);

ActionRotate
PIXI.action.RotateTo(rotation, time);
PIXI.action.RotateBy(rotation, time);

ActionBlink
PIXI.action.Blink(count, time);

ActionFade
PIXI.action.FadeIn(time);
PIXI.action.FadeOut(time);

ActionSkew
PIXI.action.SkewTo(x, y, time);
PIXI.action.SkewBy(x, y, time);

ActionPivot
PIXI.action.PivotTo(x, y, time);
PIXI.action.PivotBy(x, y, time);

ActionTint
PIXI.action.TintTo(tint, time);
PIXI.action.TintBy(tint, time);

ActionSequence
PIXI.action.Sequence(actions);

ActionRepeat
PIXI.action.Repeat(action, count);

RepeatForever
PIXI.action.Repeat(action);

ActionDelay
PIXI.action.Delay(time);