Chapter 31

5-03: 木のスプライト (Sprite Trees)

ちょまど (千代田まどか)
ちょまど (千代田まどか)
2022.05.01に更新

このページの原文: https://doc.babylonjs.com/start/chap5/trees

🌲 5-03: 木のスプライト (Sprite Trees)

これから、2 つの森 (500 本の木が生えてる森) を植えようと思います。

合計 1000 本の木をレンダリングするわけですが、もし全ての木に 3D モデルを使ったら処理が重くなりますね。

レンダリングのスピードを速く保つために、今回 木のスプライト (sprite) を使うことにします。
つねにカメラのほうを向いている、2D 画像です。

今回はこの画像を使います

🖼 SpriteManager クラス

木のスプライト (sprite) を操作するために、sprite manager を設定します

const spriteManagerTrees = new BABYLON
  .SpriteManager(
    "treesManager", 
    "木の画像のURL", 
    2000, 
    {width: 512, height: 1024}, 
    scene
  );

SpriteManager クラスのコンストラクタの必須引数の解説

SpriteManager クラスのコンストラクタのパラメータは、
マネージャの名前、画像のURL、スプライトの最大数、スプライトの幅と高さを指定するオブジェクト(画像の幅と高さ)です。

new SpriteManager(
  name: string,   // この SpriteManager の名前を決める。例 "treesManager"
  imgUrl: string, // sprite sheet の url
  capacity: number, // スプライトの最大数。例 2000
  cellSize: any,  // cell のサイズ。今回の場合は画像の幅と高さになる。例 {width: 512, height: 1024}
  scene: Scene,   // ホストする scene を指定
)

参考)SpriteManager ドキュメント

https://doc.babylonjs.com/typedoc/classes/babylon.spritemanager

🔍 コードの解説

さっそく木を大量に植えて森をふたつ作りましょう。
それぞれの森に 500 本ずつ植えます。

// 森 1
for (let i = 0; i < 500; i++) {
    const tree = new BABYLON.Sprite("tree", spriteManagerTrees);
    // 木を植える座標指定
    tree.position.x = Math.random() * (-30);
    tree.position.z = Math.random() * 20 + 8;
    tree.position.y = 0.5;
}

// 森 2
for (let i = 0; i < 500; i++) {
    const tree = new BABYLON.Sprite("tree", spriteManagerTrees);
    // 木を植える座標指定
    tree.position.x = Math.random() * (25) + 7;
    tree.position.z = Math.random() * -35  + 8;
    tree.position.y = 0.5;
}

↓ 動作の様子

https://playground.babylonjs.com/#KBS9I5#89

https://twitter.com/chomado/status/1520719692994084864

👀 Sprite クラスのコンストラクタのパラメータ解説

new Sprite(
  name: string,           // スプライトの名前を指定
  manager: ISpriteManager // SpriteManager を指定
)

参考)Class Sprite のドキュメント

https://doc.babylonjs.com/typedoc/classes/babylon.sprite

🛸 スプライトのアニメーション

複数枚の画像を使って、アニメーションを作成することもできます。

同じサイズの セル フレーム (cell frame (小さな区画)) が縦 4 横 5 で構成されています。

今回は、SpriteManager のコンストラクタに渡すパラメータの cellSize に、ひとつの cell のサイズ (幅と高さ) を渡します。
(前回 (アニメーション無し) では木の画像 1 枚のサイズでしたね)

const spriteManagerUFO = new BABYLON
  .SpriteManager(
    "UFOManager",
    "UFO画像のURL", 
    1, 
    {width: 128, height: 76}
  );

スプライトのアニメーションは、
ループする(true)かどうかに関係なく、
使用する最初と最後のセルとセルフレーム間の時間を指定することによって
設定されます。

const ufo = new BABYLON.Sprite("ufo", spriteManagerUFO);
ufo.playAnimation(0, 16, true, 125);

↓ 動作デモ

https://playground.babylonjs.com/#KBS9I5#90

☞ 次は

ここまでが第 5 章でした。
次の第 6 章では、動いている噴水を作ってみましょう