Search the Community

Showing results for tags 'Tilemap'.



More search options

  • Search By Tags

    Type tags separated by commas.
  • Search By Author

Content Type


Forums

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

Find results in...

Find results that contain...


Date Created

  • Start

    End


Last Updated

  • Start

    End


Filter by number of...

Joined

  • Start

    End


Group


Website URL


Twitter


Skype


Location


Interests

Found 351 results

  1. I am creating a game, where a lot of tiles need to be rendered. My goal is to render with this method at least 500k tiles. Since the tiles won't be redrawn every time but moved, this method should work out. I am using the pixi-tilemap library to create a fast & simple renderer to render a dynamic tilemap. The renderer approves itself to work, but .position.set seems to pull the tilemap from the interface away. I know, the function .position.set does not contain the same parameters as the one of the demo, however this function also does not work with the parameters of the demo. Some parameters must be added. The tutorial I have been using this classic demo: https://github.com/Alan01252/pixi-tilemap-tutorial
  2. I've created a template to illustrate the concept of levels generated from dynamically loaded tilemaps from a single level scene. Phaser 3 Tilemap & File Pack Project Template Demo Questions and feedback are welcome!
  3. Hello everyone, first time here (so might excuse if its the wrong section) but I'm fricking desperate at the moment. I'm trying for about 2 days now to get my player to collide with my "Obstacle" tilemap layer. I looked at almost every post about this here or elsewhere but I can't get it to work. It might be a simple thing but I can't find whats wrong and I want to throw my pc out of the window now. So maybe one of you guys have an idea and can help me. Any help is appreciated. The code is the Following: var game = new Phaser.Game(255, 255, Phaser.AUTO, '', { preload: preload, create: create, update: update }); var player; var speed = 2; var floor; var walls; var obsts; var map; function preload() { game.load.spritesheet('player','assets/player_spritesheet.png', 48,48); game.load.image("tileset", "assets/tileset.png"); game.load.tilemap( "map", "assets/test_map.json", null, Phaser.Tilemap.TILED_JSON ); // Phaser.Canvas.setSmoothingEnabled(this.game.context, false); this.game.scale.scaleMode = Phaser.ScaleManager.USER_SCALE; this.game.scale.setUserScale(3, 3); this.game.renderer.renderSession.roundPixels = true; Phaser.Canvas.setImageRenderingCrisp(this.game.canvas); } function create() { // Create map map = game.add.tilemap("map", 48, 48, 16, 16); map.addTilesetImage('tileset'); // Use layers floor = map.createLayer('Floor'); walls = map.createLayer('Walls'); obsts = map.createLayer('Obstacles'); map.setCollisionBetween(1,1000); // create player player = game.add.sprite(50,50,'player'); // all physics related stuff game.physics.startSystem(Phaser.Physics.ARCADE); game.physics.enable(player, Phaser.Physics.ARCADE); player.body.setSize(10, 14, 2, 1); player.body.collideWorldBounds = true; // walk animations player.animations.add('idle',[0,1,2],10,true); player.animations.add('walk_right', [12,13,14,15],10,true); player.animations.add('walk_left', [20,21,22,23],10,true); player.animations.add('walk_down', [8,9,10,11],10,true); player.animations.add('walk_up', [16,17,18,19],10,true); //attack animations player.animations.add('attack_down', [24,25,26,27],10,true); player.animations.add('attack_right', [28,29,30,31],10,true); player.animations.add('attack_left', [32,33,34,35],10,true); player.animations.add('attack_up', [36,37,38,39],10,true); player.animations.play('idle'); game.camera.follow(player); } function update() { game.physics.arcade.collide(player,obsts); player.body.velocity.set(0); // Walk mechanic if(game.input.keyboard.isDown(Phaser.Keyboard.A)) { player.animations.play('walk_left'); player.x -= speed; } else if (game.input.keyboard.isDown(Phaser.Keyboard.D)) { player.animations.play('walk_right'); player.x += speed; } if(game.input.keyboard.isDown(Phaser.Keyboard.W)) { player.animations.play('walk_up'); player.y -= speed; } else if (game.input.keyboard.isDown(Phaser.Keyboard.S)) { player.animations.play('walk_down'); player.animations.stop; player.y += speed; } // attack mechanic if (game.input.keyboard.isDown(Phaser.Keyboard.LEFT)) { player.animations.play('attack_left'); } if (game.input.keyboard.isDown(Phaser.Keyboard.RIGHT)) { player.animations.play('attack_right'); } if (game.input.keyboard.isDown(Phaser.Keyboard.UP)) { player.animations.play('attack_up'); } if (game.input.keyboard.isDown(Phaser.Keyboard.DOWN)) { player.animations.play('attack_down'); } //jump back to idle when not walking or attacking else if ( !game.input.keyboard.isDown(Phaser.Keyboard.A) && !game.input.keyboard.isDown(Phaser.Keyboard.D) && !game.input.keyboard.isDown(Phaser.Keyboard.W) && !game.input.keyboard.isDown(Phaser.Keyboard.S) && !game.input.keyboard.isDown(Phaser.Keyboard.UP) && !game.input.keyboard.isDown(Phaser.Keyboard.DOWN) && !game.input.keyboard.isDown(Phaser.Keyboard.LEFT) && !game.input.keyboard.isDown(Phaser.Keyboard.RIGHT)){ player.animations.play('idle'); } } Also if you see any other mistakes, feel free to send suggestions to this as well. Thank you in advance. Kind regards
  4. I searched and didn't find anything, but: I am working from the example at: http://labs.phaser.io/view.html?src=src\game objects\tilemap\collision\csv map arcade physics.js I thought the problem only appeared in my project, but this also happens in the in the example. When the camera moves horizontally to follow the player, gaps appear between the columns of tiles. Is there something that I can do to fix this? Is it something only appearing for me? Thank you!
  5. hard75

    Pixi js editor

    Hi, i want to know if pixi js have a editor that it can to handle the graphic's pixi and it drag and set your position, this graphics: var app = new PIXI.Application(800, 600, { antialias: true }); document.body.appendChild(app.view); var graphics = new PIXI.Graphics(); // Rectangle graphics.beginFill(0xDE3249); graphics.drawRect(50, 50, 100, 100); graphics.endFill(); or i use tilemap editor but i don't know if tilemap edito can to handle graphic's pixi,
  6. Hello! So I'm working on this game on my spare time. I'm trying to merge alot of what I think resembles a good game with some(alot?) own ideas. You might find it close looking like Tibia. Features Spells Quite unique spell system (in my opinion). You craft spells, so the same spell can have different abilities or have different cast styles. Here's an example of magic wall and poison cloud: https://i.gyazo.com/fcd7ed547a9116c2b0d1c359c2b9381f.mp4 Here's another example, but from your spellbook. In the spellbook you have all your spells that you know. They all have different properties, which are random when learned. You can have 2 spells selected at the same time (as of now, might increase in the future). https://i.gyazo.com/4539a561f97cb90029643a45637b66ee.mp4 As you can see in the vid, the spells have different properties: Draw/Single: Different throwing styles, either point and shoot, or draw, where you draw where you want to shoot the spell, and hit space to fire it off. CD: Cooldown, how long it takes until you can shoot this spell again. MAC: Max Affected Coords - Crappy name, but if you have a draw with MAC of 5, you can pick 5 tiles to fire the spell on. Mobs Fight of undefined mobs that are attacking you. Are capable of throwing spells and are of various size. The Red Dragon is 3x3 tiles big and throws scary fireballs. Harvesting Chop down trees, mine ores or grab a machete to get som wheat or even flax. Crafting Use your harvested items to create weapons, armors Towns Create your own town, claim land(tiles) and build walls around it. Invite your friends to your town. Inventory Drag and drop inventory system Large map The map can be quite large, tested with 25 000 000 tiles so far. (5000 x 5000). Technical details The game is made with HTML5 and mostly VanillaJS. Some Vue.js to structure different modules such as the inventory. Would be happy with some feedback/ideas whatever to keep my motivation up Still BIGWIP..
  7. Hi, I created a simple tilemap with tiled, and I'm trying to load it. The code and files can be seen here: https://codesandbox.io/s/qqq47wqv3w I'm not getting any errors in the console, but the canvas is just a black square. Any ideas what I am doing wrong? var game = new Phaser.Game(config); function preload() { this.load.image("tiles", "assets/tiles.png"); this.load.tilemapTiledJSON("World", "assets/tilemap2.json"); } function create() { this.map = this.add.tilemap("World"); var tileset = this.map.addTilesetImage("tiles", "tiles"); his.backgroundLayer = this.map.createStaticLayer("World", tileset); } The timemap.json from Tiles is below: { "height":100, "infinite":false, "layers":[ { "data":[3, 3, 3, 3, 3, 3, 3, 3, ...[data omitted]..., 3, 3], "height":100, "id":1, "name":"World", "opacity":1, "type":"tilelayer", "visible":true, "width":100, "x":0, "y":0 }], "nextlayerid":2, "nextobjectid":1, "orientation":"orthogonal", "renderorder":"right-down", "tiledversion":"1.2.1", "tileheight":8, "tilesets":[ { "columns":8, "firstgid":1, "image":"tiles.png", "imageheight":48, "imagewidth":64, "margin":0, "name":"tiles", "spacing":0, "tilecount":48, "tileheight":8, "tilewidth":8 }], "tilewidth":8, "type":"map", "version":1.2, "width":100 }
  8. Hello, I'm trying to scale the layers of my map, but when I try it shows part of the following tiles, some idea of how to solve this ?, the map is created in tiled, the spritesheet is 16 x 16: CODE create function: map = this.make.tilemap({'key':'01'}); const TilesPacked = map.addTilesetImage('tiles_packed', 'tiles_packed'); const SnowExpansion = map.addTilesetImage('snow-expansion', 'snow-expansion'); groundLayer = map.createDynamicLayer('Wall', [TilesPacked,SnowExpansion], 0, 0).setScale(2); const Ground = map.createStaticLayer('Ground', [TilesPacked,SnowExpansion], 0, 0).setScale(2); const OverGround = map.createDynamicLayer('OverGround', [TilesPacked,SnowExpansion], 0, 0).setScale(2); const Npc = map.createDynamicLayer('NPC', [TilesPacked,SnowExpansion], 0, 0).setScale(2); player = this.physics.add.sprite(16*3, 16*3, 'characters', 1).setBounce(0.2).setScale(2); preload function: this.load.image('tiles_packed', 'sprites/tiles_packed.png'); this.load.spritesheet('characters', 'sprites/characters.png', {frameWidth:16, framaeHeight:16}); this.load.image('snow-expansion', 'sprites/snow-expansion.png'); this.load.tilemapTiledJSON('01', 'sprites/Maps/02.json');
  9. Hey, when I assign setDepth(number) to Groups and Tilemaps, it seems not to work. Only after setting setDepth(number) on an already added sprite, it works. Any Ideas on it? Complete code below. // Tilemaps already created // # Configure z indexes layer.background.setDepth(0); //dynamic tilemap layer layer.midground.setDepth(1); //dynamic tilemap layer layer.objects.setDepth(2); // group layer.enemies.setDepth(3); // group layer.player.setDepth(4); // group layer.ground.setDepth(5); //dynamic tilemap layer layer.effects.setDepth(6); // group layer.water.setDepth(7); //dynamic tilemap layer //later on const SPRITE = this.add.sprite(0,0,'player') layer.player.add(SPRITE); //result: SPRITE is not in front of layer.background .. // BUT when I also write: const SPRITE = this.add.sprite(0,0,'player') layer.player.add(SPRITE); SPRITE.setDepth(0); // Now the sprite is before layer.background... ?
  10. Hello, I've recently acquired some sprites from Oryx and have attempted to load the sample Tiled file contained within. I'm able to load the assets just fine in my Preloader: loadAssets() { this.load.tilemap("oryx_tilemap", "assets/tilemaps/maps/oryx_test.json", null, Phaser.Tilemap.TILED_JSON); this.load.image("oryx_creatures", "assets/tilemaps/tiles/oryx_creatures.png"); this.load.image("oryx_items", "assets/tilemaps/tiles/oryx_items.png"); this.load.image("oryx_tiles", "assets/tilemaps/tiles/oryx_tiles.png"); this.load.image("oryx_world", "assets/tilemaps/tiles/oryx_world.png"); this.load.image("oryx_world2", "assets/tilemaps/tiles/oryx_world2.png"); } However, as soon as I attempt to "do" anything with the map, it crashes: create() { this.game.stage.backgroundColor = "#ffffff"; this.map = this.game.add.tilemap("oryx_tilemap"); // Error here this.map.addTilesetImage("oryx_world", "oryx_world"); this.map.addTilesetImage("oryx_creatures", "oryx_creatures"); this.map.addTilesetImage("oryx_items", "oryx_items"); this.map.addTilesetImage("oryx_world2", "oryx_world2"); this.layer = this.map.createLayer("background"); this.layer.resizeWorld(); } With the following error message: Uncaught TypeError: Cannot read property '2' of undefined Phaser.TilemapParser.parseTiledJSON Phaser.TilemapParser.parse Phaser.Tilemap Phaser.GameObjectFactory.tilemap InGame.create Phaser.StateManager.loadComplete Phaser.StateManager.preUpdate Phaser.Game.update Phaser.RequestAnimationFrame.updateRAF You can find the entire .json in this pastebin snippet. I'm not aware that I'm messing something up, judging from the tilemap example. What could I be doing wrong? Is the tilemap using any properties that are unsupported by Phaser?
  11. UPDATE: Phaser is throwing an error since version 3.14 for: datasource of undefined By setting the pipeline for lighting. (Normalmap is also defined and loaded) This worked before. Now I try to find out what changed and what has to be changed.. but that's quite hard despite a real API version changelog. Has anyone a clue? Bug on GitHub: https://github.com/photonstorm/phaser/issues/4079?_pjax=%23js-repo-pjax-container Also the example breaks: http://labs.phaser.io/view.html?src=src\game objects\lights\dynamic tilemap layer.js //layer_ground is a dynamicTilemaplayer reference layer_ground.setPipeline('Light2D'); Help! by updating to phaser 3.14 my games are broken. EDIT: I set the dynamic tilemap code to a string ('tilemap') instead of referring to their variable. But then the tilemap simply does not render. It's there anyway. But it seems it cannot find the texture anymore. But referring (as in the code) to the variable for the texture causes the error as described below. my games are breaking and I can't figure out what's exactly wrong. Here is the console output of the non-minified phaser file. (attached) As far as I know, this has something to do with dynamic tilemap layers? phaser14.js:45334 Uncaught TypeError: Cannot read property 'dataSource' of undefined How I use them: // tilemap graphic and map are loaded: the graphic is loaded and at the right place this.map = this.make.tilemap({ key: key, tileWidth: TILESIZE, tileHeight: TILESIZE }); const tileset = this.map.addTilesetImage('tilemap'); // dynamic tilemaps: const layer_clouds = this.map.createDynamicLayer(0, tileset, 0, 0); this.layer.clouds.add(layer_clouds); layer_clouds.setScale(SCALE); but it worked before, it's hard to find a place where I can track changes of the API on phaser.io 🤔... maybe I just need the reference, but I can't find one. Thanks in advance for any help!
  12. Hello, I've been fiddling with the new camera and tilemaps and I've encountered a problem. I have created a tile layer much like in this example for a level editor I'm working on. var controlConfig = { camera: this.cameras.main, left: cursors.left, right: cursors.right, up: cursors.up, down: cursors.down, speed: 0.5, disableCull: true, zoomIn: this.input.keyboard.addKey(Phaser.Input.Keyboard.KeyCodes.A), zoomOut: this.input.keyboard.addKey(Phaser.Input.Keyboard.KeyCodes.E), }; controls = new Phaser.Cameras.Controls.Fixed(controlConfig); The problem with this way to handle the zoom is that it produces this kind of effect, The camera zooms out of the whole scene, including things that are fixed to it but leaves the rest of the tiles unrendered and culled. As you can see here, zooming should show more of the green tiles; but zooming out only made the tilemap layer and the contents of the scene smaller, when I'd like it to render more of the tilemap's tiles. I've tried updating with .setBounds, .setSize and .setViewport with a key call after zooming out but I may have missed something obvious... Any help greatly appreciated. EDIT: To clarify further; the camera has no trouble moving around inside the tilemap layer using the arrow keys but it shows black bars around on zooming out.
  13. Hello, I was looking at the source code of Tilemap.js (https://github.com/photonstorm/phaser/blob/master/src/tilemaps/Tilemap.js) and I see strange rewriting of the layer variable all the time. For example: hasTileAt: function (tileX, tileY, layer) { layer = this.getLayer(layer); if (layer === null) { return null; } return TilemapComponents.HasTileAt(tileX, tileY, layer); }, Could you tell more what is the idea to sent layer as an argument and then rewrite it with itself in the very beginning?
  14. Hey Guys, following problem making me crazy. I have googled and tryd all out what i have found. I have installed old Tiled Version and so on. I always getting these "Cannot read property '2' of undefined" error. My Tilemap.json { "height":50, "infinite":false, "layers":[ { "draworder":"topdown", "id":2, "name":"Objects", "objects":[ { "height":0, "id":1, "name":"Player Spawn", "point":true, "rotation":0, "type":"", "visible":true, "width":0, "x":858, "y":114 }], "opacity":1, "type":"objectgroup", "visible":true, "x":0, "y":0 }, { "data":"AAAAAAAAAAAAAAAAAAAAAAAAAAABAAAAAQAAAAEAAAABAAAAAQAAAAEAAAABAAAAAQAAAAEAAAABAAAAAQAAAAEAAAABAAAAAQAAAAEAAAABAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAEAAAABAAAAAQAAAAEAAAABAAAAAQAAAAEAAAABAAAAAQAAAAEAAAABAAAAAQAAAAEAAAABAAAAAQAAAAEAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAQAAAAEAAAABAAAAAQAAAAEAAAABAAAAAQAAAAEAAAABAAAAAQAAAAEAAAABAAAAAQAAAAEAAAABAAAAAQAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAABAAAAAQAAAAEAAAABAAAAAQAAAAEAAAABAAAAAQAAAAEAAAABAAAAAQAAAAEAAAABAAAAAQAAAAEAAAABAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAEAAAABAAAAAQAAAAEAAAABAAAAAQAAAAEAAAABAAAAAQAAAAEAAAABAAAAAQAAAAEAAAABAAAAAQAAAAEAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAQAAAAEAAAABAAAAAQAAAAEAAAABAAAAAQAAAAEAAAABAAAAAQAAAAEAAAABAAAAAQAAAAEAAAABAAAAAQAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAABAAAAAQAAAAEAAAABAAAAAQAAAAEAAAABAAAAAQAAAAEAAAABAAAAAQAAAAEAAAABAAAAAQAAAAEAAAABAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAEAAAABAAAAAQAAAAEAAAABAAAAAQAAAAEAAAABAAAAAQAAAAEAAAABAAAAAQAAAAEAAAABAAAAAQAAAAEAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAQAAAAEAAAABAAAAAQAAAAEAAAABAAAAAQAAAAEAAAABAAAAAQAAAAEAAAABAAAAAQAAAAEAAAABAAAAAQAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA==", "encoding":"base64", "height":50, "id":3, "name":"Tiles", "opacity":1, "type":"tilelayer", "visible":true, "width":38, "x":0, "y":0 }], "nextlayerid":4, "nextobjectid":5, "orientation":"orthogonal", "renderorder":"right-down", "tiledversion":"1.2.0", "tileheight":50, "tilesets":[ { "columns":0, "firstgid":1, "grid": { "height":1, "orientation":"orthogonal", "width":1 }, "margin":0, "name":"CaveTiles", "spacing":0, "tilecount":2, "tileheight":50, "tiles":[ { "id":0, "image":"assets\/images\/tiles\/black_cave_bg.png", "imageheight":50, "imagewidth":50 }, { "id":1, "image":"assets\/images\/tiles\/gray_cave_bg.png", "imageheight":50, "imagewidth":50 }], "tilewidth":50 }], "tilewidth":50, "type":"map", "version":1.2, "width":38 } My Code Implementation var config = { type: Phaser.AUTO, width: 500, height: window.innerHeight, backgroundColor: '#2d2d2d', physics: { default: "arcade", arcade: { debug: true, gravity: { y: 0 } } }, scene: { preload: preload, create: create, update: update } }; var player var cursors; var tilemap; var game = new Phaser.Game(config); function preload() { this.load.image('background', './assets/images/game_background_2.png'); this.load.tilemapTiledJSON('map', './lvl3.json'); this.load.spritesheet('tiles', './assets/tilemaps/TilesImage.png', { frameWidth: 50, frameHeight: 50 }); } function create() { this.add.image(0, 0, 'background').setOrigin(0, 0); map = this.make.tilemap({ key: 'map' }); const spawnPoint = map.findObject("Objects", obj => obj.name === "Player Spawn"); player = this.physics.add.sprite(spawnPoint.x, spawnPoint.y, "atlas"); player.setVelocity(100, 200); player.setBounce(1, 1); player.setCollideWorldBounds(true); } function update() { }
  15. Hello! I've created a tilemap layer this way: layer = map.createStaticLayer('ground', tiles, 0, 0).setDepth(1); After that added a particles emitter this way: particl = scene.add.particles('imagename').createEmitter({ lifespan: 300, alpha: { start: 1, end: 0 }, on: false }); Although the emitter is created after the layer - in the application particles are behind the layer's tiles, so partly not visible. How do I set the depth of the emitter to make it always visible? Any other way to bring it in front of the layer is also good. Thanks!
  16. Is there any way to render the tilemap layers and get the image? I just want to do a static minimap (it will not display changes in the world). Initially, I tried to do this with a camera that looks at the game world with the ignoring of unnecessary objects. It turned out, but so-so, you need to carefully select the scale that would not be render artifacts. At the moment, the mini-map is in another scene and accordingly it does not have access to the render of another scene, i.e. option with the camera does not work. So I tried using the built-in renderer and its screenshot function. As I did, at the initialization stage of the map, I create an additional game instance with the world size equal to the minimap (in other words I make the game in the game) and try to make its screenshot. At the result it comes with base64, but in my case it is invalid, and the expected size should be an order of magnitude greater. I suspect that because of the async of both the initialization of my map and the map itself in the map, this does not happen until the end. GameInGame code: const startMiniGame = tileMap => { const factor = 10; function preload() { this.load.image('tiles', tilesheet); } function create() { const mapData = Tilemaps.Parsers.Tiled('map', tileMap, undefined); this.map = new Tilemaps.Tilemap(this, mapData); const { widthInPixels, heightInPixels, tileHeight, tileWidth } = this.map; this.tiles = this.map.addTilesetImage('maptile', 'tiles', tileWidth, tileHeight, 1, 2); MapService.Layers.forEach(([layer]) => { this.map.createDynamicLayer(layer, this.tiles, 0, 0); }); this.cameras.main.setBounds(0, 0, widthInPixels / factor, heightInPixels / factor); this.cameras.main.setZoom(factor); } return { type: Phaser.CANVAS, width: tileMap.widthInPixels / factor, height: tileMap.heightInPixels / factor, scene: { create, preload } }; }; And initialization: // method of MapService createMiniMapSnaphot = tileMap => { // there I can catch error event then. // so, game.renderer.snapshot works but gives something wrong this.scene.sys.textures.on('onerror', (...args) => { console.error('onerror', ...args); }); const game = new Phaser.Game(startMiniGame(tileMap)); game.renderer.snapshot(image => { this.scene.sys.textures.addBase64('s', image); }); }; Perhaps someone who has encountered such a task or has some ideas?
  17. 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 = (this.platformLayer.data.gameObject.map.tiles) this.map.setCollision(tilesData, true, false, this.platformLayer) 2) Do the opposite by excluding an empty array. this.map.setCollisionByExclusion([], 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.') } this.map = 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, this.map.widthInPixels, this.map.heightInPixels) this.physics.world.setBounds(0, 0, this.map.widthInPixels, this.map.heightInPixels) // ---> @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.map = this.make.tilemap({ key: 'multiple-layers-map' }) let tiles = this.map.addTilesetImage('kenny_platformer_64x64') this.rockLayer = this.map.createStaticLayer('Rock Layer', tiles, 0, 0) this.waterLayer = this.map.createStaticLayer('Water Layer', tiles, 0, 0) this.platformLayer = this.map.createStaticLayer('Platform Layer', tiles, 0, 0) this.stuffLayer = this.map.createStaticLayer('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
  18. Hello, I've built a tilemap using Tiled. The only thing is, I want to offset the tilemap (or preferably, individual tilemap layers) dynamically in the game (i.e. by a variable/calculated number of pixels). Tiled does have a 'Horizontal Offset' property for the layer. Obviously that would be a fixed value, but I thought it would map to a property of the tilemap layer object which I would then be able to dynamically modify, but as far as I can tell Phaser doesn't do anything with the 'Horizontal Offset' property. So I tried setting the tilemap layer's x position. This did offset the layer, but it doesn't just offset where the tilemap starts it offsets where the tilemap exists. By which I mean, that the tiles are culled as the move further left than it's x position, so my tiles disappear/appear at the left edge of the tilemap layer instead of the game viewport. I'm a bit stuck... I'm fairly sure that the Horizontal Offset is what I want, but as I said, it doesn't seem to be used by Phaser. Am I missing something? Is there another way to do what I want? Thanks, Josh
  19. Hello! I've noticed, that if I modify exact tile's collisions with tile.setCollision(false, false, true, false) - it also disables neighbor tiles collisions (left-right directions). A screenshot is attached. Red arrow shows a modified tile, blue arrow shows a tile which's left-right collisions have disappeared. Lab's modified example that you can copy-paste into https://labs.phaser.io/edit.html?src=src/game objects/tilemap/collision/tile callbacks.js : var config = { type: Phaser.WEBGL, width: 800, height: 576, parent: 'phaser-example', physics: { default: 'arcade', arcade: { gravity: { y: 300 } } }, scene: { preload: preload, create: create, update: update } }; var game = new Phaser.Game(config); var map; var cursors; var debugGraphics; var text; var player; var groundLayer; function preload () { this.load.image('ground_1x1', 'assets/tilemaps/tiles/ground_1x1.png'); this.load.tilemapTiledJSON('map', 'assets/tilemaps/maps/tile-collision-test.json'); this.load.image('player', 'assets/sprites/phaser-dude.png'); } function create () { map = this.make.tilemap({ key: 'map' }); var groundTiles = map.addTilesetImage('ground_1x1'); map.createDynamicLayer('Background Layer', groundTiles, 0, 0); groundLayer = map.createDynamicLayer('Ground Layer', groundTiles, 0, 0); groundLayer.layer.data[8][8].index = 11; groundLayer.layer.data[8][9].index = 1; groundLayer.setCollisionBetween(1, 10); // This breaks the collisions with the neighbor tiles groundLayer.layer.data[8][8].setCollision(false, false, true, false); player = this.physics.add.sprite(80, 70, 'player').setBounce(0.1); // We want the player to physically collide with the ground this.physics.add.collider(player, groundLayer); this.cameras.main.setBounds(0, 0, map.widthInPixels, map.heightInPixels); this.cameras.main.startFollow(player); cursors = this.input.keyboard.createCursorKeys(); text = this.add.text(16, 16, 'Arrow keys to move. Space to jump', { fontSize: '20px', fill: '#ffffff' }); text.setScrollFactor(0); text.setText('Arrow keys to move. Space to jump'); } function update (time, delta) { // Horizontal movement player.body.setVelocityX(0); if (cursors.left.isDown) { player.body.setVelocityX(-200); } else if (cursors.right.isDown) { player.body.setVelocityX(200); } // Jumping if ((cursors.space.isDown || cursors.up.isDown) && player.body.onFloor()) { player.body.setVelocityY(-300); } } Here important is line 48: groundLayer.layer.data[8][8].setCollision(false, false, true, false); If you comment it out - everything is OK - you can walk through red arrow's tile and blue tile's collisions works fine. If you run it as is - you can walk through red arrow's tile and through neighbor blue tiles too - this is wrong. How this can be fixed? Thanks!
  20. Hello, I am trying to load a tilemap mad with tiled, but i am getting this error in the console: Error: No data found in the JSON tilemap from Tiled matching the tileset name: "gameTiles" This is the code i am using in phaser: function preload(){ this.load.tilemapTiledJSON('level1', 'map.json'); this.load.image('gameTiles', 'tiles.png'); //this.load.spritesheet('gameTiles', '../img/tiles.png', { frameWidth: 32, frameHeight: 32 }); } function create(){ map = this.make.tilemap({key:'level1'}); tileset = map.addTilesetImage('gameTiles'); backgroundLayer = map.createStaticLayer('background', tileset,0,0); } I give you the complete source code in the attachment. It is not so much. Thanks in advance. 1-carga-carretera.zip
  21. Hello, I am quite new to phaser and Tiled. I was wondering if anyone could give me some help with understanding on how to create tilemap collisions that are more than just squares with the p2 physics system. Right now every tile has a square collision box, I would like the collision shape to match the tile shape so that I can have slopes and what not. I am a quite a bit confused on the Tiled to phaser workflow especially on what p2.convertTilemap does and how Tiled's collision editor ties into phaser. So far my code looks like this: preload: function () { this.game.load.image('mapTiles', "assets/platformer-pack-redux-360-assets/Spritesheets/spritesheet_ground.png"); this.game.load.tilemap('level1', "assets/testmap2.json", null, Phaser.Tilemap.TILED_JSON); this.game.load.spritesheet('player', "assets/kenney_platformercharacters/PNG/Player/player_tilesheet.png", 80,110, 24); }, create: function () { this.game.physics.startSystem(Phaser.Physics.P2JS); var level1 = this.game.add.tilemap('level1'); level1.addTilesetImage('spritesheet_ground', 'mapTiles'); var wallsLayer = level1.createLayer("layer1"); wallsLayer.resizeWorld(); level1.setCollisionByExclusion([],true,'layer1'); this.game.physics.p2.convertTilemap(level1,wallsLayer); this.game.physics.p2.convertCollisionObjects(level1,"objectLayer1"); player = this.game.add.sprite(110,80, 'player'); var walk = player.animations.add('walk', [0]); player.animations.play('walk', 10, true); this.game.physics.p2.enable(player); this.game.camera.follow(player); player.body.setZeroDamping(); player.body.fixedRotation = true; this.game.physics.p2.setBoundsToWorld(true,true,true,true,false); cursors = this.game.input.keyboard.createCursorKeys(); wallsLayer.debug = true; player.body.debug = true; }, Any help is appreciated!
  22. Pau

    Load tilemap

    Hello, I am trying to load a tilemap json file made with the tiled program. I am looking for phaser 3 equivalent to this phaser 2 code: function preload(){ this.load.image('gameTiles', 'tiles_spritesheet.png'); this.load.tilemap('level1', 'map.json', null, Phaser.Tilemap.TILED_JSON); } function create(){ this.map = this.add.tilemap('level1'); this.map.addTilesetImage('tiles_spritesheet','gameTiles'); this.backgroundLayer = this.map.createLayer('backgroundLayer'); } I have the attached the phaser 2 code, they are a few lines. Thank you! 1-carga-carretera.zip
  23. Hey Community! I'm trying out the new Phaser 3 Framework using Tilemaps. I create my tilemaps through Tiled and export them as .json. Since my map doesn't occupy the whole screen, I wanted to center it to the worlds center. I can render every layer to the screen and center them to the world but I can't center their origin properties since they come by default at 0, 0. The strange part is that their values change in the layer object to the ones I want but the layer image stays the same. I've tried using Static or Dynamic layers but there's no difference. Am I missing something? Is anyone else having trouble using: "layer.setOrigin(0.5, 0.5);"? Here's a snapshot of my code:
  24. Hello, I'm using Phaser v3.11.0-beta1 (last commit) and I'm trying to use dynamic tilemap system. I don't know if this is the expected behavior, but I can't zoom in on the tilemap. Check this example from labs.phaser.io, when you add that to line 51 : this.cameras.main.setZoom(2); Zoom seems to be inverted, and when I do a setZoom(1/2) I get a strange result too. I also tried this other example, but nothing is displayed. Is that normal? I'm new to Phaser, so I'm still missing some things. Someone who understood how dynamic tilemap works could explain it here? Thanks.
  25. Hi, When we use a tilemap we are able to create callbacks to execute something when overlap/collision happens, with: layer.setTileIndexCallback(5, myFunction, this); But how do I execute something when I leave these specific tiles with ID 5 ?