Jump to content

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


d.mora.olazul
 Share

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'});
    this.map;
    this.player;
    this.cursors;
    this.groundlayer;
    this.text;
  }

  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
    this.groundLayer.setCollisionByExclusion([-1]);

    // 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.body.setGravityY(250);
    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);

    this.camera();

  }

  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
    this.cameras.main.startFollow(this.player);

    // set background color, so the sky is not black
    this.cameras.main.setBackgroundColor('#ccccff');
  }

  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 {
      this.player.setVelocityX(0);
    }
    if ((cursors.space.isDown || cursors.up.isDown) && this.player.body.onFloor()) {
      this.player.body.setVelocityY(-500); // jump up
    }
  }

  update(time, delta) {

    //
    this.controllers();

  }

}

 

assets.zip

Edited by d.mora.olazul
update
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.

Guest
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.

Loading...
 Share

  • Recently Browsing   0 members

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