Basic Sprite

Follow along with the video to learn basic sprite coding!

The video moves quickly so pause whenever you need.

The video doesn't explain everything, but this page does!

Make sure you understand why this code works or you won't be able to make your own sprites later!

This lesson focuses on the SPR( ) function!


After following the lesson, take on some of these challenges to test your knowledge and skills!

1. Draw your own sprites and code them on the screen to make a pattern side by side.

2. Code sprites into a large pattern by flipping them on X and Y, next to each other.

3. Code a sprite that faces right and can move. When the sprite moves left, flip the X-axis.

How to use the Sprite drawing function!

Game Sprites!

What is a sprite?

You can copy these sprites or make your own! Make sure you draw each of these sprites in the exact same place, because the code will look for their sprite number. But once you understand the code, you can draw as many sprites as you want, where ever you want!

Explanation of Code!

  • 1. Function SPR( )

      spr( sprite#, x, y, width, height, flipx, flipy )

      spr is the name of the function and is short for "sprite".

      The parentheses after the name shows that we want to run the function. And some functions can be given information, placed inside of the parentheses.

      Each piece of information given to a function is called an argument. And the order you give the arguments in matters.

      Some functions never take any arguments, and some functions will only run with arguments. Some functions can even do something in a default way, without arguments, and do something else more specific with arguments.

      This spr( ) function will not run if it does not have the minimum required arguments.

      What are the arguments?

      sprite # = a number of the sprite tile in the sprite sheet.

      If your sprite is larger than 8x8 pixels (1 tile), then your sprite's number will be the top-left corner tile number.

      These next two arguments are for the position on the screen.

      x = a number of pixels from the top left corner of the game screen going right

      y = a number of pixels from the top left corner of the game screen going down

      Together, these are coordinates ( x , y ) that tell where a single pixel location is on the game screen.

      These next two arguments are for the size of the sprite.

      width = a number for how wide the sprite is in tiles (8 pixels in 1 tile) Default = 1

      height = a number for how tall the sprite is in tiles (8 pixels in 1 tile) Default = 1

      These next two arguments are for flipping the sprite.

      flipx = true or false for flipping or reversing the sprite from left to right / right to left

      flipy = true or false for flipping or reversing the sprite from top to bottom / bottom to top

  • 2. Draw an 8x8 Sprite

      spr( sprite#, x, y )

      We can draw our 8x8 sprite using the minimum required arguments. This allows the size arguments to be the default of 1 tile by 1 tile, which is a single 8x8 sprite.

      However, if you want to flip the sprite, you will need to specify the size first. You cannot simply skip the size arguments to the flip arguments because the order of the arguments are fixed.

      It is common to see an 8x8 sprite set up using variables as arguments like this:

      spr( sp, x, y, 1, 1, flpx, flpy )

      This hard codes the width and height to 1 tile because that does not change for 8x8 sprites, while the other arguments can be changed using the variables.

  • 3. Draw a Larger Sprite

      spr( sprite#, x, y, width, height, flipx, flipy )

      We can draw any size sprite using the width and height arguments, but they need to use the full tile lengths. In the video, I only demonstrated square sprites, where the width and height were the same. But you can also have rectangular sprites with this function too. For example, an 8x16 pixel sprite is 1 tile wide and 2 tiles tall.

      For larger sprites, the size can be made variables as well:

      spr( sp, x, y, w, h, flpx, flpy )

  • 4. Use the _draw() Function

      function _draw()
        spr( sprite#, x, y, width, height, flipx, flipy )

      _draw() runs after the _update() function and draws to the game screen 30 times every second.

      cls() clears the game screen before drawing the new frame contents.

      Then we draw our sprites inside this function.

      Note that the sprites are drawn almost in layers because of the order they are drawn. The earlier drawn sprites will be overdrawn by the later sprites if they take up the same space. So you can create the appearance of layers by drawing your background sprites first, and your foreground sprites later in the code.

  • Full Code!

      function _draw()
        spr(1, 10, 10, 1, 1, false, false)
        spr(1, 20, 10, 1, 1, true, false)
        spr(1, 30, 10, 1, 1, false, true)
        spr(1, 40, 10, 1, 1, true, true)
        spr(2, 10, 30, 2, 2, false, false)
        spr(2, 30, 30, 2, 2, true, false)
        spr(4, 10, 60, 4, 4, false, false)
        spr(4, 60, 60, 4, 4, true, false)