unstoppableCarl Posted May 29, 2015 Share Posted May 29, 2015 I am trying to create a tilemap programatically without tiled or any parsed data. I am having a lot of trouble figuring out how to do this. The parser code is not clear on what it is doing to generate tile maps from tiled data. I simply want to create a tilemap and set each tile with code. How can I do this? Link to comment Share on other sites More sharing options...
Lomaz Posted May 29, 2015 Share Posted May 29, 2015 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 More sharing options...
unstoppableCarl Posted May 29, 2015 Author Share Posted May 29, 2015 I am trying to create maps procedurally. Link to comment Share on other sites More sharing options...
Deathspike Posted May 29, 2015 Share Posted May 29, 2015 Look at http://phaser.io/examples/v2/tilemaps/blank-tilemap It creates a blank map and puts tiles on it. After generating your map, map each tile onto a blank map and set tiles. Of course, set the image for the tilesheet and have the IDs of your generated thing match. Link to comment Share on other sites More sharing options...
unstoppableCarl Posted May 30, 2015 Author Share Posted May 30, 2015 This example has a very poor way of figuring out the tile indexes. I am trying to figure out how to give them names in tiled and then find their index by name and set them. Link to comment Share on other sites More sharing options...
unstoppableCarl Posted May 30, 2015 Author Share Posted May 30, 2015 What I would really like to do is make a map in tiled, that is just my tiles with their properties attached. Then load that and do something like var tile = getTileByName('foo'); map.putTile(tile, x, y); I figured it out. If anyone is interested let me know and I will do a write up. Link to comment Share on other sites More sharing options...
winspeednl Posted June 5, 2015 Share Posted June 5, 2015 How did you did that unstoppableCarl? Link to comment Share on other sites More sharing options...
unstoppableCarl Posted June 5, 2015 Author Share Posted June 5, 2015 I created a tiled file for the purpose of naming each tile. using this image tiles.pnghttp://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 More sharing options...
Recommended Posts