Nymble
Visual Gallery
A showcase of the animation, UI design, and engineering behind the game.
Embedded Files
Animation showcase
Animation showcase
Animation and motion in Nymble is a combination of frame-based animation and procedural animation. Sprite animations like walking and idle loops are usually done with frames. More general sub-pixel animations like jiggles, screen transitions, and particles, are done procedurally with math.
The main objective of each level: find the seedling, plant it in the soil, and climb to the next level.
Nymble 2 features even more sophisticated animations for shattering pots, explosions, and fire.
Multiple ways to interact with ice. You can melt it with fire, or jump over it to break it.
UI design showcase
UI design showcase
A dynamic title menu
A dynamic title menu
The camera pans to an empty area of the room when the menu flies in. I wanted the title screen to show a little teaser of the game but also have a clean UI, and arrived at this design after a few iterations based on community feedback.
This interaction design also gives more room for the title theme music to be heard.
Pause menu
Pause menu
The pause menu reveals information that is hidden during gameplay, such as the current star rating and scores. This keeps the player experience minimal and focused on puzzle solving.
I incorporated clouds into the background to give it character, as Jack continues his ascent into the sky (and beyond).
Settings
Settings
After receiving feedback on audio levels and screen shake, I designed an interface to enable the player to personalize his experience.
Feedback is given through sound and motion where appropriate, to communicate to the player what he is configuring.
Graphic design & pixel art
Graphic design & pixel art
The logo
The logo
The initial vector consists of a custom logotype using colors from the game palette. It's super-imposed on top of an expanded shape with a dropshadow.
The logo was later imported into Aseprite to be converted into pixel art.
Sprite work
Sprite work
Nymble uses a 16x16 sprite size and features a cast of over 30 different characters and mechanics.
Design library
Design library
The game’s light-weight design library consists of a variety of icons, buttons, and hud elements.
A handful of custom pixel font sets were designed specifically for the game.
Under the hood
Under the hood
Enemy queueing algorithm
Enemy queueing algorithm
Using path length, point distance, and position, the algorithm determines the decision-making priority of the enemies. This ensures that enemy movement isn’t random, and players can learn how to strategize and plan their moves.
State machines
State machines
State machines are found within state-persistent objects like enemies, buttons, and gates, etc.
Layered on top of it all is the turn manager, which dictates the flow of the turn-based system.
Event triggering system
Event triggering system
Nymble leverages the Room Editor for laying out dynamically triggered events. This helps me see at a glance where all the key interactive objects are in a level.
Google Sites
Report abuse