Animating Backgrounds in MakeCode Arcade

Animating backgrounds can help make your games look polished and professional. Many popular games on the MakeCode Forums use animations, so I'll be going over how to add animations to all areas in MakeCode Arcade games to make them beautiful!

This is a three-part series, this blog post will go over animating the background. The previous post in this series was about animating sprites, the post after this will be about animating tiles in your tilemaps!

(All code will be provided in blocks unless specified - click the edit button in the embedded editors to open the project. If you want the JavaScript or Python versions, open the project and convert it to the preferred programming language.)

Adding animations to backgrounds

As you cannot directly animate the background in MakeCode Arcade, there are two methods you can use, which is directly swapping out the backgrounds with an on game update every [number] ms handler. Doable, but clunky.

The other option is to use a sprite that is the size of your screen! Set the top and left to zero (make sure the starting image is the same size as the screen so the top and left end up actually at 0, 0. Otherwise, the position won't be correct!) Enable relative to camera so that our fake background doesn't move when the camera moves, and then animate it with the built-in animation functions!

Simple and easy!

(For the peeps seeking out every last drop of performance, you do not need to enable ghost when using relative to camera as that flag is ignored and no collisions are possible when a sprite is being relative to the camera!)

Adding mini sprites things that I have no clue what to call to create an environment

In some games, an environment ambiance can be created with the usage of sprites for ex. particles, shooting stars, clouds, etc!

Using the built-in screen effects

There are a host of built-in screen effects, such as blizzards, bubbles, clouds, etc. They can be helpful as you don't have to implement them yourselves and you do not need much control over it's style.

// Loading blocks...
effects.clouds.startScreenEffect();

// JavaScript
effects.clouds.startScreenEffect();

# Python
effects.clouds.start_screen_effect()

Here is an example cloud screen effect code:

Which gives you the following output:

These don't use real sprites, so they are very performant!

Using sprites for a custom background effect

If you don't like the built-in screen effects, you can improvise and use real sprites instead. Depending on the background and game, you may or may not want to use relative to camera, experiment to see which is better. If you do not, then you may want to use the camera X and Y blocks to in order to get the correct position.

I use the % chance block a lot to add variety. Notice how I also set a lifespan to manage the sprite count automatically. Note that auto destroy doesn't work as your sprites start offscreen already!

You probably also want to enable ghost for performance if you are not using relative to camera

The following example builds upon the previous starry night with shooting stars: (for demonstration purposes, it spawns every 500 ms. In a real game, you would probably make it happen sporadically, see the code on how to do that)

Which gives you the following output:

Thanks for reading, I hope this post helped you! Don't forget to subscribe to this blog with RSS to know when a new blog is posted!