Pixi.js Getting Started

pixijs-getting-started.png

[[html]]
<script src="http://miffysora.wikidot.com/local--files/webgl/pixi.min.js" type="text/javascript"></script>
</script>
<script type='text/javascript' >
// 初期化関数は`new PIXI.WebGLRenderer`か, `new PIXI.CanvasRenderer`, か`PIXI.autoDetectRenderer`です
var renderer = new PIXI.WebGLRenderer(200, 200, {backgroundColor: 0x533E25});
//renderer.backgroundColor = 0xFFFFFF;
//<canvas>要素をbodyに追加します
document.body.appendChild(renderer.view);
 
//まず、 ルートコンテナを作成しないといけません。描画シーンのコンテナになります。
var stage = new PIXI.Container();
 
//テクスチャをロードします
var texture = PIXI.Texture.fromImage('http://miffysora.wdfiles.com/local--files/pixijs/favisora.png');
    //png画像からテクスチャを生成します。
    var bunny = new PIXI.Sprite(texture);
 
   //回転中心をセット
   bunny.anchor.x = 0.5;
   bunny.anchor.y = 0.5;
   //主人公の位置座標をセット
    bunny.position.x = 30;
    bunny.position.y = 30;
    //主人公の大きさをセット
    bunny.scale.x = 2;
    bunny.scale.y = 2;
 
    // 主人公をシーンに追加します
    stage.addChild(bunny);
 
    // アニメーションループをスタートします
    animate();
function animate() {
    // start the timer for the next animation loop
    requestAnimationFrame(animate);//ここで無限再起ループがかかる
 
    // each frame we spin the bunny around a bit
    bunny.rotation += 0.01;
    // this is the main render call that makes pixi draw your container and its children.
    renderer.render(stage);
}
</script>
<body>
</body>
[[/html]]

サポートサイト Wikidot.com