Devlog #59 - Crafting UI Animations
Hi guys!
Welcome to another devlog. Today, we’re diving into the creative process behind the UI animations of our game. Our goal was to make the UI feel organic, engaging, and visually unique, aligning with the game’s hand-drawn aesthetic. To achieve this, we designed UI animations that give players the sensation that each button and UI element is being "sketched" into existence.
The Vision: Wisp-Inspired Animation for UI Elements
Our concept for the UI animations was simple yet effective: create smooth, fluid animations where each UI element appears as if it’s drawn by a wisp (which is the main element of our game), gradually revealing itself in an elegant, hand-sketched manner. The goal was to avoid overwhelming players with excessive motion but instead offer a subtle and pleasant visual experience that enhances the UI without cluttering it.
The Tools: Spine for Animation
To bring this vision to life, we used Spine—a powerful 2D animation tool that’s perfect for creating smooth, dynamic animations for games. Using Spine, we created each UI button animation by utilizing a combination of bones and path setups to create the fluid motion of the wisp drawing the UI element.
Here’s a breakdown of how we achieved the desired effect:
1. Wisp Motion Path Setup
Each button’s animation starts with the wisp moving along a defined path. We carefully designed these motion paths to be smooth, curving gently to reflect the natural flow of the "drawing" process. The wisp follows these paths, simulating the motion of a hand sketching the button into existence. This gave the appearance that the button was slowly coming to life from thin air, adding an ethereal, dynamic touch to the UI.
2. Bones for UI element Reveal
Once the wisp finishes its motion, the UI element itself starts to form. The final element is revealed by manipulating bones in Spine, allowing us to scale the button from 0% to 100% in size. The bones system lets us control each individual part of the UI element so they can appear in perfect harmony. The scaling transition adds an extra layer of smoothness, and the gradual reveal feels very natural and organic.
3. Smooth Transitions and Timing
To maintain fluidity and smoothness in our animations, we paid close attention to the timing and easing of each motion. Rather than abrupt starts and stops, we used easing functions to ensure the wisp’s movement and button scaling felt gradual, enhancing the hand-drawn aesthetic without feeling jarring. The elements don’t pop into existence; they unfold with a sense of grace, fitting perfectly into the game’s overall visual style.
4. Final Touches with Image Sequences
After finalizing the animations in Spine, we exported the UI animations as image sequences. This allowed us to have control over each frame of the animation, ensuring that the wisp and the UI elements were rendered precisely as envisioned. The image sequences are efficient for integration into the game, while also preserving the quality and smoothness of the hand-drawn aesthetic during runtime.
One of the key challenges we faced was ensuring that the animations didn’t overwhelm the player. We didn’t want the UI to feel like it was constantly moving or distracting. Instead, the animations serve as an immersive introduction to each UI element, allowing the player to enjoy the process without it taking focus away from gameplay. The wisp's motion is subtle, and the elements grow into place in a way that feels seamless and non-invasive.
[previewyoutube][/previewyoutube]
In the end, our goal was to make the UI not only functional but a part of the visual storytelling. By using wisp-inspired animations, Spine's bone-based animation system, and image sequence exports, we created UI elements that feel alive and connected to subtle nature of the game. These animations enhance the user experience, making the game world feel more immersive and visually cohesive.
Stay tuned for more updates as we continue to refine the visuals and animations for our game!
Best regards,
Playdew Team
https://store.steampowered.com/app/1752540/Lost_Twins_II/
