# Step 3a. Create map
# Prerequisites
- To create a map, you need the Tiled Map Editor : https://www.mapeditor.org/ (opens new window)
- You have already created the client-side tileset
# It is necessary to know
- The maps are transformed into JSON format and saved in a
maps
folder - Note that maps are created on the server side. The map data is known only when the player goes to the map.
- Maps are cached. If the server is not restarted, it will draw from memory to retrieve the map. If this is the first time it is opened, there will be a file reading (MMORPG) or an ajax request (RPG).
# Create map with Tiled Map Editor
- Save the TMX file in
src/modules/main/server/maps/client/tmx/medieval.tmx
- Remember to put the TXS files in the same folder
# Create Map class
- Create a new file:
src/modules/main/server/maps/medieval.ts
- Then, the code must be as follows
import { RpgMap, MapData } from '@rpgjs/server'
@MapData({
id: 'medieval',
file: require('./tmx/medieval.tmx'),
name: 'Town' // optional
})
export class MedievalMap extends RpgMap { }
- Put an identifier to the map. this information will be used if you want to load maps to a player.
- Set the absolute path to the tmx file.
# Add Map in your Game
In src/modules/main/server/index.ts
:
import { RpgServer, RpgModule } from '@rpgjs/server'
import { MedievalMap } from './maps/medieval.ts'
@RpgModule<RpgServer>({
maps: [
MedievalMap
]
})
export default class RpgServerEngine { }
- Add the map created in the property
maps
in the@RpgModule
decorator
TIP
Here you have referenced the maps in the game, but it does not display the map. To display the map on the client side, you need to use player.changeMap()