The more animation and movement you have in your games, the more flashy and appealing they can be to players. In this tutorial I’ll be showing you how to build animations that run in their own self-contained functions.
This allows them to be interrupted at any time, allows for simultaneous user input and anything else you wish to occur in your game loop without having to wait for the animation script to finish. In our most recent game, Sudoku In Space, we make extensive use of this for background animations, main menu animations, and particle animations when you make a completion move. Since we use a timer in Sudoku In Space, it is important to not prevent the user from interacting with the game while an animation is happening for a row, column, or block completion.
To keep things simple this tutorial will only show the background animations for the larger stars that wink in and out. If you’re interested in seeing how I did the particle animations just let me know and I’ll do it in a future continuation of this article.
First, we’ll need a user defined type and a variable of that type. In Sudoku In Space I actually made this variable global so that all of our screens could have the background animation, however, it is not necessary if you are using the animation in only one area of your game since the function to handle the animation has a feedback loop. A feedback loop is when a function accepts input of a specific variable and then outputs to that same variable.
The following setup will make a star appear in a random location on the screen, color it one of three different colors at random, and make it grow and then shrink.
- max_W# will contain a random size that we want the star to grow to.
- dir is the direction of the sprite’s growth.
- spriteID is the sprite ID of the star.
- abs_max_W# is the maximum width the star should ever grow to so that the sprite’s image doesn’t become fuzzy or larger than we want it to appear.
- abs_min_W# is the minimum width the star should ever shrink to and serves as a starting and stopping point for the shrink/grow animation.
- time will allow us to control when the star reappears.
Now let’s look at the self-contained feedback loop function:
This is used to color sprites with only a comma separated string for the R, G, and B values.
Now all that needs to be done is run this function in a loop like so:
Hopefully you can also see how this can be extended for more complex animations where there are various states for the animation. One example you can see is in Sudoku In Space on the home screen. Our game character, Allen the Alien, flies onto the screen, appears to hover with some up and down tweening, and continues to do so until the player presses the play button, at which time he flies away. I also built that animation so it can be interrupted and the player does not need to wait for Allen to be in the center of the screen before they can tap a button. Tapping a button will simply allow Allen to keep moving across the screen until he’s gone.
In Sudoku In Space we take advantage of this method for many of the animations so that user input is not hampered. Please take a look at the game to see these animations in action. The most complex of them are the particle animations for when you complete a puzzle. If you’d like to see an example of that in a future tutorial, just let me know (firstname.lastname@example.org)! Sudoku In Space is free on Google Play and the App Store.