sidescroller-framework

Setting up a Simple Sprite with Animations

In this tutorial, you will learn how to set up your first sprite and how to make it move!

Contents

• Set up your Sprite
  • Folder Setup
  • Create a New Font
  • Scene Setup
• Create a New Animation
  • Create the Font
  • Paste your Sheet
• Use the Animation
  • GameObject Setup
  • Write Some Code
    • SpriteRenderer Reference
    • Set Animation
    • Start Animation
    • Full Code

Set up your Sprite

In SFramework, sprites are represented using the CraftStudio Font asset type. Let’s go over how to set your sprites up using Fonts.

Folder Setup

While there is no specific way to set up your project’s directory structure, I find it easiest to keep things organized with folders. If you have imported the sample assets into your project, there is already a Sprites folder created. If not, my ideal folder structure under Fonts looks as follows

├─ Sprites
|  ├─ My Character
|  |  ├─ My Character.font
|  |  ├─ Animations
|  |  |  └─ Idle.font

Again, this is not required but is a good way to make your project organized.

Create a New Font

Let’s create our sprite now. First, create a new Font asset under your desired directory.

Give it a name, and hit “Create”

Add your Image

Now that we have a new Font asset created, open it. Set up the dimensions of the Font to fit your sprite’s image dimensions. In my case, this meant a “Char cell size” of 45 by 64 pixels. You can also make your sheet size pretty small.

Now, remove the white background from your Font and paste in your sprite image. Then you can set the image into the first font entry.

Scene Setup

Now that we have our “sprite” asset created, we can put it into a scene. Open your scene (or create one if you do not have any) and make sure you have a Camera. Now, create a new GameObject and place it within the camera’s viewport.

Now, add a FontRenderer to your new object.

And set the font to your ‘sprite’ asset Font. In my case, I named my sprite “SampleSprite”

Now instead of saying “Text”, set your FontRenderer object’s text to a space (“ “) and your sprite will show up!

Create a New Animation

The nice thing about CraftStudio’s Font asset is that it can act like a spritesheet for us! Lets create one of our own.

Create the Font

Follow the steps from Create a New Font to create a new Font asset.

Paste your Sheet

Now that we have another new Font asset, we can put our spritesheet into it. Make sure your sheet size and cell sizes are appropriate. Again, in my case, this meant a “Char cell size” of 45 by 64 pixels.

Remove the white from your Font so it has a transparent background, then paste your images from the spritesheet into each cell in order from left to right.

And you’re done! Our animation is created.

Use the Animation

Using an animation in SFramework is very similar to setting the animation of a ModelRenderer. In SFramework, it is as easy as 3 lines of code.

GameObject Setup

Open the scene created previously in this tutorial and select your sprite GameObject. Now, add a new scripted behavior to it.

Now, let’s create a new Lua script to play our animation.

Write Some Code

SpriteRenderer Reference

Open the script we just created. First thing we need to do is create a SpriteRenderer component on our game object. This can be done in two ways. We can either do it in the scene, or do it programmatically. To do it in the scene, add a new scripted behavior to the game object and set it to SFramework’s SpriteRenderer component.

We can now create a reference to this component in the Awake() behavior function of our new script by using the GameObject’s SpriteRenderer accessor

local mySpriteRenderer = self.gameObject.spriteRenderer

or, alternatively using GameObject’s CreateSpriteRenderer function

local mySpriteRenderer = self.gameObject:GetSpriteRenderer()

If we want to create our SpriteRenderer programmatically, it is a simple line of code

local mySpriteRenderer = self.gameObject:CreateSpriteRenderer()

Set Animation

Now that we have a reference to our SpriteRenderer, we need to set our animation. We can do this using the SpriteRenderer’s SetAnimation function. Remember the animation Font we just created? We’ll reference that asset as the first argument to our function call. We also need to keep in mind the number of frames our animation consists of. In my case, it is 6. This will be our second function argument.

mySpriteRenderer:SetAnimation(CS.FindAsset("Sprites/Sample/Animations/Idle"), 6)

Start Animation

The last step is to start playing the animation. This is done using SpriteRenderer’s StartAnimationPlayback function. This function has an optional argument, loop. If we want our animation to loop we can pass in true or omit it. If not, we can pass false. In my case, I added an idle animation so I will let it loop.

mySpriteRenderer:StartAnimationPlayback()

Full Code

And were done! If you start the game using your scene, you will see your sprite moving!

The full code that we’ve written in our new script should look like this:

function Behavior:Awake()
    local mySpriteRenderer = self.gameObject:CreateSpriteRenderer()
    mySpriteRenderer:SetAnimation(CS.FindAsset("Sprites/Sample/Animations/Idle"), 6)
    mySpriteRenderer:StartAnimationPlayback()
end

This site is open source. Improve this page.