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