Zatna Scratch Game
This week, we made a Zatna Tour game using Scratch. Scratch is a program developed by MIT to teach students about basic programming concepts using various drag-and-drop blocks rather than using complicated syntax required by programming languages. We used Scratch to make a game where the player becomes a camper exploring the Pingry Hi-Tech Camp. The player can interact with students and instructors, listening to their comments in the different classes offered at the camp, including Java, Scratch, and Lego Robotics. They can even watch a game of Powerball, a break-time favorite for the majority of the campers.
We wanted this game to not only show some of the great and fun aspects of the camp, but also the capabilities of the programs we teach at the camp. Scratch is an excellent program used by schools around the world to introduce the capabilities of computer science to young students with a friendly interface that fosters a love of programming. As this game demonstrates, the end product is worth the hard work!
We hope that this game inspires potential computer science students and encourages them to power through any obstacles they may face in creating their own games!
- Sprites ripped by Furs the Fox
- Sprites ripped and modified from Pokemon Emerald Version
- Backgrounds ripped from
This is a screenshot of the sprite sheet from Pokemon Emerald we modified and used the sprites from. I used GIMP, which is a free program that is a lot like Photoshop and is good for making sprites. Feel free to make your own sprites when you make your own games! To give the game a more 8-bit feel, we kept the size of the details at 1 pixel, then enlarged the sprites after we imported them into Scratch.
If you decide to use GIMP to make your sprites, here are a few shortcuts that will make the spriting process less painful:
- N → pencil (make sure to change the pencil size!)
- Shift + B → fill bucket
- R → rectangle select
- Shift + O → color select (useful if you want to recolor each costume of a sprite)
- Shift + F → flip (duplicate layer + flip is good for making a right facing sprite turn left and vice versa)
- Ctrl + N → new project
- Ctrl + Shift + V → new project from clipboard
Trust me, you’ll become a pro after making a few sprites.
The easiest way to make new costumes for your sprite is to export your project as a .gif file. In GIMP, each layer of your project is considered as a frame in the exported GIF. In my experience, when you make a GIF with GIMP, the final animation shows the layers underneath if the image above them does not overlap the other layers and its background is transparent. Therefore, I use a fill bucket and try to make sure there is little to no transparency in the layers. (If you are copy and pasting sprites like me, just keep the background color (green) and make it transparent later.)
The sprite sheet I used had only 7 costumes, since the left-facing costume can be flipped to make the right-facing costume. The same applies for the right-step and the left-step costumes. There is a duplicate layer button in the layers tab at the bottom that will be very useful. You should have around 2-3 costumes for each direction the sprite can face, or even more if you want to show off your animation skills! It will definitely help later on if you sort the layers by direction.
When you are finished, go to File > Export, rename your file (make sure you end with .gif!), and you should get the screen shown below:
Make sure the “As animation” box is checked off, then press Export.
Congratulations! You just finished making your first sprite!
Open Scratch. Right click on the cat and delete it (unless you really want it), then click on the “Upload sprite from file” icon. Select the .gif file of your new sprite. Then select the Costumes tab in the sprite you just uploaded. Use the fill bucket tool and go to the palette on the bottom. The red line on the top right of the palette is for transparency. Click on the background (green) of each costume to make it transparent. If you used 1 pixel for your pencil size, chances are your sprite is very small. To fix that, go to the grey bar at the top of the window and click on the symbol with the four arrows pointing outwards that says “Grow.” Click on the sprite in the game editor a few times to make it larger.
Now your sprite is ready to be coded!
Here’s our sprite sheet for the game:
Try playing it below.