Pokemon UI Study
Unreal Engine 5
When the first gameplay trailer of the latest Pokemon game was released, I was inspired by the UI elements that were shown. I decided to recreate some of them in Unreal Engine 5 using materials and animating them in UMG to improve my skills implementing UI.
The UI elements that I decided to implement into Unreal Engine were the ones shown during player combat with a wild Pokemon:
-
Combat Banner
-
Battling Pokemon UI (Icon, HealthBar, Pokemon Information, Hit animation)
-
Pokemon Skill Icon (Idle, Cooldown Animation, Mega Evolution State)
Combat Banner:
To create this banner I created a custom material, inside it, I created a Hexagon SDF and used a custom wave function to make the hexagon grow and repeat infinetely.
I masked the top and bottom parts of the hexagon with the outline of a square SDF to give the shape the appearance of a rectangle with arrows continuously emerging from its sides. Finally I imported the Eye Icon I created in Adobe Illustrator and placed it on top of the banner in a UMG widget
Here is a screenshot of the material:
Battling Pokemon UI:
Creating the Battling Pokémon UI was really fun. To achieve this result, I divided the work into the following steps: creating the Pokémon icon material, creating the health bar material, setting up the UMG layout and animations, and implementing the Blueprint logic.
Pokemon Icon:
I wanted to create a master material with a variety of parameters to control the icon’s shape, colors, shadows, and more. Since the game trailer featured many UI elements with a similar style, I thought the best approach would be to build a single, flexible material that could be reused across different UI components, for example, the skill icon I created after finishing the Battling Pokémon UI.
Health Bar:
The health bar material updates based on two parameters that change when the Pokémon’s health is modified. A third parameter is animated through UMG to visually represent the damage taken or healing received.
Skill Icon:
To create the Skill Icon, I created a new material instance of the previously created material for the container and modified its paremeters to rotate it and change its colors. I also added a fill functionality to the master material to use for the cooldown animation. Finally I created a new UI material that uses a SDF texture for the element icon, and uses it to create the idle state, and the mega evolve state where it applies the a holographic effect to the icon.
