Making a Multiplayer WEB RPG - Part 2: - Adding Items
Tags: babylonjs, typescript, gamedev, colyseus
Published: 2023-05-09 05:53:19

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!

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

Github: [https://github.com/oriongunning/t5c](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)

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

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

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

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

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

### Utilizing the provided filter() function:
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/lj7v33gfl33u4hiahvjn.png)
- 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
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/cebkw6ntjk7bldaj2toc.png)
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.
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/n03pfqkeoetvjyu1lwjt.png)

---

## Assets

### New Character
I've added a new character model to the project, more generic & open sourced.
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/x8yck61xv905h9pta5h2.png)
### 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