Search the Community

Showing results for tags 'tilemap'.

More search options

  • Search By Tags

    Type tags separated by commas.
  • Search By Author

Content Type


  • HTML5 Game Coding
    • News
    • Game Showcase
    • Coding and Game Design
  • Frameworks
    • Phaser
    • Pixi.js
    • Babylon.js
    • Panda 2
    • melonJS
    • Haxe JS
    • Kiwi.js
  • General
    • General Talk
  • Business
    • Collaborations (un-paid)
    • Jobs (Hiring and Freelance)
    • Services Offered

Found 306 results

  1. Make tilemap/world fit in game?

    Hi, I just learned some basics of using tilemaps. I created a tilemap using Tiled, containing 32x32px tiles. The problem is, I can't resize the entire tilemap to fit the entire canvas. I need the layer in the tilemap or the world itself to fit the canvas. scale.setTo() works, but that's relative and I want to set the width and height to that of the game's canvas. Changing displayWidth and width doesn't seem to have any effects. The tilemap still appears small in the upper left corner of the canvas. Any suggestions guys? Code: var playLevel = { create: function() { ='tilemap');'sewer', 'sewerTileset'); //Need to make this layer larger by a specified amount this.groundLayer ='Ground');, 200, true, 'Ground'); this.groundLayer.resizeWorld(); }, update: function() { } } EDIT: I just found out that changing width and height DOES work. But for some reason, instead of the tilemap's width being 32 * 20 = 640, it returned 940, which is the width of the canvas. But the tilemap itself looks to be 640 pixels wide, so I don't know why the width and height properties don't correspond to the actual ones. So I guess I can't use it?
  2. Code pen: I am moving a NPC back and forth on a plattform by checking if the end tile is one of the tiles that are edges in the tilemap and if so swicthing the x velocity. I am having trouble with getting the moving sprite to move equally as far out of the edge of the plattform on both sides, but it seems the sprite is only colliding with one tile at the time, namely the tile that is touching the right bottom corder of the sprite, can I set the collide to be on the tile that is under the middle of the sprite?
  3. Thanks for your help, anyone who can spare the time. I've been digging around other threads and have found similar issues but not specifically what's happening to me, and I haven't found a solution yet. Basically Phaser is rendering the wrong tiles when I load my tilemap and tileset image. I'm using a tileset image that is 512/512, divided into a tileset with 16 rows and 16 columns of 32/32 tiles. My tilemap tiles are 32/32. I load the tilemap json object, and the image, as I'm supposed to, and then in the create function create the layers and add the sprite. My sprite is colliding with walls, but the tilemap looks like the tiles are simply a few tiles over from the index of the tiles I placed when I made my map. Everywhere I've read says this is a problem with the tileset not being divisible by the map tiles height/width but that's clearly not the case here. Other people say it's a problem with phaser's implementation of tilemaps, but I can't figure out how to fix the problem short if editing the json by hand which seems stupid. No discernible effect is observed when I change the firstgid in the json, either. Some code: function preload() { game.load.tilemap('map', 'maps/wintertest32.json', null, Phaser.Tilemap.TILED_JSON); game.load.image('wintertest32', 'img/snowy.png'); game.load.image('player', 'img/singlebunny.png', 32, 32); } function create() { map = game.add.tilemap('map'); map.addTilesetImage('wintertest32', 'wintertest32'); backgroundLayer = map.createLayer('backgroundLayer'); platformLayer = map.createLayer('platformLayer'); groundLayer = map.createLayer('groundLayer'); foregroundLayer = map.createLayer('foregroundLayer'); groundLayer.resizeWorld() map.setCollisionBetween(1,6000, true, groundLayer, true) player = game.add.sprite(32, 32, 'player'); player.frame = 1 and so on... }
  4. Hi all, First off, apologies if I'm jumping the gun a bit here since I'm not sure if Mike's work on the Tilemap API is still a WIP or if it's wrapping up. That being said, the Tilemap API is near and dear to my heart due to its role within my personal projects. After poking around the recent Tilemap commits I'm curious about one thing: Are there plans to maintain layer ordering of layers within a Tilemap object as they are within the Tiled JSON? For instance: In a particular map I have something like the above where layer 1 is beneath layer 2 and object layer 1 is between layers 2 and 3. In the current build of v3 as was the implementation in v2, we lose this relationship between layers once we parse in our JSON. Current parser for reference: Within the final Tilemap, we are given the properties "objects," "layers," and "images" (ignoring collision for time being). Is there any plan to include a property on a Tilemap object that contains the ordered (as they are in the JSON) array of all layer types that are currently supported? My first instinct would be to suggest having the "layers" property serve that purpose and instead rename the existing property to "tileLayers" for the sake of being specific. That being said, a shout-out to Mike for doing an excellent job cleaning up and improving the Tilemap API. I'm excited to put it through its paces!
  5. Hi there, I'm playing around with the v3 API and wondered how to collide with a layer of a tilemap. Here is what I've already tried: 1) Get tiles data (there is probably a better way / API helper for that like forEachTile) and then use setCollision. let tilesData = (, true, false, this.platformLayer) 2) Do the opposite by excluding an empty array.[], true, false, this.platformLayer) 3) API v2 style. this.physics.arcade.collide(this.player, this.platformLayer); Here is my game config, if someone have the time to spot what I'm doing wrong. Thanks! let config = { type: Phaser.AUTO, parent: 'content', width: 800, height: 600, pixelArt: true, backgroundColor: '#2d2d2d', physics: { default: 'impact', impact: { setBounds: true, debug: true }, }, scene: [ Boot, Preload, TileMapTest ] } let game = new Phaser.Game(config) And here is my Scene /* globals __DEV__ */ class TileMapTest extends Phaser.Scene { constructor () { super({ key: 'TileMapTest' }) if (__DEV__) { console.log('TileMapTest scene created.') } = null this.player = null this.cursors = null this.rockLayer = null this.waterLayer = null this.platformLayer = null this.stuffLayer = null } preload () { // Hero this.load.image('hero', './assets/sprites/hero.png') // Tilemap this.load.image('kenny_platformer_64x64', './assets/tilemaps/tiles/kenny_platformer_64x64.png') this.load.tilemapJSON('multiple-layers-map', './assets/tilemaps/maps/multiple-layers.json') } create () { if (__DEV__) { console.log('TileMapTest scene entered.') } this.createTileMapLayers() this.createPlayer() this.cameras.main.startFollow(this.player) this.cameras.main.setBounds(0, 0,,, 0,, // ---> @todo collide with platformLayer } update (time, delta) { this.updatePlayer(time, delta) } createPlayer () { this.player = this.physics.add.sprite(200, 200, 'hero', 4).setOrigin(0, 0.15) this.player.setActive() this.player.setMaxVelocity(500) this.player.setFriction(1000, 100) this.player.body.accelGround = 1200 this.player.body.accelAir = 600 this.player.body.jumpSpeed = 500 // this.player.body.collideWorldBounds = true this.cursors = this.input.keyboard.createCursorKeys() } createTileMapLayers () { = this.make.tilemap({ key: 'multiple-layers-map' }) let tiles ='kenny_platformer_64x64') this.rockLayer ='Rock Layer', tiles, 0, 0) this.waterLayer ='Water Layer', tiles, 0, 0) this.platformLayer ='Platform Layer', tiles, 0, 0) this.stuffLayer ='Stuff Layer', tiles, 0, 0) } updatePlayer (time, delta) { let accel = this.player.body.standing ? this.player.body.accelGround : this.player.body.accelAir if (this.cursors.left.isDown) { this.player.setAccelerationX(-accel) } else if (this.cursors.right.isDown) { this.player.setAccelerationX(accel) } else { this.player.setAccelerationX(0) } // Jump if (this.cursors.up.isDown && this.player.body.standing) { this.player.setVelocityY(-this.player.body.jumpSpeed) } } } export default TileMapTest
  6. I am making a platformer game with Phaser 2.9.2 where the map is loaded from a JSON file and am having difficulty trying to make interactive tiles which are replaced by a new tile with a collision from a single-direction. I have found a function which allows me to control the direction of collision direction of tiles, so I am hoping to find out how to activate a function and replace individual tiles when there is the sprite and tile are overlapping. I have been thinking of adding the tiles individually in JSON with unique properties and using the .createFromObjects method, but I want every tile to have the same properties and the potential to make multiple stages. So I am hoping there is way to activate a function when the players sprite overlaps with the tile, and in the function it replaces that individual tile with another tile from the tilemap.
  7. Dynamic TileMap

    Took me some time to understand the example with a blank tilemap. Maybe because it comes along with mouse input and extraction of tiles from a predefined source. So i thought i'll leave this here. assets/bg.png is an image with 32x32 pixels holding 4 different background sprites. Dynamic tile map created from an array (found in another example): var game = new Phaser.Game(1280, 1024, Phaser.AUTO, 'eAnt', { preload: preload, create: create, update: update, render: render }); function preload() { game.load.image('background', __dirname+'/assets/bg.png'); } var cursors; var map; var sand; var layer1; var obstacks; var tileset1; var tileset2; function create() { game.stage.backgroundColor = '#2d2d2d'; // Create some map data dynamically // Map size is 128x128 tiles var data = ''; for (var y = 0; y < 24; y++) { for (var x = 0; x < 24; x++) { data += game.rnd.between(0, 3).toString(); if (x < 23) { data += ','; } } if (y < 23) { data += "\n"; } } //console.log(data); // Add data to the cache game.cache.addTilemap('dynamicMap', null, data, Phaser.Tilemap.CSV); map = game.add.tilemap('dynamicMap',16, 16); // Das Tilset für den Boden hinzufügen tileset1 = map.addTilesetImage('background','background', 16, 16); console.log('tileset1.tileWidth',tileset1.tileWidth); console.log('tileset1.tileHeight',tileset1.tileHeight); console.log('tileset1.columns',tileset1.columns); console.log('tileset1.rows',tileset1.rows); console.log('',; // Layer für den Hintergrund erstellen, Maße durch das data-Array vorgegeben layer1 = map.createLayer(0); layer1.scrollFactorX = 1.5; layer1.scrollFactorY = 1.5; // Scroll it layer1.resizeWorld(); console.log('',; console.log('',; console.log('',map.heightInPixels); console.log('',map.widthInPixels); console.log('map.tileWidth',map.tileWidth); console.log('map.tileHeight',map.tileHeight); // Hindernisse obstacks =; cursors = game.input.keyboard.createCursorKeys(); } function update() { if (cursors.left.isDown) {; } else if (cursors.right.isDown) {; } if (cursors.up.isDown) {; } else if (cursors.down.isDown) {; } } function render() { } Dynamic tile map with "on the fly" created random tile: var game = new Phaser.Game(1280, 1024, Phaser.AUTO, 'eAnt', { preload: preload, create: create, update: update, render: render }); function preload() { game.load.image('background', __dirname+'/assets/bg.png'); } var cursors; var map; var layer1; var obstacks; var tileset1; function create() { game.stage.backgroundColor = '#2d2d2d'; // Eine leere TileMap erstellen map = game.add.tilemap(); // Das Tilset für den Boden hinzufügen tileset1 = map.addTilesetImage('background','background', 16, 16); console.log('tileset1.tileWidth',tileset1.tileWidth); console.log('tileset1.tileHeight',tileset1.tileHeight); console.log('tileset1.columns',tileset1.columns); console.log('tileset1.rows',tileset1.rows); console.log('',; // Layer für den Hintergrund erstellen, 24 x 24 Tiles die jeweils 16 x 16 px groß sind layer1 = map.create('background', 24, 24, 16, 16); layer1.scrollFactorX = 1.5; layer1.scrollFactorY = 1.5; // Scroll it layer1.resizeWorld(); console.log('',; console.log('',; console.log('',map.heightInPixels); console.log('',map.widthInPixels); console.log('map.tileWidth',map.tileWidth); console.log('map.tileHeight',map.tileHeight); // Das Layer mit Tiles füllen for (var y = 0; y < 24; y++){ for (var x = 0; x < 24; x++){ // Zufälliges Bild aus dem Hintergrund-Tileset var SpriteIndex = game.rnd.between(0,; var t = new Phaser.Tile(layer1, SpriteIndex, x, y, 16, 16); map.putTile( t, x, y, layer1); } } // Hindernisse obstacks =; cursors = game.input.keyboard.createCursorKeys(); } function update() { if (cursors.left.isDown) {; } else if (cursors.right.isDown) {; } if (cursors.up.isDown) {; } else if (cursors.down.isDown) {; } } function render() { }
  8. My player sprite doesn't collide with the tilemap at all. I've also tried enabling physics for the layers and map, which doesn't work either. I also checked all other topics in this forum about collisions with a sprite and tilemap, but I still can't figure out the error. Here's my code: import { findObjectsByType, movePlayerTo } from './src/map.js'; import { checkPlayerMovement } from './src/movement.js'; const game = new Phaser.Game(window.innerWidth, window.innerHeight, Phaser.AUTO, '', { preload: preload, create: create, update: update, render: render }, false, false); //The player sprite and properties let player, properties = {}; //Settings const worldScale = 2; //Helpers let cursors; //Layers let map, background, walls; function preload() { //Load tiles game.load.spritesheet('tiles', 'assets/Tileset.png', 16, 16); game.load.tilemap('SafeZone1', 'assets/SafeZone1.json', null, Phaser.Tilemap.TILED_JSON); } function create() { //LOGIC game.stage.backgroundColor = "#1c1117"; game.physics.startSystem(Phaser.Physics.ARCADE); setMap('SafeZone1'); player = spawnPlayer(50, 50); cursors = game.input.keyboard.createCursorKeys(); movePlayerTo(player, findObjectsByType('playerStart', map, 'objects')[0], worldScale);,; //Spawn the player function spawnPlayer(x, y) { const p = game.add.sprite(x, y, 'tiles', 132); game.physics.enable(p); p.scale.setTo(worldScale); p.body.collideWorldBounds = true; return p; } //Add the map with the given name and manipulate it accordingly. function setMap(mapName) { map = game.add.tilemap(mapName); map.addTilesetImage('Tileset', 'tiles'); map.setCollisionBetween(0, 300); //All tiles walls = map.createLayer('walls'); walls.scale.setTo(worldScale); background = map.createLayer('background'); background.scale.setTo(worldScale); background.resizeWorld(); } } function update() { game.physics.arcade.collide(player, map); if(cursors) checkPlayerMovement(player, cursors, 150); } function render() { game.debug.bodyInfo(player, 5, 20); } map.js export function findObjectsByType(type, map, layer) { var result = []; map.objects[layer].forEach(function (element) { if ( === type) { element.y -= map.tileHeight; result.push(element); } }); return result; } export function createFromTiledObject(element, group) { var sprite = group.create(element.x, element.y,; Object.keys( (key) { sprite[key] =[key]; }); } export function movePlayerTo(player, element, worldScale) { player.x = element.x * worldScale; player.y = element.y * worldScale; } movement.js export function checkPlayerMovement(player, cursors, speed) { const vel = player.body.velocity; vel.x = 0, vel.y = 0; if(cursors.left.isDown) vel.x = -speed; if(cursors.right.isDown) vel.x = speed; if(cursors.up.isDown) vel.y = -speed; if(cursors.down.isDown) vel.y = speed; }
  9. I'm currently working on automating the loading process of my tilesets/sprites/Tiled map data into my application and I've run into the following snag: When creating the layers of my map (i.e. invoking myTilemap.createLayer(...)) I cannot see any obvious way of preserving the order of tile layers and object layers as they were in the Tiled JSON. From what I can see in the Phaser docs and in Phaser.js itself, it appears that Phaser parses out the tile and object layers into separate groupings within the Tilemap object: layers[] & objects{} respectively. This is fine, but there's no way I can see to tell where my object layers are supposed to be relative to the tile layers. For instance, I have this in Tiled: Tile layer 1 Object layer 1 Tile layer 2 But in the Tilemap object, I get: layers = [Tile layer 1, Tile layer 2] Objects = {Object layer 1} Without relying on naming convention, I can't tell that object layer 1 is between the two tile layers. Am I missing something or is this just the way it is right now? I've got plans to refactor the Phaser.js code locally to address this, but I wanted to reach out here before getting my hands dirty to see if I am missing the easy solution. Thanks in advance for any pointers!
  10. So I'm getting these weird collision glitches, where I get knocked back randomly. This only seems to happen when I set my sprite's body's width to 8, as opposed to the sprite's width of 16. I'm using Arcade physics, if that makes a difference.
  11. Hi everyone, I just wanted to share a new Phaser Plugin called phaser-tilemap-plus, that extends the tilemap loader and factory to support tile animations defined in the Tiled editor. It also allows you to implement collision detection against the map using polygons and rectangles within an object layer, enabling the use of sloped and curved surfaces. It will eventually also support custom properties and region-based events via the object layer. You can access and build the library from GitHub or install it directly as a Node package via NPM. Please note that it is still a work in progress, with features that are yet to be added and kinks to iron out. Anyhow, let me know what you think!
  12. Hi guys i have a tilemap with 4 layers(ground, water, roads, others) and a sprite with my character. how i do would for my character can collide with everything inside on others(layer),every layer use a different sprite, example ground use ground.png, water water.png etc, i have this code ( i use /* globals __DEV__ */ import Phaser from 'phaser' import Mushroom from '../sprites/Mushroom' import Link from 'phaser-link' export default class extends Phaser.State { super() { } init () {} preload () { this.load.image('terrain', '../../assets/sprites/tileset_basic_terrain.png', 16, 16) this.load.image('this.others', '../../assets/sprites/tileset_other.png', 16, 16) this.load.image('water', '../../assets/sprites/tileset_water.png', 16, 16) this.load.tilemap('tilemap', '../../assets/map/overworld_01.json',null,Phaser.Tilemap.TILED_JSON) this.load.spritesheet('character', '../../assets/sprites/character.png', 16, 32, 1) } create () { ='tilemap')'tileset_basic_terrain', 'terrain', 16, 16)'tileset_other', 'this.others', 16, 16)'tileset_water', 'water', 16, 16) this.ground ='Ground') this.ground.resizeWorld() this.water ='Water') this.water.resizeWorld() this.others ='Others') this.others.resizeWorld() console.log([3]) this.roads ='Roads') this.roads.resizeWorld(),1000, true, this.others) this.physics.startSystem( Phaser.Physics.ARCADE ) = this.add.existing(new Link({ game:, key: 'character', controls: true, })); } update() {, this.others); } render () { if (__DEV__) { //this.debug.body(this.player,16, 32) } } } But sometime when i try test the collision between the player and layer others, this don't work correctly, collide in a blank block in somewhere place for example left and top place, but in bottom and right place the collide work correctly. for create my map i use tilemap editor 1.0.3 Images of example: there i can't move more to right: there i can't move more to bottom: there work correctly Sorry for my bad english. and thanks overworld_01.json
  13. Can a tile from a tilemap be moved?

    So I am trying to make a platformer game using Phaser. The game contains a lot of blocks (tiles) which are loaded from the tilemap. Now what I want is that these blocks can be moved dynamically during the game (for ex. if the player bangs their head against it). The thing is, I don't know how? My first question is, is this possible? Because I tried changing the position, it didn't work (but I successfully changed its alpha). Moreover, I tried using Physics P2, but it has a null sprite value, so all the changes done are done to the body and the sprite still remains there. I can use any physics system, I am open to all. All I need is a way to work this out.
  14. Phaser Plugin: NavMesh Generation

    Update 27 Sept: v0.1.0 Released: I've published the plugin and is available on NPM: The SRC can be viewed on the GitHub repo: Summary (apologies for the long post) I've been working on this for a few weeks now, and thought I'd share the Work in Progress so far: I'm still working on various edge cases, bugs and performance R&D, but it's in a state worth demoing IMO & thought I'd share the progress with the forum, see if there's any interest in that sort of thing. It's a relatively simple plugin to use, where you give it the ref. of a Phaser.Tilemaplayer, a couple of options & it generates a Navigation Mesh for use later by your Sprites & Game Objects. This plugin for now has a very simple set of options; all that's passed to it includes: The Phaser.Tilemap (required) The Phaser.TilemapLayer that's acting as your 'collision' layer (required) Any collision indices that determine the impassable tiles (required) Any debug options you want so you can see the calculations How much you want to offset your Sprites from the calculated path What I call a 'midpoint' threshold - more on that in a minute Demo Videos: (NB: the 'pause' between the drawing of new tiles & the NavMesh update was intentional, so it didn't get run until onMouseUp - it's not performance lag - the NavMeshs are generating / updating in about 15 - 20ms ) This demos basic movement; the test Sprite is a little hard to make out, sorry! I draw some extra impassable tiles to show the NavMesh re-calculating new triangles: This shows how with narrow spaces, the NavMesh uses the 'midpoint' of the the polygon line segment, instead of trying to turn around corners Why do this? This all started with a larger project I'm working on: it's going to (hopefully!) involve large tilemaps, a large number of sprites and procedural generation. A messy combination. As a result, I've been looking into ways I could perform pathfinding around Tilemaps in Phaser, and the most popular choice seems to be the grid-based a*star plugins; while in the main it probably does the job for smaller tilemaps, I don't think they scale very well. One standard method of pathfinding used by other engines is something called Navigation (Nav) Meshes: basically, you calculate all the passable areas on your map and reduce it all to a small array of connected polygons, then figure out how to travel across those polygons. In my R&D, I did come across Mike Westhad's great Phaser NavMesh plugin that does this, but one limitation of it is that it expects the Developer to have manually drawn the NavMesh in the Tiled Editor. IMO, this didn't go far enough as it'd be great if a plugin could 'just' take any Phaser.TilemapLayer, inspect its passable areas and calculate a NavMesh on the fly. Assuming your game uses a larger, more complicated map, then in theory a NavMesh could be much more performance friendly than a giant A*Star grid. Because we're reducing all passable tiles into a smaller number of triangle space, there are fewer computations needed to get from point A to point B, as rather than (for instance) iterating across dozens, or even hundreds of grid tiles to find the shortest path, you're only iterating across a handful of polygons instead. Equally, if you do this at the load of your game level it should be a relatively small footprint of memory in your game. The Science Bit: How does this work? Well, the principle is actually quite 'simple' really. To give a rough breakdown of the process of calculation: Iterate across the tileLayer and merge all the impassable tiles into a series of unified polygons; this is done using what's known as 'Marching Squares Algorithm' - often used for finding the outlines of graphics objects. Recursively do this until we're confident we've found all possible impassable tile groups, and any groups within each other Extract all the corner points for these polygons, and perform 'Constrained Delaunay Triangulation' on these points. Basically, fill the area with connected triangles with these corner points. Loop over all these triangles, and find each others' neighbours. When we actually want to trace a path from A to B, find the triangle underneath the two points, then use A*Star to discover the shortest sequence of triangles to get to that destination. Use Funnel Algorithm to draw a path through those triangles, finding the corners around which to move. - This is where the 'midpoint threshold' comes into play, as some polygons might be too small to properly corner around: so instead we just take the midpoint of the funnel edge instead.
  15. Hello! I'm not well versed in game development but I write a lot of JS for my classes and my job, so I'd like to think I have some semblance of knowing what I'm doing, but the issue I'm having with Phaser right now is completely beyond me. It's hard to accurately describe my problem in words, so I've left the entire project as an attachment for you to see for yourself. (Cursor keys to control.) Essentially, I'm trying to write a simple platformer using a tilemap larger than the screen. However, when the camera is set to follow an object, and that object crosses the center of the window in a given direction on either axis, the camera slides in that direction at high speed - it seems to depend on how far you've crossed the threshold - until it reaches the stage boundary. The most difficult part is that the object seems to move properly relative to the camera - meaning it moves across the stage itself at very high speeds, confusing the arcade physics system and causing clips and zips galore if you're in the wrong places (try jumping under the spawn platform, for instance - you'll zip to the left or right) The problem doesn't happen at all when the stage size is equal to the game window size, nor does it happen if the camera is not following an object. Here are some things I've tried to resolve the issue: Removing game window scaling code Rewriting of Tilemap import code & use of different maps and tilesets Refactoring/simplification of the Player object (as well as forgoing the use of a class and extending Phaser.Sprite) Applying "layer.fixedToCamera = false" and "layer.fixedToCamera = true" Restarting the project and rewriting all code (this happened on a prior test project as well) Rolling back to some prior versions of Phaser I'm not certain whether the issue is with my Tilemap setup, my use of the camera, the general jankiness of the arcade physics system, or maybe something else I haven't taken into account, but given half of my Google searches lead here, I'm sure someone's got some kind of answer for me. For convenience, here's the important bits of my code, in case anything looks off at first glance: (game.js, the main game code) 'use strict' /* global Phaser, Player */ var game = new Phaser.Game( 161, // width 145, // height Phaser.AUTO, // idek 'game', // game name { create: create, update: update, preload: preload, render: render } // functions ) game.antialias = false function preload () { game.load.tilemap('mapTest', 'assets/map/testmap.json', null, Phaser.Tilemap.TILED_JSON) game.load.image('tileGrass', 'assets/img/grass.png') game.load.image('bgClouds', 'assets/img/bg.png') game.load.spritesheet('spritePlayer', 'assets/img/player.png', 9, 9) } let bg, player, map, layer function create () { // display background bg = game.add.image(1, 1, 'bgClouds') bg.fixedToCamera = true // instantiate the map map = game.add.tilemap('mapTest') map.addTilesetImage('tileGrass', 'tileGrass') layer = map.createLayer('terrain') map.setCollisionBetween(1, 10, 'terrain') layer.resizeWorld() layer.debug = true // initialize physics and set gravity game.physics.startSystem(Phaser.Physics.ARCADE) game.physics.arcade.gravity.y = 257 // set up the player player = new Player(game, 33, 49) game.physics.arcade.enable(player) // set game scale game.scale.scaleMode = Phaser.ScaleManager.USER_SCALE game.scale.setUserScale(6, 6) game.renderer.renderSession.roundPixels = true Phaser.Canvas.setImageRenderingCrisp(game.canvas) // camera: follow the player } function update () { game.physics.arcade.collide(player, layer) } function render () { game.debug.body(player) game.debug.body(layer) game.debug.text(Math.round(player.body.position.x), 9, 17) } game.antialias = false (player.js, the Player object file) /* global Phaser */ class Player extends Phaser.Sprite { constructor (game, x, y) { // set up the player super(game, x, y, 'spritePlayer') // physics game.physics.enable(this, Phaser.Physics.ARCADE) this.velCap = {x: 64, y: 150} this.jumpVel = -100 this.acceleration = 500 // units per second // animations this.anims = { 'idle': this.animations.add('idle', [0, 1, 2, 3], 6, true), 'walk': this.animations.add('walk', [8, 9, 10, 11, 12, 13, 14, 15], 15, true), 'down': this.animations.add('down', [21, 22], 15, false), 'jump': this.animations.add('jump', [16, 17, 18, 19], 15, false), 'fall': this.animations.add('fall', [19], 20, true), 'land': this.animations.add('land', [20, 21, 22, 23], 10, false) }'idle') this._facing = true this.anchor.setTo(0.5, 1) this.body.setSize(6,8,1,0) this.body.tilePadding.x = 12 this.body.tilePadding.y = 12 // input this.keys = game.input.keyboard.createCursorKeys() // add the player to the stage game.stage.addChild(this) } // facing code set face (bool) { if (bool) { this.scale.x = 1 } else { this.scale.x = -1 } this._facing = bool } get face () { return this._facing } update () { let airborne = !(this.body.blocked.down || this.body.touching.down) let dt = game.time.physicsElapsed if(this.keys.right.isDown) { this._move(dt, true, airborne) } else if(this.keys.left.isDown) { this._move(dt, false, airborne) } else{ this._decelerate(airborne) } if(this.keys.up.isDown && !airborne) { this._jump() } else if(this.keys.down.isDown && !airborne) { this._crouch() } this._capMovement() } _move (dt, right, airborne) { if(this.face != right){ this.face = right if(!airborne){ this.body.velocity.x = -this.body.velocity.x } } else { this.body.velocity.x += Math.floor(this.acceleration * (right ? 1 : -1) * dt) if (airborne) {'fall') } else {'walk') } } } _jump () { this.body.velocity.y = this.jumpVel'jump') } _crouch() { // stop all movement and crouch the player this.body.velocity.x = 0 if( != 'down'){'down') } } _decelerate(airborne) { this.body.velocity.x = this.body.velocity.x / 2 if(airborne){'fall') } else {'idle') } } _capMovement () { if(this.body.velocity.y > this.velCap.y){ this.body.velocity.y = this.velCap.y } else if (this.body.velocity.y < -this.velCap.y) { this.body.velocity.y = -this.velCap.y } if(this.body.velocity.x > this.velCap.x){ this.body.velocity.x = this.velCap.x } else if (this.body.velocity.x < -this.velCap.x) { this.body.velocity.x = -this.velCap.x } } } Thanks in advance!
  16. Tilemap gets clipped

    Hello all, if i display a tilemap and then move the camera the tilemap gets clipped. When i first load the tilemap everything is rendered properly (red border is the canvas size) but then when i move the camera a bit it looks like this The tilemap is still in the canvas but it doesn't get fully rendered. Here is also a modified example from to demonstrate that problem: just draw some tiles and then move the camera with the arrow keys Any help would be appreciated.
  17. Ladder

    510/5000 Good night people! I'm developing a game where the character needs to climb a ladder. The problem I am facing is when he needs to enter a tile that is down the ladder, as I try to illustrate in the image below. When hitting the tile the pesonagem stops to move because the tile needs to be solid so the character can walk on it, but when he is on the stairs he must pass over this tile. Could someone show an example of how I can do this? Since then, thank you very much.
  18. Hey guys, I'm having trouble swapping tiles in a Tilemap. In all the examples it seems like to get a tile object (to pass into map.putTile) it has be selected from an already instantiated tile that's part of the map. What I'd like to do is create a new tile from the map's tileset. Is this possible?
  19. I am trying to use this lib: and it seems using shader rather than sprites to render tilemap? is it more efficiency? why? the memory usage is the same, right? thanks.
  20. Hi, I'm using a tileset for my maps. Not all tiles fill their whole square though, like the top and bottom blocks there, for example. The player character is a simple square guy. Here's my problem : for example in this part of one of the map, as long as there's one tiny bit of rock in a tile, Arcade will consider the whole tile should detect collisions. Meaning the player will effectively bounce back against thin air. To have more precise collisions, I'd like to have the character using Arcade physics as it's a simple square and I don't need anything fancy for its physics, and I'd like to use P2 to add detailed physics for collision with the "not entirely filled" map tiles. Is that even possible ? How would you go about doing it ? For now, I've made a json file with physics applied to the whole tileset (using PhysicsEditor) and imported it in the preload method of the Preload state like that : //Preload.js InteractiveResume.Preload.prototype = { preload: function() { //... //load Tiled map this.load.tilemap('grottoMap', 'assets/tilemaps/testGrotto.json', null, Phaser.Tilemap.TILED_JSON); //the terrain tileset and its physics this.load.image('mainTileset', 'assets/png/mainTileset.png');"mainTileset-physics", "assets/json/mainTileset-physics.json"); } } I setup my game maps with an external method located in a "global namespace", the method looks like this : //gameFunctions.js var funcs = { mapSetup: function(map) { =; //the first parameter is the tileset name as specified in Tiled, the second is the key to the asset'mainTileset', 'mainTileset', 16, 16); //create layers config.currentState.firstBackgroundLayer ='firstBackgroundLayer'); config.currentState.secondBackgroundLayer ='secondBackgroundLayer'); config.currentState.blockedLayer ='blockedLayer'); //resizes the game world to match the layer dimensions config.currentState.firstBackgroundLayer.resizeWorld(); config.currentState.secondBackgroundLayer.resizeWorld(); config.currentState.blockedLayer.resizeWorld(); //collision on blockedLayer, 100000, true, 'blockedLayer');, config.currentState.blockedLayer); } } (I had to define a global variable 'config.currentState' to access the 'this' keyword representing the current state outside of it, if anyone knows a better solution I'd be very thankful as its quite heavy to use) And then in my Grotto state : // Grotto.js InteractiveResume.Grotto.prototype = { create: function() { //Creating the map, player sprite and everything... //setup Arcade physics for the player character; }, update: function() { //collisions, this.blockedLayer); //... } } Could anyone point me to the correct direction here ? I must admit I'm totally lost
  21. Need help scaling TilemapLayer

    I'm trying to scale a tilemap using TilemapLayer.setScale but it blurs tiles, is there any way to scale tilemap with full quality? Phaser's scaling: Tiled zoom:
  22. I'm trying to get my tilemap to scale and I'm basically following the example here: However, what ends up happening is the tilemap itself will scale but the frames won't. I can't record a GIF because for some reason the screen randomly flashes white when running the PIXI app, but here are some screenshots which may be helpful:
  23. Making looped tilemap

    I am using a tilemap that is draggable and the world bounds are currently equal to the tilemap size. My goal to achieve is converting this simple tilemap to one that is looped by its eastern and western edges so if you scroll over the bounds to east or west you would see the map repeated with all the tiles and sprite objects on it. To describe it more technically I would like the user to feel that all tiles and objects showing up at any ((x % mapWidth), y) position. To fake this effect in case of tilemaps bigger than the screen, I suppose that I require at least two copies of the tilemap and all objects on it side by side. With that and the tricky repositioning of the camera over the two clones I could fake the seamless looping effect. But unfortunately I have no idea how to double the whole map content and make the other one show p when the bounds are crossed. Any hint on how to do that would be a great help.
  24. Collision with Tilemap not working

    H, I'm just beginning a Boulder Dash type of game to teach myself far seems to be a fun and easy library but I've found myself unable to make the player sprite collide with the tilemap representing the level. Perhaps the answer is pretty obvious, but I can't manage to see it. I will share my code: /** * Super fun gamez */ // Main namespaces and definitions var Engine; var Game = Game || {}; = "_lepdash"; Game.version = "0.1"; Game.width = 800; Game.height = 600; /*User*/ Game.tileSize = 32; // Load assets state Game.loadState = { preload: function() { + " loading assets"); // Put your assets loader logic here... /*User*/ Engine.add.text(10, 10, "Loading...", { font: "20px Arial", fill: "#ffffff" }); //Engine.load.image('bg', 'img/bg0.png'); Engine.load.spritesheet("player", "img/player.png", Game.tileSize, Game.tileSize); Engine.load.spritesheet("terrain", "img/terrain.png", Game.tileSize, Game.tileSize); Engine.load.tilemap("map", "maps/map1.json", null, Phaser.Tilemap.TILED_JSON); }, create: function() { Engine.state.start("main"); } }; // Main menu state Game.mainState = { preload: function() { + " main menu"); }, create: function() { // Create your main menu logic here... /*User*/ // Draw main menu Engine.add.text(10, 10,, { font: "20px Arial", fill: "#ffffff" }); Engine.add.text(10, 50, "press space to start", { font: "12px Arial", fill: "#ffffff" }); // Set game parameters Game.level = 1; Game.score = 0; Game.lives = 3; // Wait for user input var key = Engine.input.keyboard.addKey(Phaser.Keyboard.SPACEBAR); key.onDown.addOnce(function() { Engine.state.start("play"); }, this); } }; // Play loop state Game.playState = { cursors: null, //player: null, preload: function() { + " play loop"); }, // Create your play logic here /*User*/ create: function() {"Game params", Game); Engine.physics.startSystem(Phaser.Physics.ARCADE); // build map = Engine.add.tilemap("map");"tiles", "terrain"); //"tiles name in JSON", "tileset" defined in preload state, "map" + Game.level); /*, function(a, b, c) {"callback", this, a, b, c) }, this);*/ Game.layer ="map" + Game.level); Game.layer.resizeWorld(); Game.layer.debug = true; // add player Game.player = this._createPlayer();"tap"); Engine.physics.enable(Game.player); //Game.player.body.setSize(10, 14, 2, 1); this.cursors = Engine.input.keyboard.createCursorKeys(); // add HUD Game.HUD = Engine.add.text(10, Game.height - 15, "", { font: "15px Arial", fill: "#ffffff" }); }, update: function() { Engine.physics.arcade.collide(Game.player, Game.layer); this._checkInput(); this._updateHUD(); }, render: function() { Engine.debug.body(Game.player); }, _updateHUD: function() { Game.HUD.text = "Map:" + Game.level + " Score: " + Game.score + " Lives: " + Game.lives; }, _checkInput: function() { Game.player.body.velocity.set(0); if (this.cursors.left.isDown) { Game.player.body.velocity.x = -100;"left"); } else if (this.cursors.right.isDown) { Game.player.body.velocity.x = +100;"right"); } else if (this.cursors.up.isDown) { Game.player.body.velocity.y = -100;"up"); } else if (this.cursors.down.isDown) { Game.player.body.velocity.y = 100;"down"); } else {"still"); } }, _createPlayer: function() { var player = Engine.add.sprite(Game.tileSize, Game.tileSize, "player"); player.animations.add("left", [ 7, 8, 9, 10, 11, 12, 13 ], 20, false); player.animations.add("right", [ 14, 15, 16, 17, 18, 19, 20 ], 20, false); player.animations.add("up", [ 7, 8, 9, 10, 11, 12, 13 ], 20, false); player.animations.add("down", [ 14, 15, 16, 17, 18, 19, 20 ], 20, false); player.animations.add("still", [ 0 ], 10, false); player.animations.add("blink", [ 0, 1, 2, 1 ], 10, false).onComplete.add(function() {"still"); }); player.animations.add("tap", [ 3, 4, 3, 4, 5, 6, 5, 4, 3, 4, 3, 4, 5, 6, 5, 4 ], 10, false).onComplete.add(function() {"still"); }); return player; } }; // Setting up main states Engine = new Phaser.Game({ //enableDebug: false, width: Game.width, height: Game.height, renderer: Phaser.AUTO, antialias: false, //transparent: true, parent: "game" }); //Engine = new Phaser.Game(Game.width, Game.height, Phaser.AUTO, "game"); Engine.state.add("load", Game.loadState); Engine.state.add("main", Game.mainState); Engine.state.add("play", Game.playState); // Let's roll window.onload = function() { + " init"); Engine.state.start("load"); }; Attached are the assets I'm using for this project. Thanks in advance map.tmx map1.json