The final design breaks down the map’s content into “layers”; these layers define the information hierarchy and how the UI is rendered. Information is divided into three major types based on interaction:
- Primary: Surface-level information, displayed by default with no user input required.
- Secondary: Information triggered by hovering over an element.
- Tertiary: Information triggered by clicking an element and opening a focus panel.
Layer 1: Topography
Layer 1 is defined by the elements that comprise the land's foundational topography. This includes biomes, land masses, elevation, and bodies of water. This layer is entirely Primary information.
A drawover of BitCraft's existing map demonstrating how elevation may be portrayed.
Layer 2: Roads
Layer 2 is defined by player-built infrastructure that impacts how players navigate and travel the world, such as bridges and roads. Like the previous layer, layer 2 is entirely Primary information.
A drawover of BitCraft's existing map demonstrating how roads may be portrayed.
Layer 3: Territories
Layer 3 is defined by elements that convey ownership or occupation of an area on the map. In BitCraft, this is often referred to as a claim.
Ancient Ruins
Ancient Ruins are non-player-owned claims that function like mini dungeons. They may contain loot and puzzles for players to clear. Once cleared, the ruin collapses and is closed off to players for a specified period until the dungeon refreshes.
A hovered ancient ruin, both in open and closed states.
Settlements
Settlements are player-built claims on the town scale. Members must recruit other players and work together to upkeep these Settlements with supplies and progress to higher tiers. Because players expand the claim tile by tile, each Settlement may have a unique shape and size, which must be accounted for visually by the claim boundary. Additional behaviors include renting homes, aligning with Empire, and even serving as a capital city.
A hovered empire aligned settlement, including secondary information via tooltip and a claim boundary.
An unaligned settlement in its default (primary), hover (secondary), and click (tertiary) states.
An empire aligned settlement in its default (primary), hover (secondary), and click (tertiary) states.
Empires
Empires are player-founded groups that may claim territory on the Empire scale. Empire claims are established by placing actively aligned nodes and may be contested during sieges, where the winner seizes the territory under their own banner.
By nature, Empire boundaries overlay biomes, Ancient Ruins, and Settlements. This means the visual indicator for boundaries had to be designed so as not to confuse or conflict with these other elements.
Empire border visuals based on claim type (from left to right: Established empire borders, area marked for siege, area marked for expansion, and actively sieged area).
Watchtowers
Watchtowers are nodes built by Empires to extend their area of influence. Each Watchtower has its own radius of area of influence and can be potentially overtaken by a siege by other Empires.
An uncontested watchtower in its default (primary), hover (secondary), and click (tertiary) states.
A watchtower under siege in its default (primary), hover (secondary), and click (tertiary) states.
Layer 4: Game Markers
Layer 4 is defined by non-territory-based markers automatically generated by the game logic. Moving entities are displayed on the map, with their positions constantly updating to reflect their overworld location.
Player Location
The player’s current location; when the map is opened, this marker serves as the pivotal position.
The player marker.
Other Players
Other online players that are within render distance.
Other player markers from left to right: default, shared claim member, emperor.
Player Housing
Permanent markers that indicate any building the player owns or rents.
Housing marker.
Deployables
Permanent markers that indicate the location of the player’s deployed vault entities— often vehicles.
Deployable markers for carts and boats.
Teleport Location
A permanent marker that indicates the player’s set recall location.
Available vs. disabled teleport markers.
NPC
There are two main types of NPCs in BitCraft: Travelers, who show within render distance and are stationed at Ancient Ruins, and Wisp, who acts as the player’s tutorial and quest giver.
Traveler icons.
Mobs
Mobs within render distance that can be hunted via combat.
Mob icons from left to right: friendly, neutral, and hostile.
Layer 5: Custom Pins
Layer 5 consists of custom pins placed by the player. This feature enables players to set their own goals and explore, making the map feel like their own personal tool. There are two main types of pins, concept and abstract, each with its own merits.
Concept Pins
Concept pins convey a game concept while remaining general enough that players can assign their own meaning as needed. These pins are often long-lasting and typically mark locations where players plan to return routinely.
Examples of concept based pins.
Abstract Pins
Abstract pins have a more general design, enabling players to mark locations without requiring concept-based meaning. These pins are often more short-term than their concept counterparts, as they mark waypoints for areas of interest or objectives.
Examples of abstract pins.
Pin Management
Pin management functions fall under the Tertiary level and are accessed via the focus panel that appears when the pin is clicked. The following options are:
Placing a Pin
Players can place a new pin by clicking an empty spot on the map with their right mouse button. From here, the player will be prompted to select an icon and (optionally) input a label. By default, a pin starts as an abstract pin.
Editing a Pin
Clicking a pin that has already been placed will trigger its focus panel. From here, the player can edit, label, and delete the selected pin.
From left to right: The new pin prompt and the edit pin prompt.
Layer 6: HUD
Layer 6 is defined by the topmost UI that makes up the HUD.
BitCraft's map with HUD elements only.
Basic Elements
Basic elements are the foundation of the map's HUD and exist in their base form without prompting from the player.
Compass Rose
Located in the top-right corner of the screen, the compass rose indicates the cardinal directions on the map.
Current Player Coordinates
Located beneath the compass rose, a string of coordinates shows the player character's current location.
Controls Panel
To conserve user memory, this low-center UI panel displays the interaction controls for navigating and using the map. Controls include selecting a location, placing a pin, zooming, panning, and rotating.
On-Screen Zoom Control
To accommodate mice without a middle mouse button, an on-screen zoom controller is included on the left side of the HUD.
Nav To + Toggles Panel
Located below the player’s coordinates, this panel focuses on the player’s personal locations and utilities. There are 3 major functions in this panel:
Nav To: Selecting one of the options under “Your Locations” triggers the Nav-To function. This function pans the camera to focus on the location, ensuring players always have easy access to their core places.
Toggles: Players can use toggles to hide certain visuals on their map, reducing clutter and allowing them to focus on what matters most in the moment. Toggleables include the Empire territory grid, placed pins, Ancient Ruins, Watchtowers, and owned + available land.
Watchtower Overview: Pressing the “View Watchtowers” button opens the Watchtower overview menu. This allows players to stay up to date on relevant Watchtower and siege information.
Mockup of the watchtower overview menu.
Information Overlays
When players need information beyond the Primary level, information overlays deliver Secondary and Tertiary information via tooltips and focus panels, respectively.
BASIC HOVER TOOLTIPS
Toggleable with the Alt key, the basic hover tooltip triggers when the cursor hovers over the map, but not over a specific marker. This tooltip displays coordinates, biome, and ownership information.
Basic hover tooltips for both an unaligned and empire aligned territory.
MARKER HOVER TOOLTIPS
Triggered when the cursor hovers over a specific map marker, these tooltips display Secondary information assigned to an element.
Marker hover tooltips for both an unaligned and an Empire-aligned Settlement.
FOCUS PANEL
When a player clicks a specific marker, the focus window UI adds context by providing any Tertiary information and interactions assigned to the element.
Focus Panels for both an unaligned and an Empire-aligned Settlement.
Additional Behaviors
Now that we have established the map's content and the corresponding render layers, there are a few additional interactions worth detailing.
Zoom Views
To create a stronger hierarchy and avoid overcrowding, BitCraft’s map adapts around the current zoom level. To see the detailed logic behind this behavior, please see the Zoom Levels section of this case study.
Auto Pathing
Players can use their left mouse button to click on the map or mini-map (an optional setting) to auto-path to the selected location.
Tracking a Location
Players can track existing markers and pins via the focus panels triggered by an LMB click. This will help the player navigate to their desired location by keeping the tracked pin persistent on both the map and mini-map.
A non-tracked vs tracked pin.
Off-Screen Indicators
Similar to their stationary counterparts, off-screen indicators point to the direction of important or tracked markers outside the current map view by hovering the edge of the player’s map.
A tracked off-screen marker.
Mini-Map
The mini-map is a reduced map-view UI in the Overworld HUD and is core to reducing the friction of the player having to open the full-screen map frequently. At its core, the mini-map gives directional guidance through a map preview, live coordinates, and emphasis on tracked elements. Additional navigational support is provided by the surrounding buttons, which include an Empire grid toggle, a claim border toggle, teleport, and access to the full-screen map. To further enhance usability, players can opt in or out of rotation lock and zoom controls that are triggered when the player scrolls the UI while hovering.
An example minimap with a tracked location.
