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);