pixi.js 入門メモ リサイズする

読み込んだ画像をどうやってリサイズするのか調査した際のメモです。

コード

showResizedImage.js

function showResizedImage(){
        var stage = new PIXI.Stage(0x000000);
        var renderer = PIXI.autoDetectRenderer(1920,1080,{antialias:true});
        $("pixitest").append(renderer.view);//JQuery

        //リサイズ用コンテナを作成
        var container = new PIXI.Container();
        //コンテナをリサイズ
        container.scale.x = container.scale.y = 0.5;         

        //画像を追加
        container.addChild(new PIXI.Sprite(PIXI.Texture.fromImage("test.png")));

        //ステージにコンテナを追加
        stage.addChild(container);

        //描画
        requestAnimationFrame(animate);

        function animate(){
            requestAnimationFrame(animate);
            renderer.render(stage);  
        }

}

補足1ステージはもういらない

補足ですが、Chromeのコンソールを見てたらこんなメッセージが出てました。

You do not need to use a PIXI Stage any more , youcan simply render any conainer.

ステージはもういらないよといっています。
つまり、下記コードでも同じように動作します。

showResizedImage.js

function showResizedImage(){
        var renderer = PIXI.autoDetectRenderer(1920,1080,{antialias:true});
        $("pixitest").append(renderer.view);//JQuery

        //リサイズ用コンテナを作成
        var container = new PIXI.Container();
        //コンテナをリサイズ
        container.scale.x = container.scale.y = 0.5;
        //画像を追加
        container.addChild(new PIXI.Sprite(PIXI.Texture.fromImage("test.png")));
        //描画
        requestAnimationFrame(animate);

        function animate(){
            requestAnimationFrame(animate);
            renderer.render(container);  
        }

}

render.renderでコンテナを直接渡しています。
これでも同じように動作します。

補足2.読み込んだ画像サイズに合わせる

下記のようにすると可能ですが、正しい方法かわかりません。

showResizedImage.js

        //テクスチャを作成
        var texture=PIXI.Texture.fromImage("test.png");
        texture.baseTexture.addListener("loaded",function(){
              renderer.resize(texture.width,texture.height);
        });
        container.addChild(new PIXI.Sprite(texture));

参考 pixi.jsメモ テクスチャに読み込んだ画像サイズの取得