During my 2nd year at Game Sup, we were challenge to make a game concept with a fusion of 2 games. We choose to make a fusion between the Gameplay of A Plague Tale Requiem and the Direction Art of Lost In Random.
I was in charge of the UX/UI of the project, from the Research to the Implementation and Motion.
Puppet Circus is an Action-Adventure. The UI is inspired by AAA Action-Adventure with a Clean HUD. The game have a special mechanics that let the playyer draw cards and use it during the level.
I analysed the UI of A Plague Tale Requiem
I made the Documentation and the UI Flow of the Game
I made the Wireframe and the Skinning according to the documentation
I made the Implementation and add Motion in the Engine
I organised Playstests and made changes according to the Feedbacks
During the implementation, I noticed an inconsistency in the font size compared to the wireframe. Upon investigating, I discovered the difference was due to the different DPIs in Unreal Engine and tools like Illustrator or Figma. From this, I gathered that I needed to adjust my font size by multiplying with 0.75 to achieve the correct size.
I also learnt how to create a pattern on Illustrator and how to apply it as a texture.
Action-Adventure
4 Weeks
10 peoples
For this project, I started by define all the UI elements that was needed according to the features. The gameplay was similare to A Plague Tale Requiem, that mean the UI should be discret and clean. In addition, we wanted to add a feature link to the Lost In Random univers that where the idea of tarot cards is born. For the HUD, I noticed that the character is set on the left occuping ~35% of the screen and the rest for the visibility. By searching references on AAA games, I notice that the main menu on these games was set in 2 parts: 1 with the title and the buttons, the other with and environment or an element of the game.
Once the Flowchart was created, I started doing the Low-Fi on Figma. I use grid to define limite and avoid overlaping elements. Once it was set, I create a navigation to check the flow.
I started the test guide by looking for fonts. I was looking for 2 font, 1 for the title and the head, and 1 for the body.
For the Header font, I choose a fancier font: Stay Alive that reminded me the Circus aspect.
For the Body font, I choose a Sans Serif dont: Helvetica.
For the font size, I search references on other games. For the color, I choose a Contrasted Color Palette for the readability.
I put all the HUD elements and made a test it on Figma before implement them.
For the cards, I study the tarot cards and take a not of the caracteristics: an icon, a name and an illustration. I choose a design in L for the cards. I choose to add some ornaments in a shape that was an echo to The Nightmare Before Christmas from Tim Burton. I made some iteration on the Icons and the back of the cards. I learnt during about pattern the process and use it on the cards.
