Jump to content

How to load a very long tilemap world or update it?


Recommended Posts

Hello, I am new in phaser and I am building a little game like Super Mario Bros, I have the move, controllers and more.
I load a JSON tilemap, made with the Tiled software, the map has a specific width, I need to use a larger map.

How can load a more large tilemap or well update the current tilemap when the player advances a specific distance so that it seems to be a very long map?

I found examples that to use Infinitely Scrolling, but in my case, I need to use a specific map.

Thank you very much.


This is my code


class MainScene extends Phaser.Scene {

  constructor() {
    super({key: 'MainScene'});

  preload() {
    this.load.tilemapTiledJSON('map', '/assets/jsons/map.json');
    this.load.spritesheet('tiles', 'assets/img/tiles.png', {
      frameWidth: 70,
      frameHeight: 70
    this.load.image('coin', 'assets/img/coinGold.png');
    this.load.atlas('player', 'assets/img/player.png', 'assets/jsons/player.json');

  create() {

    this.map = this.make.tilemap({key: 'map'});
    // tiles for the ground layer
    var groundTiles = this.map.addTilesetImage('tiles');
    // create the ground layer
    this.groundLayer = this.map.createDynamicLayer('World', groundTiles, 0, 0);
    // the player will collide with this layer

    // set the boundaries of our game world
    this.physics.world.bounds.width = this.groundLayer.width;
    this.physics.world.bounds.height = this.groundLayer.height;

    // create the player sprite
    this.player = this.physics.add.sprite(200, 200, 'player');
    this.player.setScale(0.5, 0.5);
    this.player.setBounce(0.2); // our player will bounce from items
    this.player.setCollideWorldBounds(true); // don't go out of the map
    this.physics.add.collider(this.groundLayer, this.player);



  camera() {
    // set bounds so the camera won't go outside the game world
    this.cameras.main.setBounds(0, 0, this.map.widthInPixels, this.map.heightInPixels);
    // make the camera follow the player

    // set background color, so the sky is not black

  controllers() {
    var cursors = this.input.keyboard.createCursorKeys();
    if (cursors.left.isDown) { // if the left arrow key is down
      this.player.body.setVelocityX(-200); // move left
    } else if (cursors.right.isDown) { // if the right arrow key is down
      this.player.body.setVelocityX(200); // move right
    } else {
    if ((cursors.space.isDown || cursors.up.isDown) && this.player.body.onFloor()) {
      this.player.body.setVelocityY(-500); // jump up

  update(time, delta) {






Edited by d.mora.olazul
Link to comment
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.

Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.


  • Recently Browsing   0 members

    • No registered users viewing this page.
  • Create New...