• For a playable version, please checkout the "https://www.designandmake.org/stash/users/victorzzt/repos/wsmulti2/browse"
    • Which will include a simple tilemap , matterjs, websocket implementation. (some still under development, please check the updates)
  • This one of the opensource tools for composing the tilemaps.
  • The link is: [Tiled download Link]
  • The official website is: https://www.mapeditor.org/
  • For starter, there's a pretty good tutorial here: https://medium.com/@michaelwesthadley/modular-game-worlds-in-phaser-3-tilemaps-1-958fc7e6bbd6
    • Some important points:
    • Quote from original post: "When you load a tileset into your map, make sure to check the “Embed in map” option. (If you forget to do this, then you can click the embed tileset button the bottom of the screen.) See first two images below."
      • The button is here: (If you haven't edited the layout it should appear on the bottom right)

      • When the exported JSON file includes:

         "tilesets":[
        {
         "columns":4,
         "firstgid":1,
         "image":"maptiles.png",
         "imageheight":256,
         "imagewidth":256,
         "margin":0,
         "name":"tiles01",
         "spacing":0,
         "tilecount":16,
         "tileheight":64,
         "tilewidth":64
        }],

        You should be good to go.

    • The tutorial provided the project for you to download, and I'll also put a project and export here for download (Please excuse the clumsy programmer's art)
      tilemapcompose.zip
    • In my example, I also included 2 layers for you to test collision generation.
      • "GroundLayer"
      • "WallLayer"

    • The code I used to generate the map ( The original tutorial is better if you are using arcade, however in this case I'm using Matter, which also will combine the code from this tutorial)

      In preload
              this.load.image("maptiles", "assets/map/maptiles.png");
        this.load.tilemapTiledJSON("map", "assets/map/mapfiles.json");

      The reason I used setCollisionBetween is because I didn't add the collision true in the map file (As I have 16 tiles, and 0 means there's no tile, so between 1~16 means everything in this layer will collide)

      In create
              this.map = this.make.tilemap({key: "map"}); // the key should be the same key
                                                    // as in "this.load.tilemapTiledJSON"
        this.tileset = this.map.addTilesetImage("tiles01", "maptiles");	// The "tiles01" (1st parameter) should be the same as the 
                                                                        // "Name" field in the "tilesets}" section of the JSON file,
                                                                        // the "maptiles"(2nd parameter) should be the same as
                                                                        // the key in "this.load.image"
        
        this.groundLayer = this.map.createStaticLayer("GroundLayer", this.tileset, -64, -64);    // Using -64 is for the world wall
                                                                                                 // The "GroundLayer" (1st parameter) 
                                                                                                 // should be the name of the layer 
                                                                                                 // you want to display in the Editor
                                                                                                 // ( also can be found with the "Name" field 
                                                                                                 // of each layers in "Layer" array )
        this.wallLayer = this.map.createStaticLayer("WallLayer", this.tileset, -64, -64);
        this.wallLayer.setCollisionBetween(1, 16);
        this.matter.world.convertTilemapLayer(this.wallLayer);
        
        this.matter.world.createDebugGraphic();
  • No labels