manmanrai’s diary

新米フロントエンジニアの勉強記録ブログ

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

ブラウザ開くと、こんな絵が出ます。

f:id:manmanrai:20170425173947p:plain

グルーピングしたanimalsは左上から貼り付けました。
ということは各自のposition.set();はanimalsの左上基準したものになります。

 animals.position.set(64, 64);

animalsの位置を調整しても、中身の重ね具合は変わらないはずです。

f:id:manmanrai:20170425174418p:plain

グルーピングした後には、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

manmanrai.hatenablog.com

参考サイト

pixi.jsの公式サイト(英語)

www.pixijs.com

参考しているチュートリアル(英語)

github.com