From TDN

Series: Making Mighty Fist!

In this series of tutorials you will learn the same tips and tricks used to create Mighty Fist, a tech demo showing the ease of use and power of the Torque Game Builder. Mighty Fist was created as a simple platformer demo, displaying just how quick and easy it is to bring your 2d game idea to life! The levels in Mighty Fist were built by one artist using the TGB Level Builder. You will walk along with the same artist through each step of accomplishing the look and feel. Boot up TGB! Let's get started!

Part 1: Accomplishing Depth

The goal of this tutorial is to accomplish the feeling of depth through the use of brightness levels.

Here we have a scene from the Mighty Fist night level. You can see that the layers are already set up, and objects have been scaled to set the base work for scene depth. We want to accomplish a greater feeling of depth by creating contrast between objects in the foreground and background. The major problem area in this scene is the edge of the foreground building where it meets the dumpster and the middle layer.

I've created a fade image in photoshop by simply filling the canvas with black and adding a gradient alpha channel. I made sure to fade out the alpha on the sides of the image to avoid hard edges on the imagemap in TGB. I import the imagemap and drop it on to the scene.

Now that we've got our fade image on the scene, let's put it to good use. We'll start where the dumpster meets up with the edge of the building. Although the two objects are already differentiated in color and scale, altering the brightness levels will add a much greater feeling of depth between these two objects. Let's use this fade image as a shadow from the house cast across the face of the dumpster.

Now that we have our fade object in position, we'll want to rotate it to get a nice diagonal gradient across the dumpster. Holding alt, click and drag any corner on the object to rotate it. Let's just snap the object to a 45 degree angle as shown.

Now we're going to open up the properties panel by clicking on the "Edit" tab. In Mighty Fist, the foreground buildings are set to Layer 12. Let's set the fade object to Layer 13, just behind the building. You should see how we're already starting to add more depth to the scene. Sweet! Let's keep going!

Now let's tackle the same issue with the edge of the building against the background. Let's drop in another fade object and line it up the edge of the building. We're just going to set up the height to be the same as the building, and eyeball the width until it looks like something we'll be happy with.

Click back on the "Edit" tab and set the layer number to 13, just behind the foreground building. We're now starting to see the foreground building pop forward on the scene.

Let's just copy and paste this object, we'll use the arrow keys to nudge the new fade object to the right side of the building. Since we've made a copy of the previous object, the layer settings and scale will stay intact. Now we can just click the edit tab and set "Flip Horizontal" to checked.

Let's continue to add fade objects to the scene in problem areas. We want to add more depth between the foreground and background, so we'll drop in a fade object and rotate it to be a vertical gradient. We want objects in the foreground, like the dumpster, to pop forward and objects like the car in the background to drop back.

We want this object to be effective across the entire level, so let's move it to the desired height and scale it from one end of the level to the other.

Once again we'll need to set our layer for this object. This time we're going to set it to 15, between the foreground layers and the background layers. You should see that the background has dropped back a bit, and the foreground pushed forward. Sweet! Let's move on to other problem areas.

As we're creating this scene in TGB, we want to mindful of the composition. So far we've been trying to accomplish depth in the scene, we should also take advantage of this technique to focus the scene on the player. With that in mind, the fence can be a problem area. The hue and brightness level is similar to character. This will flatten the scene and we'll start to loose the character visually. Let's use the same technique we used on the dumpster.

Drop in another fade object, scale as desired, and set it to the correct layer. You can see from this screenshot that I altered the blending modes to lower the alpha from the default 255 to 210. To find the blend modes, click on the "Edit" tab and open the "Blending" dropdown. This is very useful to fine tune specific objects that use one source image. In this case, we used blend modes to lower the opacity without needing to make a new PNG file.

Let's create a second image in photoshop using a blurred circular alpha channel. This image will be useful for objects like the fire hydrant. Let's Import the PNG as an ImageMap and drop it on the scene.

Now that we have our circular fade object centered on the fire hydrant, we can click the "Edit" tab and find the "Blending" dropdown. Let's play with the alpha until we're happy with it. Remember that the range is between 0 and 255. At 255 the image will use the same alpha as the source PNG. This is a good thing to remember when setting up your alpha channel in photoshop, since we can always lower the alpha in TGB, but we cannot increase it beyond the source image.

Let's set the layer so we can see the fade in action behind the fire hydrant. The fire hydrant is on layer 4, so we'll set the circular fade object on layer 5, right behind the hydrant. It will still be in front of the character. The usefulness of this fade around the hydrant will be more apparent when the player and background objects pass behind it.

Let's change the proportions on the fade object to better fit the fire hydrant. Since we already have it centered on the fire hydrant, we can just hold the control key on the keyboard and click and drag any corner. Play around a bit more with the scale and blend modes until you are happy with the results.

Now let's drop in another circular fade object. We're going to use this behind the player to help pop him forward on the scene. Let's set the layer so that it renders behind the player. Now, mouse over the object. Buttons should pop up over the object. The center button will allow us to mount the object to another object. This will be very useful since the player will be running and jumping (and punching) all over the scene.

With the mount button selected we simply point and click where we want the object to mount. I've already set up link points on Mighty Fist where I would like the fade object to be placed. To set up a link point, mouse over the selected object (in this case, we want the player) Click the button displaying the chain-link image, just to the left of the mount button. Point and click where you want your link points to be. When you select another object and choose to mount, you can snap it to that link point by mousing near it.

Now that we've got our shadow mounted to the player, let's lower the opacity on the blend modes to make it a little more subtle. Sweet!

We can use these techniques and repeat the process across the entire map. Using only two additional PNG files we spiced up this whole level and gave it a lot more depth and character! Give yourself a pat on the back, because punching never looked so good!