teachinTech


Creating Game Backgrounds and Graphics

This activity will focus on creating game backgrounds and graphics using both the Construct2 image editor and an external image editor such as GIMP.

Turn In: The altered capx files (5 of them).

In this activity, you are the graphic designer and artist for the graphics used in 5 different games. While you should try to create the best graphics that you can, the focus of the activity is on the process of creating the image files rather than being graded on how good of a graphic designer you are. Do your best, be creative, and have fun with completing the graphics for several games.

Game Backgrounds

One way to create a background for your game is to use the layer's background color property. Open the Platform1.capx game already created. Go to the layer named Background. One of the properties for the layer is the background color. Set the Background color to a somewhat bright and whimsical color. Click on the Background layer then click on the Toggle layer locked icon until there is a closed lock in front of the Background layer. This prevents anyone on that layer from getting changed unless you first unlock it. Save your changes. Chose the Close project from the File menu.

Open up the Physics1.capx file and choose a light grey background. Lock the background layer. Save the file and close the project.

Before looking at a different type of background, in GIMP create a new image of size 64 by 64. Use the Bucket Fill tool with the pattern of ice, marble, or something light in color to fill the entire 64 by 64 canvas. Export the image as a PNG file.

Another type of background is the Tiled Background. This type takes an image and replicates the image to cover the surface selected ... similar to putting down floor tiles.

Open Maze1.capx. Double-click anywhere in Layout 1 to bring up the "Insert New Object" dialog then select Tiled Background. Click on the spot in Layout 1 where you want the background to go (can change later). The Edit image window will open. Click on "Load an image from a file" (the folder icon) and select the PNG file just exported from GIMP. Close the Construct2 Edit Image window. When you do the file added will fill the area selected for the titled background. Stretch the tiled background to fill the entire layout. Lock the background layer, save the file, and close the project.

Tiled background is best done using a specific dimension of image. Below is the message you receive if you do not use one of the optimal file sizes ...

	Prefer power-of-two size images for tiling
	Images sized 32x32, 64x64, 128x128, 256x256 etc. can be drawn better quality when tiled.

Open Driving1.capx and add a tiled background. You can create your own background image in either GIMP or the Construct2 image editor. Use either one or more of the patterns in GIMP that seem appropriate for a driving game or use your own creativity. Lock layer, save file, and close project.

Open up the MyGame1.capx game and choose the type of background you want for your game.

Game Players and Non-Player Characters (NPC)

Each of the games need players and non-player characters. Open the Maze1.capx game file. Right click on in the Layout 1 and pick "Insert new object". Choose Sprite and in the "Name when inserted" type in Horizbar then click Insert. Click anywhere on Layout1 to place that image. Click the resize button (line with two arrows) and put in 10 by 100. Use the Fill tool to fill the entire box with black. Create a new sprite object named Vertbar that is 100 by 10 and fill it in with black.

The maze game needs a main character, an enemy of the main character, and a power object (something that when the player hits it, the player gets points or other rewards). Create each of these characters as a sprite using the Construct2 Image Editor as the way to complete the art work. Take time to tryout the tools and the options available. Look at other game graphics for ideas of things that might look good in a maze game. Once finished, save the file and close the project.

Open the Physics1.capx game file. For this game, create a wooden block image and a rock image in GIMP then export each of them as JPEG images. In the Physics1.capx game, insert a new sprite name woodblock then use the "Load an image from a file" to load up the wooden block. Create a new sprite named rock and load the rock into that sprite object. Create a new sprint object named ramp and make its width twice as big as its length (use the resize button). Choose your favorite color then draw a line from the upper left corner down to the lower right corner. Fill in the bottom left half of the triangle. Create a player for the physics game. The player should have a mostly round shape. Save the file and close the project.

Open the Driving1.capx game file. Since this is a driving game, we need a car (or vehicle of your choosing) for the player. Create a railing that will be used to section off the course. Also, create a barrel like image for an obstacle. Save your file and close the project.

Open the MyGame.capx game file and create the players and NPC that you want for your game.

We will not be creating any sprites for the Platform1.capx game at this time.


Copyright © 2021 Eric Schumm. Permission granted to freely use this in your classroom.