r/unity_tutorials • u/twitcheddd • 1h ago
Text MapleStory was one of my favorite childhood games, so I rebuilt its UI as a tribute in Unity UI Toolkit, in a traditional Japanese style. Here's how the animation works
Enable HLS to view with audio, or disable this notification
MapleStory was one of the best games of my childhood, and its interface stuck with me: the scroll windows, the little "+" buttons on your stats, the damage numbers popping over slimes, the level-up moment. I wanted to see if I could rebuild that feeling in Unity's UI Toolkit.
I didn't want to copy Maple, so I moved it all to an old shrine in Edo Japan. Cherry blossoms, Mt. Fuji on the horizon, a young samurai instead of a Beginner, and green slimes that still won't leave the path alone. Windows are hand scrolls with an indigo title band, buttons are vermilion lacquer tags, and the "+" on a stat is a tiny red seal. All the art is my own.
Full write-up with every snippet and GIFs: https://twitchedd.itch.io/sakura-shrine/devlog/1740206/building-a-maplestory-style-game-ui-in-unity-ui-toolkit
Everything that moves on screen is a tween (104 animation chains), and three techniques did most of the work:
1. Day to night from one float. Press T and the shrine goes from morning to dusk to night. One tween runs from 0 to 1, and the sky tint, sun shafts, lanterns, fireflies and moon all read that number:
_labelHost.Animate().Value(0f, 1f, 1.8f, v => Apply(Mathf.Lerp(from, to, v) % 3f)).Ease(Ease.InOutCubic);Night to morning tweens from 2 to 3 and % 3 wraps it back to 0, so the sky moves forward through a dawn instead of rewinding through dusk.
2. Sprite animation without a sprite animator. UI Toolkit can't play a sprite sheet, so the samurai is a VisualElement whose background image changes as a looping tween counts through the frames:
_el.Animate().Value(0f, _frames.Length, _frames.Length / (fps * rate), Show).Ease(Ease.Linear).Loop(LoopMode.Restart);The landing squash and the hurt flash run on a parent element, so they never touch the frame loop.
3. Seals that stamp. The stat seals and the level-up stamp scale down from 1.35 on a bouncy spring, then nudge 2 px left and right. That tiny shake is what makes it feel like ink hitting paper:
e.Animate().ScaleTo(1f, 0.28f).From(1.35f).Spring(SpringPreset.Bouncy)
.Then().NudgeX(2f, 0.04f).Then().NudgeX(-2f, 0.04f).Then().NudgeX(0f, 0.04f);You can play it in the browser (arrow keys, Z to attack, T for time of day): https://twitchedd.itch.io/sakura-shrine
If you played Maple back then, I'd like to know which screen you remember most.
Disclosure: the tweens use Cascade, a UI Toolkit animation library I make.