Video game character with brown hair and a blue outfit lying on the ground, with game-related words like skill, item, equipment, party, follower, quest listed on the screen.
Image from a video game menu showing character artwork and a list of game features or items such as skill, item, equipment, party, follower, quest, calendar, memorandum, system.
Video game menu screen featuring a female character with long brown hair, with game options including skill, item, equipment, party, follower, quest, calendar, and system, along with the player's money and experience points displayed at the bottom ri

Behind The Scenes: JRPG Menu System

Unity / C# / TextMeshPro / Animator / Procreate

This project focused on building a high-impact, stylized JRPG menu system inspired by Atlus titles such as Metaphor:Rantazio. The goal was to create a UI that feels expressive and tactile, rather than static and purely functional.

Key Goals:

- Strong visual identity through texture and animation

- Snappy, intentional motion on every interaction

- Seamless transitions between menus

- A system flexible enough to support future expansion

visual direction & ui style

All highlight brushes, assets and transition wipes were created in Procreate, giving the UI an organic, imperfect feel that contrasts with Unity’s clean default UI shapes.

I wanted to recreate the dynamic feel of Metaphor: ReFantazio’s menu on Unity with bold color shifts for selection feedback and quirky fonts.

The following images are my references

Menu Architecture & input flow

Screenshot of a computer game development interface showing a scene with a 2D menu overlay, including text options like Skill, Item, Equipment, Party, Follower, Quest, Calendar, and Memorial System, and a side panel with object properties.

The menu system is structured around independent menu controllers (Main Menu, Skill Menu, Party Menu, etc) each responsible for its own selection logic and visual updates.

Menus live in the same scene, enabling instant transitions without scene loads or UI reconstruction.

Unity_b095eGL4Vj.png
Unity_kUhkDy22m0.png
Unity_TTOxPNdXTL.png

HIGHLIGHT & SELECTION SYSTEM

A dynamic highlight brush was implemented to sit behind the currently selected menu item.

Features:

  • Automatically aligns to the center of each TMP

  • Resizes itself based on the selected text’s width

  • supports stylized skewed text without breaking alignment

This system is fully data-driven and adapts to changes in text content, font size or layout.

Video game menu screen with a character illustration, listing game elements such as skill, item, equipment, party, follower, quest, and a highlighted word 'item'.
Video game menu screen showing options like skill, item, equipment, party, follower, quest, calendar, and memorandom system, with a stylized illustration of a woman with long hair on the right side.

Menu transitions & Animation polish

Screenshot of a Unity game development interface showing scene hierarchy, assets, and a 3D scene with a billboard displaying a sports theme with text like 'Skull,' 'Mem', 'Part,' 'Quest,' and 'Calendar'.

Transitions were treated as cinematic events, not simple fades.

A centralized MenuTransitionController handles:

  • Menu wipe animations

  • Timed menu activation while the screen is obscured

  • input locking during transitions

  • separate forward and reverse animations for each menu

thanks for reading

*

thanks for reading *