Tutorial 15: Sprites

In FUZE⁴ Nintendo Switch there are a whole load of functions and commands to help us use the vast amount of assets to create a game.

In this tutorial we'll be creating a simple game using the sprite system. As always we'll start simple and add complexity as we go.

Creating a Sprite

Let's get the basics up and running. We need to load an image, then use that image to create a sprite:

  1. playerSpr = createSprite() 
  2. playerImg = loadImage( "Untied Games/Player ships", false )
  3. setSpriteImage( playerSpr, playerImg )

Done! First we use the createSprite() function and store the result in a variable called playerSpr. Doing this creates a sprite labeled playerSpr which we can manipulate using the other sprite functions.

Before we get to that, we must assign an image file to the sprite or we won't have anything to look at!

On line 2 we use the loadImage() function to store an image file into a variable called playerImg. We then use the setSpriteImage() function to assign this image file to our sprite on line 3.

Now we can do a whole host of cool things!

setSpriteLocation()

Let's begin by simply putting the sprite on screen. First we'll need to set the location of our sprite:

  4. setSpriteLocation( playerSpr, { gwidth() / 2, gheight() / 2 } )

Here we use the setSpriteLocation() function to give our player sprite a screen position. We have used gwidth() / 2, gheight() / 2 to give us the middle of the screen.

That's really all we need to start with. Let's draw our sprite on the screen using a loop.

  6. loop
  7.     clear()
  8.     drawSprites()
  9.     update()
 10. repeat

Run the program to see 4 tiny little ships in the middle of our screen.

setSpriteScale()

You might have noticed that these ships are a little small... We need to scale the image up to make it more usable. Add the following line before the loop:

  5. setSpriteScale( playerSpr, { 4, 4 } )
  6.
  7. loop
  8.     clear()
  9.     drawSprites()
 10.     update()
 11. repeat

The setSpriteScale() function allows us to multiply the x and y size of a sprite. We have used the number 4 in both the x and the y to make our sprite 4 times larger. If one of these numbers is different it might look a little stretched out!

Run the program now and our sprite should be a much better size.

setSpriteAnimation()

Our image file is a collection of 4 ships for a designer to choose from. Since the sprite is created from the whole image, we have a sprite made of 4 ships. If we were to use this to make a game we only want a single ship, not all 4 at once.

We can use the setSpriteAnimation() function to do just that. This clever function tells FUZE which tiles from an image we want to display. We use it to animate a sprite, but here we will be using it to display a single tile.

Add the following line before the loop:

  6. setSpriteAnimation( playerSpr, 0, 0, 0 )
  7.
  8. loop
  9.     clear()
 10.     drawSprites()
 11.     update()
 12. repeat

We should take a look at this function more detail. The first argument is the variable which stores our sprite. Nice and easy.

Next up we have three numbers. The first of these is the starting tile for the animation. This tells FUZE which of the tiles in the image to start with. Take a look at the graphic below:

As you can see, the tiles begin at 0 and count up. The tile we want is tile 0. This means the first number in our setspriteAnimation() function is 0.

The second number is the end tile for our animation. Since we want our ship to remain the same, this number is also 0.

The last number in the function is the speed of the animation. in frames per second. Since our animation is only a single tile, we have a speed of 0.

Run the program and we'll have a nicely sized, single ship on screen.

What do you mean it's boring? Alright, let's move the sprite around.

setSpriteSpeed()

To actually move the sprite we'll need to use the setSpriteSpeed() function.

We can use this function to apply a direction and movement speed to a sprite:

  7. setSpriteSpeed( playerSpr, { 60, 0 } )
  8.
  9. loop
 10.     clear()
 11.     updateSprites()
 12.     drawSprites()
 13.     update()
 14. repeat

Notice we have added two lines this time. Since we want the position of our sprite to change as the program is running, we must use the updateSprites() function to the main loop. This must go before the drawSprites() function.

In the setSpriteSpeed() function there are two arguments. The first is of course the variable which stores the sprite we want to move.

The second is a two-dimensional vector which sets the movement speed in pixels for each axis. In our line we have applied a velocity of 60 to the x axis and a velocity of 0 to the y axis. This means our ship will move to the right at 60 pixels per second.

Run the program to see our ship move gracefully along the x axis.

Creating a Game Using the Sprite Functions

In the next tutorial, we'll be using all that we've learned to create a side-scrolling game where we must avoid meteorites.

Make sure you're familiar with the functions we've covered here, then we'll see you in the next project!

Functions and Keywords Used in this Tutorial