Babylon.jsのチュートリアルをやってみるその16

これは

昨日に引き続きBabylon.jsのチュートリアルをやっていく記事です。
自分であとで思い返す用のメモでもあります。

今日の参照

doc.babylonjs.com

Sprite

Spriteとは2Dゲームでよく見かけるキャラがアニメーションしたり
たくさんの木を生やしたりするのに使う。あれです。
木を生やした感じが以下の画像。
f:id:torikizi:20190622162523j:plain

まずはSpriteManagerを作ります。
作ったマネージャはそのままだと何もしないので、インスタンスを作成してあげます。
下のコードでは木が一本だけ表示されます。
(マネージャ側には数を定義しているので同一の場所に2000表示されていると考えられる)

// スプライトマネージャを作成
// マネージャ名,テクスチャ,インスタンス数,セルサイズ,追加するシーン
var spriteManagerTrees = new BABYLON.SpriteManager("treesManager", "Assets/Palm-arecaceae.png", 2000, 800, scene);
// ↓のようなセルサイズのWidth/Heightを指定した定義の仕方もある
// new BABYLON.SpriteManager("playerManager","Assets/Player.png", 2, {width: 64, height: 64}, scene);

// インスタンス作成
var tree = new BABYLON.Sprite("tree", spriteManagerTrees);

それでは味気ないので2000の座標をランダムにします。

    // 作成したインスタンスにパラメータを渡して座標をランダムにする
    for (var i = 0; i < 2000; i++) {
        var tree = new BABYLON.Sprite("tree", spriteManagerTrees);
        tree.position.x = Math.random() * 100 - 50;
        tree.position.z = Math.random() * 100 - 50;
        tree.isPickable = true;
    }

Sprite Animation

たくさんの画像を用意することでanimationも可能です。
2Dゲームでキャラクタが倒れたりあるったりするアニメーションを表現できます。

// スプライトマネージャは1テクスチャずつの定義なので木と同時に表現したい場合はまた
// 作成する必要がある
var spriteManagerPlayer = new BABYLON.SpriteManager("playerManager", "textures/player.png", 2, 64, scene);

// 同一のキャラクタを複数定義したい場合は別名でインスタンス作成すればOK
var player = new BABYLON.Sprite("player", spriteManagerPlayer);
var player2 = new BABYLON.Sprite("player2", spriteManagerPlayer);

アニメーションさせたい場合は以下のようにplayAnimatiionをしてあげればOK

player.playAnimation(0, 40, true, 10);

「cellIndex 」を使えばspriteの特定の部分を切り取って表示することも可能

今日はここまで 次はParticleをやります。