Monday, September 3, 2012

User interface : the hotbar

The hotbar is a staple of game interfaces, and no Minecraft clone can do without it. Players can drag items, blocks, spells, or other actions to one of its slots for easy access.

After shamelessly grabbing some graphics from Dokucraft, this is what it looks like in Hexahedra:


In Minecraft, it's a single bitmap. In Hexahedra, you need to cut  it into smaller pieces: a left "cap" (the rounded corner), an empty slot, a separator (the grey dot between the slots), something to indicate the active selection (the triangles at the top and bottom), and a right cap.

It might sound complicated, but it's for a good reason. Everything is controlled server-side, so it needs to be dynamic. Using Lua scripts, the server can at any given moment change the size and layout of the hotbar. The example you see here was generated with:

on_login(function(plr)
    plr.hotbar_size = 12
    plr:hotbar_set(0, hotbar_slot(1, "cobblestone"))
    plr:hotbar_set(1, hotbar_slot(2, "firstaidkit"))
...
    plr:hotbar_set(9, hotbar_slot(1, "snow"))
    plr:hotbar_set(10, hotbar_slot(1, "glass"))
end)


The function hotbar_set takes a position, and a slot object. The first parameter of the slot determines its type. The following types are available:
  • Empty
  • Showing a material, either as a block turned 30 degrees, or as a custom 3D model (such as the fence post in slot 7 in the image)
  • Showing an item
  • Showing a custom icon that represents an action (for example, casting a spell)
  • A section separator, for splitting the hotbar in two or more sections
Also, a slot can have one or more extras:
  • A colored crawl bar (item damage, gun ammo, ...)
  • A number
  • A small badge in the lower right corner (powerups, enchantments)
  • A cooldown timer
  • A disabled mode
  • A locked mode (player can't drag it anywhere, or drag another item onto the slot)
  • An action mode (slot cannot be the current selection, but the player can trigger its action with a keypress)
Sometimes, a material can't be represented by its 3-D model. For example, a door consists of two blocks, each with its own material. In this case, the programmer should provide an item that represents it with a proper icon, and hook up the appropriate callbacks to this item.

Being able to control the hotbar from the server is great. Yes, you can make it behave just like in Minecraft. But you could also replace broken tools automatically from the player's inventory. For the infinite blackboard game, I just set it to one icon that shows the player's crayon color. For the tower defense game, the hotbar slowly grows as the player unlocks different tower types. Perhaps you need a RPG setup with separate attacks, spells, and items, with the number of slots depending on the character's level?