Simple Animated Tiles in SGDK

Posted October 4, 2021

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!

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!

You will also be added to the Wall of Excellent People!

Check out the rest of this tutorial series!

  • Creating Graphics for the Mega Drive
  • How to Quickly Generate C Prototype Functions in VSCode
  • Color Swapping
  • 4 Programs For Creating Mega Drive Graphics
  • Editing the Rom Header
  • Simple Game States
  • Creating a Simple Menu
  • Changing The Text Color in SGDK
  • Playing Music in SGDK
  • Converting VGZ to VGM
  • Processing Resets
  • Drawing Tiles From Code
  • Make a Text Crawl, Streets of Rage Style
  • Scrolling Maps
  • Placing Tiles
  • Simple Animated Tiles in SGDK
  • Simple Password System
  • By using the Disqus service you confirm that you have read and agreed to the privacy policy.

    comments powered by Disqus