TL;DR

Unity Asset Store

Itch Sprite Only Version

This started as a small project to create a few sprites and a simple system for my game Quality Assurance to handle sprite animations for CTAs. It grew into a fully modular animation library for Unity.

The library is lightweight and fast, packed with 13+ base animations (Pulse, Slide, Node, Fade, etc.). All animations are modular and can be combined to create more complex effects. You can also script your own animations and run them through the library for easy management.


Introduction

Recently, I started working on a First-Person Psychological Horror game in Unity. It required a system to handle keyboard and mouse inputs for object interactions. Some of these inputs needed players’ attention, along with CTA (Call-to-Action) animations and visual guidance for complex actions (e.g., shaking the mouse, moving it left/right, or in any chosen direction).

Instead of building only the bare minimum, I created a sprite animation library aimed at helping solo developers avoid reinventing the wheel. Many existing systems are feature-rich but bloated and expensive, often offering more than what’s really needed.

I designed this library to be modular: animations can harmonize, overlap, or even cancel each other. This flexibility makes it easier to visually communicate with players.


Development

I began by researching UI animation approaches. The key questions were:

Answering these questions was crucial before building something useful for others, not just myself.


Performance Trade-Offs

Performance is critical for UI. Animations should have minimal overhead. In Unity, you can animate using either:

  1. Scripts (update Transform, CanvasGroup, or other components programmatically using math like interpolation and wave functions).
  2. Animators (keyframes and animation clips).

Unity’s Animator is ideal for non-technical designers—it’s intuitive and quick for creating simple to complex animations. But after researching, I found scripted animations to be better for performance and flexibility.

Here’s a quick comparison:

OptionProsConsBest Use Case
ScriptLightweight, no allocations, customizable, parameterized, tweakable at runtimeHarder to manage for complex animations, more code to maintainSmall/simple animations (shakes, pulses, color changes), performance-critical scenarios
AnimatorVisual editor, easy for artists, reusable clips, good for complex sequencesMore overhead, harder to parameterize runtime behavior, asset-heavyMulti-step animations, artist-driven workflows, complex UI sequences
Tween Libraries (DOTween, LeanTween, etc.)Concise code, easing, sequences, callbacks, supports runtime param changesSmall allocations, external dependency, slight performance costPrototyping, quick setup, readable code, convenience over micro-optimization

I opted for a scripted approach as the default, with an optional hybrid system that lets you plug in your own Animation Clips if needed. This provides modularity while keeping performance tight.


Packaging the Animation

Using scripts, I built a set of common animations (Pop, Pulse, Wiggle, etc.) frequently used for CTAs and highlights. One component, KBMAnimation, exposes all built-in animations, letting users select, configure, and tweak parameters easily.

KBMAnimation Component Selection

Each animation shares common properties:

These are exposed in a simple, intuitive way for designers.

KBMAnimation Animation Settings

For extra visual flair, I added particle trails to emphasize motion. Unity’s built-in Trail Renderer wasn’t suited for UI (it’s designed for World Space), so I implemented a custom lightweight Trail system using object pooling to spawn sprites for ghost or dotted trail effects.

Since multiple KBMAnimation components can run on the same object, I also added a way to define relationships between the base animation and its trail.

KBMAnimation Trail Settings

This modular structure, combined with customizable curves, creates an elegant foundation for building and extending animations. Power users can easily add their own effects or adapt the system for new use cases.

C#
 1void SomeAnimation()
 2{
 3  if (elapsedTime < duration)
 4  {
 5    // Interpolate over Time, evaluated with the Time Animation Curve
 6    float t = elapsedTime / duration;
 7    InterpolateAndApply(x, y, timeCurve.Evaluate(t));
 8    
 9    // Spawn Trail (if set)
10    if (animationTrail != null) animationTrail.SpawnTrail();
11    
12    // Update elapsed time
13    elapsedTime += Time.deltaTime;
14  }
15  else
16  {
17    // Reset state
18    SomeResetFunction();
19
20    // Try looping
21    TryLoop();
22  }
23}
Click to expand and view more

Building Designer Experience

The usability of this library is key to its success. Designer/Developer Experience (DX) was a top priority, so I created Editor utilities to minimize documentation overhead.

  1. Sample Scene: Includes common use cases. Designers can copy prefabs directly into their game scenes for instant plug-and-play.

  2. Responsive Editor UI: Since the component is heavily parameterized, unused options are hidden based on the selected animation. This keeps the interface clean and intuitive.

  3. Tooling and Docs: Tooltips, warnings, and inline documentation help designers understand behavior quickly. Full documentation is also included for deeper learning.

Overall

The system, GenericKBM, is scheduled for release in mid-September on the Unity Asset Store and Itch. There will be multiple options available—ranging from just the sprite set to the full animation library package.

Copyright Notice

Author: Abhishta Gatya Adyatma

Link: https://abhishtagatya.github.io/posts/building-a-keyboard-mouse-sprite-animation-library/

License: CC BY-NC-SA 4.0

This work is licensed under a Creative Commons Attribution-NonCommercial-ShareAlike 4.0 International License. Please attribute the source, use non-commercially, and maintain the same license.

Start searching

Enter keywords to search articles

↑↓
ESC
⌘K Shortcut