Skip to main content

​
Create your first map

The simplest workflow is to use the Tiled integration.

​
1. Register the Tiled providers

On the server: 
import { createServer, provideServerModules } from "@rpgjs/server";
import { provideMain } from "./modules/main";
import { provideTiledMap } from "@rpgjs/tiledmap/server";

export default createServer({
  providers: [
    provideMain(),
    provideServerModules([]),
    provideTiledMap()
  ]
});
On the client: 
import { provideClientGlobalConfig } from "@rpgjs/client";
import { provideTiledMap } from "@rpgjs/tiledmap/client";

export default {
  providers: [
    provideTiledMap({
      basePath: "map"
    }),
    provideClientGlobalConfig()
  ]
};

​
2. Create the map file

Create a TMX file in your Tiled folder, for example: 
src/tiled/simplemap.tmx
The map ID used by RPGJS must match the file name, so simplemap.tmx becomes the map id simplemap.

​
3. Declare the map in your module

In your server module: 
import { defineModule } from "@rpgjs/common";
import { RpgServer } from "@rpgjs/server";
import { player } from "./player";

export default defineModule<RpgServer>({
  player,
  maps: [
    {
      id: "simplemap"
    }
  ]
});
At this point, the map exists in the server and can be loaded by players.

​
4. Run the game

When the player changes to simplemap, the client will load the matching Tiled map automatically.

​
Tiled is optional

@rpgjs/tiledmap is the easiest way to create maps with Tiled Map Editor, but it is not required. If you want your own renderer or your own map format, use Custom map rendering with provideLoadMap.

​
Next step

Continue with Create hero in map.