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


  • Recently Browsing   0 members

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