Welcome

This web was made by Xavier López(Xavierelm11 on GitHub),Spanish student of CITM,UPC, this is a personal research with the objective of How to do a GUI for RPG.

Introduction

In RPG games the UI is one of the most important elements to take into account when designing a videogame, since we will spend the whole game, especially in turn-based RPGs, navigating through the menus and analysing the information shown on the screen in order to act on it. We could say that they are menu games, so we must make the UI and menus as clear and comfortable as possible.

In this website we will learn how we should create an interface for the development of a game, what types there are, how to organise it, how to adapt it to gamepad, bad and good examples.

Types of UI Menus

The first thing is not all games will have the same number of UI Menu types, it will depend on which ones are decided to be added and if they are necessary or not. The most basic ones are (for most examples I will be using images from Persona 5 Royal):

• Main menu (Persona 5 Royal)

(Pokemon White & Black)

• Options (Class Project)

• In game:
  • A save place(Persona 5 Royal)

• A place with enemies, now we have mini map and state of each member of the party(Persona 5 Royal)

• Dragon Quest IX (nds), due to the fact that the nds has 2 screens, it uses them to put minimap with your position.

• Dark souls 3 (action-RPG), The only thing the UI shows us is basic information such as life, mana, stamina, tools, weapons that we can use immediately and the number of currency earned.

• Death UI, a way to show the player clearly that he has died, how and why( Destiny 2)

• Narrative boxes that shows us what the different characters are saying to us.

(Persona 5 Royal)

(Pokemon Platimun)

• Fast menu (optional) (Persona 5 Royal)

(Pokemon White & Black)

Pokemon Heartgold/Soulsilver uses the tactile screen as a fast menu

• Pause menu, shows all the options the players can access to get organised/customise/customise/analyse/view stats/save/load/go to options, It is very important for the player to see which option he/she/they is constantly preselecting.

(Persona 5 royal)

(Dragon Quest XI)

(Pokemon Platinum)

(Pokemon White & Black), we are clearly shown the type of attack it is, the number of uses we have left and the stats of our Pokemon (who will fight).

(Destiny 2), if we are going to have equipment it is important that each piece is organised with its category and if we are going to have rarities it is important to use a colour system that the player can recognise quickly and that is similar to other games.

(Fortnite rarities), from worst to best, the color system more used

• Map (optional), is not necessary and how you want to display the information on the map is entirely variable depending on what design decisions you make, but if you are going to include icons you should clearly show what they indicate.

(World map Persona 5)

(Zone Map Persona 5)

• In combat, the best possible use is made of the space available to show in the clearest and simplest way what is happening in combat, the state of our party and what we are doing. To show different life/mana/stamina bars …. we usually use complementary colours or colours that can be differentiated at a quick glance.

(Dragon quest XI)

(Dragon quest IX)

(Persona 5 Royal)

if something different happens during the combat like a special attack or a critical hit it should also be shown, in most of the current RPGs they usually show the affected damage, enemies, allies and their life bar.

it is also necessary at the end of a combat if we have obtained any reward or xp.

(Pokemon Heartgold)

(Final fantasy VII Remake)

(Dark souls III)

User experience

In Pokémon platinum, when we talk, we are never shown who we are talking to, contrary to what Persona 5 previously showed.

In final fantasy 2 the information shown to us is CHAOS, we don’t know what any number or name is, all the letters are the same colour and there is no nomenclature or symbol to tell us what it means.

For our development

When creating UI Menus it is important to start with a quick sketch of each one, but first we will make an outline to see what elements we have and have to show in some way, and nothing happens if we have no idea how to make a UI, we can look for examples and adapt it to our needs.

Outline of Main menu

Diferents Sketchs of main menu distribution

Outline of Options

Exemple combat UI of game that we are developing

Using Gamepad in menus

In some ways it is much simpler than it seems, the clearest example is Persona 5, where we are constantly shown discreetly on the bottom edge of the screen which action each button performs, and by not using the mouse, which has more precision, we must indicate which option the player is preselecting.

(Dragon quest XI)

Interesting video (Spanish)

Links

• https://www.youtube.com/watch?v=Yx1bPmeo6L8&t=18s&ab_channel=Joseju (video)
• https://interfaceingame.com/ (web to see UI of games)
• https://github.com/alexgesti/Odd-Space/wiki/GUI-Design-Document#credits-screen
• https://mitarn.wordpress.com/2010/05/20/dragon-quest-ix-why-torment-me-so/
• https://finalfantasy.fandom.com/es/wiki/Final_Fantasy_II
• http://www.destinorpg.es/2018/10/la-gestion-de-menus-en-el-genero-rpg.html
• http://desmume.org/ (Emulator used to play some games)