Can add sprite from atlas map

[phreaknation]

Need some help adding a sprite from an atlas frame. Basically I can not use the default tilemap system so I am making a loader for what I need. However when I get to the line below, I get an error message which is weird as the frames are there and everything else is loaded fine.

 

Line:

tile = game.add.sprite(x, y, 'tileset-' + tileData.parentName.toLowerCase(), tileData.name);

 

Error:

Cannot set frameName: grass_alive

 

main.js

var game = new Phaser.Game(800, 400, Phaser.CANVAS, 'test', null, true, false);var BasicGame = function (game) { };BasicGame.Boot = function (game) {    // nothing here};var baseMap,    water = [],    worldObjects,    players = [],    touching,    shift,    z,    cursorPos,    cursor,    scale = 1,    scaled = true;BasicGame.Boot.prototype = {    preload: function () {        game.load.atlas('tileset-land', 'assets/tilesets/land.png', 'assets/tilesets/land.json');        game.load.atlas('tileset-objects', 'assets/tilesets/objects.png', 'assets/tilesets/objects.json');        game.load.json('tileset-land-json', 'assets/tilesets/land.json');        game.load.json('tileset-objects-json', 'assets/tilesets/objects.json');        game.load.image('player', 'assets/images/w64xh128.png');        game.load.json('demo', 'assets/maps/demo.json');    },    create: function () {        game.physics.startSystem(Phaser.Physics.ARCADE);        game.time.advancedTiming = true;        game.debug.renderShadow = false;        game.stage.disableVisibilityChange = true;        game.stage.backgroundColor = 0x86bfda;        // Get mapsize and set the boundaries        game.world.setBounds(0, 0, 1024*4, 1024*4);        baseMap = game.add.group();        worldObjects = game.add.group();        // tilemap.addTilesetImage('land', 'tileset-land');        // layerLand = tilemap.createLayer('Land');        // layerLand.resizeWorld();        renderIsometricMap('demo', baseMap);        for (var i = 0; i <= game.rnd.pick([2, 3, 4]); i++) {            player = game.add.sprite(game.rnd.pick([48, 128, 256]), game.rnd.pick([48, 128, 256]), 'player', 0, baseMap);            // player.tint = '0x' + ((Math.random()*8000000<<0) + 8000000).toString(16); //86dabf            player.tint = 0xa0a0a0; // set dark tint to not selected players            player.anchor.set(0.5);            // player physics            player.body.collideWorldBounds = true;            players.push(player);        }        setActivePlayer(players[0]);        // Set up our controls.        this.cursors = game.input.keyboard.createCursorKeys();        this.game.input.keyboard.addKeyCapture([            Phaser.Keyboard.LEFT,            Phaser.Keyboard.RIGHT,            Phaser.Keyboard.UP,            Phaser.Keyboard.DOWN,            Phaser.Keyboard.SPACEBAR,            Phaser.Keyboard.SHIFT        ]);        touching = player.body.touching;        var space = game.input.keyboard.addKey(Phaser.Keyboard.SPACEBAR),            shift = game.input.keyboard.addKey(Phaser.Keyboard.Shift);        space.onDown.add(function () {           // player.body.velocity.z = 300;           player.body.velocity.z += 100;        }, this);    },    update: function () {        game.physics.arcade.collide(players, worldObjects);        // Update the cursor position.        players.forEach(function (player) {            if (false) {                setActivePlayer(player);            }        });        // Move the player at this speed.        var walk = 200,            run = walk / 100 * 165;        // if (game.input.keyboard.isDown(Phaser.Keyboard.SHIFT)) Log('info', 'shift')        // if (this.cursors.up.isDown) {        //     if (game.input.keyboard.isDown(Phaser.Keyboard.SHIFT)) {        //         activePlayer.body.velocity.y = -run;        //     } else {        //         activePlayer.body.velocity.y = -walk;        //     }        // }        // else if (this.cursors.down.isDown) {        //     if (game.input.keyboard.isDown(Phaser.Keyboard.SHIFT)) {        //         activePlayer.body.velocity.y = run;        //     } else {        //         activePlayer.body.velocity.y = walk;        //     }        // }        // else {        //     activePlayer.body.velocity.y = 0;        // }        // if (this.cursors.left.isDown) {        //     if (game.input.keyboard.isDown(Phaser.Keyboard.SHIFT)) {        //         activePlayer.body.velocity.x = -run;        //     } else {        //         activePlayer.body.velocity.x = -walk;        //     }        // }        // else if (this.cursors.right.isDown) {        //     if (game.input.keyboard.isDown(Phaser.Keyboard.SHIFT)) {        //         activePlayer.body.velocity.x = run;        //     } else {        //         activePlayer.body.velocity.x = walk;        //     }        // }        // else {        //     activePlayer.body.velocity.x = 0;        // }    },    render: function () {        baseMap.forEach(function (tile) {            // if () {                // game.debug.body(tile, 'rgba(0, 192, 0, 0.5)', false);            // }        });        // game.debug.body(activePlayer, 'rgba(189, 221, 235, 0.6)', false);        game.debug.text(game.time.fps || '--', 2, 14, "#a7aebe");        // game.debug.text(Phaser.VERSION, 2, game.world.height - 2, "#ffff00");    }};function isBlocking(player, getDirection, checkDown) {    blocked = false, direction = [];    blocking = player.body.blocked    if (blocking.backX) {        blocked = true;    }    if (blocking.backY) {        blocked = true;    }    if (blocking.frontX) {        blocked = true;    }    if (blocking.frontY) {        blocked = true;    }    if (checkDown && blocking.down) {        blocked = true;    }    if (blocking.up) {        blocked = true;    }        if (getDirection) {        return [blocked, direction];    } else {        return blocked;    }}function getActivePlayer(p) {    for (var index in players) {        player = players[index];        if (player.selected) {            p = player;        }    }    return p || players[0];}function setActivePlayer(player) {    unsetActivePlayer();    player.selected = true;    player.altTint = player.tint;    player.tint = '0xffffff';    game.camera.follow(player);    return player;}function unsetActivePlayer() {    for (var index in players) {        player = players[index];        if (player.selected) {            activePlayer.tint = activePlayer.altTint;            player.selected = false;        }    }}function Log(type, message) {    switch (type.toLowerCase()) {        case 'debug':            console.debug(message);            break;        case 'error':            console.error(message);            break;        case 'warn':            console.warn(message);            break;        case 'info':            console.info(message);            break;        default:            console.log(message);        break;    }}function renderIsometricMap(mapKey, group) {    map = game.cache.getJSON(mapKey);    var tilesets = loadTilesets(map.tilesets);    for (var layerIndex = 0; layerIndex <= map.layers.length -1; layerIndex++) {        var layer = map.layers[layerIndex];        if (layer.type == 'tilelayer') {            if (layer.height * layer.width == layer.data.length) {                loadMapLayer(layer, tilesets);            }        } else if (layer.type == 'objectgroup') {            loadObjectLayer(layer)        }    }}function loadTilesets(tilesets) {    ts = []    for (index in tilesets) {        var tileset = tilesets[index];        // needs to be setup to automatically preload        tileset.frames = game.cache.getJSON('tileset-' + tileset.name + '-json').frames; // associated json from assets/tilesets        // get tile count by cols * rows        cols = Math.floor(tileset.imageheight / tileset.tileheight);        rows = Math.floor(tileset.imagewidth / tileset.tilewidth);        tileset.tileCount = cols * rows        var z = 1        for (i in tileset.frames) {            var tile = tileset.frames[i];            tile.index = z;            z++;        }        ts.push(tileset);    }    return ts;}function loadMapLayer(layer, tilesets) {    // data: [array of tiles, 1-based, position of sprite from top-left]    // height: integer, height in number of sprites    // name: "string", internal name of layer    // opacity: integer    // type: "string", layer type (tile, object)    // visible: boolean    // width: integer, width in number of sprites    // x: integer, starting x position    // y: integer, starting y position    if (!layer.opacity) {        Log('info', 'Layer(' + layer.name + ') is not visible. Skipping render');        return;    }    var size = [layer.width, layer.height],        row = 0,        col = 0;    // if (scene.layers.length < scene.data.layers.length) {    for (index in layer.data) {        var tileIndex = layer.data[index],            tileData = getTileData(tileIndex, tilesets);        if (!tileData) {            // return;        }        // Log('',tileData)        if (col == size[0] -1) {            row++            col = 0;        }        if (tileData.name.toLowerCase() != 'null') {            x = col * (tileData.tileWidth * 2)            if (row % 2 === 0) {                x += tileData.tileWidth / 2;            }            y = row * tileData.tileHeight;            // Log('', ['tileset-' + tileData.parentName.toLowerCase(), tileData.name])            tile = game.add.sprite(x, y, 'tileset-' + tileData.parentName.toLowerCase(), tileData.name);            if (tile) {                tile.anchor.set(0.5, 1);                tile.smoothed = true;                // tile.body.moves = false;                if (scaled) {                    tile.scale.set(scale, scale)                }                    if (tileData.name == 'water') {                    water.push(tile);                }            }        }    }        // for (var dataIndex = 0; dataIndex <= layer.data.length -1; dataIndex++) {        //     var tile = layer.data[dataIndex];        //     tileName = Object.keys(tilesetMap.frames)[tile.index - 1] || 'null';        //     for (var tileIndex = 0; tileIndex <= row.length -1; tileIndex++) {        //         // var tile = row[tileIndex];        //         x = tileIndex * (tile.width * 2)        //         if (rowIndex % 2 === 0) {        //             x += tile.width / 2;        //         }        //         y = rowIndex * tile.height;        //         if (tile.index != -1) {        //             tile = baseMap.create(x, y, 'land', tileName);        //             tile.anchor.set(0.5, 1);        //             tile.smoothed = true;        //             if (scaled) {        //                 tile.scale.set(scale, scale)        //             }        //         }        //     }        // }}function loadObjectLayer(layer) {    Log('warn', 'Object Layer not functional');}function getTileData(index, tilesets) {    var id = 0,        tileData,        nIndex = index-1;    for (i in tilesets) {        var tileset = tilesets[i];        if (id + tileset.tileCount >= index) {            for (z in tileset.frames) {                frame = tileset.frames[z]                if (nIndex == 0) {                    frame.name = z;                    frame.parentName = tileset.name;                    frame.tileHeight = tileset.tileheight;                    frame.tileWidth = tileset.tilewidth;                    return frame;                }                nIndex--;            }        } else {            nIndex -= tileset.tileCount            Log('warn', [tileset.tileCount, index, id])        }    }}game.state.add('Boot', BasicGame.Boot);game.state.start('Boot');

land.json

{    "frames": {        "null": {            "frame": {                "x": 1,                "y": 1,                "w": 64,                "h": 36            },            "rotated": false,            "trimmed": false,            "spriteSourceSize": {                "x": 0,                "y": 0,                "w": 64,                "h": 36            },            "sourceSize": {                "w": 64,                "h": 36            }        },        "dirt_brown": {            "frame": {                "x": 66,                "y": 1,                "w": 64,                "h": 36            },            "rotated": false,            "trimmed": false,            "spriteSourceSize": {                "x": 0,                "y": 0,                "w": 64,                "h": 36            },            "sourceSize": {                "w": 64,                "h": 36            }        },        "grass_alive": {            "frame": {                "x": 131,                "y": 1,                "w": 64,                "h": 36            },            "rotated": false,            "trimmed": false,            "spriteSourceSize": {                "x": 0,                "y": 0,                "w": 64,                "h": 36            },            "sourceSize": {                "w": 64,                "h": 36            }        },        "water": {            "frame": {                "x": 1,                "y": 38,                "w": 64,                "h": 36            },            "rotated": false,            "trimmed": false,            "spriteSourceSize": {                "x": 0,                "y": 0,                "w": 64,                "h": 36            },            "sourceSize": {                "w": 64,                "h": 36            }        },        "dirt_orange": {            "frame": {                "x": 66,                "y": 38,                "w": 64,                "h": 36            },            "rotated": false,            "trimmed": false,            "spriteSourceSize": {                "x": 0,                "y": 0,                "w": 64,                "h": 36            },            "sourceSize": {                "w": 64,                "h": 36            }        },        "gradd_dead": {            "frame": {                "x": 131,                "y": 38,                "w": 64,                "h": 36            },            "rotated": false,            "trimmed": false,            "spriteSourceSize": {                "x": 0,                "y": 0,                "w": 64,                "h": 36            },            "sourceSize": {                "w": 64,                "h": 36            }        },        "ice_thin": {            "frame": {                "x": 1,                "y": 75,                "w": 64,                "h": 36            },            "rotated": false,            "trimmed": false,            "spriteSourceSize": {                "x": 0,                "y": 0,                "w": 64,                "h": 36            },            "sourceSize": {                "w": 64,                "h": 36            }        },        "clay": {            "frame": {                "x": 66,                "y": 75,                "w": 64,                "h": 36            },            "rotated": false,            "trimmed": false,            "spriteSourceSize": {                "x": 0,                "y": 0,                "w": 64,                "h": 36            },            "sourceSize": {                "w": 64,                "h": 36            }        },        "sand": {            "frame": {                "x": 131,                "y": 75,                "w": 64,                "h": 36            },            "rotated": false,            "trimmed": false,            "spriteSourceSize": {                "x": 0,                "y": 0,                "w": 64,                "h": 36            },            "sourceSize": {                "w": 64,                "h": 36            }        },        "ice_thick": {            "frame": {                "x": 1,                "y": 112,                "w": 64,                "h": 36            },            "rotated": false,            "trimmed": false,            "spriteSourceSize": {                "x": 0,                "y": 0,                "w": 64,                "h": 36            },            "sourceSize": {                "w": 64,                "h": 36            }        },        "gravel": {            "frame": {                "x": 66,                "y": 112,                "w": 64,                "h": 36            },            "rotated": false,            "trimmed": false,            "spriteSourceSize": {                "x": 0,                "y": 0,                "w": 64,                "h": 36            },            "sourceSize": {                "w": 64,                "h": 36            }        }    },    "meta": {        "app": "",        "version": "0.0",        "image": "land.png",        "format": "RGBA5551",        "size": {            "w": 211,            "h": 241        },        "scale": "1"    }}

Edited December 26, 2014 by phreaknation

[phreaknation]

I ended up resolving my own issue. I had to create a spritesheet and pull from that instead of an atlas sheet

Preload looks like this now

    preload: function () {        game.load.json('tileset-land-json', 'assets/tilesets/land.json');        game.load.json('tileset-objects-json', 'assets/tilesets/objects.json');        game.load.spritesheet('tileset-land-spritesheet', 'assets/tilesets/land.png', 65, 37, 18);        game.load.spritesheet('tileset-objects-spritesheet', 'assets/tilesets/objects.png', 70, 40);        game.load.image('player', 'assets/images/w64xh128.png');        game.load.json('demo', 'assets/maps/demo.json');    },

Here is staggered isometric projection. Needs a little cleanup but looks good thus far. The large boxes are character representation. I have added scaling to the map to fix visual difference but it isnt enabled here.

Next I will be working on non staggered isometric projection.

Thinking of adding this to Phaser Isometric plugin but need tons of code cleanup before hand.

[lewster32]

Looks fantastic, let me know if you need anything clarifying with how the iso plug-in works

[phreaknation]

Looks fantastic, let me know if you need anything clarifying with how the iso plug-in works

Actually, next week I would like to get up with you. I am working remotely on my wifes laptop atm during the holidays so very limited(:'( one screen.) I do want to connect my piece to yours. At the current I am overwriting the method parseTiledJSON for the import and plugging my code into that area for map loading. I am also breaking down the overall method into sections that can be called for reuse and just make new methods of the sections that need to change. I am just now plugging in my code so if you want to see how I am doing things now I can shoot my file over. Currently the code is in disarray because I am setting up those methods to work in unison and without to much modification of the old code besides the separation part. Honestly do not need three near exact pieces of code that span a few hundred lines when we can reuse code I say.

I provided some of the code that was thrown together in a couple days before Christmas so excuse the nastiness of the overall code. If you have any suggestions or ideas, feel free to send them my way.

 

// writes the original method to another for backup purposes. May skip this all together and just create another function similar to staggered and isometric and retain the old code in new methods.Phaser.TilemapParser._parseTiledOrthogonalJSON = Phaser.TilemapParser.parseTiledJSON// the new parseTiledJSON that just passes the JSON along to the new methodsPhaser.TilemapParser.parseTiledJSON = function(json) {    // has been broken up for reuse    if (json.orientation === 'orthogonal') {        map = Phaser.TilemapParser._parseTiledOrthogonalJSON(json);    } else if (json.orientation === 'staggered') {        map = Phaser.TilemapParser._parseTiledStaggeredJSON(json);    } else if (json.orientation === 'isometric') {        map = Phaser.TilemapParser._parseTiledIsometricJSON(json);    } else {        console.warn('TilemapParser.parseTiledJSON - Unsupported orientation type. Orientation: ' + json.orientation);    }    // we return the returned map file, or false if map is not set for checking and verification in our code.    return map || false;}

// one of the new functions using the original code split into new methodsPhaser.TilemapParser._parseTiledStaggeredJSON = function(json) {    // Map data will consist of: layers, objects, images, tilesets, sizes    // Map data is combined into one section to eliminate extra bloat during compression    var map = {            width: json.width,            height: json.height,            tileWidth: json.tileWidth,            tileHeight: json.tileHeight,            orientation: json.orientation,            format: Phaser.Tilemap.TILED_JSON,            version: json.version,            properties: json.properties,            widthInPixels: json.width * json.tileWidth,            heightInPixels: json.height * json.tileHeight,            tiles: []        };    // the new methods that return objects. Need to setup the methods for each tile type as this is only setup for orthogonal until I finish writing out my methods    map.layers = Phaser.TilemapParser._parseTiledLayers(json);    map.images = Phaser.TilemapParser._parseTiledImages(json.layers);    map.tilesets = Phaser.TilemapParser._parseTiledTilesets(json.tilesets);    tiledobj = Phaser.TilemapParser._parseTiledObjects(json.layers);    map.objects = tiledobj.objects;    map.collision = tiledobj.collision;    map = Phaser.TilemapParser._parseTiledTiles(map);    return map;}

This code here is my staggered method piece. Its VERY ugly and needs to be rewritten a bit cleaner but it works. Needs to be optimized but that can come later. I just wanted to see if I could do it and was able to.

    for (index in layer.data) {        // console.log(size)        var tileIndex = layer.data[index],            tileData = getTileData(tileIndex, tilesets);        if (!tileData) {            return;        }        if (col == size[0]) {            row++;            col = 0;            // if (row == 5) return;        }        // var rowWidth = row * (config.scaled? tileData.tileWidth * scale: tileData.tileWidth);        // var colWidth = col * (config.scaled? tileData.tileWidth * scale: tileData.tileWidth);        if (tileData.name.toLowerCase() != 'null') {            if (config.scaled) {                x = col * (tileData.tileWidth * scale - (config.tilePadding * 2));                if (row % 2 !== 0) {                    x += (tileData.tileWidth / 2) * scale;                }                y = (tileData.tileHeight * scale) + (row * ((tileData.tileHeight / 2) * scale - (config.tilePadding * 2)));            } else {                x = row * tileData.tileWidth;                if (row % 2 !== 0) {                    x += tileData.tileWidth / 2;                }                y = tileData.tileHeight + (col * (tileData.tileHeight / 2));            }            tileData.x = x;            tileData.y = y;            tile = renderTile(tileData);            if (tile) {                if (tile.isWater) {                    if (water) {                        water.add(tile)                    } else {                        base.add(tile)                    }                } else {                    base.add(tile)                }            }        }        col++;    }

This is my renderTile code which will be a catch all eventually for rendering a tile. This was the original code setup quickly for my staggered map and needs to be cleaned up and optimized.

function renderTile(tileData) {    tileset = 'tileset-' + tileData.parentName.toLowerCase() + '-spritesheet';    tile = game.add.sprite(tileData.x, tileData.y, tileset);    if (tile) {        tile.frame = tileData.index-1;        tile.anchor.set(0.5, 1);        tile.smoothed = true;        // tile.body.moves = false;        if (config.scaled) {            tile.scale.set(config.scale, config.scale)        }        if (tileData.isPassable) {            // setup physics for collision        }        if (tileData.name == 'water') {            tile.isWater = true;        }        return tile;    }    return false;}