In my last post, I mentioned that I would create a character. Now I’m happy to share my process of designing the new ram character in my game, creating a shader material to texture it, and bringing it to life with animation.
Character design
I approached the deign on this character in a similar way to how I approach logo design. I was taught about the idea of visual puns in logos, where you take two or more unrelated ideas and bring them together in a clever way. A famous example of this is the arrow between the E and X in the FedEx logo.
Considering the spinning blocks and charging mechanics in the game, the big horn sheep’s spiral horns and charging behavior made it a perfect fit. To further emphasize this connection, I made the horns extra large with bold crease lines and gave weight to the head in the animation.
I originally had a more detailed concept of a cyborg-like ram but in the end a simplified character that felt like it fit into the geometric world made the most sense for this game. I then opted to use shaders instead of details to make this character more interesting.
Shader design
The purpose of the shader was to generate a noise effect that emphasizes the ram’s movement and imply wool on the ram’s body. I used RGB channels to separate the ram into 3 parts: outline, noise, and solid. The red solid parts were on the head and legs, with the legs fading into blue for the noise effect like a gradient.
I repurposed parts of the shader used for the blocks to work with a 2D texture and used Unreal’s dynamic noise generation as the base for the effect. Early tests without animation were showing me that this approach would work out well.
2D sprite animation
Animations were used to bring out the character since the ram is a simplistic design. It had to feel weighty, realistic and fluid, so I chose to animate at 30FPS to help achieve this. Not animating in a while, this horse gallop tutorial by Richard Williams helped me immensely to get in the right direction.
My original design had a gradient going from red to blue to on the legs to fade out the noise. But upon starting to animate, I realized that this would make the animation process incredibly complicated. As a solution, I made the body solid blue and instead generated a linear gradient in the shader to fade out the noise.
I created 4 different animation sequences: the first two main ones are a run and charge cycle, then the other supplementary ones are a short falling and death animation that you can barely catch while playing.
Other improvements
I also improved the code and controls for the ram character as I implemented the animation. I converted it into a state machine pattern, allowing me to have more control on the conditions to transition to different states and also conveniently fixed some bugs I was dealing with in the old code.
I made conditions such as waiting a few frames before transitioning into a falling state so that the ram wouldn’t transition if they fell to a slightly lower block. I also could control the charge condition where the player continues the charge if they fall while charging but also can’t choose to charge while they are falling.
These better controls have made the game slightly easier, which is a great thing, because it’s not good for a game to be challenging from awkward or unresponsive controls, unless that is the intention of the game. This also now allows me to do more interesting things with the level that I look forward to explore.
That’s all for now, thanks for reading!
