# Set Player start in map

# Prerequisites

  1. You must have created a map and added in your game

# It is necessary to know

  1. You can perform several commands on the player. Change hit points, level, etc.
  2. You can create a Player class to perform commands according to a situation. Here it is when it is connected
  3. You have several ways to position a player

# Create Player class

import { RpgPlayer, RpgPlayerHooks } from '@rpgjs/server'

export const player: RpgPlayerHooks = {
    onConnected(player: RpgPlayer) {
        player.setGraphic('hero')
    }
}
  1. Create a player object. The file, in our structure, is src/modules/main/server/player.ts.
  2. We give it a graph to give an initial appearance to the player

Make sure the spritesheet is existing. Here, hero is the name of the client-side spritesheet. If it is not the case, see the sprite creation tutorial.

# Start Position

# Solution 1: Insert a point on Tiled Map Editor

  1. Go to Tiled Map Editor
  2. Go to the object layer
  3. Insert a point on the map

start-player

  1. Set the start type

start-player2

  1. Go to the map by specifying the ID
import { RpgPlayer, RpgPlayerHooks } from '@rpgjs/server'

export const player: RpgPlayerHooks = {
    async onConnected(player: RpgPlayer) {
        player.setGraphic('hero')
        await player.changeMap('medieval')
    }
}

Useful: If you set more than one starting point, the player will randomly go to one of the points.

# Solution 2: Give coordinate points

Position the player on the map with X and Y positions

import { RpgPlayer, RpgPlayerHooks } from '@rpgjs/server'

export const player: RpgPlayerHooks = {
    async onConnected(player: RpgPlayer) {
        player.setGraphic('hero')
        await player.changeMap('medieval', {
            x: 100,
            y: 100
        })
    }
}

Make sure that there is a map with the correct identifier. Here, the medieval map exists. Otherwise, read the tutorial on how to create a map.

# Good practice

After loading the map, do not continue to do the rest of the code in the onConnected method because the properties will not be synchronized with the client

import { RpgPlayer, RpgPlayerHooks } from '@rpgjs/server'

export const player: RpgPlayerHooks = {
    async onConnected(player: RpgPlayer) {
        player.setGraphic('hero')
        await player.changeMap('medieval', {
            x: 100,
            y: 100
        })
        // BAD PRACTICE, because not synchronized on the map
        player.hp = 500
    }
}

Make your code in the onJoinMap() hook:

import { RpgPlayer, RpgPlayerHooks } from '@rpgjs/server'

export const player: RpgPlayerHooks = {
    async onConnected(player: RpgPlayer) {
        player.setGraphic('hero')
        await player.changeMap('medieval', {
            x: 100,
            y: 100
        })
    },
    // GOOD PRACTICE
    onJoinMap(player: RpgPlayer) {
        player.hp = 500
    }
}

# Add Player class in your game engine

In src/modules/main/server/index.ts

import { RpgServer, RpgModule } from '@rpgjs/server'
import { player } from './player'
import { MedievalMap } from './maps/medieval.ts'

@RpgModule<RpgServer>({
    maps:  [
        MedievalMap
    ],
    player
})
export default class RpgServerEngine { }