Adding Multiple Frames in Unit 3

CS Discoveries Unit and Lesson Discussion
1

How do you add multiple frames to give the illusion of a sprite walking?

2

You would use the Draw Loop. Unit 3, Lesson 11 is where the Draw Loop is introduced for animation. Here is the video that gives a basic explanation of how it works. Code.org

If you draw the same background at the beginning of the loop each time and then change the x or y coordinate of the sprite it will appear to move.

Walking is different. You would need to have multiple shapes/sprites that make up the figure and use the rotate, x and y coordinates to move the shapes and give the illusion of it walking. It can be time consuming to get all the coordinates and rotations just right.

3

I am guessing you’re meaning “how to make your sprites look like they’re walking”.
If you’re asking this, then I will tell you that it’s a hard process if you aren’t an artist. You will have to do a lot of copy and pastes to move the legs like if they’re actually walking. Oh and that’s if your characters are pixelated, if they aren’t, you will have to redraw the legs every frame. It isn’t worth wasting your time on this, if you really really want to add walking characters into your project then you should hire an artist, but that will cost money.

4

Hi @thompam1 ,

Just to add another perspective to the ones presented so far: you can add multi-frame animations to sprites in Game Lab. Here’s a help and tip resource showing some of the process: https://studio.code.org/docs/concepts/game-lab/animation-tab/multi-frame-animations/.

These are presented in Unit 3 of CS Discoveries, but not until the 2nd chapter and some of the later lessons. Once you and students end up in those lessons, multi-frame animations and “walking sprites” will be the norm.

Hope that helps!
Dan - Code.org Curriculum Writer

3 Likes
5

I don’t see a place to add animations when students bring in a graphic or create their own and they want to animate them inside the animations tabs with frames. How do I get the frames area to display or add frames to a graphic like the link you provided has set up?

6

Hi @blanden,

The frames panel is in the animations tab. Here is documentation on adding multi-frame animation. FYI - if you are looking at one of the earlier GameLab activities within the earlier lessons, you may not have the frame by frame animation option. I do know it is available in a new GameLab project and in the later lessons.

Hope that helps,
~Michelle