Search the Community

Showing results for tags 'tiled'.

More search options

  • Search By Tags

    Type tags separated by commas.
  • Search By Author

Content Type


  • HTML5 Game Coding
    • News
    • Game Showcase
    • Facebook Instant Games
    • Web Gaming Platform
    • Coding and Game Design
  • Frameworks
    • Phaser 3
    • Phaser 2
    • Pixi.js
    • Babylon.js
    • Panda 2
    • melonJS
  • General
    • General Talk
  • Business
    • Collaborations (un-paid)
    • Jobs (Hiring and Freelance)
    • Services Offered

Find results in...

Find results that contain...

Date Created

  • Start


Last Updated

  • Start


Filter by number of...


  • Start



Website URL





Found 203 results

  1. <!DOCTYPE HTML> <html> <head> <title>Phaser Tiled Test</title> </head> <body> <div id="renderer_container"> <!-- /renderer_container --> </div> <script src="phaser.min.js"></script> <script src="main.js"></script> </body> </html> var map; var layer; var keyArrow; var game = new Phaser.Game(800, 600, Phaser.AUTO, 'renderer_container', { preload : preload, create : create, update : update, render : render }); function preload() { game.load.tilemap('map', 'testMap.json', null, Phaser.Tilemap.TILED_JSON); game.load.image('tiles', 'map.png'); } function create() { map = game.add.tilemap('map'); // Now add in the tileset map.addTilesetImage('tiles'); // Create our layer layer = map.createLayer(0); // Resize the world layer.resizeWorld(); // Allow keyArrow to scroll around the map keyArrow = game.input.keyboard.createCursorKeys(); var help = game.add.text(16, 16, 'Arrows to scroll', { font : '14px Arial', fill : '#ffffff' }); help.fixedToCamera = true; } function update() { if (keyArrow.left.isDown) { -= 4; } else if (keyArrow.right.isDown) { += 4; } if (keyArrow.up.isDown) { -= 4; } else if (keyArrow.down.isDown) { += 4; } } function render() {} Hi Just learning phaser. I am trying to load a simple tiled map. But i am getting an undefined exception for the "map" object.
  2. Hello everyone I'm trying to use the Image Collection feature from the Tiled Editor with Phaser but it seens that when I put some image (any kind) to the image list at Tiled and try to run the game, the game itself freezes (not even load) and crashs the browser (Firefox). If the Image Collection is empty at Tiled, there's no problem at all and the game just runs normally. I noticed that Phaser have got support to Image Collection, but how can I use this class if the game crashes when loading the JSON file? What I'm doing wrong? Thanks!
  3. Lomaz

    Tiledmap filesize

    So I have a few tiled JSON's that are over 1mb each, and that kinda sucks, I'm trying to get the size down, if I kill all the white spaces I can get them a bit smaller, but I've noticed for a LOT of my layers it's ",0,0,0,0,0,0,0,0", and was wondering if there was a way to modify phaser's map parser to assume an empty as a 0? if it could be stored as ",,,,,,,," that would save a LOT of space, and cut my filesizes nearly in half.. so yeah... possiable? other ideas on reducing file size/increasing read speed? Thanks in advance!
  4. Hi, I want to retrieve the tile data from a tile I collide against. I'm using on onBeginContact to capture the collision event. I've combed through the data given by the function but have been unable to find: A coordinate value for the tile (so I can use getTileFromWorldXY) Actual tile data I would then like to retrieve a tile property from the tile data. Does anyone know how to do this?
  5. Hello, I followed a tutorial to create a basic side scroller game in Phaser. The tutorial used Tiled to create the levels. But in the tutorial a homogenous sprite sheet was used where every tile was 70x70 px, but the game that I am trying to create has elements that are not of the same size. I have a background layer which is just a solid color repeating tile. Above that I have bridge left and bridge right tiles which I load from images separately by specifying the size every time. I have attached a picture of how it looks in Tiled and below is the link to how it looks like in the game: I think I have a basic understanding problem of how Tiled and Phaser are working. The tiles don't seem to be in the correct position. There is white colour at the bottom and the character falls off even before the bridge ends. Could somebody give me some direction as to where I might be going wrong with this? Should I use an Object Layer instead? Is there a better level editor for my purpose? Thanks in advance! Best, Ashin
  6. Hello, I have a tiled map with an object layer but am unsure how to add them... I have this JavaScript: var createItems = function(type) { //create items items =; items.enableBody = true; var item; result = findObjectsByType(type, map, 'Object Layer 1'); result.forEach(function(element){ createFromTiledObject(element, items); }); }; //find objects in a Tiled layer that containt a property called "type" equal to a certain value var findObjectsByType = function(type, map, layer) { var result = new Array(); map.objects[layer].forEach(function(element){ if( === type) { console.log("Found a " + type); //Phaser uses top left, Tiled bottom left so we have to adjust //also keep in mind that the cup images are a bit smaller than the tile which is 16x16 //so they might not be placed in the exact position as in Tiled element.y -= map.tileHeight; result.push(element); } }); return result; }; //create a sprite from an object var createFromTiledObject = function(element, group) { var sprite = group.create(element.x, element.y,; //copy all properties to the sprite Object.keys({ sprite[key] =[key]; }); } createItems("coin"); But it doesn't fire on account of getting neither no console log nor coins being rendered. Please help!
  7. Hello, Beginner user here learning the basics. My guestion is about what is good way to use tilemaps for collision areas. Image from my training project: I've created this level with Tiled using one layer, and then defining it like this in game.js:[0, 0, 0, 0,.. 1]) // removed lot's of data to save spaceWell, that works, but somehow i feel there has to be better way? I also saw somebody doing it very wisely with p2 physics, and drawing collision areas with one tile and then in the code using tile's id to set collision areas. I liked this approach, but i never got it working, and i'm using arcade physics for now. Like i mentioned this is just practice, but i like to know some best pratices before i start doing my first game
  8. Hello, I'm trying to set collision with Tiled using the "Tile Collision Editor" on Tiled but I can't make it work on game. Basically I want to create a Polyline for each different Tiles so I don't have to copy/paste the polyline objects in the object layer. For the moment I use one big Polyline object on a object layer that follow my map but it's not viable beause I have to draw all my tiles manually. Here is the part of the code I use to incorporate the object layer (I'm using ES6). It's working but it's not what I want : this._map = new Map(this._game, mapName);// ...this._map.addTilesetImage(tilesName, tilesName);this._blocksLayer = this._map.createLayer('collision');this._blocksLayer.resizeWorld(); this._game.physics.p2.convertTilemap(this._map, this._blocksLayer); this._game.physics.p2.convertCollisionObjects(this._map, 'test'); // where 'test' is the name of my layerThanks in advance for the help !
  9. Hi everyone! First things first, a disclaimer: I'm French, I read a lot in english but I rarely have the opportunity to write or speak in English, so forgive me for that . I'm a beginner in the world of gamedev and Phaser in particular. I've already tried EaselJS (CreateJS) a couple years ago for a little game prototype I made using hand-made tilemap (based on a simple two dimentional array). I wanted to try something more robust this time, I searched across the Web for a good gamedev framework and stumble upon Phaser. It seemed to me the best tool to go, so here I am! It's my first time using Tiled for creating my tilemaps. I've use the excellent roguelike tileset from KenneyNL (kudos to him! ). I've set up a simple sample map (to try a few Tiled features), followed several tilemaps examples provided on phaser's website. You can check the layers I'm using : Note that the collision layer contains only a tile (a red/brown dot) that I'm currently using as a visual marker (there's no collision implemented yet). My tileset is 16x16. The map is 200x200 tiles. I'm exporting it as JSON, layers data as CSV. I'm also using states (which is really a cool feature that I was missing with EaselJS). I've set up a jsfiddle hosting a stripped version of my source code with a few comments to explain the logic. There's also a fiddle with the JSON file of the tilemap if it can help. I'm using a deadzone for my camera, and added a visual representation of this deadzone. Everything is correctly loading, the map and all the layers are displayed accordingly, with the visual deadzone and my character (I'm on Ubuntu 14.04 x64 with a GTX 660 and using the latest Google Chrome version). Everything looks fine, I can move my character within the camera's deadzone while the camera is not moving (which is what I was looking for). I haven't set up a FPS debug but I feel that the framerate is stable and should be around 60fps. It all feel smooth, not shattered at all. So far so good. But the issue is coming when the deadzone is reached and that the camera begin moving to follow the player (e.g. when I'm moving far right), as follows : At this point, I feel a huge framerate drop! Any movement feels shattered, jerky. But as soon as the character gets back in the deadzone and the camera is moving no more, everything goes back normal. I've tried with another map of 100x100 and 50x500 tiles, with just one layer and a tileset of 4 sprites, and the results were the same... I think I'm missing something, or I must have done something wrong. I cannot believe that the problem would come from Phaser not correctly supporting tilemaps! My goal is to build a very simple stripped-down version of a Harvest Moon-like prototype, just for fun, for my pleasure. So I really need to work with tilemaps. I'm sad that a cannot acheive this with Phaser . Sam Vieten (SamTheMighty on these forums) gave me some advice on Twitter, about using a plugin (englercj/phaser-tiled) to optimize tilemaps implementation of Phaser. Is it really necessary to use this plugin? It's a bit of a shame if Phaser cannot handle tilemaps alone ... Anyway, thanks for you help!
  10. Hi I'm new to phaser ( and new-ish to coding in general ), and for the past few days I've been trying to make a really simple game, platformer-style, where the player must navigate to certain areas before being able to exit the level. I have the basics running, but now I can't seem to figure out how to check if the player is in those areas. The relevant part of the code so far is as follows: var game = new Phaser.Game(800, 600, Phaser.AUTO, "mygame", { preload: preload, create: create, update: update, render: render});function preload() { game.load.tilemap("questMap", "assets/quest.json", null, Phaser.Tilemap.TILED_JSON); game.load.image("tilesheet", "assets/tilesheet.png"); game.load.image("npc", "assets/npc.png"); game.load.spritesheet("player", "assets/player.png", 64, 64);}var map;var tileset;var groundBg;var props;var houses;var houseProps;var npc;var ground;var areas;var player;function create() { game.physics.startSystem(Phaser.Physics.ARCADE); game.stage.backgroundColor = "#A8DBFF"; map = game.add.tilemap("questMap"); map.addTilesetImage("tilesheet"); map.addTilesetImage("npc"); ground = map.createLayer("ground"); groundBg = map.createLayer("groundbg"); props = map.createLayer("props"); houses = map.createLayer("houses"); houseProps = map.createLayer("houseprops"); npc = map.createLayer("npc"); map.setCollisionBetween(1, 5000); ground.resizeWorld();Not too pretty, I know. I've created the map with tiled and there are a lot of small props and decorative tiles, hence the multiple "map.createLayer()" calls. The only one with collision is the ground layer. Now, on my Tiled file, i've created an Object layer and drawn small rectangles on the areas I want to check if the player is in. I tought this was going to be an easy process but I can't seem to figure out how to load those areas into phaser, and then check if the player is within bounds. Googling has given me some results, but none seem to fit, as they usually cover how to add a sprite to an object, which in this case does not apply: I simply need that small area to exist and check if the player is there. I've also given names to each of those rectangles in Tiled, via the custom properties tab.
  11. Hello guys! This is my first time here. I have looked through a lot of posts already trying to find the answer, but for some reason nothing is working for me!!! I am using tiled to get the map data and I have included it just fine since I was following the tutorials. So the first layer shows, but as soon as I create another layer that has my objects that will collide with the user, they don't appear. I have no idea what I am doing wrong. I am using the responsive template that came with phaser, which is why everything is in different files and stuff. This is my game.js BasicGame.Game = function (game) { // When a State is added to Phaser it automatically has the following properties set on it, even if they already exist:; // a reference to the currently running game this.add; // used to add sprites, text, groups, etc; // a reference to the game camera this.cache; // the game cache this.input; // the global input manager (you can access this.input.keyboard, this.input.mouse, as well from it) this.load; // for preloading assets this.math; // lots of useful common math operations this.sound; // the sound manager - add a sound, play one, set-up markers, etc this.stage; // the game stage this.time; // the clock this.tweens; // the tween manager this.state; // the state manager; // the game world this.particles; // the particle manager this.physics; // the physics manager this.rnd; // the repeatable random number generator this.player; this.cursors;; this.ground_layer; this.tree_layer; this.building_layer;};BasicGame.Game.prototype = { create: function () { //// We're going to be using physics, so enable the Arcade Physics system; // = this.add.tilemap('littleroot'); ='littleroot');'tiles', 'gameTiles'); this.ground_layer ='ground'); this.tree_layer ='trees'); this.building_layer ='buildings'); //, 9962, true, 'trees'); //, 9962, true, 'buildings'); this.ground_layer.resizeWorld(); //this.tree_layer.resizeWorld(); //// The player and its settings this.player =, - 150, 'dude'); // //// We need to enable physics on the player; //this.player.body.collideWorldBounds = true; //// Our two animations, walking left and right. this.player.animations.add('left', [0, 1, 2, 3], 10, true); this.player.animations.add('right', [5, 6, 7, 8], 10, true); //// Our controls.; this.cursors =; }, update: function () {, this.tree_layer);, this.building_layer); // Reset the players velocity (movement) this.player.body.velocity.x = 0; this.player.body.velocity.y = 0; if (this.cursors.left.isDown) { // Move to the left this.player.body.velocity.x = -150;'left'); } else if (this.cursors.right.isDown) { // Move to the right this.player.body.velocity.x = 150;'right'); } else if (this.cursors.up.isDown) { // Move up this.player.body.velocity.y = -150; //'up'); } else if (this.cursors.down.isDown) { // Move down this.player.body.velocity.y = 150; //'down'); } else { // Stand still this.player.animations.stop(); this.player.frame = 4; } }, quitGame: function (pointer) { // Here you should destroy anything you no longer need. // Stop music, delete sprites, purge caches, free resources, all that good stuff. // Then let's go back to the main menu. this.state.start('MainMenu'); },};This is my preloader.js BasicGame.Preloader = function (game) { this.background = null; this.preloadBar = null; this.ready = false;};BasicGame.Preloader.prototype = { preload: function () { // These are the assets we loaded in Boot.js // Load tile map data for the tile set this.load.tilemap('littleroot', 'assets/tiles/pk_emerald_map.json', null, Phaser.Tilemap.TILED_JSON); // Load the tileset this.load.image('gameTiles', 'assets/tiles/pk_emerald_map.png'); this.load.spritesheet('dude', 'assets/sprites/dude.png', 32, 48); }, create: function () { this.state.start('MainMenu'); }};I also tried uploading my json file, but I got this error: 'You aren't permitted to upload this kind of file'. So hopefully it's a code error and nothing to do with the json! I am also getting these warnings: 1) Phaser.Tileset - image tile area is not an even multiple of tile size phaser.min.js:24 2) Tilemap.createLayer: Invalid layer ID given: null phaser.min.js:24 Maybe these have something to do with it? I know I am missing something fundamental here because I looked through many tutorials and all of their layers work. Thanks for the help guys!
  12. Hello all! Well, after about 8 hours on this I have to say that I really don't know what is happening... The collision simply is not working. All shows ok but not colliding... Here is my code so far: create : function() { GAME.physics.startSystem(Phaser.Physics.ARCADE); mapa = GAME.add.tilemap('mapa'); mapa.addTilesetImage('meuTileset', 'tilesetImg'); mapa.setCollisionBetween(970, 1026); //tryied even 0 to 5000 this.layer = mapa.createLayer('cenario'); this.layer.resizeWorld(); this.layer2 = mapa.createLayer('detalhes'); this.layer2.resizeWorld(); PLAYER = GAME.add.sprite(,, 'player1'); GAME.physics.arcade.enable(PLAYER); CURSORS = GAME.input.keyboard.createCursorKeys();}, //end createupdate : function() { this.physics.arcade.collide(PLAYER, this.layer); this.physics.arcade.collide(PLAYER, this.layer2); if (CURSORS.left.isDown) { PLAYER.body.velocity.x = -50; PLAYER.body.velocity.y = 0; } else if (CURSORS.right.isDown) { PLAYER.body.velocity.x = 50; PLAYER.body.velocity.y = 0; } else if (CURSORS.up.isDown) { PLAYER.body.velocity.x = 0; PLAYER.body.velocity.y = -50; } else if (CURSORS.down.isDown) { PLAYER.body.velocity.x = 0; PLAYER.body.velocity.y = 50; }}, //end updatePlease, where I am doing this wrong???
  13. Hello and thanks ahead of time if you're reading this. This is my first post and my first game I'm actually trying to see through to the end. Been playing around figuring out the basics, pretty familiar with JS so it hasn't been as hard as I thought it was going to be to pick up on. From what I've read Tiled is an awesome software to "quickly" build out your levels, I've downloaded it and been working for a few days with no love. I made a real simple map with a floor, couple plants, cups of coffee, and an object layer for the collisions. I'm not using a tiled sprite, the coffee is isn't own png and so are the plants. In my mind I'd be able to export he image and add it to the world, then read the json data to know where to put the collisions. Is this a way oversimplification of what I need to do? I keep getting confused since I'm not actually "tiling" anything ya know. Sorry if this question is too open ended but the tutorials I've read aren't helping so I thought who better to ask than the Phaser community themselves.
  14. jilonor

    Dynamic tiles

    Hi, I have been using the tilemap editor TILED I noticed there is a way to preset animations with tiles. basically, make 2 tiles switch periodically. Is there a way to compute these animations when loading the tilemap? thanks
  15. Hi everyone, Is there a way to get object like getTile method for tiles? I am making grid based game and i need to check if there are any objects on specific tile position. Thanks in advance.
  16. I'm loading a tile map and creating custom objects with the object layer data. Their position is set in the update such as (sorry for coffeescript) ###Using the tile coordinate, render the object at the appropriate screen position###updateViewPosition: () => @view.x = @position.x * options.tilesize + options.tilesize / 2 @view.y = @position.y * options.tilesize + options.tilesize / 2 returnThis works fine until the camera begins to move. How can I set the sprites' absolute position, not the screen position?
  17. Hi! I'm new to phaser and i'm having some problems with my backgrounds not repeating (I don't want it to move, just repeat on X). Attached is what is happening. My code so far has preload : function(){ ... GAME.load.image('backgrounds', 'img/backgrounds.png'); ...},create : function() { ... BACKGROUND = GAME.add.tileSprite(0, -16, 160, 144, 'backgrounds'); ...}Do I have to programatically repeat the background on update? Thanks
  18. Hi, I'm quite new to using Phaser and the Tiled map editor and I'm currently making a platformer game using a Tiled map I made. I haven't been able to find any information in the Tiled or Phaser documentation, or in tutorials or forums on how to select a layer in my Tiled map to be a collision layer. I have 3 layers plus one layer for objects. I've put all the tiles I want the player to be able to collide with such as the ground and platforms in one layer. I've read answers saying that you need to include the index of the collision tiles but I don't want to include individual tiles as there a lot of tiles used. I've seen Phaser/Tiled tutorials showing a layer as having collision set to true but I can't find information in the Tiled documentation on how to do this. Below is a screenshot of my Tiled map JSON file, the layer I want to make a collision layer is called "Tile Layer 2". I'm not sure if I need to mention this layer name in my Phaser code to make it a collision layer or if I need to somehow set the layer to collision: true in Tiled. I'd really appreciate any suggestions on how to make this a collision layer. Thanks.
  19. I'm currently working with tiles to create levels - so far so good - I've managed to make a demo car game with a maze, collisions with walls and mines all working as expected. I'd like to extend the functionality with a new tileLayer with one tile on it - let's say its a tile indicating fire - and on a timer I'm firing a function which looks at the neighbouring tiles around it, and if they're empty (hasTile()?) then fill them with a fire tile - this means the fire layer will expand over time but only into neighbouring tiles. I'm currently using forEach to cycle through the tiles and only consider the ones with the correct tile index. I've tried using the function map.getTileAbove as a proof of concept but so far I can't work out why the response I'm getting is error (undefined) . Has anyone tried anything like this? And if so any advice would be appreciated. What's the best and most optimal way to check through the tiles to see if they're empty and then replace the tile texture? Cheers
  20. I have map what I made in 'Tiled' this map have two layers 'firstFlor' and 'firstFloorBlock' and mape have a name 'map1' and for make this map I used three tilesets png with names tile1 tile2 tile3 Than I load those stuff in preload.js like a'map1', 'maps/map1.json', null, Phaser.Tilemap.TILED_JSON);'tile1', "maps/tile1.png");'tile2', "maps/tile2.png");'tile3', "maps/tile3.png");And here is the point, I have no idea how to load those things in game in create function map ='map1'); map.addTilesetImage('tile1'); map.addTilesetImage('tile2'); map.addTilesetImage('tile3'); layer = map.createLayer('firstFloor'); layer.resizeWorld(); layer.wrap = true; var layer2 = map.createLayer('firstFloorBlock');But is a pice of scrap... and not working at all
  21. Hey everyone! I am a student, beginner-intermediate programmer starting to get into game development using Phaser. I'm looking to import my own personally-designed maps/tilesets from TILED and I've looked all over for tutorials but I still can't seem to get it working. I've made my main_game.js file essentially just a skeleton file that will display my map. The error I'm getting from the error console( Chrome developer tools) is : Uncaught TypeError: Cannot read property '0' of undefined Anyone have any idea as to how this could be happening or what could be wrong with my declarations? The paths to both my .png and .json files is correct and I'm fairly sure i've saved those files correctly. The code I have so far is: var boundsx = 800, boundsy = 600;var game = new Phaser.Game(boundsx, boundsy, Phaser.AUTO, "game", {preload:preload, update:update, create:create});function preload(){game.load.tilemap('MyTilemap', 'firstMap.json', null, Phaser.Tilemap.TILED_JSON); game.load.image('tiles', 'terrain_atlas.png');}var map;var layer;function create(){map = game.add.tilemap('MyTilemap'); map.addTilesetImage('tiles', 'tiles'); layer = map.createLayer('MyTerrain'); layer.resizeWorld(); }function update(){}
  22. Hey everybody I want to design map like this: How can I design this with Tiled?
  23. Hello Everyone! I've been using Phaser and Tiled over the past few months to sporadically work on a top-down game. To make things a little eaiser while doing this, I made a custom build of Phaser 2.3.0 master with Tiled image collection support, and whipped up a little library to automatically import Tiled objects as Phaser sprites. With the hope that these might be useful to someone in a similar situation, I've uploaded them to github: Please feel free to let me know what you think. Cheers
  24. this is how the array that contains all the physicsbodies is created polyline_bodies = game.physics.p2.convertCollisionObjects(supermap,"polygons");i can then cycle over all bodies and flawlessly set collisiongroups, materials and so on.. but if i want to cycle through this array and kill the physics bodies in it for (i=0; i<polyline_bodies.length; i++){ polyline_bodies[i].destroy()}i get the following weird error: Uncaught TypeError: Cannot set property 'body' of nullc.Physics.P2.Body.destroy @ phaser.min.js:23level0.update @ game.js:616how can i destroy the bodies in there.. thank you !
  25. I am trying to use this example but with my own tilemap Right now I am just trying to get the map to show on the screen but I'm just getting a white page. I've just drawn a really simple map using Tiled Map Editor. Here is what I have done. Can someone help me with why this isn't working?