DEV Community: Orion3D

Making a Multiplayer WEB RPG - Part 10: Customizing Characters

Orion3D — Sun, 16 Jun 2024 23:37:38 +0000

Hi All,

I've been working on character customization systems. It is nearly complete and includes a big performance boost compare to previous method.

I have 2 types of items (I’m sure none of this is new to you guys, but sharing is caring :slight_smile: ):

dynamic items that I attached via code to the relevant bone (weapon, hat, shields, etc…)
embedded items which are rigged item in blender (head & armor currently), not much choice there as a skirt for example needs to move with the legs (not possible with the dynamic method)

So I now have one single VAT running that is used by all my “humanoid” characters.

Currently, I can mix and match the following very easily:

20 materials,
6 heads,
3 dynamic items (weapon/shield/helm,head)
2 embedded items (white robe, purple robe)

Next step is being able to customize the material for the “embedded” items, currently I apply one material to the full mesh (including the embedded items).

Performance are still good (50-60fps / 40 draw calls approx)

Here are a few shots:

Making a Multiplayer WEB RPG - Part 9: Creating the world

Orion3D — Sat, 01 Jun 2024 04:02:26 +0000

Hi all,

Since I've managed to resolve most of the animations issues I was having, I decided to relax and work on some level design, keeping in mind that the overall goal was to make enough content to bring the player from level 1 to level 10. The overall feeling should feel "grindy".

Preparation is KEY

Before starting any level design, I want to create a list of all the different locations, enemies and characters.

I had a pretty good idea already, but Took me a little while to write it all down and then using CHATGPT to tidy up the structure, I got to this result:

Eldoria is a quaint village nestled between lush forests and towering mountains.

Locations

Forge: The heart of Eldoria’s craftsmanship, where the Blacksmith, Garin, forged weapons and armor to aid adventurers.
Temple: A sanctuary dedicated to Athlea, watched over by Priestess Alice, who also guarded the entrance to the rat-infested Cellar dungeon.
Farm: A sprawling field tended by Farmer Jorin, who provided food for the village.
Tavern: The lively hub of Eldoria, run by Bartender Morin, where stories and quests were exchanged.
Market: Bustling with activity, the Merchant Elara sold potions and jewelry to aid adventurers in their quests.
Mountains: Majestic and foreboding, they housed the entrance to the treacherous Cave dungeon.
Cemetery: A somber place tended by Caretaker Ren, and the entrance to the Mausoleum dungeon.
Forest: Dense and dark, home to fearsome Bandits and the site of many trials.
Sorceress Tower: The mystical home of Sorceress Mira, where adventurers could learn offensive magic.
Velvet Veil: A luxurious establishment in Eldoria, known for its warm hospitality, soothing ambiance, and vibrant performances.
Port: Locations of future development and potential quests.

Dungeons

Cellar: Beneath the Temple, infested with vicious Rats, perfect for novice adventurers.
Mausoleum: In the Cemetery, filled with powerful Skeletons, posing a greater challenge.
Cave: In the Mountains, housing cunning Mummies, a trial for the most seasoned heroes.

People

Blacksmith Garin: A master of the forge, providing essential equipment.
Merchant Elara: A savvy trader in potions and enchanted items.
Sorceress Mira: A wise mage who trained adventurers in offensive magic and resided in the Sorceress Tower.
Priestess Alice: A devout priestess who taught defensive spells and sought help for the Temple’s troubles.
Farmer Jorin: A simple farmer with untold stories.
Bartender Morin: The keeper of the tavern and a source of many quests.
Caretaker Ren: Guardian of the cemetery, harboring secrets of the Mausoleum.
Madame Seraphina: Proprietor of the Velvet Veil.

Enemies

Rats: Infesting the Cellar, a challenge for heroes levels 1-3.
Skeletons: Haunting the Mausoleum, suited for heroes levels 3-6.
Bandits: Roaming the Forest, a danger for heroes levels 6-8.
Mummies: Dwelling in the Cave, a peril for heroes levels 8-10.

Level Design Workflow

Once I've clarified the overall content, it's time to start level design, please see below the steps I followed to get my scene from Unity to Babylon.js

I use the Unity editor for the level design
I export the whole scene as a GLB format, and then I use https://gltf.report/ to optimize the scene, size can go from 2-3mo to 100ko.
I also use the unity navigation system to generate a navmesh, export it to an .OBJ file, import it in Blender, do some mesh optimization/fixes and then export to a .GLB file than can be used by the server and client.

In order for my LOD system to function, meshes must never too big in the horizontal axis, else player will have meshes that disappear when they shouldnt so I always make sure to not make any objects that span large chunks of the level.

The result

After quite a bit of work, I actually managed to fit everything in quite a small area (which suits me just fine). The idea is too keep everything tight and condensed. Of course, this map will elvove/improve naturally as I work on it. A few thing to bother me:

The actual farm should be moved closer to the mountain (and not in the village center)
Market should probably be in the town center
The Velvet Veil in front of the Temple may be a little provocative

And here are some screenshots:

So, What do you guys think of the result?

Until next time,
Orion

Making a Multiplayer WEB RPG - Part 8: Instancing & VAT Animation

Orion3D — Tue, 16 Apr 2024 03:59:59 +0000

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

Hi All,

It's been a long time since last update and as some of you may know, to improve performance, I've been trying to implement instances & baked animations.

What is Baked Texture Animations?

Usually, animations are computed by the CPU, applying the bone effects to the mesh. This is reasonably slow and for several animated objects can be a bottleneck. One way to optimize this is pre-computing (or baking) the animations, storing them into a texture (usually called Vertex Animation Textures, or VAT) and using it on the vertex shaders. This frees the CPU, with the trade-off that you need to perform this initial baking step (which can be done at development time), add a new texture file to your downloads and consume more GPU memory. This trade-off is usually quite good, since the CPU tends to be the bottleneck.

This is what a VAT texture looks like

Attaching Items to Instances

Since I've transitioned to using instances for my models, attaching items to a bone, as I've been doing until now, is no longer feasible (since instances share the same mesh/animation). I've identified several methods I could use:

Attaching to a bone via Blender (the easiest but less flexible approach).
Continuing to attach to a bone, but this would require having a cloned skeleton for each different animation * each model.
Bone weighting via code (this would require having a clone of each item * each model).

Initially, I went for the third option due to its potential for greater flexibility. However, in hindsight, the simplest solution may have been more appropriate.

Initial Implementation

After seeking advice on the helpful Babylon.js forum, I successfully implemented the solution. I could now have over 200 different models, with multiple equipment pieces dynamically attached to models via bone weighting at runtime, all while maintaining a smooth 60 frames per second.

Victory! Unfortunately not.

Upon further observation, I noticed some peculiar animation artifacts (only on the items) as soon as I introduced more than one different model.

For a clearer understanding of the issue, please refer to this video (NO AUDIO):

Resolving the BUG

After struggling for months and nearly abandoning the project, I finally managed to resolve the issue. Surprisingly, it only required changing 2 "silly" lines of code to finally fix it.

// https://github.com/orion3dgames/t5c/blob/feature/vat-skin/src/client/Controllers/VatController.ts

// line 172
// previous was: let rawMesh = this._game._loadedAssets["ITEM_" + item.key].meshes[0];
// note: this._game._loadedAssets[key] is an array of ContainerAssetTask
let rawMesh = this._game._loadedAssets["ITEM_" + item.key].meshes[0].clone();

// line 234
// commenting the line below was necessary too
// itemMesh.setEnabled(false);

As mentioned earlier, each model should have had its own set of cloned items, but for some reason, they all appeared to be attached to the wrong model.

Nevertheless, I'm still not entirely sure why these 2 lines fix this issue, and I'll need to investigate further in due course.

The result

I've now refactored and merged everything back to the master branch and updated the demo. See results below:

Cheers,
Orion

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

Orion3D — Thu, 09 Nov 2023 05:54:28 +0000

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

Making a Multiplayer WEB RPG - Part 6: Don't forget to congratulate yourself

Orion3D — Tue, 22 Aug 2023 04:15:28 +0000

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

Hi All,

This one is short, and is more of a pat on my back type of post :)

Anyway, I've finished the roadmap that I set earlier in April this year and to recap what has been added since:

Items can now be dropped, picked up, used and equipped.
AI has been massively improved and can IDLE, PATROL, CHASE, ATTACK, etc, and have patrol behaviours (in a area, in a radius, on a path)
Player & AI can also move up or down stairs and are not limited to a 2D plane anymore.
Players can teleport to different scenes
Standardized players & enemies characters/animations using the amazing Kay Kit assets
Added a new character screen UI (mage/knight class + color variants)
Lots of performance improvements and tweaks

I know there is way more to do/improve, however I'm rather proud of what I accomplished in a few months and wanted to share it to your (ruthless) constructive comments.

King of the castle shot

The full player UI

New player character

New enemies assets

Levels can be vertical now, woot

New Dungeon scene

Updated Character Creator Scene (class + color)

Updated Character Selection Screen

Making a Multiplayer WEB RPG - Part 5: Y Axis, Spawning & Better AI

Orion3D — Mon, 07 Aug 2023 04:27:20 +0000

GITHUB Link to the full open source code
DEMO Link to the latest demo build
PROGRESS POST The detailled progress post on Babylon.js forum
Technology used: Babylon.js 6.x / Colyseus 0.15 / SQLite

Hi there,

It's been a while, and much has changed.

Restructuring the server (again)

Just a quick update on the project: I’ve wasted ALOT of time on trying to restructure the server (test/yuka branch) in order to simplify and decouple the different parts (Colyseus, Yuka, Game manager, etc) and after a few different attempts and alot of work, I’ve not managed to get a solution that is as simple as having the Colyseus Schema as the main object of my game entities.

I’ve tried a few different ways:

Having Yuka game entity as a base, and Colyseus schema as a child under it, that works but leads to more complexity and duplication and forcing me to create a sync function that runs on every iteration
Having a custom game entity as a base, and Colyseus schema as a child but that leads to the same issues as above,
Having a custom game entity and Colyseus at the same level and synchronize them using a specific id but that create its own complexity. So I’ve reverted to using Colyseus schema as my base game entity, in order to be able to do for ex: this.mana = 100; and it will sync automatically to clients.

Simpler is better,

Better AI using Finite State Machine

During the refactor above, I added a simple FSM state machine with an ENTER, EXECUTE & EXIT method to the enemy AI.

This is reasonably versatile and allowed to improved AI behaviour quite significantly all while reducing duplicate code.

Turns out, I only really need these 5 states:

IDLE
PATROL
CHASE
ATTACK
DEAD

In the future, I will move from FSM to a behaviour tree, but that would be a little overkill currently.

You can find some video showing the results here: https://forum.babylonjs.com/t/open-source-multiplayer-3d-rpg-using-colyseus/35733/168?u=oriongu

Dynamic spawns

I also added a simple spawning controller, and using a basic JSON structure attached to each level, it will keep adding and spawning enemies and NPC as needed.

// will create an aggresive ennemy (attackable by player) that will patrol by cycling through each of the specified waypoints
{
    type: "path",
    behaviour: "patrol",
    aggressive: true,
    canAttack: true,
    points: [
        new Vector3(17.47, 0.04, 2.55),
        new Vector3(31.77, 3.54, 2.56),
        new Vector3(32.46, 3.54, -11.21),
        new Vector3(16.87, 0.04, -8.92)
    ],
    radius: 0,
    amount: 1,
    race: "male_enemy",
    name: "Guard Pirate",
},

Equipping & un-equipping Items

I added the ability to equip & un-equipping and item by right-clicking on them in the inventory.

I also added the relevant UI that goes with it to show what item are equipped.

Added the Y axis

The latest addition, and a big one, is the addition of the long waited/planned Y axis to the project.

So levels DO NOT need to be flat, YAY.

Making a Multiplayer WEB RPG - Part 4: Roadmap Retrospective

Orion3D — Thu, 15 Jun 2023 04:30:47 +0000

SOURCE HERE: GITHUB
DEMO HERE: DEMO

Hi all,

Six months later, it's time for another retrospective. Despite encountering a few challenges along the way, I managed to achieve significant progress. In this blog post, I will reflect on what has been accomplished, what remains to be done, and outline a more realistic roadmap for the upcoming months. So, let's dive in!

Accomplishments

Over the past six months, with more than 250 commits, I have successfully implemented a basic version of the following features:

Basic name, logo & branding
Basic levelling up & experience system
Improve AI pathfinding & behaviour
Completely revanped AI (using a simple FSM structure)
- When in aggro mode, make sure AI does not go though walls
Better monster and player selection
New game UI
- inventory panel
- character stats panel (assigning stats points)
- abilitiy panel (learn and unlearn abilities)
Item drops from monsters
Ability for players to pickup to inventory
Items & Abilities database
Better player camera (rotate and zoom)
Every assets is now either made by me or is open source.
Lots of improving in ability feedback (casting bar, etc…)
Much better & flexible tooltip
Player data can easily saved to DB is need be
Arguably better assets loading
initial colyseus state reduced (still more to do there)
probably more stuff that I forgot about

Pending Items

Unfortunately, there are a few items from the previous roadmap that I couldn't complete within this timeframe. I may have been overly ambitious, considering the scope of the project. The outstanding items include:

Having NPC’s (may have been a little optimitisc on that one)
Dropping item from inventory
A few remaining bugs

Marketing

I’ve also manage to do a little bit of promotion on a couple discord channel and made 3 small dev posts on DEV.TO :

DEV Blog #1 - Multiplayer 3d Top Down RPG using Babylon.js & Colyseus
DEV Blog #2 - Babylon.js Multiplayer RPG - Adding Items
DEV Blog #3 - Babylon.js Multiplayer RPG - Updating the interface

Project Metrics

To gauge interest in the project and ensure it's worthwhile, I've been monitoring some metrics. Although I lack a benchmark for comparison, the numbers have been steadily growing, which is encouraging:

BABYLON.JS: over 4900 views on my progress post as of today (woot!)
GITHUB Forks: 10
GITHUB Views: 600-1000 week
GITHUB Clones: 90-120 week
GITHUB Stars: currently standing at 39
DEV.TO views: 500 views in total over 3 posts
DEV.TO followers: 150 followers in total over 3 post
DEV.TO comments: 0 in total over 3 post

Features in Progress

Several features I've been working on are not yet implemented or showcased due to their complexity or current issues. These include:

How to implement baked animation
How to implement clothes and different materials (different face for example)
Retargeting animations (not sure of the term but having the same animation set for multiple characters)

Conclusion

Reflecting on this six-month sprint, I can confidently say that building a basic 3D multiplayer RPG is a massive undertaking. To achieve a playable prototype or come close to completion, I'll require additional time (which is limited) or assistance from others who excel in areas where I lack expertise, such as level design or character animations.

If anyone is interested in contributing, please feel free to join the project! Regardless, I'll continue working on it to the best of my abilities.

Roadmap for Version 0.3.0

Considering the lessons learned, here is an updated roadmap for the upcoming months, with a more realistic scope:

[GAMEPLAY]

Calculate basic damage and stats based on relevant factors, such as items and character stats.
Enable the ability to drop items from the inventory onto the ground.
Implement the usage of items like health potions and mana potions.
Improve the hover effect for items on the ground.

[UI]

Allow players to equip and interact with armor and weapons in the relevant UI interface

[AI]

Enable AI to patrol in an area defined by an array of vector3 (x, y, z).
Implement AI's ability to patrol within a specific radius around a vector3 position.

[PLAYER]

On entity death, remove entity collision and hover/pick events to avoid hindering players from picking up dropped items.
Ensure the selected entity loses focus based on player distance.

[BUG]

Fix the issue where, after performing a basic attack, if the player starts moving and then stops, the attack animation continues instead of transitioning to the idle animation.
Resolve movement irregularities and delays when multiple players are present, some sort of bug there, to be investigated
If a player disconnects while being targeted by an AI, prevent the AI to continue attacking for a while before returning to patrol.

[RESEARCH]

Investigate how to add the Y-axis to my movement controller.
Research on the implementation of patrol areas, teleport events, NPC positions, and other dynamic elements in the world, probably via some sort of custom amade editor

Making a Multiplayer WEB RPG - Part 3: - Updating the interface

Orion3D — Thu, 18 May 2023 04:50:41 +0000

Hi all,

Having focused mostly on gameplay element and the core structure of the game, I've never spent any time into making a decent UI. The last few days, I've done a full refactorig of the UI including code & design. It is now much more tidy and organized (it was a mess!).

FYI, I'm using exclusively the BABYLON GUI system (no html / css)

NOTE: Be aware, I still very new at coding in typescript and javascript on a project of this scale, so please jump in if I say something silly.

GITHUB: https://github.com/oriongunning/t5c

Current design

Design

A few hours on Affinity Designer (great alternative to Photoshop btw) was enough to get a rough idea of what I wanted the UI to look like, admitedly it is very generic but should be easily expandable in the future.

Interface Elements

I've restructured every UI element into it's own class, with a much more meaninful naming convention:

AbilityBar.ts
Chatbox.ts
ExperienceBar.ts
RessurectBox.ts
Tooltip.ts
MainMenu.ts
CastingBar.ts

Additionally, all the code is now following a similar structure.

Moveable panels

All the moveable panels have their own class extended from Panel.ts, which makes creating a new panel a breeze:

import { Rectangle } from "@babylonjs/gui/2D/controls/rectangle";
import { Panel } from "./Panel";
export class Panel_Inventory extends Panel {

    private panel: Rectangle;

    constructor(_UI, _currentPlayer, options) {
        super(_UI, _currentPlayer, options);
        this.createContent();
    }

    public open() {
        super.open(); // I did not know this was possible until only recently.
        this.refresh();
    }

    private createContent() {
        // use this._panelContent as the container;
        // content here
    }

    public refresh() {
        // any update to the UI should be done here
    }
}

and then initialize the panel like this:

this.panelInventory = new Panel_Inventory(this, currentPlayer, {
    name: "Inventory",
    width: "246px;",
    height: "300px;",
    top: "-30px;",
    left: "-15px;",
    horizontal_position: Control.HORIZONTAL_ALIGNMENT_RIGHT,
    vertical_position: Control.VERTICAL_ALIGNMENT_BOTTOM,
});

I then added a very basic drag and drop system to Panel.ts

// drag and drop events
panelHeader.onPointerDownObservable.add((e) => {
    this._isPointerDown = true;
    this._pointerDownPosition = { x: e.x, y: e.y };
});
panelHeader.onPointerUpObservable.add((e) => {
    this._isPointerDown = false;
});
panelHeader.onPointerMoveObservable.add((event) => {
    if (this._isPointerDown) {
        var deltaX = event.x - this._pointerDownPosition.x;
        var deltaY = event.y - this._pointerDownPosition.y;
        this._panel.leftInPixels += deltaX;
        this._panel.topInPixels += deltaY;
        this._pointerDownPosition.x = event.x;
        this._pointerDownPosition.y = event.y;
    }
});

I'm sure I'm probably boring you guys by this point, as this is all pretty standard stuff. If any of the code if of interest, just check out the github repository.

Theming

Still plenty of work to do on this part, however I've started working on having one file responsible of all the appearance (font-family, color, background, borderColor, etc..), more to come in the future once I figure how the best way to tackle this.

Result

Anyway, without further ado, here's the result:

Alot to improve here, but as a first iteration, I'm rather happy with the result.

What do you guys think? Any suggestions?

Making a Multiplayer WEB RPG - Part 2: - Adding Items

Orion3D — Tue, 09 May 2023 05:53:19 +0000

Hi,

It's been 3 months since my last update, and I haven't made as much progress as I wanted to. Mainly because life and work have been keeping me busy, but also because I had to learn how to use Blender for animations and other stuff. Making a game like this takes a lot more time than I expected!

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

Item System

I have devoted significant effort to improving the inventory/item system, including the following features:

Monsters now have lootables, and drop items based on their respective lootables.
Items can be visually represented on the ground, with a highlighted effect on mouse hover.
Players can move their characters closer to an item by clicking on it, and subsequently pick it up and add it to their inventory.
The inventory can be accessed either by pressing the "I" key or by clicking the inventory icon on the UI.
The inventory system is also automatically saved to the DB every 5 seconds (for the moment)

Next step, is to be able to actually equip/use/eat/drink items.

Abilities

Abilities are no longer hardcoded and now have a dedicated UI where they can be learned and unlearned.

New players start with only the basic attack ability.
All learned abilities are saved to the database every 5 seconds (quick and dirty for now).

Colyseus Integration

I've done quite alot of refactoring on the server to try and reduce colyseus state

Utilizing the provided filter() function:

All players receive the position, level, health, mana, and a few other parameters of every other player. Extra parameters are only sent to the player they belong to (such as abilities and inventory) since nobody else needs that information.
This enables easy updates for any player on the server, and only the relevant client receives the necessary update.
It may sound obvious, but achieving this required a significant amount of refactoring. Just to clarify, prior to this change, every player would receive all data from every other player.

2) Stopped syncing unnecessary variables

Sounds obvious, but alot of variables did not need to be sent to the client, but only needed to be on the server. For example, in my image, "manaRegen" can be used on the server to calculate player mana, and then only the current mana get's sent to client as it changes.

Tootip System

I've added a global tooltip system that can be used to display abilities/items details.

Assets

New Character

I've added a new character model to the project, more generic & open sourced.

Note on the open source assets

Since my project is open-source, I went ahead and removed all the non-open source assets I was using (which I forgot to do at the beginning). Now, all the open source assets are located in the "construction" folder. It's a blend of affinity and blender files, so I can swap them out effortlessly when I'm ready.

That's it for this time,
Orion

Making a Multiplayer WEB RPG - Part 1: Starting the project

Orion3D — Sun, 05 Feb 2023 23:39:38 +0000

Good Morning,

As every good story start: Once upon a time, in august 2022, I decided to put in a bit of time every day into making a game with these goals in mind:

could hold 20-25 people playing simultaneously in multiple zones
top down rpg similar to diablo but slower paced
open sourced on github

Having never done this before, I took a small day of research and settled on:

Babylon.js because in runs on the browser
Colyseus because I did not want to build my own socket server and it looked great (I can confirm the latest 0.15 preview version is amazing and a breeze to use)

As you see my research was pretty much nonexistent, but luckily these were both great choices and after a month playing around (with a really steep learning curve), I got started.

FYI, I work with mostly PHP, with a fair amount of JS & Node. So, this is not my confort zone at all.

Links (for the impatient ones)

I doubt the demo server will hold up to you guys, but it's as much as I can provide for the moment.
Demo: https://t5c.onrender.com/
Github: https://github.com/oriongunning/t5c
Progress post: https://forum.babylonjs.com/t/multiplayer-3d-top-down-rpg-babylon-js-colyseus/35733

Current Progress

Nearly 400+ commits and 3 months later, I’m starting to have a solid little prototype in place:

fully authorative movement with client side prediction and server reconciliation
server & client controlled collisions
simple scene management & switching
networked animated characters
networked NPC entities with basic AI
health and mana stats
level & experience
a basic ui
4 working abilities (still working on implementing casting)
zoning system (ability to teleport to different locations)
login / character selection/creation scene
database persistence (using SQLite for simplicity)
global chat
and more...

What I learned on the way

Addionnally, as you all would know, there are alot of things I learnt along the way, like:

how to format & bundle with webpack & import dependencies to minimize bundle size
how to setup a workflow for the level design between blender, unity and babylon
how to prepare & export a navmesh
how to setup a working demo (updatad with every commit)
how to organize & structure your code to keep it as dynamic as possible and with the less duplicates possible (probably where I spent the most of my time: in refactoring loops)
how to code in a networked way and make sure client never decides of anything and if he does, correct it once confirmation come back from the server. Fake it on the client basically :slight_smile:

Things I struggled with and/or still struggling with

Understanding to never trust the client with anything that impacts gameplay
Timing: One of the hardest thing in multiplayer is dealing with time & latency because everyhting has to be server controlled and reconciled on client. Anyway this point alone could be worth a whole topic on it's own.
Ennemy AI: Having never done anything like this, it took me a long time to get a basic AI in place. And there is still alot of work to be done there.
Collisions: Not wanting to run a copy of the world on the server, I decided to use navmeshes, but to get decent way of generating a navmesh that matches my level was alot of slow & hard work. My current workflow is by using unity: generating the navmesh in unity, exporting as GLTF, retouching with blender. I'm happy with that solutions for the moment.
Player Movement: Client movement prediction & server reconciliation was a absolute mindf*** to put in place when I started this project but the results is well worth it: now even with 500 latency, the player moves around like butter. This is a must read to understand the magic that is happening: https://gabrielgambetta.com/client-side-prediction-server-reconciliation.html

Conclusion

So in regards to my initial roadmap, I’ve went a bit further than planned. The result is that I’m feeling much more confident in my abilities that when I started and will continue working on this for the next few months.

Here is the tings I would like to add:

Basic name, logo & branding
Basic levelling up & experience system
Improve AI pathfinding & behaviour (spawn and patrol around an area only for ex)
Better monster and player selection (its a little hit & miss atm)
UI framework to deal with popups/panels using BABYLON GUI
Inventory Panel
Character Stats Panel
Skills Panel
Item drops from monsters (the actual items & gold will be on the floor ready for anyone to pickup so be quick)
Ability for players to pickup to inventory & drop items from inventory
Items & Spells database ( to be stored in a json file, format to be determined and associated ui tooltip to display information )
NPC vendors where you can buy spells & items

Special Thanks

A big thanks to the whole DEV.to community for being great. Even If I have not interacted much, I've found many answers & inspiration here.

Last but not the least, none of this would have been possible without the amazing support of the Babylon.js community and their continuous support & encouragement!

How I updated my open source plugin from JQUERY to plain JS

Orion3D — Thu, 06 Oct 2022 00:00:18 +0000

I've been wanting to post something for a while but have never really done it before, it's quite scary. Anyway, let's dive into it!

A while back I created a simple plugin to recreate the google images sliding effect. It turned out to be rather popular (> 450 stars) and evolved quite a bit from its infancy.

Recently, I've been getting messages asking to remove JQUERY as a dependency or if there was a JS version. I thought it would be interesting/challenging to test myself to redo it with the least amount of dependencies possible, and in plain javascript.

You can find the result here: GridderJS

And here is a demo: Demo

Overall features

First I had to plan what features I wanted to keep/update:

Multiple instances on the same page
Easy to use and customize with CSS & HTML
Any number of columns
Expanding preview with static HTML content or dynamic (fetch) HTML content
Responsive
Smooth Scrolling
Old / New Google Images display (expander underneath grid or as a sidebar on the right-hand side)
Lightweight
Work out of the box with zero user CSS needed
Multiple themes
Plays well with other plugins

Things I learned/struggled with

Website I used heavily

I'm not very familiar with using javascript for dom manipulation, and this website made it very easy to do just that.

https://youmightnotneedjquery.com/

Parcel.js is awesome

Using parcel.js made it a breeze to set up a build process directly in my package.json file as seen in the snippet below. It generates the plugin as a ES6 module & CommonJS module & a standalone js file. Everything is minified and compressed automatically. I barely scratch the surface of what's is capable of doing, and cannot wait to use it again.

 {
  "source": "src/gridder-js.js",
  "main": "dist/gridder-js.js",
  "module": "dist/gridder-js.mjs",
  "standalone": "dist/gridder-js-min.js",
  "targets": {
    "main": {
      "source": "src/gridder-js.js"
    },
    "module": {
      "source": "src/gridder-js.js"
    },
    "standalone": {
      "source": "tool/gridderjs-global.js",
      "outputFormat": "global",
      "optimize": true
    },
    "demo": {
      "source": "demo/demo.scss"
    }
  },
  "scripts": {
    "watch": "parcel watch",
    "build": "parcel build"
  },
}

How I dealt with the grid

Google Images now show expander on the right-hand side instead of underneath the current row of the selected image so I had to build in an option to toggle between each layout which was not as simple as I originally thought. But with a minimum amount of if's and else + minimum amount of CSS, it's now working quite well,

Basic columns
Via the columns option, it's very easy to specify how many columns you want. This was easily achieved using CSS grids

display: 'grid';
grid-template-columns: 'repeat('+this.options.columns+', 1fr)';

Display Bottom - Old style
The important thing on this one was to have the below on the parent element

display: 'grid'; 
grid-auto-flow: 'row dense';
grid-template-rows= 'min-content';

Display Right - New style
For this option, I had to restructure the JS to allow appending a sidebar at 30% while reducing the main content to 70%. Additionally, I added the below to the sidebar to make it sticky:

position: sticky; 
min-height: 100vh;

I could not find a way to have a right-hand sidebar within the CSS grid

Private & Public functions

Thanks to the addition of Private class features, I can have a #functionName, and call it with this.#functionName.

I could very easily expose any public function to users, in my case, I added an update(options) & destroy() method.

Adding a responsive option was hard

Previously, I was letting the user use CSS media queries to achieve whatever grid they wanted, but many people wanted a more straightforward option

Finding an easy way to implement responsiveness turned out to be rather difficult, however, I'm pretty happy with the results I came up with.

{
    // default options
    columns: 4,
    gap: 15,

    // responsive breakpoints 
    // must be from highest to lowest width
    breakpoints: {
        960: {
            columns: 4,
            gap: 15,
        },
        700: {
            columns: 3,
            gap: 5,
        },
        400: {
            columns: 2,
            gap: 5,
            display: 'bottom',
        }
    },
}

With the information above I create an array of breakpoints available, then I have a listener that triggers on window resize, finds the closest breakpoint, and call an update() with the provided options.

// Resize Event capture every 500ms
var resizeTimer;
window.addEventListener('resize', function(e){
  clearTimeout(resizeTimer);
  resizeTimer = setTimeout(function() {
    GridderJS.resizeGridder();     
  }, 500);  
});


// Resize all gridder instances.
// a bit ugly, but works: to be refactored once I find a better way to make it work. suggestions, anyone?
GridderJS.resizeGridder = function () {
  // get window width  
  let wWidth = window.innerWidth;

  // iterate through each instance
  GridderJS.instances.forEach((gridder) => {

    // if no additional breakpoint is specified, then skip
    if(gridder.breakpoints.length < 2) return false;

    // else iterate through all breakpoint options
    for(const n in gridder.breakpoints) {

      // skip first
      if(n > 0){
        let breakpoint = gridder.breakpoints[n];

        // update 
        if(wWidth <= breakpoint[0]){
          gridder.update(breakpoint[1]);
          break;
        }
      }

      // if all else fails use the default
      gridder.update(gridder.breakpoints[0][1]);
    };

  });
};

Working with other plugins

I've added a few callbacks which allow users to easily interact with other plugins, the demo link shows how I use lazyload.js to lazy load all images.

// just call the init function passed in the user options
this.call.option.init();

// init callback
var gridder = new GridderJS('.gridder', {
    'columns': 8,
    'gap': 15,
    'init': function(el){
        var myLazyLoad = new LazyLoad({
            container: this.element
        });
    },
});

// update callback
gridder.update({ 'columns': 4 });

// destroy callback
gridder.destroy();

Things I'm happy with

Overall features were all implemented
Nearly zero dependencies (just-extend)
Performant
Lightweight (2.6 kB gzipped)

Ending Notes

That's it, we went through some of the things I struggled with & things I learned along the way.

I could probably improve the plugin massively and refactor it to infinity, but I'm very happy with the current result and performance.

I hope you enjoyed reading this article.

Cheers,
Orion