Arcade Coder Animation Tutorial: Thank You, NHS!

Last week we shared an Arcade Coder animation thanking the NHS for all their hard work and dedication at this time. Since then, some of you have asked us if we could provide a tutorial on how to replicate this on your own Arcade Coder with moving text.

That’s why we’ve put together these step-by-step tutorials detailing all the steps taken to create a scrollable text animation using the coding editor of the Games Studio app and a simple version using the no-coding animation features for younger kids.

1. Animation Tutorial for Younger Kids

This is a simple version of the Thank You, NHS! animation that uses the new Animation features in the Game Studio app. Perfect for younger kids or kids that are not accustomed to coding just yet.

All you need to do it is creativity and some time! So, let’s get started:

Step 1: Draw your claps!

  • Create your first closed-hand clap (1st frame) 
  • Create the open-hand clap frame (2nd frame)
  • Repeat this process one more time.

Step 2: Draw a heart to show your love! 

  • Create your heart on the whole Arcade Coder surface as you see in the image below.
  • Leave “empty” frames before and after the heart. This will give you a smooth transition between animation frames!

Step 3: Spell out NHS 

This is pretty similar to the way we did the clap, only now we’ll have to draw letters! 

What you want to do in this step is to leave an empty frame between each letter so it creates the illusion of switching between.

Tip: You can make the letters as big or as small as you want. You can also choose to write something different!

Step 4: Press play! 

It’s now time to press play and show your animation to the world! It should look something like this in the end:

2. Advanced Animation Using Code for Older Kids

Here’s a step-by-step tutorial of how Chris and his son Arthur created the Thank you, NHS! animation:

Step 1: Create a new Sprite and Costume for each letter; positioned in the top left corner; and roughly 7×7 pixels in size.

  • Create your first sprite from the top right corner. 
  • Create a new costume for your sprite – this will be your letter T. Start drawing it in the top left corner of the frame (see image below for reference). 
  • Name your sprite T.
  • Repeat the process for all remaining letters.

Tip: Change the letter colours for each word to make reading them easier when they scroll.

See the images below for visual reference:

Image 1.1 Open the Code Editor
Image 1.2: Draw the first letter.
Image 1.3: Repeat the drawing process for each letter.

Step 2: Add a ‘When Game Starts” block; position each Sprite off-screen in a consecutive line; position each sprite vertically central to the board.

  • Add the “When Game Starts” block.
  • Position each Sprite off-screen in a consecutive line. You want them to be 13 spaces to the right so they are hidden at the beginning of the animation, but also 3 spaces down so they are centred on the Arcade Coder. 
    • Your letter T will be 13 spaces to the right and 3 spaces down.
    • Every letter after T will need to be placed 13 spaces to the right + the width of the letters before them + one space in between each letter. (e.g. the letter H is placed 21 spaces to the right – 13 + 7 (width of letter T) + 1 (space between letters). 
    • You can check out the image below for visual reference on how it should look.
Image 2.1: How to place your letter Sprites.

Step 3: Add a second ‘When Game Starts” block; give each Sprite a speed (this gives them a push that keeps them moving forever).

We’ve given our sprites a speed of -2 to move them towards the left. You can adjust that to be faster or slower based on your preference.

Tip: The reason we’ve set a negative speed here is because “negative” speed will push the letters towards the left while a “positive” speed will have them scrolling towards the right – so away from the physical Arcade Coder.

Image 3.1: Set the speed at which your letters will scroll across your Arcade Coder!

Step 4: Create a new Sprite call Dot; position it after the “S” Sprite; hide the Dot: and give the Dot the same speed at the other letter sprites. 

  • This is a hidden sprite that will help trigger the clapping animation. After you create the sprite, create a costume for it using just one dot in the top left corner. The only use of this clap is to signal the clapping sprite to appear. 
  • Position it after the “S” letter sprite following the same rules (13 + width of letters + 1) and hide the Dot.
  • In the second “When Game Starts” block, set the Dot’s sprite speed to equal the one of the letters.
Image 4.1 - Create the Dot Sprite's costume - one dot in the top left corner.
Image 4.2 Position the Dot Sprite after the S letter sprite.
Image 4.3 - Set the same speed for the Dot Sprite as for the letter Sprites.

Step 5: Create a new Sprite called Clap; draw two costumes showing the hands open and closed; No need to position the Clap Sprite but make sure it is hidden when the game starts.

  • Time to draw your claps! Create two costumes for your Clap Sprite – one with the hands open and one with them closed. 
  • Make sure the Clap Sprite is hidden when the game starts by going to the first “When game starts” block and hiding it.
Image 5.1 - Create your open and closed hand clap costumes.
Image 5.2 - Hide the Clap sprite.

Step 6: Make the Clap Sprite appear when the dot overlaps the left edge of the Arcade Coder

  • Add a “When Dot overlaps Left Edge” block;
  • Within the block add:  Show the Clap Sprite; Add a 10x repeat block and within it change the costume from open hands to closed hands with a short wait between each.

See image below for visual reference:

Image 6.1 - How to set up the Clap sprite.

Step 7: This is what the code should look like at the end:

Image 7.1 - Full Code.

Step 8: Create a new Sprite called NHS to use as the cover image for your animation; now publish it to your Arcade!

Step 9: Press Play!

Here’s how your animation should look like at the end:

Now it’s time to take your Arcade Coder out for the Thursday 8pm #ClapForOurCarers to Thank the NHS and all of our carers! If you are not from the UK, you can adapt these animations to fit your own languages and use it too if you are doing weekly shows of appreciation for those that are taking care of us right now.

We’d really love to see your creations, what personal twists you’ll give it and how you’ll use it to show your appreciation. Please send any pics or videos of your animations to our social media channels @techwillsaveus or to support@techwillsaveus.com.

If you don’t already have the Arcade Coder you can discover what it’s all about here.