Jump to content

Creating tilemaps without tiled


unstoppableCarl
 Share

Recommended Posts

If I understand what you're trying to do the best way I can see this being done is to generate an example JSON with tiled, then kinda change values and see their effects to reverse engineer how each aspect of the file is being rendered.

 

Originally I had done something like this for my game, I had created a map editor, but that was because the map was being generated/parsed by an engine I built, not by phaser so it was much more convoluted and less efficent.

 

Why are you trying to avoid Tiled?

Link to comment
Share on other sites

I created a tiled file for the purpose of naming each tile. 

 

using this image tiles.png

http://imgur.com/kAZ0nLR

 

sprites/tiles.json

{ "height":1, "layers":[        {         "data":[1, 2, 3],         "height":1,         "name":"tiles_meta",         "opacity":1,         "type":"tilelayer",         "visible":true,         "width":3,         "x":0,         "y":0        }], "orientation":"orthogonal", "properties":    {    }, "renderorder":"right-down", "tileheight":20, "tilesets":[        {         "firstgid":1,         "image":"tiles.png",         "imageheight":20,         "imagewidth":60,         "margin":0,         "name":"tiles",         "properties":            {            },         "spacing":0,         "tileheight":20,         "tileproperties":            {             "0":                {                 "name":"floor"                },             "1":                {                 "name":"wall"                },             "2":                {                 "name":"floor_red"                }            },         "tilewidth":20        }], "tilewidth":20, "version":1, "width":3}

game.js

'use strict';var PhaserGame = function() {};PhaserGame.prototype = {    selectedTile: null,    tilesByName: null,    preload: function() {        this.load.tilemap('tile_guide', 'sprites/tiles.json', null, Phaser.Tilemap.TILED_JSON);        this.load.image('tiles', 'sprites/tiles.png');    },    create: function() {        var width = 30;        var height = 30;        this.stage.backgroundColor = '#787878';        this.initTileMap(width, height, this.tileSize);    },    update: function() {        var bgLayer = this.bgLayer;        var marker = {            x: bgLayer.getTileX(this.input.activePointer.worldX) * this.tileMap.tileWidth,            y: bgLayer.getTileY(this.input.activePointer.worldY) * this.tileMap.tileHeight,        };        if (this.input.mousePointer.isDown) {            var tile = this.tileMap.getTile(bgLayer.getTileX(marker.x), bgLayer.getTileY(marker.y));            if(this.selectedTile !== tile){                this.selectedTile = tile;                this.tileMap.putTile(this.tilesByName.wall, tile.x, tile.y);            }        }    },    initTileMap: function(width, height, tileSize){        var tileMap = this.add.tilemap('tile_guide');        // get the only layer 'tiles_meta'        var tilesMeta = tileMap.createLayer('tiles_meta');        var tilesByName = this.getTilesByName(tileMap, tilesMeta);        // remove the tilesMeta layer        tilesMeta.destroy();        var bgLayer = tileMap.createBlankLayer('bg', width, height, tileSize, tileSize);        var tileset = tileMap.addTilesetImage('tiles');        // fill with floor tiles        tileMap.fill(tilesByName.floor.index, 0, 0, bgLayer.width, bgLayer.height, bgLayer);        bgLayer.resizeWorld();        this.tilesByName = tilesByName;        this.tileMap = tileMap;        this.bgLayer = bgLayer;    },    getTilesByName: function(tileMap, layer){        var tilesByName = {};        tileMap.forEach(function(coords){            var tile = tileMap.getTile(coords.x, coords.y, layer);            var name = tile.properties.name;            tilesByName[name] = tile;        }, this, 0, 0, layer.width, layer.height, layer);        return tilesByName;    },};var game;(function(){    var width = 800;    var height = 600;    game = new Phaser.Game(width, height, Phaser.AUTO, 'phaser-example', null, false, false);    game.state.add('Game', PhaserGame, true);})();
Link to comment
Share on other sites

 Share

  • Recently Browsing   0 members

    • No registered users viewing this page.
×
×
  • Create New...