Babylon.js/Playground/scripts/spriteMap.js

var createScene = function () {
    var scene = new BABYLON.Scene(engine);
    // Create camera and light
    var light = new BABYLON.PointLight("Point", new BABYLON.Vector3(5, 10, 5), scene);
    var camera = new BABYLON.FreeCamera("Camera", new BABYLON.Vector3(0, 0, -30), scene);
    
    // Attach the Controls to the canvas
    camera.attachControl(canvas, true);
    
    // Load the JSON file, for simplicity in this demonstration it is included inline.
    let atlasJSON = getJSONFile();
    
    // Load the SpriteSheet Associated with the JSON Atlas.
    let spriteSheet = new BABYLON.Texture('./textures/spriteMap/none_trimmed/Legends_Level_A.png', scene,
    false, //NoMipMaps
    false, //InvertY usuaslly false if exported from TexturePacker
    0, //Sampling Mode
    null, //Onload, you could spin up the sprite map in a function nested here
    null, //OnError
    null, //CustomBuffer
    false, //DeleteBuffer
    5 //ImageFormageType RGBA
    );
    
    spriteSheet.wrapV = BABYLON.Texture.CLAMP_ADDRESSMODE;
    spriteSheet.wrapU = BABYLON.Texture.CLAMP_ADDRESSMODE; //Or Wrap, its up to you...
    
    let backgroundSize = new BABYLON.Vector2(200,60);
    
    let background = new BABYLON.SpriteMap('background', atlasJSON, spriteSheet,
    {
        stageSize: backgroundSize,
        maxAnimationFrames:8,
        baseTile : 42,
        layerCount: 2,
        flipU: true, //Sometimes you gotta flip the depending on the sprite format.
        colorMultiply : new BABYLON.Vector3(0.3,0.3,0.3)
    },
    scene);    
    
    //Set all the available tiles to the top left corner of the background for Visual debugging, and refrence.
    for(var i = 0; i<background.spriteCount; i++){
        background.changeTiles(0, new BABYLON.Vector2(i+1, backgroundSize.y-1), i)
    }

    //TILE, FRAME, NEXT TILE, Timing, Speed
    //See documentation for Animation Map Information. - TODO
    let eighth = 1/8
    let speed = 0.5
    background.addAnimationToTile(1, 0, 2, eighth*1, speed)
    background.addAnimationToTile(1, 1, 3, eighth*2, speed)
    background.addAnimationToTile(1, 2, 4, eighth*3, speed)
    background.addAnimationToTile(1, 3, 5, eighth*4, speed)
    background.addAnimationToTile(1, 4, 6, eighth*5, speed)
    background.addAnimationToTile(1, 5, 7, eighth*6, speed)
    background.addAnimationToTile(1, 6, 8, eighth*7, speed)
    background.addAnimationToTile(1, 7, 1, 1   , speed)

    background.addAnimationToTile(25, 0, 26, eighth*1, speed)
    background.addAnimationToTile(25, 1, 27, eighth*2, speed)
    background.addAnimationToTile(25, 2, 28, eighth*3, speed)
    background.addAnimationToTile(25, 3, 29, eighth*4, speed)
    background.addAnimationToTile(25, 4, 30, eighth*5, speed)
    background.addAnimationToTile(25, 5, 31, eighth*6, speed)
    background.addAnimationToTile(25, 6, 29, eighth*7, speed)
    background.addAnimationToTile(25, 7, 25, 1     , speed)

    background.addAnimationToTile(48, 0, 49, 0.25, speed)
    background.addAnimationToTile(48, 1, 50, 0.5, speed)
    background.addAnimationToTile(48, 2, 51, 0.75, speed)
    background.addAnimationToTile(48, 4, 48, 1, speed)

    background.addAnimationToTile(49, 0, 50, 0.25, speed*0.5)
    background.addAnimationToTile(49, 1, 51, 0.5, speed*0.5)
    background.addAnimationToTile(49, 2, 48, 0.75, speed*0.5)
    background.addAnimationToTile(49, 4, 49, 1, speed*0.5)

    background.addAnimationToTile(50, 0, 51, 0.25, speed*0.3)
    background.addAnimationToTile(50, 1, 48, 0.5, speed*0.3)
    background.addAnimationToTile(50, 2, 49, 0.75, speed*0.3)
    background.addAnimationToTile(50, 4, 50, 1, speed*0.3)

    background.position.z = 5;


    //Procedurally Editing the Tiles
    //Adding Water to BG
    let tilePositions = []
    for(let x=15; x<backgroundSize.x-15; x++){
        for(let y=backgroundSize.y-26; y>0; y--){
            if(x%12 == 0){
                tilePositions.push(new BABYLON.Vector2(x, y))
            }
        }
    }
    background.changeTiles(1, tilePositions, 1)
    
    //Adding Sewer Drains to BG
    tilePositions = []
    for(let x=15; x<backgroundSize.x-15; x++){
        if(x%12 == 0){
            tilePositions.push(new BABYLON.Vector2(x, backgroundSize.y-26))
        }
    }
    background.changeTiles(1, tilePositions, 25)
    
    //More Water!
    tilePositions = []
    for(let x=15; x<backgroundSize.x-15; x++){
        for(let y=backgroundSize.y-12; y>0; y--){
            if((x+6)%12 == 0){
                tilePositions.push(new BABYLON.Vector2(x, y))
            }
        }
    }
    
    background.changeTiles(1, tilePositions, 1);

    tilePositions = [];
    
    //Random Array for placing variations of the torches animation.
    let pTiles = [48, 49, 50, 48, 49, 50, 48];
    
    //Making the Base of the level
    let levelSize = new BABYLON.Vector2(80,40);
    
    let levelBase = new BABYLON.SpriteMap('base', atlasJSON, spriteSheet,
    {
        stageSize: levelSize,
        maxAnimationFrames:8,
        baseTile : 42,
        layerCount: 2,
        flipU: true,
        colorMultiply : new BABYLON.Vector3(0.6,0.6,0.6)
    },
    scene);
    
    //Duplicating over the animation map from the background system.
    levelBase.animationMap = background.animationMap
    
    
    //Making a hole.
    tilePositions = []
    for(let x=15; x<levelSize.x-15; x++){
        for(let y=levelSize.y-15; y>15; y--){
            tilePositions.push(new BABYLON.Vector2(x, y))
        }
    }
    levelBase.changeTiles(0, tilePositions, 0)

    //Adding Columns
    tilePositions = []
    for(let x=15; x<levelSize.x-15; x++){
        for(let y=levelSize.y-16; y>16; y--){
            if(x%6 == 0){
                tilePositions.push(new BABYLON.Vector2(x, y))
            }
        }
    }
    levelBase.changeTiles(0, tilePositions, 23)

    //Adding Torches
    for(let x=15; x<levelSize.x-15; x++){
        if((x+6)%12 == 0){
            levelBase.changeTiles(1, new BABYLON.Vector2(x, 18),
            pTiles[Math.floor(Math.random()*pTiles.length)])
        }
    }

    //Adding Caps
    tilePositions = []
    for(let x=15; x<levelSize.x-15; x++){
        if(x%6 == 0){
         tilePositions.push(new BABYLON.Vector2(x, 16))
        }
    }
    levelBase.changeTiles(0, tilePositions, 24)


    //Adding Bases
    tilePositions = []
    for(let x=15; x<levelSize.x-15; x++){
        if(x%6 == 0){
            tilePositions.push(new BABYLON.Vector2(x, 25))
        }
    }
    levelBase.changeTiles(0, tilePositions, 22)

    //Now this last section was created like all the last two, except it was later exported from the browser and saved.
    //This shows how to load from the .tilemaps file
    //Additonally if you uncomment the editable argument and hit play
    //You will go into editor mode for that spritemap allowing you to paint tiles.
    // - and + to change tile number
    // [ and ] to change layer number
    //Make sure you right click on the canvas to get focus before trying to edit.
    //Left click to paint, right click to  pan camera.
    
    levelStage = new BABYLON.SpriteMap('levelStage', atlasJSON, spriteSheet,
    {
        stageSize: levelSize,
        maxAnimationFrames:8,
        baseTile : 42,
        layerCount: 2,
        flipU: true,
        //editable : true
    },
    scene);

    levelStage.loadTileMaps('./textures/spriteMap/none_trimmed/levelStage.tilemaps')
    levelStage.animationMap = background.animationMap
    levelStage.position.z = -5   

    //To download .tilemaps file for this SpriteMap uncomment the below line.
    //levelStage.saveTileMaps();

    return scene;
}

const getJSONFile = ()=>{
    return {"frames": [
{
	"filename": "blank.png",
	"frame": {"x":221,"y":221,"w":1,"h":1},
	"rotated": false,
	"trimmed": false,
	"spriteSourceSize": {"x":0,"y":0,"w":32,"h":32},
	"sourceSize": {"w":32,"h":32}
},
{
	"filename": "Falling-Water-0.png",
	"frame": {"x":1,"y":1,"w":32,"h":32},
	"rotated": false,
	"trimmed": false,
	"spriteSourceSize": {"x":0,"y":0,"w":32,"h":32},
	"sourceSize": {"w":32,"h":32}
},
{
	"filename": "Falling-Water-1.png",
	"frame": {"x":1,"y":36,"w":32,"h":32},
	"rotated": false,
	"trimmed": false,
	"spriteSourceSize": {"x":0,"y":0,"w":32,"h":32},
	"sourceSize": {"w":32,"h":32}
},
{
	"filename": "Falling-Water-2.png",
	"frame": {"x":1,"y":71,"w":32,"h":32},
	"rotated": false,
	"trimmed": false,
	"spriteSourceSize": {"x":0,"y":0,"w":32,"h":32},
	"sourceSize": {"w":32,"h":32}
},
{
	"filename": "Falling-Water-3.png",
	"frame": {"x":1,"y":106,"w":32,"h":32},
	"rotated": false,
	"trimmed": false,
	"spriteSourceSize": {"x":0,"y":0,"w":32,"h":32},
	"sourceSize": {"w":32,"h":32}
},
{
	"filename": "Falling-Water-4.png",
	"frame": {"x":1,"y":141,"w":32,"h":32},
	"rotated": false,
	"trimmed": false,
	"spriteSourceSize": {"x":0,"y":0,"w":32,"h":32},
	"sourceSize": {"w":32,"h":32}
},
{
	"filename": "Falling-Water-5.png",
	"frame": {"x":1,"y":176,"w":32,"h":32},
	"rotated": false,
	"trimmed": false,
	"spriteSourceSize": {"x":0,"y":0,"w":32,"h":32},
	"sourceSize": {"w":32,"h":32}
},
{
	"filename": "Falling-Water-6.png",
	"frame": {"x":1,"y":211,"w":32,"h":32},
	"rotated": false,
	"trimmed": false,
	"spriteSourceSize": {"x":0,"y":0,"w":32,"h":32},
	"sourceSize": {"w":32,"h":32}
},
{
	"filename": "Falling-Water-7.png",
	"frame": {"x":1,"y":246,"w":32,"h":32},
	"rotated": false,
	"trimmed": false,
	"spriteSourceSize": {"x":0,"y":0,"w":32,"h":32},
	"sourceSize": {"w":32,"h":32}
},
{
	"filename": "Large-Column-Light-0.png",
	"frame": {"x":36,"y":1,"w":32,"h":32},
	"rotated": false,
	"trimmed": false,
	"spriteSourceSize": {"x":0,"y":0,"w":32,"h":32},
	"sourceSize": {"w":32,"h":32}
},
{
	"filename": "Large-Column-Light-1.png",
	"frame": {"x":71,"y":1,"w":32,"h":32},
	"rotated": false,
	"trimmed": false,
	"spriteSourceSize": {"x":0,"y":0,"w":32,"h":32},
	"sourceSize": {"w":32,"h":32}
},
{
	"filename": "Large-Column-Light-2.png",
	"frame": {"x":106,"y":1,"w":32,"h":32},
	"rotated": false,
	"trimmed": false,
	"spriteSourceSize": {"x":0,"y":0,"w":32,"h":32},
	"sourceSize": {"w":32,"h":32}
},
{
	"filename": "Large-Column-Light-3.png",
	"frame": {"x":141,"y":1,"w":32,"h":32},
	"rotated": false,
	"trimmed": false,
	"spriteSourceSize": {"x":0,"y":0,"w":32,"h":32},
	"sourceSize": {"w":32,"h":32}
},
{
	"filename": "Large_Column-0.png",
	"frame": {"x":176,"y":1,"w":32,"h":32},
	"rotated": false,
	"trimmed": false,
	"spriteSourceSize": {"x":0,"y":0,"w":32,"h":32},
	"sourceSize": {"w":32,"h":32}
},
{
	"filename": "Large_Column-1.png",
	"frame": {"x":211,"y":1,"w":32,"h":32},
	"rotated": false,
	"trimmed": false,
	"spriteSourceSize": {"x":0,"y":0,"w":32,"h":32},
	"sourceSize": {"w":32,"h":32}
},
{
	"filename": "Large_Column-2.png",
	"frame": {"x":246,"y":1,"w":32,"h":32},
	"rotated": false,
	"trimmed": false,
	"spriteSourceSize": {"x":0,"y":0,"w":32,"h":32},
	"sourceSize": {"w":32,"h":32}
},
{
	"filename": "Large_Column-3.png",
	"frame": {"x":36,"y":36,"w":32,"h":32},
	"rotated": false,
	"trimmed": false,
	"spriteSourceSize": {"x":0,"y":0,"w":32,"h":32},
	"sourceSize": {"w":32,"h":32}
},
{
	"filename": "Roman-Column-0.png",
	"frame": {"x":36,"y":71,"w":32,"h":32},
	"rotated": false,
	"trimmed": false,
	"spriteSourceSize": {"x":0,"y":0,"w":32,"h":32},
	"sourceSize": {"w":32,"h":32}
},
{
	"filename": "Roman-Column-1.png",
	"frame": {"x":36,"y":106,"w":32,"h":32},
	"rotated": false,
	"trimmed": false,
	"spriteSourceSize": {"x":0,"y":0,"w":32,"h":32},
	"sourceSize": {"w":32,"h":32}
},
{
	"filename": "Roman-Column-2.png",
	"frame": {"x":36,"y":141,"w":32,"h":32},
	"rotated": false,
	"trimmed": false,
	"spriteSourceSize": {"x":0,"y":0,"w":32,"h":32},
	"sourceSize": {"w":32,"h":32}
},
{
	"filename": "Roman-Column-3.png",
	"frame": {"x":36,"y":176,"w":32,"h":32},
	"rotated": false,
	"trimmed": false,
	"spriteSourceSize": {"x":0,"y":0,"w":32,"h":32},
	"sourceSize": {"w":32,"h":32}
},
{
	"filename": "Roman_Column_Light-0.png",
	"frame": {"x":36,"y":211,"w":32,"h":32},
	"rotated": false,
	"trimmed": false,
	"spriteSourceSize": {"x":0,"y":0,"w":32,"h":32},
	"sourceSize": {"w":32,"h":32}
},
{
	"filename": "Roman_Column_Light-1.png",
	"frame": {"x":36,"y":246,"w":32,"h":32},
	"rotated": false,
	"trimmed": false,
	"spriteSourceSize": {"x":0,"y":0,"w":32,"h":32},
	"sourceSize": {"w":32,"h":32}
},
{
	"filename": "Roman_Column_Light-2.png",
	"frame": {"x":71,"y":36,"w":32,"h":32},
	"rotated": false,
	"trimmed": false,
	"spriteSourceSize": {"x":0,"y":0,"w":32,"h":32},
	"sourceSize": {"w":32,"h":32}
},
{
	"filename": "Roman_Column_Light-3.png",
	"frame": {"x":106,"y":36,"w":32,"h":32},
	"rotated": false,
	"trimmed": false,
	"spriteSourceSize": {"x":0,"y":0,"w":32,"h":32},
	"sourceSize": {"w":32,"h":32}
},
{
	"filename": "Sewer-Drain-0.png",
	"frame": {"x":141,"y":36,"w":32,"h":32},
	"rotated": false,
	"trimmed": false,
	"spriteSourceSize": {"x":0,"y":0,"w":32,"h":32},
	"sourceSize": {"w":32,"h":32}
},
{
	"filename": "Sewer-Drain-1.png",
	"frame": {"x":176,"y":36,"w":32,"h":32},
	"rotated": false,
	"trimmed": false,
	"spriteSourceSize": {"x":0,"y":0,"w":32,"h":32},
	"sourceSize": {"w":32,"h":32}
},
{
	"filename": "Sewer-Drain-2.png",
	"frame": {"x":211,"y":36,"w":32,"h":32},
	"rotated": false,
	"trimmed": false,
	"spriteSourceSize": {"x":0,"y":0,"w":32,"h":32},
	"sourceSize": {"w":32,"h":32}
},
{
	"filename": "Sewer-Drain-3.png",
	"frame": {"x":246,"y":36,"w":32,"h":32},
	"rotated": false,
	"trimmed": false,
	"spriteSourceSize": {"x":0,"y":0,"w":32,"h":32},
	"sourceSize": {"w":32,"h":32}
},
{
	"filename": "Sewer-Drain-4.png",
	"frame": {"x":71,"y":71,"w":32,"h":32},
	"rotated": false,
	"trimmed": false,
	"spriteSourceSize": {"x":0,"y":0,"w":32,"h":32},
	"sourceSize": {"w":32,"h":32}
},
{
	"filename": "Sewer-Drain-5.png",
	"frame": {"x":71,"y":106,"w":32,"h":32},
	"rotated": false,
	"trimmed": false,
	"spriteSourceSize": {"x":0,"y":0,"w":32,"h":32},
	"sourceSize": {"w":32,"h":32}
},
{
	"filename": "Sewer-Drain-6.png",
	"frame": {"x":71,"y":141,"w":32,"h":32},
	"rotated": false,
	"trimmed": false,
	"spriteSourceSize": {"x":0,"y":0,"w":32,"h":32},
	"sourceSize": {"w":32,"h":32}
},
{
	"filename": "Sewer-Drain-7.png",
	"frame": {"x":71,"y":176,"w":32,"h":32},
	"rotated": false,
	"trimmed": false,
	"spriteSourceSize": {"x":0,"y":0,"w":32,"h":32},
	"sourceSize": {"w":32,"h":32}
},
{
	"filename": "Stone-Platform-0.png",
	"frame": {"x":71,"y":211,"w":32,"h":32},
	"rotated": false,
	"trimmed": false,
	"spriteSourceSize": {"x":0,"y":0,"w":32,"h":32},
	"sourceSize": {"w":32,"h":32}
},
{
	"filename": "Stone-Platform-1.png",
	"frame": {"x":71,"y":246,"w":32,"h":32},
	"rotated": false,
	"trimmed": false,
	"spriteSourceSize": {"x":0,"y":0,"w":32,"h":32},
	"sourceSize": {"w":32,"h":32}
},
{
	"filename": "Stone-Platform-2.png",
	"frame": {"x":106,"y":106,"w":32,"h":32},
	"rotated": false,
	"trimmed": false,
	"spriteSourceSize": {"x":0,"y":0,"w":32,"h":32},
	"sourceSize": {"w":32,"h":32}
},
{
	"filename": "Stone-Platform-3.png",
	"frame": {"x":106,"y":141,"w":32,"h":32},
	"rotated": false,
	"trimmed": false,
	"spriteSourceSize": {"x":0,"y":0,"w":32,"h":32},
	"sourceSize": {"w":32,"h":32}
},
{
	"filename": "Stone-Platform-4.png",
	"frame": {"x":106,"y":176,"w":32,"h":32},
	"rotated": false,
	"trimmed": false,
	"spriteSourceSize": {"x":0,"y":0,"w":32,"h":32},
	"sourceSize": {"w":32,"h":32}
},
{
	"filename": "Stone-Platform-5.png",
	"frame": {"x":106,"y":211,"w":32,"h":32},
	"rotated": false,
	"trimmed": false,
	"spriteSourceSize": {"x":0,"y":0,"w":32,"h":32},
	"sourceSize": {"w":32,"h":32}
},
{
	"filename": "Stone-Platform-6.png",
	"frame": {"x":106,"y":246,"w":32,"h":32},
	"rotated": false,
	"trimmed": false,
	"spriteSourceSize": {"x":0,"y":0,"w":32,"h":32},
	"sourceSize": {"w":32,"h":32}
},
{
	"filename": "Stone-Platform-7.png",
	"frame": {"x":141,"y":106,"w":32,"h":32},
	"rotated": false,
	"trimmed": false,
	"spriteSourceSize": {"x":0,"y":0,"w":32,"h":32},
	"sourceSize": {"w":32,"h":32}
},
{
	"filename": "Stone-Platform-8.png",
	"frame": {"x":176,"y":106,"w":32,"h":32},
	"rotated": false,
	"trimmed": false,
	"spriteSourceSize": {"x":0,"y":0,"w":32,"h":32},
	"sourceSize": {"w":32,"h":32}
},
{
	"filename": "Stone-Platform-9.png",
	"frame": {"x":211,"y":106,"w":32,"h":32},
	"rotated": false,
	"trimmed": false,
	"spriteSourceSize": {"x":0,"y":0,"w":32,"h":32},
	"sourceSize": {"w":32,"h":32}
},
{
	"filename": "Stone-Platform-10.png",
	"frame": {"x":106,"y":71,"w":32,"h":32},
	"rotated": false,
	"trimmed": false,
	"spriteSourceSize": {"x":0,"y":0,"w":32,"h":32},
	"sourceSize": {"w":32,"h":32}
},
{
	"filename": "Stone-Platform-11.png",
	"frame": {"x":141,"y":71,"w":32,"h":32},
	"rotated": false,
	"trimmed": false,
	"spriteSourceSize": {"x":0,"y":0,"w":32,"h":32},
	"sourceSize": {"w":32,"h":32}
},
{
	"filename": "Stone-Platform-12.png",
	"frame": {"x":176,"y":71,"w":32,"h":32},
	"rotated": false,
	"trimmed": false,
	"spriteSourceSize": {"x":0,"y":0,"w":32,"h":32},
	"sourceSize": {"w":32,"h":32}
},
{
	"filename": "Stone-Platform-13.png",
	"frame": {"x":211,"y":71,"w":32,"h":32},
	"rotated": false,
	"trimmed": false,
	"spriteSourceSize": {"x":0,"y":0,"w":32,"h":32},
	"sourceSize": {"w":32,"h":32}
},
{
	"filename": "Stone-Platform-14.png",
	"frame": {"x":246,"y":71,"w":32,"h":32},
	"rotated": false,
	"trimmed": false,
	"spriteSourceSize": {"x":0,"y":0,"w":32,"h":32},
	"sourceSize": {"w":32,"h":32}
},
{
	"filename": "Torch-A-0.png",
	"frame": {"x":246,"y":106,"w":32,"h":32},
	"rotated": false,
	"trimmed": false,
	"spriteSourceSize": {"x":0,"y":0,"w":32,"h":32},
	"sourceSize": {"w":32,"h":32}
},
{
	"filename": "Torch-A-1.png",
	"frame": {"x":141,"y":141,"w":32,"h":32},
	"rotated": false,
	"trimmed": false,
	"spriteSourceSize": {"x":0,"y":0,"w":32,"h":32},
	"sourceSize": {"w":32,"h":32}
},
{
	"filename": "Torch-A-2.png",
	"frame": {"x":141,"y":176,"w":32,"h":32},
	"rotated": false,
	"trimmed": false,
	"spriteSourceSize": {"x":0,"y":0,"w":32,"h":32},
	"sourceSize": {"w":32,"h":32}
},
{
	"filename": "Torch-A-3.png",
	"frame": {"x":141,"y":211,"w":32,"h":32},
	"rotated": false,
	"trimmed": false,
	"spriteSourceSize": {"x":0,"y":0,"w":32,"h":32},
	"sourceSize": {"w":32,"h":32}
}],
"meta": {
	"app": "https://www.codeandweb.com/texturepacker",
	"version": "1.0",
	"image": "Legends_Level_A.png",
	"format": "RGBA8888",
	"size": {"w":279,"h":279},
	"scale": "1",
	"smartupdate": "$TexturePacker:SmartUpdate:a755ec93daaec56d1c8bcd801e167677:2e759c84cbaf9134b80c1a34b50e5c9c:9f820b9412efc8199e0407f80b8c0011$"
}
}

}