Skip to content

Adding a new NPC

Jump to bottom
Diego Penha edited this page Aug 11, 2022 · 4 revisions

In the last chapter we created a room, with a lonely house next to a water well. Let's make it a little less lonely by adding a new NPC that lives there.

Files involved

To create an NPC we are going to be looking at a couple locations in our code. They are:

NPC enum

In the Enums file, there is an enum called "Npcs". This enum serves as an identifier for the tile used on any npc. If you want an NPC to look like a zombie, you can set it's id to be Npcs.Zombie, if you want to create a new tile for an NPC, don't forget to add it's name in this enum.
Since there's already a lot of NPC's tiles, let's use an existent one, just keep in mind that if you want to create a new one, you'll have to append its name in this enum.

NPC tile

If we were to add a new NPC tile, we would have to go to ./client/src/entities/Npcs.ts and append it's color matrix to this object.
Attention: the keys in this object must match the NPC's ids and order in the Npcs enum mentioned previously

Creating the NPC

All information of the NPC stays on the server, on the folder ./server/entities/npcs, in this case, since it's a passive NPC, lets open the subfolder passive.
Here we see some subfolders, divided by races and locations, let's not care about this now and just create a file in here. Let's call our NPC "lonelyMan" since he lives alone.
image

Paste this code inside the file:

import { Npcs } from '../../../Enums.ts'
import NpcBase from '../npcBase.ts'

export default class LonelyMan extends NpcBase {
    constructor() {
        super(Npcs.CityOldMale2, false, 'lonelyman', 0, 0, 0, 0, 1000, 0, 0, 36, null, [], null)
    }
}

You'll notice it extends NpcBase and constructs it by passing some arguments, you can inspect the code to see what each one of them mean, but the most important are the first 3:

  • The tile it refers to: Npcs.CityOldMale2
  • If it's agressive
  • It's "name". The name is important for quests, since we use this name to know which npc is involved in certain step of the quest.

Npc Spawns

The only thing left is telling where we want this NPC to be in Tiny Land. Let's go to ./server/map/npcSpawns.ts and, to the NpcSpawns object let's append OurRoom's NPC spawns:

OurRoom: [[0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0],
  [0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0],
  [0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0],
  [0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0],
  [0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0],
  [0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0],
  [0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0],
  [0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0],
  [0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0],
  [0,0,0,0,0,0,0,0,new LonelyMan(),0,0,0,0,0,0,0],
  [0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0],
  [0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0],
  [0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0],
  [0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0],
  [0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0],
  [0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0]],

Test it

Let's save it all and run our server, go to https://localhost:3000
image

There he is! You'll notice he's kinda quiet tho... that's because we havent created any dialogs for Lonely Man. This is an optional step, but let's go ahead and make him say something

Dialog

Go to ./server/entities/npcs/passive/dialogs and create a new file called lonelyManDialog.ts. Paste this code inside it:

import DialogBase from "./dialogBase.ts"

export default class LonelyManDialog extends DialogBase {
    constructor() {
        super(['I only exist as a test :(',''])
    }
}

Now let's go back to lonelyMan.ts and change it's constructor. It must look like this:

import { Npcs } from '../../../Enums.ts'
import NpcBase from '../npcBase.ts'
import LonelyManDialog from './dialogs/lonelyManDialog.ts'

export default class LonelyMan extends NpcBase {
    constructor() {
        super(Npcs.CityOldMale2, false, 'lonelyman', 0, 0, 0, 0, 1000, 0, 0, 36, new LonelyManDialog(), [], null)
    }
}

Now if we try to speak to Lonely Man:
image

Next steps

How about agressive NPCs? Maybe we could create one, then Lonely Man gives us a quest to kill it!

Clone this wiki locally