Into the Pixel-Verse: Animating Spider-Man's Web Bounce With Free Tools!

So, I decided it would be cool if I did a project on how to animate Spider-Man bouncing! I didn't want to just do it, I wanted there to be a challenge. For this specific project, the challenge was that I had to use tools that are free to the public, so I decided on Piskel and Scratch. The toughest part was going to be animating using the small pixels provided on the Piskel website. If you decide to do a similar project yourself, both Scratch and Piskel are completely free. For the music, all you have to do is make a quick account and you'll be able to download the track. But feel free to use any music you want! Make SURE you visit the scratch project, because the screen recording does not include the music(The music is crucial)!

I hope you enjoy reading!

1. Music: Audio.com - What's Up Danger
2. Scratch: Scratch Website
3. Piskel: Piskel App
4. Computer
5. Browser
6. Patience (;
7. My Project: https://scratch.mit.edu/projects/1316642124/

I started off by drawing each background for my project. I decided to do the background first and then add the characters to each frame, but you can definitely do the characters first if you prefer. For the first few frames, I had Spider-Man wearing a cape. I did this to animate the flapping of the cape and just for fun. (:

Once I had the background drawn, I added the character to each frame. Right away, the first challenge came up: Piskel makes it hard because you aren't able to scale a drawing up or down, nor can you easily shift it around. Because of that, I had to draw each separate frame by hand until I got exactly what I wanted. That is why it takes so much patience!

Feel free to copy the frames I made or create your own. This step takes the longest because drawing in Piskel requires patience and a steady hand. Honestly, this part took me triple the amount of time it took to actually animate and code it! It took me multiple days to complete mine, and depending on the size of your project, it might take you a while too. But once you finish this step, you are almost done.

To upload the Piskel frames that you drew, just go to export and download your project as a .gif. Once you have downloaded it, go into Scratch, click Upload Costume, and select that file. Scratch will automatically turn it into a new costume/frame for each one of the frames you drew on Piskel!

This next step is pretty easy. All you have to do is sign up for an account(Audio.com - What's Up Danger), click the download button on the music track, and save it to your computer. Once it's downloaded, go into Scratch, click on the Sounds tab in the top left-hand corner, and upload the song.

It did take me a little while to line the music up perfectly with the animation, but you'll get it! I decided to add a fade-in and fade-out to make it sound a bit smoother, especially since I was starting halfway through the song (: This step is pretty simple, but if you need help, just refer to the images above.

For this project, you only need some simple code to get it started. It only took me a few minutes to figure out the right code blocks to use, though it took a little longer to get the seconds and frames lined up perfectly. This part really depends on your specific project and how many frames it has, but if you're copying my project, go ahead and use the same numbers!

First, I set it up so the program waits 0.15 seconds before moving to the next frame. Then, I set up a repeat loop for the total number of frames I had, followed by a block to switch to the next costume/frame. Next, I made a script to start the music as soon as the green flag is clicked. After that, I lined up specific sound effects with the frames they belonged to, like the breathing at the beginning and the web-shooting. You can even record your own sounds by going to the Sounds tab, clicking Record, and making whatever sound you prefer! Refer to the images above if you need help.

Even though this took a long time to make, I thought it was really fun to try and animate something without using 3D models. It is definitely a lot harder because you have to draw every single frame, and Piskel can be challenging, but it was still a great experience! I learned that you don't need the most expensive materials to make a cool animation.

I hope you enjoyed this and were able to learn something new.

Thank you for reading!

Visit the Scratch project here: https://scratch.mit.edu/projects/1316642124/