In the last issue we learned how to create a pixelated scene using Piskel and Scratch. In this issue we will build upon that project by adding in animated lava and coding our work to make a scrolling background.

Part 1: Animated Lava

First, we’ll make a simple block of lava on Piskel (https://www.piskelapp.com/). We use the resize tool to create a 16 x 16 block. To make it look like lava, we will fill it in with orange. We then choose two more colors that are appropriate for lava and randomly add these colors into the image. The block below is an example of the first frame of our pixelated lava.

We want to create 3-5 similar images to form an animated lava image in Scratch. To do so, look to the left of the drawing pad. You will see a smaller version of the frame above. Right click to duplicate your work. Now modify the placement of each color. Repeat this process 2-5 times to make several frames as shown below:

Four Frames of Lava

To the right of the drawing pad on Piskel you will see an animation that rotates through all of your frames. You can adjust the speed (frames per second) on Piskel, but ultimately you will use Scratch to control the lava animation.

Download your work as an animated GIF and upload it into Scratch as a sprite.

In Scratch, the .gif file will initially appear as just one stationary image. However, we can click on the Costumes tab on the upper left of the Scratch window to see all four frames of our animation.

We can animate the lava by having it “switch costumes” in an infinite loop as shown with the blocks of code below (try out different wait times until you are happy with the speed of the animation):

Part 2: Scrolling Dirt and Grass

Now let’s use a block of pixelated dirt and grass (dirt-grass sprite) such as that shown below to create a scene. We create the dirt similar to how we created the lava block in Piskel, however we start with brown and add in several hues of green toward the top (See the June issue of Beanz for details).

Notice that we left blank space toward the middle. In the final stage of this project we will fill in this space with the lava sprite, but for now we will leave it empty.

We want this scene to scroll to the left such that when it is almost completely off the screen, it reappears on the right and continues on to the left again.

To do this, we start by making sure the dirt-grass sprite always starts in the same position. In this case the sprite starts at (-181, -117).

To make a scrolling scene, we need to repeatedly move the sprite to the left. We can do this by putting a “move” block in a “forever loop”. The speed is controlled by the number of steps the sprite moves at a time.

If you run this code, you will find that Scratch automatically stops the dirt-grass sprite from scrolling before it is completely off the screen. To make a continually scrolling scene requires a couple more steps.

First, we need to duplicate the sprite and move the duplicate almost all the way off the screen on the right hand side. In our case, the x-coordinate of the duplicate is 446 units/pixels to the right of the original sprite. Next, we need to program the duplicate to start moving to the left when the green flag is clicked. This way, when the original sprite moves left, the duplicate will “follow” it so that the screen is always covered with a dirt/grass sprite.

Finally, we need both the original and the duplicate to move back to the far right side of the screen once they are almost completely off the screen on the left hand side. We first record the x-coordinate of the sprite when it is almost as far left as it can go. Then we use an “if” block to program it such that “if the x-coordinate is almost all the way off the screen on the left, move to the right side of the screen”. Make sure the y-coordinate stays the same the entire time.

If both the original and the duplicate dirt-grass sprites are programed this way, we will have the following situation:

• The original sprite spans the screen. The duplicate sprite starts out 446 units/pixels to the right (almost completely off the screen on the right-hand side).
• When the green flag is clicked, both sprites move left “forever” at the same speed.
• If the x-coordinate of either sprite goes left of -641, the entire sprite will reappear on the far right of the screen and then continue moving left again.

Part 3

The final stage of this project is to cover the empty space in the dirt-grass sprite with the lava sprite and program the lava to move along with the dirt-grass. Since we made a duplicate of the dirt-grass sprite, we will also need a duplicate of the lava sprite (so that we can fill the empty space in both sprites).

Programming the lava to scroll left along with the dirt-grass sprite is a bit tricky. The idea is as follows in the two steps below:

1. Place the dirt-grass sprite so that it spans the screen (-181, -117). Next, create a variable to record the x-coordinate of the dirt-grass sprite. We named the variable dirtX.
   

   

2. Place the lava so that it covers the empty space in the dirt-grass sprite. Calculate the distance between the x-coordinate of the dirt-grass sprite and the x-coordinate of the lava sprite. Program the lava sprite to always maintain this same distance.
   

   

Now the x-coordinate of the lava is always the same distance (in this case 296) away from the x-coordinate of the dirt-grass. As the dirt-grass sprite moves left, the lava will move left so as to maintain this distance.

We repeat this same logic for the duplicate of the dirt-grass sprite and the corresponding duplicate lava sprite.

Complete code for the original dirt-grass sprite:

Complete code for the duplicate dirt-grass sprite:

Complete code for each lava block:

Complete Scrolling Scene (dirt-grass and lava sprites)

When we are finished, all the sprites will move to the left until they are almost completely off the screen, and return to the right side of the screen over and over for an animated scrolling effect. You can take a look inside this project at https://scratch.mit.edu/projects/530299389/editor/ and modify it to work with a scrolling scene of your own!

Learn More

Piskel

https://www.piskelapp.com/

Creating animations video

https://www.youtube.com/watch?v=VMkvVmAQBd0

Piskal art animation

https://www.instructables.com/Teach-Kids-Pixel-Art-Animation-for-Games/

Create your own sprite

https://www.remc.org/mitechkids/5th-grade/create-your-own-sprite/

Techie ways to make pixel art

https://www.techagekids.com/2016/12/6-techie-ways-to-make-pixel-art.html

Animate with Piskel

https://www.bgcwestfield.org/let-s-animate-with-piskel