Search the Community

I’m trying to make a game that has a map editor, and I would like to save layers locally to the file system. Can somebody help me to add this feature? And I also don’t have anything because I don’t know where to start, so I don’t have any code to show.

A collider collides only with set tiles on a tilemap. However, if you are using an overlap with a tilemap, it always callbacks. If you log the index of the Tile, it's 0. So "no set tile". Is that intended behavior?

Till version 3.12 everything was fine on using tilemaps. Now, by using a camera that moves, tiles blinking on their edges because the frameContainer isn't as fast as the camera. Is there already an issue, or is somebody aware of this? 3.14 fixes a lot of camera stuff for me, but it makes it unusable since it breaks literally tilemaps..

Hi There, I am having this issue with phaser(2.9.4) where collision with a tilemap only work with the base layer. In my example I have the collide-able world and then I wanted to add a background underneath that was part of the tilemap. Here is my code(excluding boot and preload) Game.preload = function () { game.stage.backgroundColor = "000000"; }; Game.create = function () { Game.scale = 5; game.physics.startSystem(Phaser.Physics.ARCADE); game.physics.arcade.gravity.y = 850; Game.cursors = game.input.keyboard.createCursorKeys(); Game.map = game.add.tilemap('map'); Game.map.addTilesetImage('tiles_1', 'tiles'); Game.back = Game.map.createLayer('Background'); Game.back.setScale(Game.scale); Game.back.renderSettings.enableScrollDelta = false; Game.spawn = Game.map.createLayer('Spawn'); Game.spawn.setScale(Game.scale); Game.spawn.renderSettings.enableScrollDelta = false; Game.decor = Game.map.createLayer('Decor'); Game.decor.setScale(Game.scale); Game.decor.renderSettings.enableScrollDelta = false; Game.layer = Game.map.createLayer('Collideable'); Game.layer.setScale(Game.scale); Game.layer.renderSettings.enableScrollDelta = false; Game.layer.resizeWorld(); Game.map.setCollisionByExclusion([]); Game.player = game.add.sprite(game.world.centerX, game.world.centerY, 'player'); Game.player.scale.setTo(Game.scale); //Game.player.anchor.setTo(0.5); game.physics.enable(Game.player, Phaser.Physics.ARCADE); Game.player.body.collideWorldBounds = true; game.camera.follow(Game.player); var enemyPos = Game.findTiles(952, true); Game.enemies = game.add.group(); for (var enemies in enemyPos) { var enemy = game.add.sprite(enemyPos[enemies][0] * Game.scale * 16, enemyPos[enemies][1] * Game.scale * 16, 'enemy'); Game.enemies.add(enemy); enemy.scale.setTo(randomInt(1, 5)); game.physics.enable(enemy, Phaser.Physics.ARCADE); enemy.body.collideWorldBounds = true; enemy.speed = randomInt(150, 250); enemy.interval = 0; enemy.update = function () { this.interval++; if (this.interval >= 20) { this.interval = 0; if (this.x > Game.player.x) { this.body.velocity.x = -this.speed; } else if (this.x < Game.player.x) { this.body.velocity.x = this.speed; } if (this.y > Game.player.y && this.body.blocked.down) { this.body.velocity.y = -600; } } } } }; Game.update = function () { game.physics.arcade.collide(Game.player, Game.layer); //game.physics.arcade.collide(Game.player, Game.enemies); game.physics.arcade.collide(Game.enemies, Game.layer); //game.physics.arcade.collide(Game.enemies, Game.enemies); Game.player.body.velocity.setMagnitude(Math.min(1000, Game.player.body.velocity.getMagnitude())); if (Game.cursors.left.isDown) { Game.player.body.velocity.x = -500; } else if (Game.cursors.right.isDown) { Game.player.body.velocity.x = 500; } else { Game.player.body.velocity.x = 0; } if (Game.cursors.up.isDown && Game.player.body.blocked.down) { Game.player.body.velocity.y = -600; } else if (Game.cursors.up.isDown && Game.player.body.touching.down) { Game.player.body.velocity.y = -600; } }; Game.findTiles = function (id, destroy) { var mapArray = Game.spawn.getTiles(0, 0, game.world.width, game.world.height); var found = []; var needToFindID = id; for (var blocks in mapArray) { if (needToFindID == mapArray[blocks].index) { found.push([mapArray[blocks].x, mapArray[blocks].y]); if (destroy) { Game.map.removeTile(mapArray[blocks].x, mapArray[blocks].y, Game.spawn).destroy(); } } } return found; }; function randomInt(min, max) { return Math.floor(Math.random() * (max - min + 1) + min); } Any help would be greatly appreciated.

Hi guys, I'm new to the framework but I googled around abit and couldn't find an answer to this: I’m making a tile mapped game where the player needs to make their way through a tiled level by moving upwards. To achieve this the camera follows the player around a rectangular world My question is about creating 2 background TileSprites that scroll with the camera BUT not at the same speed as the camera to achieve the effect of having a background with TileSprite 1 in the distance and TileSprite 2 in the far distance Maybe something like an event handler that works like this: onCameraPositionChange(yDistance){ backgroundTileSprite1.scrollY -= yDistance/2 backgroundTileSprite2.scrollY -= yDistance/4 } Right now my setup is like this: TileSprite 1 -> moves with the camera TileSprite 2 -> stays still in background using TileSprite.fixedToCamera It looks okay right now, but I think this would convey a more convincing sense of distance. Cheers and thank you!

HI , i am trying to make a simple rpg stye game. i have created a map in tiled editor and exporting it to json. i can load and display the map in game but the colisons between my sprite and collision layer is not working. i have followed example from here . i also do not see any error in console. it just dosent work. here is my code. i am alsso attaching my level fileslevel2 <!doctype html> <html lang="en"> <head> <style> canvas {cursor: url('/assets/sprites/cursors/Black.png'), default;} </style> <meta charset="UTF-8" /> <title>Phaser - Making your first game, part 1</title> <script type="text/javascript" src="js/phaser.js"></script> <style type="text/css"> body { margin: 0; } </style> </head> <body> <script type="text/javascript"> function getRandomInt(min, max) { return Math.floor(Math.random() * (max - min + 1)) + min; } var __Player; var map; var xx; var mainState = { preload: function(){ game.load.tilemap('level', 'auxassets/level2', null, Phaser.Tilemap.TILED_JSON); game.load.image('forest_tiles_image', 'forest_tiles.png'); game.load.image('tiles', 'terrain_atlas.png'); game.load.image('player', '/auxassets/cahracter.png'); game.load.spritesheet('character', 'rpg_sprite_walk.png', 24, 32, 32); }, create: function(){ game.physics.startSystem(Phaser.Physics.P2JS); map = game.add.tilemap('level'); map.addTilesetImage('grass', 'tiles'); layer = map.createLayer('grass'); xx = map.createLayer('obstacles'); map.setCollision(373); game.physics.p2.convertTilemap(map, xx); __Player = game.add.sprite(100,1700,'character'); __Player.animations.add('walk_right',[24,25,26,27,28,29,30,31]); __Player.animations.add('walk_left',[16,17,18,19,20,21,22,23]); __Player.animations.add('walk_up',[8,9,10,11,12,13,14,15]); __Player.animations.add('walk_down',[0,1,2,3,4,5,6,7]); game.physics.p2.enable(__Player); cursors = this.input.keyboard.createCursorKeys(); game.camera.follow(__Player); layer.resizeWorld(); }, update: function(){ if(cursors.up.isDown){ __Player.body.y -= 5; __Player.animations.play('walk_up', 20); } if (cursors.down.isDown){ __Player.body.y += 5; __Player.animations.play('walk_down', 20); } if (cursors.left.isDown){ __Player.animations.play('walk_left', 20); __Player.body.x -= 5; } if (cursors.right.isDown){ __Player.animations.play('walk_right', 20); __Player.body.x += 5; } }, render: function() { // game.debug.cameraInfo(game.camera, 32, 32); }, }; var game = new Phaser.Game(800,600); game.state.add('main', mainState); game.state.start('main'); </script> </body> </html>

Hello everyone, I am beginner with phaser, i am French and my english is not very nice. I need your help, i am blocked on a collide function. I want my character to collide with my second layer (tree, montain, statue..). (i use tiled map editor and export in json). my code : function preload: game.load.tilemap('map', 'assets/tilemaps/maps/map.json', null, Phaser.Tilemap.TILED_JSON); game.load.image('tiles', 'assets/tiles/tiles.png'); game.load.spritesheet('perso', 'assets/sprite/spritetest.png', 32, 47); function create : game.physics.startSystem(Phaser.Physics.ARCADE); map = game.add.tilemap('map'); map.addTilesetImage('tiles'); layer = map.createLayer('layer1'); layer2 = map.createLayer('layer2'); layer2.resizeWorld(); map.setCollisionBetween(0,2000); //PLAYER // ajout player et parametre player = game.add.sprite(250, 50, 'perso'); // We need to enable physics on the player game.physics.arcade.enable(player, Phaser.Physics.ARCADE); function update : game.physics.arcade.collide(player, layer2); i show an image for understand my problem. Thx to read my message

/** * Takes the collision data defined in the collision editor of Tiled and applies it to * and exisiting tilemap for use with P2 physics bodies. * * Tilemap json data MUST be loaded in the Preload state/function using game.load.json() before this function is called * map must only have ONE tileset * each tile can only have ONE polyline set for it's collision * the polyline MUST be a complete shape (the last point is indentical to the first) * * @param {Phaser.Tilemap} map - this is the map which you want polylines added to * @param {string} key - this is the key for the raw json tilemap data loaded in the preload state * @param {bool} [roundValues=true] - Will round the x,y coordinates for the polylines to nearest integer */ addPolylineCollision: function (map, key, roundValues) { if (roundValues === undefined) { roundValues = true; } // json with the collision data that was omitted by phaser let data = this.game.cache.getJSON(key); //console.log(data); let collisionData = data.tilesets[0].tiles; // array of the collision polygons that will get added to the tilemap var polygons = []; // tiles in the Collision Layer that will help define the polygons let mapData = map.layers[map.getLayer('Collision Layer')].data; for (let row in mapData) { for (let col in mapData[row]) { var wall = collisionData[mapData[row][col].index - 1]; if (wall !== undefined) { for (let i in wall.objectgroup.objects) { let poly = { height: 0, name: "", polyline: [], properties: undefined, type: "", visible: true, width: 0, x: mapData[row][col].x * map.tileWidth, y: mapData[row][col].y * map.tileHeight }; for (let j in wall.objectgroup.objects[i].polyline) { var coords = [wall.objectgroup.objects[i].polyline[j].x, wall.objectgroup.objects[i].polyline[j].y]; if (roundValues) { coords[0] = Math.round(coords[0]); coords[1] = Math.round(coords[1]); } poly.polyline.push(coords); } polygons.push(poly); } } } } console.log(polygons); map.collision['Collision Layer'] = polygons; } I'm writing a function to support Tiled's Collision editor and P2 physics. Everything seems fine but the values for all the polygons I defined get mangled to the same values. I thought it was a scope issue but nothing seems to work: pic: https://gyazo.com/17006a8d49e451a7d7010c77c31a7765 (Links to an external site.)Links to an external site. paste: https://pastebin.com/fv9sJpPc (Links to an external site.)Links to an external site. By the time execution reaches line 57, the console.log call, all the values in the polyline arrays are totally messed up, they're set to values between -1 and 1, and are always set to the same values every time. At every other previous point in this functions lifetime everything works exactly as expected.

Hello. I've been trying to create some levels for my game and I found that the only way for it to work, given my tilesets, would be to create multilayered tilemaps. The problem is I don't know how to load them using Phaser functions and I've been unable to find any existing examples of this in action. Any help would be greatly appreciated. Best regards! Mariusz

Hi I'm playing a bit with this example. http://phaser.io/examples/v2/tilemaps/tile-properties In this example there is a function which is responsible for displaying properties for the given tile: function getTileProperties() { var x = layer.getTileX(game.input.activePointer.worldX); var y = layer.getTileY(game.input.activePointer.worldY); var tile = map.getTile(x, y, layer); // Note: JSON.stringify will convert the object tile properties to a string currentDataString = JSON.stringify( tile.properties ); tile.properties.wibble = true; } Here is a file used as a map https://github.com/photonstorm/phaser-examples/blob/master/examples/assets/tilemaps/maps/tile_properties.json Part of the file which contains the properties information goes like "tileproperties": { "135": { "bonus":"100" }, "29": { "start":"true" }, "72": { "speed":"200" }, "99": { "goal":"true" } Question is: how to interprete those values "135", "29" (...) values, because they don't corresponds to the ids listed in the beginning of the map file ("data":[34, 34, 34, (...)). Below is a screenshot of game - I've selected the tile and the corresponding property - why "99"

I m building a little platformer-type game and am having this problem: When the player is moving really fast, (basically when he falls a large distance) he no longer collides with stuff, and falls right through the floor. This problem comes up when I switch from making regular sprites in a group for floors and platforms, to loading in a tilemap from Tiled. I also notice a change, which is my only hint that something is working differently with the physics - the sprite's body.touching property no longer reads, and instead body.blocked now reads. So for example, if I let the player jump only if player.touching.down is true, I have to switch this condition when using the Tiled tilemap to player.blocked.down, because touching becomes always false. I don't really know phaser well enough to know why this is, but I just know its weird. here is how my code was before, when just making a group of sprites for platforms: this.platforms = this.add.group(); this.platforms.enableBody = true; var element; platformData.forEach(function( platform ){ element = this.platforms.create(platform.x, platform.y, 'green'); element.scale.setTo(platform.scaleX, platform.scaleY); }, this); this.platforms.setAll('body.immovable', true); // so they don't fall this.platforms.setAll('body.allowGravity', false); // so they can't be moved by other bodies and here is how it is when I load the map from Tiled: //create a tilemap object this.map = this.add.tilemap('level1'); //join the tile images to the json data this.map.addTilesetImage('tilesheet', 'gameTiles'); //create tile layers this.tileLayer = this.map.createLayer('tileLayer'); //collision layer should be collisionLayer this.map.setCollisionBetween(1, 1, true, 'tileLayer'); //resize the world to fit the layer this.tileLayer.resizeWorld(); And in update(): this.game.physics.arcade.collide(this.player, this.tileLayer); So it's weird, it collides just fine in every case, except when loading stuff from Tiled and moving really fast, and I don't really know why in one case bodies touch and in the other case bodies block, or what the difference really is supposed to mean.

Hi, I'm trying to build a top-down 2d game. You can find the code for it here: https://github.com/JimTheMan/Room-Walkers Here is a screenshot of the game using "this.scale.scaleMode = Phaser.ScaleManager.NO_SCALE ;" The game works, but there are a few issues I'm having: 1) The "viewport" always shows an area of 10 x 10 tiles. As the player moves the camera follows him and he appears to be moving around the map. However, the viewport is always 10 x x10. Is there a way to change this, for example, to where the viewport always showed an area of 20x20 tiles? 2) When I use "NO_SCALE" mode everything looks super tiny, but when I use any scale mode (such as SHOW_ALL) the text looks blurry and is completely unreadable... How can I have graphics that are large enough to see while still keeping nice, crisp fonts? thanks.

Hi! A couple of days ago I started with PhaserJS. Wonderful engine! And easily enough, specially when you come from a just-canvas environment. After reading a little about the platform, I started to code my homepage, made originally in EaselJS, in PhaserJS (http://ludobermejo.es/). I created a Tilemap with multiple layers, I exported it and I loaded it into PhaserJS. And I have some problems: everything's cool if I don't move the background, but when I move it, FPS drops to 20 or even 15. I'm pretty sure this is because the rendering of the tilemap. If I use a background PNG image with the same size of the map and I only use the collisions layer, it works perfectly! But if I use all the layers then the movement becomes a pain. Now, the questions: a ) Is there any way I can make a "memory screenshot" of the tilemap first time is rendered? Maybe I can render the tilemap, then make a copy, then make all layers invisible b ) Is there a better solution? I'm all ears BTW, if you want to check the code, please be free: https://github.com/LudoBermejo/PhaserTutorial/tree/map. Right now it's working with the background image, but it has the collisions activated. Thanks!

Hey guys i've got a weird problem with tilemaps. In the create function i've got this: this.collisionLayer = this.map.createLayer('CollisionLayer'); this.ladderLayer = this.map.createLayer('LadderLayer'); this.collisionLayer.resizeWorld(); this.map.setCollisionByExclusion([0 ]); and in the update function: this.game.physics.arcade.collide(this.player, this.collisionLayer); this works just fine, and the player collides with the collisionLayer and so on. However if i do this: this.game.physics.arcade.collide(this.player, this.ladderLayer); Nothing happens. I can collide perfectly fine with the ground in my small level. But the exact same code doesnt work for the ladderLayer. I've attached the file beneath if anyone would be so kind as to take a gander. Thanks for your time. firstMap.js

I'm trying to stitch together random tilemaps to randomly generate a level. I'm attempting to do this by changing the [x, y] position of a tilemap layer, however changing those values don't result in anything. I found this post and am wondering if it has been address in 2.6.2:

I'm having a bit of trouble with tilemap collisions. I'm using P2 and a json tiled tilemap. Strangely, it seems to work with small, simple tilemaps but as soon as I boost the complexity it seems to stop working. I've got a simple car being driven by physics that turns one way when you touch and the other when you don't. Help? Here's the create code: create: function(){ game.physics.startSystem(Phaser.Physics.P2JS); //!THIS STUFF WORKS WITH TEST MAP this.map = this.add.tilemap('city'); this.map.addTilesetImage('roguecity'); this.decorationLayer = this.map.createLayer('decoration'); this.collisionLayer = this.map.createLayer('collision'); this.collisionLayer.resizeWorld(); this.map.setCollisionBetween(0, 12); this.physics.p2.convertTilemap(this.map, this.collisionLayer); this.stage.backgroundColor = "#d3d3ff"; this.cursors = game.input.keyboard.createCursorKeys(); game.input.keyboard.addKeyCapture([ Phaser.Keyboard.SPACEBAR ]); //map stuff //create the layer //this.backgroundLayer = this.map.createLayer("background"); //car stuff this.car = game.add.sprite(60,35,"car"); game.physics.p2.enable(this.car); this.car.anchor.set(0.1,0.5); this.car.body.allowRotation = true; }, Thanks!

Hello ! I'm currently making a custom engine in JavaScript (canvas). I already did sprites, particles, events (touch, keyboard, mouse) and a basic script to render tilemaps (no scrolling yet) I want to code the scrolling, camera and world system. If I create a game with a world of 30,000 pixels width and 15,000 pixels height, and my camera is in 800x and 800y for exemple; should I: -Call render and update functions for every element in the world (even if they are outside the canvas) -Get elements who are in the camera to update and render them. - Should I do something else ? What is the best thing to do ? Thanks

What is the smart way to do top-down tile terrain borders in Phaser? You can't see hard-line tile edges if you look at basically any top-down game with tiles (Sid Meier's Colonization, Rimworld, Civilization 2, Heroes of Might & Magic); there are a few pixels between the tiles that get merged which makes the image as a whole look more or less seamless. Using Phaser, it looks to me like manipulating and rendering a large tile-based game map/board should probably make use of Tilemaps. However, the examples all look like the tilemap tiles do not overlap at all. I can see how you could make a complete set of intermediate/edge/border tiles if your tileset only had a couple types of terrain on a single tilemap. Assuming that you rotate tiles when needed then such a tileset requires you needing something like a straight edge, an inner corner, an outer corner, and a pocket (bordered on 1, 2, 3, or 4 sides) for every terrain combination. For 2 terrains, that is only 4 border tiles. For 3 terrains, that is 12 border tiles. For 4 terrains, that is 24 border tiles. ... For 16 terrains, that is 480 border tiles! This is clearly unsustainable. So what is the solution? Is it possible to use a negative margin and positive spacing in the Tileset? Do you use a second TilemapLayer with partially transparent border tiles (so you only need some border tiles per terrain instead of per terrain combination)? Do you manually load images instead of using the Tilemap objects/functionality?

I started playing around with Phaser but I consistently have problems with collisions. I have a tilemap here https://github.com/lededje/game/blob/master/src/tilemaps/WorldTilemap.js A sprite here https://github.com/lededje/game/blob/master/src/objects/Player.js and the gamestate here https://github.com/lededje/game/blob/master/src/states/GameState.js As far as I know everything is in order but still no collisions. Aside from the answer to my query (which would be great) I'd also like to ask how to go about debugging these things in the future. I checked the `collision` layer in the tilemap and it has a body but that was as far as I got. What other things should I check for to see why this wouldn't be working? Thanks!

I mean tilemaps! Dang OS X autocorrector is not helpful. I can't for the life of me find any description of the JSON files used with tilemaps. I can guess what a lot of it is but not, for example, what the "data" attribute is for. Since I'm making my own tilemaps I'm at a standstill. Can someone point me to where they're described?

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.

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

Does anyone have any working examples of using the createFromTiles() function of tilemaps that they would be willing to share?

Hi there, I have a basic prototype, it´s a basic plattformer and I have the hero and the platforms working (with tilemaps) At the beginning of the game, I drop the hero on top of a platform and everything works fine I can walk in the platform and drop into a platform below. Also I can jump, but the problem is that I can jump everytime instead of just when I´m touching the floor (basically I can fly!). I´m using the sprite.body.touching.down property but it seems it´s not working at all, even when I´m walking on top of a platform the value of body.touching.down is false (and the physics and working fine) Am I missing something? Should I do "something else"? If it helps, here´s my code create: function () { this.game.physics.startSystem(Phaser.Physics.ARCADE) this.game.physics.arcade.gravity.y = 1000; this.cursors = this.game.input.keyboard.createCursorKeys(); this.map = this.add.tilemap("level1") this.map.addTilesetImage("tiles_spritesheet", "gameTiles") this.fondo = this.map.createLayer("fondo") this.bloques = this.map.createLayer("bloques") this.map.setCollisionBetween(1,160, true, "bloques") this.bloques.resizeWorld(); this.hero = this.game.add.sprite(this.game.world.width*0.3, this.game.world.height*0.25, "prota") this.hero.scale.setTo(0.5); this.hero.anchor.setTo(0.5) this.physics.enable(this.hero) this.game.camera.follow(this.hero) }, jump:function(){ console.log(this.hero.body.touching) this.hero.body.velocity.y = -400; }, update:function(){ this.hero.body.velocity.x = 0; this.game.physics.arcade.collide(this.hero, this.bloques) if(this.cursors.right.isDown){ this.hero.body.velocity.x = 300; }else if(this.cursors.left.isDown){ this.hero.body.velocity.x = -300; } if(this.cursors.up.isDown){ this.jump(); } }

I want to calculate a distance between object of the platformer and a place it can possibly achieve without moving up or down (face the obstacle or fall down), just left or right. So I use test bodies called this.shadowSide (to watch wall facing) and this.shadowDown (to watch falling). Prefer to call them "shadow bodies". I use this.game.physics.arcade.overlap to determine if the shadow body overlaps the floor. I move shadow bodies (left or right, depending of the direction I need), check overlaps and either continue searching or return a distance. It works well for sprite floors. The trouble is that this.game.physics.arcade.overlap doesn't seem to work with tilemaps. So I am looking for a way to indicate body vs. tilemap overlap. Or to calculate the distance in another way. Did anyone do that? The method with this.game.physics.arcade.overlap used with tilemap (left) and sprite floor (right): http://codepen.io/anon/pen/dPxbJw?editors=001 (use left and right cursor arrows to move bumpers and watch the distance change)The issue with body vs tilemap overlap: http://codepen.io/anon/pen/pvXGWR?editors=001 (I don't know whether or not it is an actual error)