11

I am new to Phaser and I am currently having a hard time in generating a tilemap with the aid of the phaser isometric plugin. I am also having trouble with understanding some of the concepts related with the Phaser world, game, and the camera which make the part of generating the tilemap correctly even harder. I have actually noticed that this problem seems to be an obstacle to Phaser newbies, like myself, and having it correctly explained would certainly help to fight this.

Getting to the matter:

I have generated a tilemap using a for loop using single grass sprites. The for loop is working correctly and I also implemented a function where I can specify the number of tiles I want to generate.

{
  spawnBasicTiles: function(half_tile_width, half_tile_height, size_x, size_y) {
    var tile;
    for(var xx = 0; xx < size_x; xx += half_tile_width) {
      for(var yy = 0; yy < size_y; yy += half_tile_height) {
        tile = game.add.isoSprite(xx, yy, 0, 'tile', 0, tiles_group);
        tile.checkWorldBounds = true;
        tile.outOfBoundsKill = true;
        tile.anchor.set(0.5, 0);
      }
    }
  }
}

enter image description here So the process of generating the static grass tiles is not a problem. The problem, and one of the reasons I am trying to getting the object pooling to work correctly is when the tiles number is superior to 80 which has a dramatic impact on the game performance. Since I aim for making HUGE, auto-generating maps that are rendered according to the player character position the object pooling is essential. I have created a group for these tiles and added the properties I thought that would be required for having the tiles that are out of bounds to not be rendered(physics, world bounds...). However, after many attempts I concluded that even the tiles that are out of bounds are still being generated. I also used another property rather than add.isoSprite to generate the tiles, which was .create but made no difference. I guess no tiles are being "killed".

  • Is this process correct? What do I need to do in order to ONLY generate the tiles that appear on camera (I assume the camera is the visible game rectangle) and generate the rest of them when the character moves to another area assuming the camera is already tracking the character movement?

Besides that, I am looking to generate my character in the middle of the world which is the middle of the generated grass tilemap. However, I am having a hard time doing that too. I think the following concepts are the ones I should play with in order to achieve that, despite not being able to:

  • .anchor.set()
  • game.world.setBounds(especially this one... it doesn't seem to set where I order to);
  • Phaser.game ( I set its size to my window.width and window.height, not having much trouble with this...)

Summing up: Using the following for loop method of generating tiles, how can I make infinite/almost infinite maps that are generated when the camera that follows my character moves to another region? And besides that, what is the proper way of always generating my character in the middle of my generated grass map and also for the camera to start where the character is?

I will appreciate the help a lot and hope this might be valuable for people in similar situations to mine. For any extra information just ask and if you want the function for generating the tiles by a specific number I will gladly post it. Sorry for any language mistakes.

Thank you very much.

EDIT:

I was able to spawn my character always in the middle of the grass by setting its X and Y to (size/width) and (size/height). Size is the measure of X and Y in px.

p u
  • 1,395
  • 1
  • 17
  • 30
Kunis
  • 576
  • 7
  • 24
  • Have you considered using the Flyweight pattern in addition to/in place of the Object pooling pattern? That may help minimize the per-tile demand for having so many tiles. See here: https://stackoverflow.com/a/9322256/2152944 And here: http://gameprogrammingpatterns.com/flyweight.html#a-place-to-put-down-roots And here's a javascript implementation: https://www.dofactory.com/javascript/flyweight-design-pattern – Shawn Dec 28 '18 at 04:45

0 Answers0