To use an existing graphic file as the basis for defining the sprite, click on the Load Sprite button. This displays a standard Open dialog window, allowing you to specify the name and location of the graphic file you want to use. Once selected, the Open dialog window is closed and the sprite’s graphic image should be visible in the Sprite Properties window. Note that Game Maker displays three pieces of information about the image just under the Load Sprite button, indicating the image’s width and height as well as a count of the number of subimages that image consists of (if the file is an animated .gif file).

By default, all sprites are defined as transparent, which means that only the sprite and not the rectangular background in which the sprite resides is displayed. However, if you want, you can clear the Transparent checkbox to display the entire contents of the graphic image.

If you need to, you can edit a sprite once it has been loaded or you can create a new sprite from scratch by clicking on the Edit Sprite button. When you do this, the Sprite Editor window is opened showing the sprite’s image, as demonstrated in Figure 4.2.

Figure 4.2. Examining the graphic image that makes up a sprite.

If a sprite consists of multiple subimages, all of the subimages will be displayed. By default, the Show Preview option is disabled; however, by selecting this checkbox, you can see a preview of the resulting animation for the sprite on the left-hand side of the window. When working with subimages, it is essential that they all have the same width and height dimensions; otherwise, the animation sequence will not work correctly.

You can test the animation at various speeds by overtyping the value displayed in the Speed text field. Note, however, that this setting does not control the speed of the animation in the game. This is determined by the speed assignment configured for the room in which the sprite’s object is placed. If you want, you can also change the background color for the sprite by clicking on the Background Color button and selecting a different color from the Color dialog window that appears.

Another way of animating sprites in your games, in addition to adding animated gif files, is to work with strips. A strip is a graphic file that contains all of the graphic images needed to generate an animated sequence. An example of a small graphic strip is provided in Figure 4.3.

Figure 4.3. A strip made up of eight images stored in two rows of four.

As you can see, graphics are drawn on strings in rows and columns. To use them, you must load them into Game Maker and then provide Game Maker with a little information about how the graphics are organized. To do so, open the Sprite Editor window and click on File > Create from Strip. This will open a standard Open dialog window, which you can use to specify the name and location of the graphic file containing the strip. Once this is done, the window shown in Figure 4.4 opens.

Figure 4.4. An example of a graphic strip made up of eight images organized into a single row.

In order to work with the strip, you have to provide Game Maker with a little information. In the case of the example shown in Figure 4.4, the strip consists of eight images stored in a single row. Each image is 64 pixels wide and 64 pixels tall. So, to set things up, type 8 in the Number of images field, 8 in the Images per row field, and 64 in both the Image width and Image height fields. Once you have made these changes, you will be able to visually verify that Game Maker has correctly mapped out the strip into separate subimages, as demonstrated in Figure 4.5.

Figure 4.5. Game Maker now has the information needed to generate subimages from the strip.

Once the strip has been mapped out, you can click on the OK button to close the Loading a strip image window. You will then see each of the separate subimages that Game Maker has created in the Sprite Editor window, as demonstrated in Figure 4.6.

Figure 4.6. Click on the Show Preview checkbox to preview the animation that Game Maker will generate for the sprite.

You can use Gamer Maker’s built-in image editor to modify any graphic image or subimage. To do so, double-click on the image or subimage in the Sprite Editor window. When you do, the image editor application starts and the image or subimage is automatically loaded into it, as demonstrated in Figure 4.7.

Figure 4.7. Using Game Maker’s image editor to modify a graphic image.

This image editor works very much like the Microsoft Windows Paint program. Coverage of how to work with this program or any other paint program is outside the scope of this book. Once you have used the image editor to modify the graphic image, close the Image Editor window and click on Yes when prompted to save the changes you have made. The results of your changes should be immediately evident when you are returned to the Sprite Editor window.

Sprites have a number of properties that you can modify from the Sprite Properties window. The first of these properties is precise collision checking. Collisions occur when two objects touch one another. Collision detection is a key aspect of most computer games. Game Maker supports two types of collision detection: bounded rectangle collision detection and precise collision detection.

As demonstrated in Figure 4.8, sprites are images displayed within transparent bounded rectangles in which the sprite is completely enclosed. Here, a jet fighter plane is depicted on a transparent background.

Figure 4.8. An example of a typical sprite inside its transparent bounded box.

With bounded rectangle collection detection, a collision occurs when two bounded sprites come into contact with one another. Figure 4.9 demonstrates how bounded collisions occur. Here two bullet sprites have both collided with the bounded portion of the sprite.

Figure 4.9. A bounded collision occurs when the bounded boxes within which sprites exist come into contact with each other.

Bounded collisions occur when both sprites’ bounding rectangles make contact. As a result, each rectangle is made up of just four sets of coordinates, making it easy to detect collisions and consume fewer resources in games where large numbers of objects are moving about, colliding with one another. However, the disadvantage of bounded collisions is that they lack precision. Therefore, bounded collisions sometimes occur in situations where two sprites are not actually on a true collision course with one another (e.g., near misses).

If your games require greater precision, you can enable the Precise collision checking option. When enabled, collisions occur only when the pixels that make up the sprites come into contact with each other, as demonstrated in Figure 4.10.

Figure 4.10. With Precise collision checking the pixels that make up sprites must come into contact with one another.

The advantage of precise collision detection is that it removes all ambiguity from your games when collisions and near misses occur. The disadvantage of precise collision detection is that it consumes more resources and may slow down game play on resource-constrained computers.

Another sprite property, disabled by default, is the smooth edges option. When enabled, this option makes the outer edge of the sprite transparent, which can sometimes make sprites look less blocky. All sprites are converted to textures that must be moved into memory before they can be used by games. By default, Game Maker loads sprites only when they are needed. However, by enabling the preload texture, you instruct Game Maker to automatically load the sprite when the game loads. This will eliminate any delay during game play. However, if your game consists of lots of sprites, particularly large complex sprites, enabling this option for every sprite can use up a lot of memory and make things run unnecessarily slow.

All sprites have a point of origin, which identifies how the sprite aligns by default with the grid that makes up rooms. By default, every sprite’s point of origin is its upper-left corner. However, you can change this using the mouse to point and click on the location on the sprite where you want to set its origin. In response, coordinates representing the sprite’s point of origin are updated on the Sprite Properties window. A common point of origin for sprites is the center, which you can specify by clicking on the Center button.

By default, the size of a sprite’s bounding rectangle is determined when you add it. However, if you want, you can modify its size using the settings made available in the Bounding Box section of the Sprite Properties window. In most situations, it’s best to let Game Maker set up a sprite’s bounding rectangle itself.

By default, Game Maker always displays the contents of the Objects tab whenever you create a new room. As shown in Figure 4.16, this is the tab that you must select in order to add instances of objects to rooms. This is accomplished by clicking on the context menu icon located at the end of the Object to Add with Left Mouse text field and then selecting the sprite representing the object you want to work with from the list that is displayed. Once selected, the object’s sprite is displayed in a graphic pane loaded at the top of the Objects tab. You can then add instances of the object to the room by left-clicking on the appropriate location in the room. Instances automatically align with the room’s grid based on how you set the origin of its sprite.

Figure 4.16. Select the Objects tab to add instances of objects to your games.

By default, if you place one instance on top of another, Game Maker will remove the underlying instance. However, if you disable the Delete Underlying option, you can turn off this behavior.

Game Maker applies a number of configuration settings to every room that you add to your games. These settings are displayed on the Room Properties window’s Settings tab, shown in Figure 4.17.

Figure 4.17. Configuring a room’s property settings.

Every room needs a name and can be assigned a text string that will be used to display a caption message that will appear in the game window’s titlebar when the room is loaded. By modifying the Width and Height settings, you can specify the height and width (in pixels) of the room. Every room has a Speed property that determines the speed at which object instances move in the room. By default, all rooms are assigned a speed of 30.

Every room also has a Persistent setting, which is disabled by default. As a result, when you leave a room in a game and return back to it later in the game, the room is returned to its initial status. By enabling the Persistent option, you instruct Game Maker to maintain the state of the room so that when returned to it, things are restored to the state that they were when you left the room. Lastly, there is a Creation code button located at the bottom of the Settings tab that when clicked opens a code editor window, into which you can add a GML script that will automatically be run whenever the room is opened.

If you have added a tile set background to your game, you can work with that tile set by clicking on the Room Properties window’s Tiles tab as shown in Figure 4.18.

Figure 4.18. Using a tile set in the development of a maze game.

Tiles are often used in the creation of maze games as a means of spicing up their appearance. This works better than using large numbers of differently drawn wall objects, which if used will consume large amounts of system resources. To work with a tile set you first need to modify the grid size of the room to match the dimension of the tiles in the tile set. Once you have modified the room’s grid size and have added a background to your application and configured it as a tile set, all you have to do is click on the Tiles tab and then click on the context menu icon in the middle of the tab pane in order to select the tile set. Once added, you can select the different pieces of the tile set and begin adding them to the room, using them to outline the shape of the walls you want to create, as demonstrated in Figure 4.19.

Figure 4.19. An example of a partially drawn wall created using a tile set.

With the outline of the wall now laid out using decorative tiles, all you need to do is create a square-shaped sprite with the same dimensions as the tiles in the tile set and then create an object, assigning it the sprite. Once this new wall object has been created, use it to outline the wall, placing as many instances of the object as it takes to cover all of the tiles. Once this task has been completed, open the wall object and make it invisible.

This leaves the wall invisible but still in place. The player will not be able to see the wall even though it is still there. Instead, the decorative tiled outline of the wall is all that is visible. This approach reduces the overall number of resources required to create and manage the game by allowing you to work with a single object instead of having to create a dozen or more different objects that would have otherwise been required to create the wall.

Most rooms in games include either a background color or one or more backgrounds. To assign a solid color background to a room, click on the Backgrounds tab as shown in Figure 4.20 and select the Draw Background Color checkbox. If you plan on assigning a background image to be used as the room’s background, you should instead clear the Draw Background Color option.

Figure 4.20. Adding a background to a room.

You can assign a single graphic image to be used as the background for the entire room or you can assign two or more graphic images to fill in the room’s background. Game Maker allows you to assign as many as eight backgrounds to a room, although at most you only usually need 1 or 2. To assign a single background image to the room, select the Background 0 entry (selected by default) and then click on the context menu icon located in the middle of the Backgrounds tab and select the background from the list that appears. Next, select the Visible When Room Starts option so that the background will be made visible when the room loads.

The next configuration setting on the Backgrounds tab is the Foreground Image option, which when enabled turns the background image into a foreground image, drawing it on top of everything in the room. To be useful, you need to make the background transparent when you add it to the game. The Backgrounds tab has three options that you can use to tell it what to do when the size of the background is smaller than the size of the room to which it has been assigned.

The last two settings located at the bottom of the Backgrounds tab allows you to set the room up as a horizontal or vertical scrolling background by specifying the speed at which the background should be moved within the room. To create a horizontal scrolling game, assign a speed to Hor. Speed and leave Vert. Speed set to zero. To create a vertical scrolling game, do the opposite. By creating scrolling room, you can create the illusion that game characters are moving through a larger virtual world, which is a key technique used in the development of scrolling shooter games. You learn how to create one such game in Chapter 7.

The last of the tabs on the Room Properties window is the Views tab. The settings on this tab allow you to draw different parts of a room at different locations on the screen. Views let you limit how much of a room is visible at any one time. Views can also be used to create a split-screen view within a room, so that two players can view the game from their own slightly different perspectives. Views are also instrumental in creating rooms with a status panel, where the panel remains fixed while the rest of the room scrolls.

As shown in Figure 4.21, you must select the Enable the Use of Views option in order to use views with a room.

Figure 4.21. You can define as many as eight views per room.

Settings that you can use to configure each view are shown below the views list. For starters, you can specify whether a view should be enabled when the room is started. Each view that you define lets you view the area within a rectangular portion of the room to be seen. You must define two things for each view, the actual area within the room that is visible within the view and the area on the screen where the view is to be placed.

Hint

Game Maker maps out the coordinates of the area in which game play occurs using a coordinates system depicted in Figure 4.22.

Figure 4.22. Game Maker’s coordinate system provides a pixel-based representation of the game area.

As shown in Figure 4.22, the upper-left corner of the game play area is located at coordinates (0, 0). The game area has both an X-axis and a Y-axis.

You define the coordinates for this area by first specifying the upper-left corner of the view and then the width and height of the view. You then repeat these steps by specifying the location on the screen where the view is to be displayed. You will often want to configure a view to follow the movement of an object, typically the object controlled by the player during game play. To set this up, click on the context menu icon located at the end of the Object Following field and then select the object for which the view should follow.

Rather than have the view constantly move every time the object it tracks moves, you typically want to allow the object to move around within the view without constantly adjusting it, moving it only when the object reaches a predefined boundary within the view. To set this up, you specify the number of horizontal (Hbor) and vertical (Vbor) pixels from the outer edge of the view at which this boundary resides. You can also configure the speed at which views change by specifying a horizontal (Hsp) and vertical (Vsp) speed. A value of —1 forces an immediate change. A higher value may result in a better transition but may also result in a small delay in the updating of the view when the object being tracked moves out of sight.

Now that all of the visible objects have been accounted for, let’s create the object that the players cannot see.

The right and left paddles must move in response to keyboard input. Specifically the right paddle must move up when Player 2 presses the up arrow key and down when Player 2 presses the down arrow key. It must stop moving when the player releases both of these keys and it must also react when it bumps into the upper or lower wall.

The controller object, as already stated, gets things started by creating the first instance of the ball and initializing player scores. It must also specify the font and color used to draw player scores on the screen and draw both players’ initial scores.