babylon.js 學習筆記(9)

接上回繼續，做爲一個遊戲引擎，怎能沒有Sprite(精靈)? 下面是基本示例：

const createScene = function () {
            const scene = new BABYLON.Scene(engine);

            const camera = new BABYLON.ArcRotateCamera("Camera", -Math.PI / 2, Math.PI / 2, 8, new BABYLON.Vector3(0, 0, 0));
            camera.attachControl(canvas, true);
            const light = new BABYLON.PointLight("Point", new BABYLON.Vector3(5, 10, 5));

            // Create a sprite manager
            // Parameters : name, imgUrl, capacity(最大容量，即樹的總數), cellSize, scene
            const spriteManagerTrees = new BABYLON.SpriteManager("treesManager", "../assets/img/palm.png", 2000, { width: 512, height: 1024 });
            const tree1 = new BABYLON.Sprite("tree", spriteManagerTrees);
            //注：樹的高寬比例，應該跟cellSize的比例一致，避免失真
            tree1.width = 1;
            tree1.height = 2;
            tree1.position.y = -0.5;


            const tree2 = new BABYLON.Sprite("tree2", spriteManagerTrees);
            tree2.width = 1;
            tree2.height = 2;
            tree2.position.x = -1.5;
            tree2.position.y = 0.8;
            //逆時針轉45度
            tree2.angle = Math.PI / 4;

            const tree3 = new BABYLON.Sprite("tree3", spriteManagerTrees);
            tree3.width = 1;
            tree3.height = 2;
            tree3.position.x = 1.5;
            tree3.position.y = 0.8;
            //順時針轉45度
            tree3.angle = -Math.PI / 4;

            const tree4 = new BABYLON.Sprite("tree4", spriteManagerTrees);
            tree4.width = 1;
            tree4.height = 2;
            tree4.position.x = -1.5;
            tree4.position.y = -1.5;
            //垂直翻轉
            tree4.invertV = true;

            const tree5 = new BABYLON.Sprite("tree5", spriteManagerTrees);
            tree5.width = 1;
            tree5.height = 2;
            tree5.position.x = 1.5;
            tree5.position.y = -1.5;
            //水平翻轉
            tree5.invertU = true;


            showText();

            return scene;
        }


        const showText = function () {
            const ui = BABYLON.GUI.AdvancedDynamicTexture.CreateFullscreenUI("ui");
            const text1 = new BABYLON.GUI.TextBlock("t0", "tree1");
            const text2 = new BABYLON.GUI.TextBlock("t1", "tree2");
            const text3 = new BABYLON.GUI.TextBlock("t2", "tree3");
            const text4 = new BABYLON.GUI.TextBlock("t1", "tree4");
            const text5 = new BABYLON.GUI.TextBlock("t2", "tree5");

            text1.color = 'white';
            text2.color = 'white';
            text3.color = 'white';
            text4.color = 'white';
            text5.color = 'white';

            text1.top = '-10%';
            text2.top = '-27%';
            text3.top = '-27%';
            text4.top = '4%';
            text5.top = '4%';

            text1.left = '-0%';
            text2.left = '-18%';
            text3.left = '18%';
            text4.left = '-15%';
            text5.left = '15%';

            ui.addControl(text1);
            ui.addControl(text2);
            ui.addControl(text3);
            ui.addControl(text4);
            ui.addControl(text5);
        }

在線地址: https://yjmyzz.github.io/babylon_js_study/day09/01.html

有1點要注意：

Sprite沒有roration、scaling 這類mesh對象常有的屬性， 要調整Sprite的大小，只能通過width/height來設置，想旋轉/翻轉sprite，可以通過angle、invertV、insertU來控制。

把這顆樹複製一堆，可以模擬出1片小樹林：

const createScene = function () {
    const scene = new BABYLON.Scene(engine);

    const camera = new BABYLON.ArcRotateCamera("Camera", -Math.PI / 2, Math.PI / 2, 8, new BABYLON.Vector3(0, 0, 0));
    camera.attachControl(canvas, true);
    const light = new BABYLON.PointLight("Point", new BABYLON.Vector3(5, 10, 5));

    // Create a sprite manager
    // Parameters : name, imgUrl, capacity(最大容量，即樹的總數), cellSize, scene
    const spriteManagerTrees = new BABYLON.SpriteManager("treesManager", "../assets/img/palm.png", 500, { width: 512, height: 1024 });
    //Mutliple trees
    for (let i = 0; i < 500; i++) {
        const tree = new BABYLON.Sprite("tree", spriteManagerTrees);
        tree.width = 1;
        tree.height = 2;
        tree.position.x = BABYLON.Scalar.RandomRange(-25, 25);
        tree.position.z = BABYLON.Scalar.RandomRange(-25, 25);
    }


    return scene;
}

在線地址: https://yjmyzz.github.io/babylon_js_study/day09/02.html

純靜態的Sprite從效果上看，跟html中的img標籤差不多，只是簡單導入一張圖片而已。Sprite還可以實現類似gif的動畫，比如有下面這張圖：

const spriteManagerUFO = new BABYLON.SpriteManager("ufoManager", "../assets/img/ufo.png", 1, { width: 128, height: 76 });
const ufo = new BABYLON.Sprite("ufo", spriteManagerUFO);
ufo.width = 1;
ufo.height = 0.5;

//playAnimation(from: number, to: number, loop: boolean, delay: number, onAnimationEnd: Nullable<(() => void)>): void
ufo.playAnimation(0, 16, true, 125);

在線地址：https://yjmyzz.github.io/babylon_js_study/day09/03.html

其大致原理，就是把ufo.png這張圖，按width:128，height:76 分割成17個cell(單元格)，調用 playAnimation 方法時，從0~16（注：下標索引從0開始）依次播放，每1個cell播放的時間間隔爲125ms, 第3個true表示循環播放，詳情可見官方API文檔。

此外，加載圖片時，還能人爲指定加載第幾個cell ，比如下面這張圖，總共有45個cell

下面的代碼演示了，如何加載指定Cell：

const createScene = function () {
    const scene = new BABYLON.Scene(engine);

    const camera = new BABYLON.ArcRotateCamera("Camera", -Math.PI / 2, Math.PI / 2, 8, new BABYLON.Vector3(0, 0, 0));
    camera.attachControl(canvas, true);
    const light = new BABYLON.PointLight("Point", new BABYLON.Vector3(5, 10, 5));

    const spriteManagerPlayer = new BABYLON.SpriteManager("playerManager", "../assets/img/player.png", 10, 64);

    const player1 = new BABYLON.Sprite("player1", spriteManagerPlayer);
    player1.cellIndex=0;
    player1.position.x = -1;

    const player2 = new BABYLON.Sprite("player2", spriteManagerPlayer);
    player2.cellIndex=11;
    player2.position.x = 0;

    const player3 = new BABYLON.Sprite("player3", spriteManagerPlayer);
    player3.cellIndex=44;
    player3.position.x = 1;


    const player4 = new BABYLON.Sprite("player4", spriteManagerPlayer);
    player4.position.y = 1.5;
    player4.position.x = -0.8;
    player4.playAnimation(0,40,true,100);

    const player5 = new BABYLON.Sprite("player5", spriteManagerPlayer);
    player5.position.y = 1.5;
    player5.position.x = 0.8;
    player5.playAnimation(0,9,true,100);

    return scene;
}

在線地址：https://yjmyzz.github.io/babylon_js_study/day09/04.html

 

最後，綜合運用一把，把UFO、棕櫚樹 加入先前的村莊中

const createScene = function () {
    const scene = new BABYLON.Scene(engine);

    const camera = new BABYLON.ArcRotateCamera("camera", -Math.PI / 2, Math.PI / 2.5, 15, new BABYLON.Vector3(0, 0, 0));
    camera.upperBetaLimit = Math.PI / 2.2;
    camera.attachControl(canvas, true);
    const light = new BABYLON.HemisphericLight("light", new BABYLON.Vector3(1, 1, 0));

    const spriteManagerTrees = new BABYLON.SpriteManager("treesManager", "../assets/img/palm.png", 2000, { width: 512, height: 1024 }, scene);

    //We create trees at random positions
    for (let i = 0; i < 200; 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;
    }

    for (let i = 0; i < 200; 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;
    }

    //Skybox
    const skybox = BABYLON.MeshBuilder.CreateBox("skyBox", { size: 150 }, scene);
    const skyboxMaterial = new BABYLON.StandardMaterial("skyBox", scene);
    skyboxMaterial.backFaceCulling = false;
    skyboxMaterial.reflectionTexture = new BABYLON.CubeTexture("../assets/img/sky/skybox", scene);
    skyboxMaterial.reflectionTexture.coordinatesMode = BABYLON.Texture.SKYBOX_MODE;
    skyboxMaterial.diffuseColor = new BABYLON.Color3(0, 0, 0);
    skyboxMaterial.specularColor = new BABYLON.Color3(0, 0, 0);
    skybox.material = skyboxMaterial;

    BABYLON.SceneLoader.ImportMeshAsync("", "../assets/glb/", "valleyvillage.glb");

    const spriteManagerUFO = new BABYLON.SpriteManager("ufoManager", "../assets/img/ufo.png", 1, { width: 128, height: 76 });
    const ufo = new BABYLON.Sprite("ufo", spriteManagerUFO);
    ufo.width = 1;
    ufo.height = 0.5;
    ufo.position.y = 5;
    ufo.position.x = 3;
    ufo.position.z = 2;

    //playAnimation(from: number, to: number, loop: boolean, delay: number, onAnimationEnd: Nullable<(() => void)>): void
    ufo.playAnimation(0, 16, true, 125);

    return scene;
}

在線地址：https://yjmyzz.github.io/babylon_js_study/day09/05.html

 

參考文檔：

https://doc.babylonjs.com/features/featuresDeepDive/sprites/sprite_manager

https://doc.babylonjs.com/features/introductionToFeatures/chap5/trees