Let students know that we will start today’s class with a simple activity. Students will pair up.
Ask the pair of students to sit back-to-back in their chairs so that they don’t see each other.
Give one person out of each pair a picture of a shape, and give the other person some paper and a pencil.
The person who is holding the pictures is now required to give verbal instructions to their partners on how to draw the shape – they are not allowed to tell their partner the name of the shape and can only describe the picture.
Allow three to five minutes to complete the picture and after, compare the shape with the actual drawing.
When students are done ask them the following to the class:
How well did the first person describe the shape to their partner?
How well did the second person understand the instructions and how close were they to duplicating the actual shape of the picture?
Did they discover any problems with the sending or receiving parts of communication and how did they overcome this?
Anytime students are working in teams, they need to develop a shared understanding of the problem being worked on. This involves asking a lot of questions and basically making sure you’re on the same page.
Activity 2: Animating your player
Duration: 15 minutes
Instructors should create the code for the simulation ahead of time. At this point, open up the file you made and show students the outcome of what they will make in the simulation to get them excited about what’s to come. Play the simulation and explain what’s going on.
Now, let students open their laptops and follow along closely as you work with them on a new simulation – have them try it with you, don’t have them sitting and watching you at the front. Let them know they will have creative time at the end but they need to create a new file right now to follow along with the example as the Kodely instructor is teaching the simulation.
As you’re going through the simulation, make sure to find ways to call students up to the front, help them select the blocks, and make it interactive with them! If a student is not paying attention, try to encourage them to come up and help contribute to the simulation code. Ask them questions and have them engage. Clap for students when they grab the right blocks and when they participate to encourage them!
Have students open up a new MakeCode Arcade file and name it ‘Animated Sprite’
Instructors should call students up to the board to help drag blocks and engage students in the simulation through questions and participation as much as they can. Especially, if a student finds this challenging, encouraging them by participating in the class makes them eager to learn!
Here’s the objective of the simulation we’re making (instructor should write this on the board):
We will create a simple animation using different frames of our sprite.
Ask students how they would want to use animations in their games?
Ask students how they think we should get started with our animations. What do we need and how does an animation work?
Take notes as students share their ideas and consider all possibilities – answers don’t have to be right!
We will create a simple animation using different frames of our player. To do this, go to Advanced > + Extensions > Add Animation Drag in the animation block that you see below.
Click on the frames image to change the different frames of your animation, then interval to update how quickly the frames update and finally turn loop on so the animation keeps running.
To create more authentic animations which change the direction of the player, and to have our Sprites walking and still when not moving we will use an animation with states. Ask students what they think different states of movement are (students may get up to demonstrate the different states of motion)?
Then, open up this link and show students how this Sprite moves and how the animations change with the direction the player is moving.
To start we will have three simple states moving Left, moving Right and not moving i.e. Idle when the Sprite stops moving
To start create a function to create our animation, call it createAnimations and then add a block to call it at the end of your on startloop. Ask students if they’ve ever heard of the word function before?
Description: A function is a sequence of commands that can be reused together later in a program and they make your life much easier! Programmers often say; Don’t Repeat Yourself. You can think of this as an acronym to help you understand the purpose of functions: keep your code DRY!
Real-world example: A great example of understanding functions in the classroom is “Criss Cross Applesauce”: we piece together separate actions to make one and name it something that students will remember. Students will learn it once and continue to use it throughout the school year. Once students learn “criss-cross applesauce”, we don’t have to instruct them step by step each time each time we say it- students know what to do when they hear it.
Ask students to help you break down what criss cross applesauce means and is made up of. Write this down on the board and students can demonstrate the parts of this. Here’s an example:
Start
Sit on the Floor
Cross Legs
Hands in Lap
Silent Voice
Eyes Forward
How it happens in practice: In programming, functions allow us to repeat a sequence of code without having to write the code over again. This allows us to simplify a complex action by using only one command, just like in our criss-cross applesauce example.
Now fill up the createAnimations block.
To start add one animation which animates our player as then move to the left. To allow us to do this make sure you can add animation blocks go to Advanced > + Extensions > Add Animation.
I have added simple two state animations by selecting different versions of a character from the Gallery. You can create your own animated player by drawing. Be sure to change your starting image too at the beginning of your on start loop.
Now repeat the pattern for the moving right and not moving / idle states.
We have now to activate those animations create some code in a on game update loop that will be always running and listening for changes in conditions. We can use the players velocity in the x-axis to decide if they are moving left or right or not moving.
Draw a coordinate grid to help students visualize the velocity in the x-axis.
A positive velocity indicates that the item is moving in the positive direction as described by the coordinate system, whereas a negative velocity indicates that the object is going in the opposite direction.
Test your game to check that your changes have the desired behavior and that there are no side effects. Is your animation smooth? Do you need to add more frames?
Activity 3: Checkpoint Activity
Duration: 15 minutes
This is a perfect time for students to test their knowledge of sprite animations and create an animation of their own with different states of movement with the enemy ghost sprite. Instructors should create the checkpoint code ahead of time and display the outcome to students as an example of what’s to come. Before students get started make sure to clearly explain their task and any concepts they may be stuck on.
Student Task:
Create an animation function called createAnimation for the ghost sprite
Set animation for the ghost sprite to left, right, and idle
Instructors should watch this tutorial as I demonstrate how to create the checkpoint activity. If students are stuck make sure you’re familiar with this program so you can assist them. Instead of just showing them the answer ask them questions and encourage them to think.
Activity 4: Creative Time
Duration: Rest of Class
Once students are finished with the checkpoint activity and you review their work, give them time to pick their own themes, Sprites, and game objectives to design their own game. Encourage them to use the topic they learned in today’s class with animations into their game.
Login
Accessing this course requires a login. Please enter your credentials below!