Hola fellow Pingheros!
Today, I want to share our thought process behind creating visual effects (VFX) for our game, and how we integrate Mesoamerican iconography into our designs.
In this post, I'll be focusing on area of effect rings for our bombs.
Our goal is to make the area of effect visible before the bomb explodes more engaging, communicative, and visually interesting.
It may look OK now, but I find that the great challenge in VFX is finding how to make something that works even greater.
References
The first step is to gather references. I start by examining games with intriguing VFX styles and select the ones that inspire me the most. I focus primarily on how they render their circles and how these circles behave. Key aspects I consider are their value, shape, color, and the contrast between these elements.
Mesoamerican symbolism
Next, I explore Mesoamerican symbols, selecting those with shapes that could complement the style of our VFX.
This symbolic language is incredibly vast and diverse. My goal is to reinterpret these symbols in a more graphical and aesthetic way. In our modern society, we use different symbols to convey various concepts, and I want to repurpose these ancient symbols to communicate modern, video game-specific ideas.
This approach will help us create a truly unique style.
I look for shapes that are clean and simple, easy to draw and repeat, and that offer a good variety in form (triangles, circles, waves, etc.). This will allow me to develop a symbolic language that effectively communicates different aspects of game design.
Shapes
To communicate upcoming effects effectively, we establish clear rules to follow.
The first step is to find shapes that are communicative even without relying on color or shading.
We begin with the most basic FX elements and build from there. I started with a simple circle and experimented with various symbols, pushing the design to its limits. My aim was to strike a balance between decorative elements and readability.
I apply these rules to our game by designing specific circles for each of our anticipation zones.
These symbols form the core of the effect, and everything else—colors, design, and animation—will revolve around them.
The more dangerous the incoming effect, the more I incorporate sharp, threatening shapes into the circle. As the threat level decreases, I remove those aggressive elements, shifting towards a more neutral visual language.
Just like in the game’s UI, these lines are hand-drawn, with imperfections emphasized to mimic the hand-crafted feel of Mesoamerican symbols. This approach also adds a fun, quirky, and dynamic style to our game.
I’ve also incorporated more illustrative symbols within our effects, which serves as a playful way to represent the various hazards players encounter in the game.
Value & colors
Finding the right shapes was the most crucial step. Now, I can fine-tune colors and values to align with our elements and hazards.
The more dangerous an effect is, the higher the contrast. Since our ground is bright and blue, I use warmer and darker colors to create the necessary contrast.
Animation
Even in our VFX animations, I focus on building movement around the shape design.
I aim for the animations to feel snappy and cartoony, with contrast being just as important here as it is in shape and value.
For example, the shark tooth symbols move back and forth, simulating the motion of a shark striking the ice beneath our feet.
For the bombs, I mirror the ticking timing by squashing and shaking the circle with each tick.
To add a sense of progression, I gradually increase the flickering speed over time.
This repetitive choreography helps players easily track the cooldown’s progress.
Result
After revisiting these effects, I can confidently say they’ve significantly improved in every aspect—whether it’s readability, communication, or aesthetics.
The biggest challenge was finding the right balance between our existing UI style and our in-game art style. However, this work serves as a solid foundation for how our VFX will evolve and develop moving forward.
Before
After