Xevious — Sprites & Animations
Sprites are the core to almost every retro game, with the noticeable exceptions of vector graphics and laser disc games. They work very much like a classic flicker book cartoon; each square of the sprite contains a view of the sprite for one or more frames. For example, these are the sprites to make a ground enemy appear to fire.
Flicker-Book animation in Unity
Creating Flicker-Book animations in Unity is very easy. I will show how to animate a sprite.
You need to create an image (jpg, photoshop, png, etc.) that contains the images of the sprites you want to use — your sprite-set image. I will not cover creating that here, but once you have the resulting image you should drag it into your Unity project.
With your sprite-set image imported into Unity, configure it as a multiple sprite.
Select the Sprite Editor button to extract, or slice, the image into separate sprites that the Unity can use in isolation.
The Slice feature has a few options depending upon how you have arranged your sprite set. Here I know the sprites have been laid out in a precise grid, so using Automatic is not the right choice because each sprite is a different size. This isn’t a problem per se, but it is usually easy to keep the same size if that was how the original game worked. In this case it is best to use Cell-By-Size.
You can edit each one to change the pivot, the sizes or even just the name.
When you press Apply Unity will generate the game-ready sprites for you
Using a test scene, I have one dedicated to creating and testing sprites, drop the first ‘page’ of your flicker book into the scene.
Now we can rename this single ‘page’ of the sprite to represent the enemy that prefab will become. You might also set the Sprite Sort Order, Physics Layer, etc. but that is not necessary for an animation. I am also adding an empty Animator here, but you could drag an existing one onto here too. Once you are ready, drag the game object into your prefab folder.
Create a new Animation Controller for your enemy, I like to keep my folder structure separate but that is just my style/preference.
Create a new Animation for your sprite
With the Animation Controller selected, drag the Animation into it as the default state.
Open up the Animation track window and drag the ‘pages’ of the sprite that you want Unity to use to create the flicker book animation.
You can then edit the timings via the drop-sheet, curves, or the overall speed via the Controller.
Congratulations you now have an animated flicker-book sprite.
Colour Palette Rotation
Back to the lessons learnt from Xevious. In 1982 conserving memory was far more important that it is today. So for some effects it just was not practical to use a flicker-book. For example, consider the way this Zolbak flashes.
For a single Zolbak, it requires 5 separate sprites to animate the flashing. In 1982 they used a technique of changing the Colour Palette for the Sprite. To colour a sprite you would first declare the colour palette it was to use. E.g. you might have an array that would look like
0 = Blue, 1 = White, 2 = Bright Red, 3 = Yellow, etc.
When you drew a line of pixels you did not send in an array of colour values, you sent in the index into the palette. E.g. if the first 2 pixels were red and blue you would send in {2,0} not, as you would probably do today, send in the values {(255,0,0), (0,0,255)}. One advantage of that system is that when you want to flash a specific colour you can alter the palette rather than the sprite. To recap, a 1982 game would have 1 sprite and a bit of code that changes the brightness of ‘red’ for that sprite. Whilst that might just be a fun bit of trivia, it does not really matter for us because the memory load of the additional sprites is not too much of a problem for today’s hardware…except that is not the end of the story.
Consider the ground enemy of the Demogram.
This enemy is flashing, like we saw before, but it is also firing. If we were to just use a flicker book then we would either have to have every permutation of flash and fire or force them to sync up, which would look very ugly. (NB Unity’s Animation Layers does not support this form of blending for sprites.) 1982 gets away with this because it uses its flicker book to fire, and its palette rotation to flash. 1:0 to 1982.
To achieve this effect in Unity I made the Domogram into a composite of firing and flashing.
A couple of points to note, the child’s sprite render’s Order in Layer is higher than the parent. Also its sprites need to either perfectly match the area of the parent they are covering or be transparent. In this case I made mine transparent, well very roughly transparent :)
Maybe that is enough to declare 1982 vs 2021 a 1:1 draw?
