Fantasy Platformer UI Design
- 2018 July 20 Friday
- 2 min. read (399 words)
- Visual Style
- In-game
- Inventory
- Weapon Skills
- Item
- References
How would a 2D, fantasy, platformer, action RPG look like? Terraria did this and added mining mechanics. In place of mining, I'll add dialogue mechanics. The concepts is designed for consoles.
Visual Style
Fantasy games like to use an orangish paper color for their menus. I think I'll try blue leather and see how that works. Unlike my designs for Midnight Hunter and Our Oath, a flat design would not work here. Many fantasy games have elaborate shapes and textures for their buttons and menus.
In-game
Letting the landscape take most of the screen gives a permanent aura of an epic adventure. The shortcuts are for the PS4. The glow of the fire is done by putting an orange gradient on one layer, and selecting the dodge mode. Like subtitles, I don't add any fancy textures to the dialogue options, because the text must be uncompromisingly clear.
Inventory
The inventory UI is laid out in a grid like most action RPGs. I make the icons bigger, so we can see more details on them. Loot is the center piece of ARPG games. Players want to look at every detail of their legendary items.
Weapon Skills
Like Midnight Hunter, all abilities come from weapons. This is similar to how each weapon in Dark Souls comes with a move set. Except in our case, moves need to be unlocked. Whereas Midnight Hunter's shows weapons in a list, this game shows weapons in a grid. We already used grids for the inventory, so I am reusing it here.
In general, lists are good for ordering and ranking where We only care about the first couple items. Grids are good for compacting lots of images for comparison or forming some sort of matrix table.
Items
Icons need to be painted with a strong light source and higher saturation, or they will not read instantly. I wouldn't use the items above as icons. I would draw an icon versions of each item. I would then use these items as portraits for when when the player clicks the icon from the inventory to get more details.