Making a Multiplayer WEB RPG - Part 7: Quests, Trainers, Vendors
Tags: webdev, babylonjs, colyseus, gamedev
Published: 2023-11-09 05:54:28

Demo: https://t5c.onrender.com
Github: https://github.com/oriongunning/t5c

---

It's been a while since last post, alot have been accomplished in the last few months and I think the project is pretty much feature complete as I invisionned it when I started.

Most of the work from now onwards will be refining & improving the current systems and performance.

So, here are some highlight of what was accomplished

---

# NPCS

NPS's is a critical part of most games and I've been planning to add at least 3 types: 
- Quest ( start and ending quests )
- Trainers ( to learn abilities )
- Vendors ( to buy and sell items )

So after ALOT of tweaking & trying many different layouts, I've ended up with the json structure below (I'm sure it will change as the project evolve):

```
// check this page for the full json structure:  https://github.com/orion3dgames/t5c/blob/main/src/server/data/LocationsDB.ts
{
    ...
    key: "spawn_04",
    type: "static",
    name: "Priestess Kilhiam",
    interactable: {
        title: "Talk",
        data: [
            {
                type: "text",
                text: "Greetings, dear one! I am @NpcName, a devoted servant of the benevolent Goddess Athlea. May her light shine upon you."
                quests: [
                    { key: "LH_DANGEROUS_ERRANDS_01" }
                ],
                trainer: {
                    abilities: [{ key: "light_heal" }],
                },
                buttons: [
                    { label: "Can you heal me?", goToDialog: 1 },
                    { label: "Sorry, I'm busy adventuring.", goToDialog: 2 },
                ],
                ...
            },
            ...
        ],
    },
    ...
},
```

## Quests (and tracker)
Integrating quests into the project took me a long time, having never done anything remotely similar or being able to find anything to work from, I sort had to start from scratch. The longest time was spent getting the JSON structure right, and integrating it to the client. This is the results I ended up with (simple and should be modular enought to different types of quest): 

> please note only kill quest has been added at this stage.

```
LH_DANGEROUS_ERRANDS_01: {
    key: "LH_DANGEROUS_ERRANDS_01", // unique id
    title: "Dangerous Errands",
    description:
        "If you have a moment, our temple is currently plagued by a bandit invasion and they're roaming outside the temple creating havoc. Perhaps you could offer some assistance in this matter?",
    objective: "@NpcName in @LocationName wants you to kill @KillRequired @TargetName found a little to the east of lighthaven temple.",
    type: QuestObjective.KILL_AMOUNT,
    location: "lh_town",
    spawn_key: "lh_town_bandits",
    quantity: 5,
    isRepeatable: false,
    rewards: {
        experience: 500,
        gold: 50,
        items: [],
    },
},
```

// each npc will list available quests as a orange button 
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/w9y043k2w1gtmcifvee1.png)

// when you talk to quest giver and objectives has been complete, you have an option to complete the quest
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/wtaazronmfeavvwdz9hh.png)

// quest tracker shows all active quests
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/2tb10b3lrwfby8pt5zmk.png)

---

## Abilities Trainer

Using alots of the quest UI and some of the logic, it was comparatively much easier to add a trainer NPC.

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/4twrcnxkpqvy9nozzucd.png)

---

## Vendor

Adding a vendor was a litle more complicated as I need to add a few different types of behaviour
- listing items
- ability to buy 1 or more of 1 items
- ability to sell (there are many ways of doing this one)

> selling was a little more complicated, after some testing i came up with the following: clicking the sell button start the sells mode, cursor changes to reflect thta, clicking left on any item in the inventory will proceed in selling 1 of that item. click sell again or closing the window will cancel the sell mode.

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/dw5fy4q20u1baqobk7p4.png)

---

## Mouse Cursor

I also worked on changing the cursors as needed, for example: 

- while in sell mode, show the sell cursor
- while hovering an interactable entity, show the hightlight cursor
- etc..

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ywppwowo8mwdsrnhh12o.png)