Making a Multiplayer WEB RPG - Part 7: Quests, Trainers, Vendors

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

// when you talk to quest giver and objectives has been complete, you have an option to complete the quest

// quest tracker shows all active quests

---

Abilities Trainer

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

---

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.

---

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..