Octavia the mermaid is on the run after her cover is blown. Ten years as a mermaid spy gathering information on the jellyfish and turtles down the drain. She now needs to get back to base, but sea creatures are chasing her, determined to stop her because she knows too much. How long can Octavia, shown in figure 1, stay alive?
Mermaid Splash is a racing game like Midway’s 1983 arcade game Spy Hunter. They’re both vertical-scrolling (the mermaid swims up instead of the screen side-scrolling to the right) action games. In Spy Hunter, the player raced a car up an endless roadway, trying to take out the enemy’s cars either with weapons or by knocking them off the road. Mermaid Splash leans away from the pixelated violence and instead requires Octavia to dodge the randomly generating jellyfish and turtles as she swims forward. But both games share the same ending, which is no ending. Both the road in Spy Hunter and ocean lane in Mermaid Splash continue forever.
Perspective is one of two art lessons. Mermaid Splash is your first top-down game; the player looks down on the action rather than looking at it from the side, therefore you won’t draw the mermaid’s face because the player will be looking down at her back. Mermaid Splash is also a perfect time to look at capturing movement in still images. Still drawings don’t move (unless you’re at Hogwarts), but even before the game begins, the viewer can tell that the mermaid and jellyfish are moving due to small details in the way they are drawn. Moreover, this will also be the first game where parts of the sprite will move—the mermaid’s arms will rotate as she swims.
In this section, you will learn
You’ll start off making the ocean backdrop, which blends shades of blue and green together.
Like School Escape, Mermaid Splash requires only one backdrop that appears to endlessly scroll. The backdrop blends two colors using the second color square in the Color Toolbar.
Have you ever flown over the ocean in an airplane or seen a photo of the water taken from above? The water isn’t a uniform color, as shown in figure 2.
There are dark spots and light spots depending on the space below the surface. Sometimes the water looks blue and other times it looks green. The ocean backdrop captures that top-down perspective by blending blue and green together.
Open the Backdrop Art Editor and get ready to make the ocean backdrop:
Prior to this point, the gradient tool always faded into white because the second square’s default color is white. By setting a color for the second square, you were able to create a blended ocean color for the finished backdrop, shown in figure 4. You can experiment with other color choices—such as choosing two shades of blue, or moving from the darker navy blue to the greenish-blue. The two colors are less important than the blending because you want the player to feel as if they’re looking at the ocean from above.
Every video game has a set perspective, which is a fancy way of describing the relationship between the eye and the action. Set an apple on a table. First bend down and look at it, straight ahead. That’s a side-view perspective. Now stand up and hover over the apple from above. That’s a top-down perspective. Pick up the apple and you can see it from the first-person point-of-view (in gaming, this would be a game where you’re “looking” through the character’s eyes as if you’re in the game), or have someone else hold the apple and look at it over their shoulder from a few feet away, and you have a third-person point-of-view. Those aren’t the only perspectives used in designing games, but they’re a good starting point. Mermaid Splash uses a top-down view, also known as a bird’s eye view (because it would be the point-of-view of a bird flying above). This gives the player the ability to see the big picture. Take a look back at the games in this book. How would changing the perspective change the game play? What if you were looking down at the bowl in Salad Catch instead of peering at it from the side? What if you were looking at the ghosts through the wizard’s eyes in Wizards vs. Ghosts instead of getting the third-person perspective? When designing a game, think about the various possible perspectives and go with the most interesting angle.
There are three main sprites you need to make for Mermaid Splash: Octavia the mermaid, the turtle, and the jellyfish. All will be drawn as if you’re viewing them from above. Before you begin making the new sprites, get rid of the default cat currently on the Stage.
The player controls a car in Spy Hunter, but in Mermaid Splash, they control Octavia, shown in figure 5, making her swim left and right as she dodges the jellyfish and turtles.
Open the Art Editor to make the mermaid:
You now have the finished mermaid, shown in figure 11. Rename the sprite Mermaid in the Sprite Zone. Why do you need two costumes for the mermaid? This is the first sprite that will have “moving” parts. The arms of the mermaid will rotate between being up or down by alternating between the two versions of the sprite. By coding the switch to go back and forth quickly, the mermaid will appear as if she is swimming through the water. You can do this trick with any sprite, including tilting the wand on the wizard in Wizards vs. Ghosts or Buffy’s legs as she runs over the sand in Beach Blast.
How do you know the mermaid is swimming? One clear sign is her hair. Instead of hanging in a straight line, the hair is tangled to show that it’s floating in the water behind her. You’ll similarly make the tentacles on the jellyfish curl as if they’re propelling him through the water. Think about how you know whether a person in a drawing is standing still or moving. Look at figure 12. The girl on the left is standing still. Her legs are straight, and her arms are folded behind her back in a position one normally would hold if they weren’t moving. The girl on the right is walking off the stage. Her legs are apart, as if drawn mid-stride. Her arms are pumping and her body is slightly tilted to show movement. These small details give the viewer a lot of information.
The turtle is one of two enemies, and he will swim around the ocean, trying to catch the mermaid. You’re seeing the turtle in figure 13 from above; therefore the arms and legs will be visible because he is swimming. If he were standing, only the shell would be visible, because the arms and legs would be tucked beneath him.
Make a new sprite and return to the Art Editor:
The turtle in figure 17 is complete. Rename the sprite Turtle in the Sprite Zone.
The jellyfish in figure 18 are the mermaid’s other enemies, and they serve the same purpose as the other cars in Spy Hunter—to attack the main character. The jellyfish’s tentacles trail behind him because the jellyfish is in motion.
To make the jellyfish, open a new sprite and go to the Art Editor:
The completed jellyfish, shown in figure 20, once again uses the Paintbrush tool on its smallest setting. By changing the size of the brush, you can add fine details to a sprite. The tentacles trail behind the jellyfish to show movement, taking into account the top-down perspective. Don’t forget to rename the sprite Jellyfish in the Sprite Zone.
Like Dribble, Mermaid Splash has an extra sprite in the odds and ends: a retry button. Additionally, you need to make your good friend the barrier line before you can code your game.
You don’t always need to click the green flag to start a new game. You can add a button like the one in figure 21 into your game that will pop up at the end and give the player a chance to restart the action. This type of prompt encourages more game play.
Open a new sprite and go to the Art Editor to make the retry button:
The retry button (figure 24) is complete. Rename it Retry Button in the Sprite Zone and get ready to make one last odds-and-ends sprite.
It’s your old friend, the barrier (or bottom) line, shown in figure 25. Once again, draw it at the bottom of the canvas.
Make a new sprite and draw the barrier line:
Make sure you rename this last sprite Barrier Line in the Sprite Zone.
This racing game has a main character (Octavia the mermaid) and two enemies (the turtle and jellyfish) as well as odds and ends that will enable the game to run. In the next section, you’ll shrink the Sprite Zone by combining the two enemies into one powerful sprite.
You got to make a few choices this game, such as the design for the mermaid’s hair or the color of her tail, but it’s time to put that artistic energy to the test with a few challenges.
If you have a waterproof doll in your house, fill up the sink or bathtub with water and drop her in. Drag her around and observe the hair—how do you know the doll is in motion versus still? Memorize the movement of her hair and then create it on the screen. Double points if you also slightly change the mermaid’s hair in the second costume so it swishes back and forth as her arms go up and down.
Make the tail move as you did the arms. In the second costume for the mermaid, make a small change to the tail so it looks like it is wiggling back and forth each time she swims forward.
Add ripple lines around the mermaid’s body to show movement. Ripple lines are often used in comic books to indicate movement without taking up a large amount of space.
Movement is well covered in physics, mostly because everything on earth moves—even mountains shift ever so slightly over time, due to plates below the surface of the earth, but obviously also people, animals, cars, and baseballs. Even the earth itself rotates. The study of motion—the change in the position of an object—is a big part of physics and the laws of mechanics.
Physicists look at causes for movement (because something needs to set a stationary object into motion), but artists look at ways of capturing movement. Doing so means looking at things like the way muscles tense and stretch while a person runs, or figuring out how to blur a ball moving through the air so it’s clear to the viewer that the object has been thrown and isn’t levitating on the field. Art borrows information gained from other scientists in fields such as kinesiology (the study of body movement), aerodynamics (the study of how objects move through the air), and biology (the study of living things).
Pause for a moment and think about everything you learned in this section:
In the next section, you’ll combine the turtle and jellyfish into a single sprite called Animals. In doing so, you can generate more randomness in your game when it comes to spawning enemies—and do it with fewer scripts. You’ll also make the mermaid’s arms move by coding the game to switch between the two costumes. At the end of the section—your last game section!—you’ll have a racing game called Mermaid Splash.
3.139.97.40