- Game Design
- Creating the Graphics
- Adding the Code
- Summary
Like this article? We recommend
Like this article? We recommend
Like this article? We recommend
Creating the Graphics
The first step in creating your scrolling-screen environment is to create the sprites and graphics for your game.
As we've mentioned, a sprite is a character, such as Mario in Mario Bros, that you can control in the game. The scrolling-screen game that you will create here has the foundation tools that you need to build a game similar to Mario Bros.
Begin by creating a new movie in Flash MX. Size your new screen to 400 x 300 pixels. (See Figure 2).
Figure
2 The movie is set to 400 x 300 pixels.Create five layers in the Timeline panel. Name the layers as follows: scripts, logic, character, level data, and background (see Figure 3). Select all five layers and then press F6 to add a new keyframe. Your movie will be two frames long.
Figure
3 Five layers were used to create this movie.Select Frame 1 of the background layer. The background layer is the visual placeholder for the background of the game. As you move through the game, the background will move with you.
Select the Rectangle tool and draw a rectangle the size of the screen. In Figure 4, have filled the screen with a radial gradient color that goes from orange to red. You can use any color combination you like.
Select the new background rectangle and select Edit, Copy. Move to Frame 2 of the background layer and select Edit, Paste. You now have the background in both frames. This is important because Frame 1 is the frame where you will be adding your gameplay instructions, and Frame 2 is the frame in which you will be playing the game.
Figure
4 The opening sequence to the game.In Frame 1, you will need to add a button that will allow a user to move to the next screen. I Figure 5, I have used one of the buttons in Window, Common Libraries, Buttons. I have also added some instruction that explains how to play.
Figure
5 You can find the button used for the opening scene in the Common Libraries
menu.Go to the Library panel and create a new instance. Name the instance bar and select the behavior type Graphic.
Open the new bar graphic in Edit view. With the Rectangle tool, draw a rectangle 300 pixels wide by 15 pixels high.
Create a new movie clip in the library and name it platforms. Open the background movie clip in Edit mode.
From the Library panel, drag the bar graphic onto the background movie clip. This will be the space in which you will move. Drag on several of these clips to form an environment similar to the one in Figure 6.
Figure
6 The layout gives you a generic view of how a scene may appear.Move to the far right of the screen. Above the highest bar graphic, use the Rectangle tool to draw an exit screen. Select the drawing you just created and convert the drawing into a movie clip.
Finally, draw a second small rectangle on the screen (see Figure 7). Convert the square into a movie clip named controller.
Figure
7 This is the controller movie clip; the controller manages much of the
interaction between movie clips on the stage.
)
Figure
2)
Figure
3)
Figure
4)
Figure
5)
Figure
6)
Figure
7The next phase is to develop the game sprite—the main character—for the game. Later, you will add some ActionScript that will allow you to control the movement of the sprite.
Create a new movie and name it Sprite. The sprite looks very similar to a famous droid. The droid does not have many moving parts, which makes it easier to animate.
Now follow these steps:
Every five frames, a keyframe needs to be added. Do this 13 times.
Add a new layer across the top of the movie. Call this layer scripts. Add keyframes at Frames 5, 55, 60, and 65. At each of these keyframes, add a stop(); action. These four sections will be used as placeholders. The four different styles of animation needed to bring the droid to life are created between these keyframes.
In Frame 1, the droid is standing still.
The next nine keyframes change the position of the droid to show him leaning forward as if he is moving.
Move the playback head to Frame 55.
The droid needs to be able to jump and fall. For each, the same movement is used. Frame 65 should have the droid leaning back to make him look like he is jumping.
Go to Frame 2 of the movie and select the character layer. Drag an instance of the droid onto the layer. Name this clip ball.
Select Frame 2 of the level data layer. Drag the platform movie clip onto the stage. Name the clip ground.