Episode 3: Sprites sprites sprites

ep3.md

##Basics of Working with Sprites In order to get the most out of Sprites we will undoubtedly want to add some animation and control to bring our objects to life.

In this episode we will take a look at the core of sprite control within Objects. We will also take a look at working with sprite sheets and using the built in Sprite Editor tool.

We will start with a single sprite spr_player that we control from a top down perspective through our obj_payer. Even though the player is moving around in the room we want to sync up some animation with the players input.

In order to do this we need to add the appropriate sprites for each of the movements that we will be using in our object. Luckily artists have given us the sprite sheet which is a clever way to shove all the relevant sprites we need onto 1 image.

For this project we will be using the artwork for the Liberated Pixel Cup and because we want to have fun use this awesome character creator tool to make a custom character sprite sheet and save it locally. (I'd highly recommend checking out the art style guides which are really well done and make working with art on both the art/development side so nice).

Now that we have saved the sprite sheet jump into Gamemaker and create a new sprite spr_player_up which we will use to hold the entire walk up animation. Edit the sprite to access Gamemakers built in Sprite Editor Tool. While it may not be the most robust sprite editor I have found it to serve the job in almost all cases just fine (especially now a days, 10 years ago it was not this flushed out).

Let's open the Create from Strip tool and select our sprite sheet and specify the appropriate settings to align the selector up for the images that you want to use. This can take quite a bit of fiddling but its standard for people to use binary counting numbers for spacing (1,2,4,8,16..) which can be helpful when trying to get the perfect alignment. Hit OK and you will see each of the sprites split up individually to make up the animation. Each of these sub images is directly correlated to the image_index we will use later on.

Repeat the process until you have imported all directions

1. Create & Name Sprite
2. Create from Strip
3. Adjust settings to select entire animation

Now that we have all the sprites setup we want to jump into the object and edit the Step Event to add animation to the keyboard input we are already handling.

if(keyboard_check(vk_up)){
    y -= MOVE_SPEED;
    //handle animation
    sprite_index = spr_player_up;
    image_speed = WALK_SPEED;
}

All we are adding to each keyboard event is to set the image_speed and update our sprite_index.

• image_index is the subImage that is currently being drawn for the given sprite_image
• sprite_index refers directly to the sprite that the object is associated to. When you the dropdown shown below you are effectively setting the sprite_index of the object.

We repeat the process for each keyboard input but there is still something missing. What happens to our animation when we are not hitting any buttons? To do this we want to attach an additional else statement at the end of the conditional block.

}else{
    image_index = 0;
    image_speed = 0;
}

This final statement simply resets everything and makes sure the animation does not continue to play when the player is not hitting any buttons. As an aside this is only 1 way to handle movement that was selected for its simplisity I will discuss other forms of control in a later episode.

When we hit we should be able to control our player and see the entire animation that a player would expect. Yay!

####Important Note to Ballers Even though our example works perfectly fine why not try and make it better? What we are looking to do here is maintain functionality but make our code more readable. To do this we will employ a programming method called refactoring. Learn to love use and abuse this technique to improve the general code quality. Remember that your coding happiness is important and sometimes you can be the source of your own frustration.

Remember our Step Event?

if(keyboard_check(vk_up)){
    y -= MOVE_SPEED;
    sprite_index = spr_player_up;
    image_speed = WALK_SPEED;
}else if(keyboard_check(vk_down)){
    y += MOVE_SPEED;
    sprite_index = spr_player_down;
    image_speed = WALK_SPEED;
}else if(keyboard_check(vk_right)){
    x += MOVE_SPEED;
    sprite_index = spr_player_right;
    image_speed = WALK_SPEED;
}else if(keyboard_check(vk_left)){
    x -= MOVE_SPEED;
    sprite_index = spr_player_left;
    image_speed = WALK_SPEED;
}else{
    image_index = 0;
    image_speed = 0;
}

Well if we ever want to add code to that event we will be adding to that code block or another one. Even when using the handy code labeling trick

///what this file does

I am not convinced it is enough. Rather than just naming your Code in drag and drop portion I recommend splitting the code into modular chunks. In Gamemaker we create a new script and give it a logical name and call it from our object.

Our Step Event becomes:

handle_keyboard();

and we have a script with all the code that was in our old step event.

This becomes a super handy way to add proper event driven behaviour that we typically want to control every object with. The great thing about Gamemaker is that it allows you to create folders for any component.

###That's all folks. For more information and links on the topics discussed check out the notes section and the video