2D WebGL renderer Pixi.js v4【連載第四回】
前回の話
スプライト作成編終わりまして、(無限)アニメーションを作ってみました。
そして、キーボードの方向キーで上下左右でスプライトを移動させてみました。
スプライトのグルーピング
グルーピングすることとは、新たなContainer()を作って、同じシーン出るものをまとめて入れるrendererに渡すことです。
スプライトの管理が便利になりそうですね。
var id = resources["images/animals.json"].textures; // ねこ var cat = new Sprite(id["cat.png"]); cat.position.set(16, 16); // ハリネズミ var hedgehog = new Sprite(id["hedgehog.png"]); hedgehog.position.set(32, 32); // タイガー var tiger = new Sprite(id["tiger.png"]); tiger.position.set(64, 64); // 動物というカテゴリーを作る var animals = new Container(); // 動物たちを入れる animals.addChild(cat); animals.addChild(hedgehog); animals.addChild(tiger); stage.addChild(animals); renderer.render(stage);
ブラウザ開くと、こんな絵が出ます。
グルーピングしたanimalsは左上から貼り付けました。
ということは各自のposition.set();はanimalsの左上基準したものになります。
animals.position.set(64, 64);
animalsの位置を調整しても、中身の重ね具合は変わらないはずです。
グルーピングした後には、animalsとこのcanvasの領域がlocalとglobalみたいな関係になりました。
ここで
console.log(cat.x); > 16
出たのは最初に設定したanimals内の数値です。(つまり、ここで表示したのはlocalの数値です。)
cat.position.set(16, 16);
//parentSprite.toGlobal(childSprite.position) console.log(animals.toGlobal(cat.position)); > cat {x: 80, y: 80...}
親のスプライトのtoGlobal function使えば全体に対しての絶対位置教えてくれます。
親のスプライトの名前知らない時に、こういう書き方でも大丈夫そうです。
cat.parent.toGlobal(cat.position); // もしくはこういう書き方でも tiger.getGlobalPosition().x tiger.getGlobalPosition().y
toGlobal functionも出ましたので、toLocal functionもあります。
// sprite.toLocal(sprite.position, anyOtherSprite)
tiger.toLocal(tiger.position, hedgehog).x
tiger.toLocal(tiger.position, hedgehog).y
タイガーとハリネズミとの距離です。
スプライトたちの距離測る時使えそうですね。
小さい器を変えて、スピード上げる
今までずっと何の疑問もなく使ってたPIXI.Container();なんですが、実はそれより2倍から5倍ぐらい速いContainer(容器)があったのです。それがPIXI.ParticleContainer();です。
なぜ速いのかていうと、オプションが普通のContainerより少ないなのです。(position, scale, rotation)指定オプションの細かさによって、使い分けて良いかもしれません。
ParticleContainerを作成する時に、最大限のスプライトの数事前にパラメーターとオプションを入れられます。
var superFastSprites = new ParticleContainer( size, { rotation: true, alpha: true, scale: true, uvs: true } );
ここのオプションを全部falseを入れると、さらにスピード上がります。
今回はスプライトのグルーピングについて色々研究しました。次のチャプターの中身スプライトと少し違う話になりそうなので、一旦ここで切らせていただきます。
ではまた次回で。
シリーズ:2D WebGL renderer Pixi.js v4
参考サイト
pixi.jsの公式サイト(英語)
参考しているチュートリアル(英語)