Simple Animated Tiles in SGDK
NOTE:
A new version of SGDK has recently been released.
It has probably introduced some breaking changes. If something doesn't seem to be working, post it in the comments and I'll see what I can do to update the tutorial.
Thank you to my excellent patron Duncan, who suggested this tutorial!
Animated backgrounds can add a little spice to a game’s visuals. There’s nothing like blinking city lights or rustling trees! But while SGDK does support animated sprites, there is no real support for animated tiles. However, there doesn’t really need to be, as animating tiles is actually very easy!
Note: This approach is simple and it works, but it can cause performance issues when you want to animate a lot of stuff. There is a more efficient way to achieve background animations, but I will actually have to do some more research myself before I can make a tutorial on that. So, until then, maybe this simple approach will suffice for your use case!
Okay, so, what are animations? Actually just a series of images we flip through so quickly that our brain is bamboozled. So, to animate background tiles, we’d just need to flip through a couple different tiles in the same position. And yeah, it’s pretty much as easy as it sounds, especially since we have a number of ways to place tiles in SGDK!
So, if you wanted to have blinking lights in a city building for example, you’d just need one tile with the lights on and one with the lights off. Then you’d simply load the tileset as usual, by doing VDP_loadTileSet(mytiles.tileset,1,DMA) for example. And then you pretty much just need to know the coordinates of the tile you want to animate, a variable to count the frames, and maybe a variable to keep track of which tile is currently being shown. All this might look something like this:
int main()
{
//Load your tileset, set up palettes...
u16 counter = 60; //Change tile every 60 frames
bool toggle = FALSE;
while(1)
{
counter--;
if(counter == 0)
{
if(toggle == TRUE)
{
//Show second frame of animation
VDP_setTileMapXY(BG_B,TILE_ATTR_FULL(PAL1,0,FALSE,FALSE,2),2,2);
toggle = FALSE;
}else
{
//Show first frame of animation
VDP_setTileMapXY(BG_B,TILE_ATTR_FULL(PAL1,0,FALSE,FALSE,1),2,2);
toggle = TRUE;
}
counter = 60;
}
SYS_doVBlankProcess();
}
Now the tile at position 2,2 of BG_B will switch between the graphics stored in index 1 and 2 of VRAM every 60 frames (or one second), thereby creating an animation!
As you can see, this solution is very simple and kinda dumb, but hey, it works. You can also expand the code to create animations with, for example, 3 frames:
int main()
{
//Load your tileset, set up palettes...
u16 counter = 60;
u16 currentFrame = 0;
while(1)
{
counter--;
if(counter == 40)
{
//Show first tile after 20 frames
VDP_setTileMapXY(BG_B,TILE_ATTR_FULL(PAL1,0,FALSE,FALSE,1),2,2);
} else if(counter == 20)
{
//Show second tile after 40 frames
VDP_setTileMapXY(BG_B,TILE_ATTR_FULL(PAL1,0,FALSE,FALSE,2),2,2);
} else if(counter == 0)
{
//Show third and final tile and reset the counter
VDP_setTileMapXY(BG_B,TILE_ATTR_FULL(PAL1,0,FALSE,FALSE,3),2,2);
counter = 60;
}
SYS_doVBlankProcess();
}
The good thing about this solution is that it’s simple and rather flexible. However, as I said, it can lead to performance issues down the line, and it can be a bit irritating having to keep track of all the frames and tile positions throughout the game, especially when you have a huge map. There are ways of achieving animated background tiles that mitigate these issues, and I’ll do a tutorial on them once I’ve figured out how it all works!
If you've got problems or questions, join the official SGDK Discord! It's full of people a lot smarter and skilled than me. Of course you're also welcome to just hang out and have fun!
Join my mailing list!
You'll get notified whenever cool stuff happens!
Take It to the Next Level!
Become an excellent patron on Patreon and snatch yourself some kickass perks such as early access, early builds, exclusive updates and more!
Want To Buy Me a Coffee?
Coffee rules, and it keeps me going! I'll take beer too, though.
Check out the rest of this tutorial series!
Comments
By using the Disqus service you confirm that you have read and agreed to the privacy policy.
comments powered by Disqus