Game Development with Pico-8 #03: Sprites & Animations

Since my last post, I've been working on the game a little sporadically and less than I've wanted to. But, I'm really excited cause I'm digging into drawing sprites to the screen and animating them. Also creating maps and drawing those too. Like I mentioned before, I'm not a programmer so it's definitely been a struggle but I'm learning a lot! Also, I'm gonna keep plugging Nerdy Teachers cause their tutorials have been great.

So the first thing I did was create all the sprites for my main character. This lil' wizard dude

Screenshot of a pixel graphic editor showing a little 8-bit wizard with a purple robe

The first few sprites consist of his idle animation, which is just 2 sprites of him looking left and right. The next 3 are his running animation, and this definitely took me a few tries to get down! I was able to test out his running animation with some quick and dirty code that looks like this:

Variables


	sprite = 1 --the initial sprite to be drawn
	x = 0 --the X position of the sprite
	y = 80 --the Y position of the sprite
	timing = 0.25 --the number to increment the sprites by

‍

these variables are a really simple setup for me to just draw the running animation to the screen and see it in action. Nothing fancy here, no button interactions just playing the animation by iterating through a certain number of sprites. The number in the sprite variable corresponds to where the sprite is in the actual sprite sheet. To test out the animation, I made a separate pico8 cart just so I could isolate my running sprites which is why it starts at 1. Now here's what the code looks like for looping through the running sprites and moving them across the screen on the X axis:


  function _update()
    sprite += timing --increment the sprite number by 0.25
    if sprite > 3 then sprite = 1 end --once the sprite variable reaches the last sprite in the run cycle, restart it
    if x > 127 then x = 0 end --once the sprite reaches the edge of the right side of the screen, return to the left
  end

‍

The code above is in the _update() function which updates the game 30 times a second. Here I'm essentially making the sprite variable loop through all the sprites in my run cycle, once it does it starts over. Then I'm checking if the sprite reaches the right side of the screen, and if it does I just return the sprite to the left side of the screen. The _update() function isn't actually drawing anything to the screen, just updating and changing variables. This is what the code looks like for actually drawing all this to the screen:


  function _draw()
    cls() --clear the screen
    spr(sprite,x,y) --draw the sprite using the number inside the sprite variable, at the position on the screen using the numbers in the x and y variables
    print(sprite) --display the number inside the sprite variable on the screen
  end

‍

Here all I'm doing is using some of pico-8's built-in functions to draw stuff to the screen. the spr() function draws a sprite and accepts values to decide what sprite to show and where to show it. So I'm using my sprite, x and y variables in place of hard numbers since I'm changing them for the animation. I'm also using the print() function to show the actual number inside the sprite variable on the screen. This helps me see the sprite numbers that the variable is looping through, so I can figure out if it's actually using all the sprites in the run cycle or if I messed something up somewhere. Here's what all that together actually looks like:

Animated gif showing a little 8-bit wizard character walking across a black screen

All of this code is really rough and simple, so it most likely won't be what the final code will look like for actually moving the character with controls. I'm not even really sure what that will end up looking like, but I'm gonna find out! Aside from that, I also made a bunch of map tiles and used another built-in function map() to really quickly show that on the screen so I could see what it looks like.

Screenshot of an 8-bit room with a stone floor and ceiling. A little wizard stands alone to the left side of the room.

When I dropped my character into the map I realized the contrast of the character to the map was really low, so I ended up changing the color of the lil' wizards robe. I'm still tweaking it so I'll probably change it again. I'll most likely add some more polish to my map tiles as well, like a better background. Next up I'm gonna be focusing on creating the physics of my character and the map so I could to map collision and actually move my character. Really looking forward to that!

Till next time 👋🏽