How to make inventories in a .io game

Building from MineRoyale.io

Welcome to the first devlog in my series for Cavegame.io. First, I must introduce the game. It was built on top of my game MineRoyale.io, which is a 2d Minecraft Battle Royale .io game. This game had limited features, as I only created six, fixed inventory positions, containing, sword, pickaxe, TNT, blocks, etc. The game also had no special map features, aside from cave systems, randomly spawned ore, and mineshafts as a source of wood. I decided that building a survival game on top of this with better map features would make the game much more exciting, as players could spend a long time exploring, playing with friends, creating a base, and getting the resources to move up the leaderboard.

Bigger Inventory

I chose to begin with one of the hardest elements of my plan, to create a much more dynamic inventory where players can easily move around items while still having a lot of items. The reason for this was that I wanted to add lots of new items to the game without worrying how players will manage them. I added more slots to the main row of the inventory, then I added another row of slots that can be viewed when the player pushes E. The difficulty was that I had to sync this inventory with the server inventory, without creating any visible latency for the client. My method for this was that I decided the server will not have any awareness of the way that the clients inventory is organized. The server only knows what items the player has, and what item the player is holding. When the player moves items in the inventory around, the server has no awareness of this. The reason for that is that if the server does not care about the organization of the inventory, there will be no server latency when a player moves items around. It only is authoritative in the sense that it will prevent the player from trying to claim it has more items than it has.

I used special jQuery plugins to make the inventory easily organizable. When the crafting menu is not open, the slots themselves become draggable, using the jQuery sortable library. When the crafting menu becomes open, the items become sortable, while the slots themselves remain fixed. This is achieved by making each different slot sortable using the images, but then limiting the number of elements in a single slot to 1, so that an element is locked to not recieve new items when there is already item there. This makes for inventory dragging very similar to Minecraft inventory, with the added flexibility of moving slot containers when the crafting menu is not open.

Limitations and Complexity

Here are a few complexities that I am still considering, but have not implemented. I would like players to be able to drag items out of a certain range in order to drop them on the ground. This seems difficult in the sense that I do not want accidental drops. The other complex thing that I am unsure about is how players should be able to drop only a few of an item, rather than their whole stack. Currently, pushing Q drops a whole stack of items. A possibility is that Q should drop a single item, and some combination like SHIFT + Q should drop a whole stack.

Consideration of Chests

I originally planned to add chests, as a way of storing items in your base that you are not using. For the first release at least, I decided against this. I realized that it would be very difficult to implement synced organization of the chest across multiple players. This is especially true when players decide to add, remove, or move items. If I were to implement this later, I would probably have some inventory-like implementation on the server, which players can access when they are near a chest. Then, they can edit it as they please by sending and add, remove, or move message as they move things around. The greatest difficulty that I see in this is strange cases where a player grabs an item and is still dragging it, when suddenly the server informs the player that a different player accessed that item before them. Strange cases of latency like this are things that I want to avoid. A possible solution is that only one player can access the chest that they place, but I think people would not enjoy that.

Reducing Inventory Items: Anvils

I added the anvil block with the intent of having a way to get rid of items and turn them into raw materials. What it does is it enables you to click tools and weapons on the anvil, which turns them into raw materials, and possibly XP. This is my temporary solution while chests do not exist, as it allows you to remove clutter from the inventory. The additional help that I provide in this regard is that stacks can have an infinite number of blocks, unlike Minecraft, where the limit is 64. This makes it possible for players to convert all of their useless duplicates of items into raw materials, allowing them to carry more important things.

Want to learn more? Join the Cavegame.io Discord to chat!