Moving Pixel Art Bird Background

by roombawoomba in Craft > Digital Graphics

54 Views, 1 Favorites, 0 Comments

Moving Pixel Art Bird Background

FAPNQ27M5QRRINF.png
F72F82GM5QRRIQG.gif

Have you ever wanted to create a simple but relaxing background?

In this tutorial, I will guide you through creating a looping animation of a bird flying through a pixel art forest using Scratch.

By the end of this beginner project, you’ll have a satisfying looping animation that you can use as your desktop wallpaper!

Supplies

Scratch3.jpg
653a44d1799118c17c8290cc_Scratch Stats.jpg

You will only need the basic things:

  1. A computer or device with Scratch installed or access to the Scratch website (scratch.mit.edu).
  2. Internet access to search for pixel art bird and forest GIFs.
  3. Some time and creativity to put everything together.


Finding and Importing a Pixel Art Bird GIF

Screenshot 2025-01-11 194033.png
image_processing20210806-29480-ykbqf0.gif

First, search online for a pixel art bird GIF.

Make sure it is high quality and has a few frames of animation to work with.

(Tip: Search up something like “pixel art bird gif free”)

Then save the GIF to your computer.

Open Scratch and create a new project.

Click the Choose a Sprite button in Scratch, and then click Upload Sprite.

Select the saved pixel art bird GIF. Scratch will automatically separate the GIF into different costumes for each frame of animation!

Then, open the costumes tab and use the paint bucket to remove any extra background it might have.


I've also attached the bird GIF animation that I used in this tutorial.

Animating the Bird

Screenshot 2025-01-11 194208.png
Screenshot 2025-01-11 195014.png

Select your bird sprite.

Add the same code as pictured above to make the bird’s wings flap continuously.

You can change the delay amount to change how fast the bird flaps its wings.

Then, click the green flag to test the animation. The bird should appear to flap its wings moderately.

Finding and Importing a Pixel Art Forest Background GIF

Screenshot 2025-01-11 200844.png
dektl6b-3b40000d-d04a-4d92-b767-17b70b19fb22.gif

Now, search online for a pixel art forest GIF that loops. This will be our background.

(Tip: Search up something like “pixel art forest gif free”)

The save the GIF to your computer.

In Scratch, click Choose a Sprite and then Upload Sprite to add the forest GIF as a sprite (not as the backdrop since it is easier this way).

Just like the bird, Scratch will separate the GIF into costumes for each frame of the animation.


I've also attached the background GIF animation that I used in this tutorial.

Animate the Forest Background

Screenshot 2025-01-11 200959.png

Now, select the forest background sprite.

Copy and paste the same code from the bird or create some new code as pictured in the screenshot.

Make sure to test out the background by clicking on the green flag. The background should now animate along with the bird!

Add Movement to the Bird

Screenshot 2025-01-11 201211.png
Screenshot 2025-01-11 201204.png

Finally, we can add the finishing touches to make the bird fly around.

Create the code as seen above and press on the green flag to test it out!

This code will make the bird fly to three different locations, slowly, making it seem more realistic.

Enjoy Your Animated Scene

Untitledvideo-MadewithClipchamp-ezgif.com-video-to-gif-converter(1).gif

Now, Click the green flag to watch your completed animation!

The bird should flap its wings and move around the screen while the forest background repeats smoothly!


Congratulations on creating an awesome animated pixel background. Now you can use this simple but relaxing animation as your wallpaper and more!


Thank you for reading my Instructables.