SDF-Based Morphing Liquid Button
Unreal Engine 5 / HLSL / UMG / Blueprint, 2025
A next-gen UI element created for an unannounced AAA action RPG.
A next-gen UI element created for an unannounced AAA action RPG.
This project features a custom UI button system developed in Unreal Engine 5 that utilizes signed distance field (SDF) techniques to create fluid, organic transitions between button states. The system provides players with responsive, visually distinctive feedback while maintaining performance across multiple platforms. Some highlights of this project included:
● The SDF-based approach allowed for complex liquid-like animations without requiring high-resolution textures or expensive particle systems, resulting in a 40% reduction in memory usage compared to traditional animated UI elements.
● I developed a custom material function library in UE5 that enabled designers to easily adjust parameters like viscosity, surface tension, and color gradients without requiring shader programming knowledge.
● The system was built with scalability in mind, automatically adjusting detail levels based on platform capabilities while preserving the core visual identity across all devices.
● Integration with the game's haptic feedback system created a multi-sensory experience that enhanced player immersion and improved accessibility through multiple feedback channels.
Interactive Holographic Display
Unreal Blueprints / UMG / Maya, 2020
A Sci-fi VR experience created for the game Beyond Our Stars.
A Sci-fi VR experience created for the game Beyond Our Stars.
This project is a VR game developed in Unreal Engine 4. I was responsible for creating a immersive interactable holographic room that can display a randomly generated planet system. Some highlight of this project included:
● The rendering of all the transparent UI brings me a lot of performance issues and I need to created all the meshes by hand in Maya to reduce the level of overlap and to save some draw calls for the maximum performance possible.
● I was also responsible to hook the UI up with a PDS database that provides the real world values from the universe.
In this project I also made a customized tool called Simple Tween to help with smoothing the display. This tool can now also be purchased on Unreal Marketplace.
The Armory UI Creation
Unreal / Blueprint / Maya, 2018
A character creator prototype for the game The Armory.
A character creator prototype for the game The Armory.
This is a piece of UI prototype I create for the game Armory, I was also responsible for rigging the character and separate all the arms apart into individual pieces.
● I first rendered out all the arm parts in Maya, and create sprite sheets using Sprite Packer.
● After that, I created several simple sprites to use as a fundamental elements of this UI system.
● Then I created and programmed the UI in Unreal's UI blueprint, and I use a C++ tool I developed to set all the sprites into their positions.
● Finally, I designed some nice camera movements to make the UX experience smoother.
Immersive UI Creation
Unity / C# / Photoshop, 2017
Created immersive UI for the VR climbing game Cynthia Peak.
Created immersive UI for the VR climbing game Cynthia Peak.
This VR game is aiming for a deeply immersive experience and I am responsible for creating both tranditional UI and immersive UI (for example, a time count-down UI on player's virtual watch. I was also responsible for level design and material creation.
Project FAM UI Typesetting / Animating / Programming
Unity Animation / NGUI / C# / Photoshop, 2015
Responsible for all the UI typesetting / animating / programming
Responsible for all the UI typesetting / animating / programming
I was responsible for all the steps involving in UI creation after the UI design process, this including creating all the sprites from the original UI design, putting them together into our UI system, creating all the UI animation, programming those UI elements based on our UI programming framework.
This is how it works -
● In the beginning of UI creation, I would sit down with the UI design team and create all the sprites from their work in Photoshop.
● Then I used UI sprite packer to pack all the sprites, put them together again in Unity using NGUI.
● After that, I worked with our art director to create UI animations used in our game.
● Finally, I joined the programming team and programming all the UI systems together.
As a result, the cooperation with the entire team went very well, and in the help of my great team member, the newly created UI were produced on schedule.
