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 339 results

  1. jd.joshuadavison

    Tilemap (layer) offset

    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
  2. 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!
  3. 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
  4. 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!
  5. 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
  6. peevopuff

    Phaser 3 Tilemap setting Origin

    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:
  7. 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!
  8. Mursaat

    Zooming on dynamic tilemap

    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.
  9. kurhlaa

    Tilemap tile's leave callback

    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 ?
  10. Hello! According to the examples I've created a tilemap from JSON file and added firing bullets with a left mouse clicking in a cursor's direction. Also a platform was added. My problem is that there are no collisions detected between a bullet and a tilemap's objects. But collisions works fine between the bullet and a platform. Here is my demo code: var config = { type: Phaser.CANVAS, width: 800, height: 600, backgroundColor: '#2d2d2d', parent: 'phaser-example', physics: { default: 'arcade', arcade: { gravity: { y: 300 }, debug: false } }, scene: { preload: preload, create: create } }; var game = new Phaser.Game(config); var bullets; var platforms; function preload () { this.load.tilemapTiledJSON('map', 'assets/tilemaps/maps/impact-tilemap.json'); this.load.image('kenney', 'assets/tilemaps/tiles/kenney.png'); this.load.image('ground', 'src/games/firstgame/assets/platform.png'); this.load.image('bullet', 'src/games/firstgame/assets/star.png'); } function create () { var map = this.make.tilemap({ key: 'map' }); var tileset = map.addTilesetImage('kenney'); var layer = map.createStaticLayer(0, tileset, 0, 0); layer.setCollisionByExclusion([-1]); this.physics.world.bounds.width = layer.width; this.physics.world.bounds.height = layer.height; platforms = this.physics.add.staticGroup(); platforms.create(400, 268, 'ground'); // Fires bullet on left click of mouse this.input.on('pointerdown', function() { fire(this); }, this); var Bullet = new Phaser.Class({ Extends: Phaser.GameObjects.Image, initialize: function Bullet(scene) { Phaser.GameObjects.Image.call(this, scene, 0, 0, 'bullet'); this.speed = Phaser.Math.GetSpeed(300, 1); this.velocity = new Phaser.Geom.Point(0, 0); }, fire: function (x, y, direction) { this.setPosition(x, y); this.setActive(true); this.setVisible(true); this.velocity.setTo(0, -this.speed); Phaser.Math.Rotate(this.velocity, direction); }, update: function (time, delta) { // Update position based on velocity this.x += this.velocity.x * delta; this.y += this.velocity.y * delta; } }); bullets = this.physics.add.group({ classType: Bullet, maxSize: 30, runChildUpdate: true }); this.physics.add.collider(bullets, platforms, callbackFunc, null, this); this.physics.add.collider(bullets, layer, callbackFunc, null, this); } function callbackFunc(bullet, target) { if ( bullet.active === true ) { console.log("Hit!"); bullet.setActive(false); bullet.setVisible(false); } } function fire(that) { var bullet = bullets.get(); if (bullet) { bullet.body.allowGravity = false; var angle = Math.atan2(that.input.activePointer.y - 400, that.input.activePointer.x - 300); bullet.fire(300, 400, angle + (3.14/2)); } } You can copy-paste it to any example at https://labs.phaser.io and start clicking to fire at any direction. I've tried to add a standard player from examples too and collisions work fine with the tilemap's objects. So the problem is with bullets only. Please help to solve this. Thanks!
  11. cesco_p

    Multiple Tilesets for one layer

    I am sorry if this topic exists already, but I struggle with this problem now for hours and I have no clue how to solve it. I created a tilemap in tiled, and there is a layer which uses multiple tilesets. However, if I want to create a new Dynamic Layer with Phaser, I have to specify one tileset for the layer: var dekoimg = map.addTilesetImage('spikes'); var layer = map.createDynamicLayer('Deko', dekoimg, 0,0); Is there a way to use multiple tilesets instead of only one? Thanks in advance
  12. Hello! I am trying to make a player to collide with the ground. But the ground has been imported from a tilemap using the tiled program. The collision is not working This is the important part of my code: collisionLayer = map.createStaticLayer('collisionLayer', tileset); var players = findObjectsByType('player', map, 'objectsLayer'); player = this.physics.add.sprite(players[0].x, players[0].y, 'dude'); this.physics.add.collider(player, collisionLayer); findObjectsByType is not a phaser native method, but it is working. The code runs without errors, but the collision is not working. I have attached the code. Thanks! example.zip
  13. cesco_p

    Tilemap ImageCollection

    Hey everybody, I am working on a small plattformer to get started. Therefore, I created a tilemap with Tiled. Everything works out, but if I want to use an image Collection instead of a tilesetimage I get the following error message: Uncaught TypeError: Cannot read property '2' of undefined at AssignTileProperties (phaser.js:84823) at ParseJSONTiled (phaser.js:46874) at Parse (phaser.js:46984) at ParseToTilemap (phaser.js:22869) at GameObjectCreator.tilemap (phaser.js:84313) at Scene.create (main.js:62) at SceneManager.create (phaser.js:62975) at SceneManager.loadComplete (phaser.js:62872) at LoaderPlugin.emit (phaser.js:2894) at LoaderPlugin.processComplete (phaser.js:93459) Does anyone know how to use a collection image in Phaser 3?
  14. Here is the tile spritesheet : Example: https://labs.phaser.io/edit.html?src=src\game objects\tilemap\collision\csv map arcade physics.js These white stripes appear when the camera moves in this example, I have this problem in my own game, any idea what one can do about it? The only thing I could think of doing about it was to add empty tiles to the tile sprite sheet so that transparent tiles would not get stripped by the tile beside it.
  15. Babsobar

    Zooming out on tilemap layer?

    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.
  16. I am using createFromObjects (Link to API) to create a collection of Sprites from the object layer imported from a Tiled JSON file. I have successfully created the collection of sprites, however, I seem to be missing some critical data from these newly created Sprite objects. The original JSON tile data has a 'properties' field containing a unique key_id for each particular 'key' tile which appears to not copy over with this method invocation. Is there a way to get these 'properties' values from the object layer into each of the new Sprite objects?
  17. wkd-aine

    Tilemap Resize

    Hi, I am updating a game from Phaser2 to 3, and was hoping someone can help! The game is a platformer game, somewhat similar to the Mario demo game, but the tilemap needs to resize on smaller screens to allow a range of browsers to be used to play the game. In Phaser2 the following code worked layer = map.createLayer( 'tiles' ); layer.setScale( scale_y ) layer.resizeWorld(); if( scale_y != 1) layer.resize(tile_width, tile_height); I have tried multiple approaches to getting the tiles to resize in Phaser 3 and realise that we don't have the same scaling functionality as before, but was hoping someone has some ideas on how this can be achieved. I have managed to resize the actual tiles, but then the extra tiles that are then displayed aren't rendered, see print screen below. You can see that the physics body is being added correctly, not sure if it makes any difference but am using matterJS, see code below if( utils.DEBUG ) { scene.matter.world.createDebugGraphic() scene.matter.world.drawDebug = true } let size = utils.TILE_SIZE * utils.scale_y var map = scene.make.tilemap({ key: 'map_level' }) var tiles = map.addTilesetImage('world_tiles') var layer = map.createStaticLayer( 'tiles', tiles, 0, 0 ) .setScale( utils.scale_y ) .setScrollFactor( 0 ) .setCollisionByProperty({ collides: true }) // if( utils.scale_y != 1 ) layer.resizeWorld( utils.TILE_WIDTH, utils.TILE_HEIGHT ) scene.matter.world.setBounds( size, utils.TILE_HEIGHT ) scene.matter.world.convertTilemapLayer( layer ) If you need anything clarified please let me know. Many thanks in advance Áine
  18. Doug

    Hi Rich.  @rgk mentioned that you might be able to please add a "patron" badge to my forum profile?  Thanks very much!

  19. So I have a tilemap created from a Tiled .json file. The tile layers are scaled up 3 times. Works great. However, now that I'm trying to add an object layer, the objects seem to be in the wrong position, I presume, in the 3 times scaled down position. Game is a sidescroller. Take this example - https://testarea.krizucentrs.lv/. The tiny orange guy up in the leaves? He's supposed to be down by the rock on the right side. Also, he's supposed to be much bigger. I can't create an object layer and just scale it, Phaser doesn't recognize it in the map.createLayer function. How would I go about scaling the object layer correctly? P.S. if I'm doing this wrong by scaling every tile layer and sprite then let me know, I don't know how to make the game appear bigger.
  20. 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?
  21. I'm trying to zoom camera (change its scale) while focused on a player on a tilemap. const speed = 0.01; if (this.cursors.up.isDown) { this.game.camera.scale.add(speed, speed); } else if (this.cursors.down.isDown) { this.game.camera.scale.add(-speed, -speed); } This is how I create the map: this.map16 = this.game.add.tilemap("tilemap16"); this.map16.addTilesetImage("xrpg_tileset", "tileset16"); this.wallsLayer = this.map16.createLayer('Walls'); Both player object and the map layers are placed in the World. But it seems that tilemap layer's position is affected by camera's zoom which looks wrong: https://gph.is/2HuEeDk To check if something is wrong with the scene I replaced the map with an image and zoom worked correctly: https://gph.is/2KitDZL The behaivor is identical in 2.6.2 and 2.10.3.
  22. 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!
  23. Hello! Recently we released the last major version of Phaser Editor, with a lot of new stuff, like Tilemaps and Bitmap Text, but what is more exciting is the new licensing model: Freemium! So now the editor is accessible to everybody for an unlimited period of time. The free edition contains all the features, just the number of certain assets are limited (scenes: 15, tilemaps: 5, texture maps: 3), however, we think that lot of projects fit inside that bounds. We are convinced that the best for all is a model where everybody can use the editor and provide a valuable feedback, that is essential to build a better product. Take a look at the complete release notes EDITED: Recommended this introductory video from GameFromScatch: Kind Regards Arian P.S. By the way, the development of Phaser Editor v2 just started, this version is all about to support Phaser v3.
  24. Her is an example based on a Phaser 2 example, 0 index is set as colliding: Her is the tiled json file: https://examples.phaser.io/assets/games/starstruck/level1.json Phaser 2 example where empty (index 0 in tiled json) is not collideable: https://phaser.io/examples/v2/games/starstruck What is the easiest way to fix this in phaser 3? Setting 0 in setCollisionByExclusion method does not exclude it from collision.
  25. ghclark2

    SVG and tilemaps

    Hi, one of the things I was excited about for phaser 3 was the possibility of using svgs to make really crisp good looking games. Just wondering though whether there is any way of using svgs for a tilemap, or is there another way of getting good looking tilemaps without huge filesizes? Thanks, Gordon