An exploration puzzle-game where a woman searches for her father, during the Portuguese dictatorship.

Post news Report RSS Devlog No.7: UI - My Rosemary

A post about our newly available Figma Prototype, which you can try right now! More on info in the post itself.

Posted by on

Hey everyone!

Today's post is all about User Interface and our implementations of it so far.
To brainstorm and develop our current UI, we've made a figma prototype!

figma1

The overview of our Figma project.


For those who don't know, Figma is a great tool for designing interfaces, for various type of media, with games being one of them. It's very capable and easy to use so we stuck with it.

My Rosemary is not very reliant on UI, though it still holds an undeniable place, most prominently on menus.

Let's break down our game's interfaces into two segments:

  1. Menus
  2. Gameplay

The first one is fairly self explanatory, menus are obligatory for games, for a multitude of reasons. First and foremost they serve as a barrier before the gameplay, showing the game's title or allowing for a shift in in settings.
For My Rosemary, we have a Title Screen with Play, Options, Credits and Exit buttons.

figma2

The current Title Screen Prototype.


The Play button leads to the actual gameplay; the Options button leads to the next Screen, featuring a Graphics and Audio section, a Controls section; the Credits leads to a credits page for our team and the Exit button, as the name says, exits from the game.

OptionsFigma

The current options menu.


figmagraphsaud

The graphics and audio menu, with interactable buttons and sliders.


figmacredits

The credits screen with our logo placed.


This same menu can be opened in the game, with the only difference being the background. Now let's talk about the Gameplay.

While in-game there are three main sources for UI.

  1. The Dialogue box and Portrait
  2. The interactable Objects
  3. The Lockpick Screen

The first one is self-explanatory. The dialogue box appears whenever the player interacts with an object, showing a description or something akin to such. Whenever Rosemary speaks, a portrait of her appears alongside the usual dialogue box.

figmaDialogue

The dialogue box displaying text.


For the Interactable Objects, they brighten when close to and if the player can interact with them. This form of UI is present on the objects themselves.

figmaBox

The green box displaying a yellow shine, showing it can be interacted with.


The final and most present one, the Lockpick Screen appears whenever the player wants to open the locked doors. These locks are one of the main mechanics as previously told in the Dev Diaries before this one. After lockpicking a door, the player returns to the normal gameplay screen.

figmalock

The lockpick screen (upper image) and the lock after being opened (lower image).


And with that, we've discussed all there is about the UI for My Rosemary!
Before the post ends, we want to share with you the playable prototype. It will be under changes for the following weeks, so be on the lookout for updates on there!
(Major updates will likely be featured in another post.)

The link to the Prototype:
Figma.com

That's all for today!
See you next time,

Nymeus Studio
nymeus smol


Post a comment

Your comment will be anonymous unless you join the community. Or sign in with your social account: