If you use Corona SDK, you know that it’s a powerful and easy to use tool for creating mobile games. However, the platform is limited to just two dimensions, although they are coming out with built-in ways to simulate 3-D effects. As a game developer, you can somewhat overcome this limitation by using what’s known as the depth of field concept.
Although I’ll be referring to Corona SDK in my example, the depth of field theory can be applied to any development platform and to almost any graphic object.
What is Depth of Field?
If you’ve dabbled in photography, you already know what depth of field is. For those of us that don’t know, I’ll try to explain. Depth of field is the blurry effect that you see in photographs caused by the focus on a particular object over others. Depth of field is based on two concepts, perception of focus and emulating distance.
In the first concept, the perception of focus will be used on two objects or two planes to create an environment with depth. One object will be the focal point and the other objects or planes will be out of focus. The out of focus objects will almost always appear blurry to help control the viewer’s focus.
The second concept is emulating distance. When you look at scenery, the closet objects to you will appear larger and objects further away will appear smaller. Depth of field uses this concept to reinforce the illusion of depth in the scene. By making objects in a 2D environment larger or smaller, the viewer’s mind will be tricked into assuming there’s depth in the scene.
If you’ve played video games before or even looked at some popular photographs, you’ve already seen the depth of field concept in use, but you may not have recognized the effect. If you run a quick Google Image search for depth of field, you can see hundreds of examples for this style of photography. The photos that you will see range from landscapes to wedding photos. In each depth of field photograph, you instantly know what the photographer wants the viewer to look at.
By using depth of field, you can control the focus of the scene and create depth by focusing in on the main subject while keeping other elements out of focus. Although I enjoy developing with Corona SDK, this effect is a simple but powerful way to overcome the 2D limitations of the Corona SDK platform.
Taking a Closer Look
In the following examples, I’ll be explaining how depth of field can be used in mobile games. Feel free to use the depth of field concept in any of your mobile applications with the SDK of your choice.
Now that we know what depth of field is, let’s look at an example of a scene that does not use the depth of field concept.
In this scene, both birds are in focus and it appears like a flat screen to the viewer. Although this scene may be good enough for some games, we can use the depth of field concept to make the scene more interesting to the player and really bring it to life. In the next scene, you’ll see a basic example of the depth of field concept in use.
By using the depth of field concept, this scene has simulated distance by keeping the bird on the left in focus and leaving the bird on the right out of focus. Making the out of focus bird smaller also reinforces the perception of distance.
We can also reverse the scene to make the focal point appear further away. Making the larger objects blurred and keeping the focal point in focus accomplish this reversal. Let’s take a look at an example of this scene reversal.
In the reversal scene, we’ve made the smaller bird the focal point and we’ve tricked the viewer into assuming the smaller bird is further away by blurring the closest objects.
Creating the image
By now, you may be curious about how these graphics were created. If you have Photoshop or a similar graphic editing tool, you can use a Gaussian Blur to create depth of field scenes. I’m sure any type of blur will work, but I’ve had the most success with the Gaussian Blur. Let’s take a look at how to create a blurred and a non-blurred graphic for our app.
Step 1
With Photoshop open, create a new document that’s 150 pixels by 150 pixels. The default setting for the other options will work for this tutorial.
Step 2
Next, click on the custom shapes tool and select Bird 2 from the shape dropdown menu. In this tutorial, I’m using the shape of a bird. Any shape will work.
Step 3
Now that we’ve selected a shape, let’s change the foreground color to a nice blue color by clicking on the Set Foreground Color option.
Step 4
With the shape tool, create a bird shape inside the document and try to make the bird fill up most of the document.
Step 5
Let’s add a simple border to our shape to give it some definition.
Step 6
Before we add the Gaussian Blur to our shape, let’s go to File > Save for Web > Devices to save the shape as a PNG file to our project folder. The unblurred shape that we are saving will be used as the focal point in our mobile application.
Step 7
After we’ve saved the non-blurred shape, we can now add the Gaussian Blur. With most shapes, you can just add a Gaussian Blur without having to complete any extra steps. In our case, we will have to use the Flatten Image option in Photoshop because we’re using a border. If we don’t flatten the image, the blur will produce some unexpected results.
Right-click on the shape layer and click on Flatten Image. After the image is flattened, add the Gaussian Blur by going to Filter > Blur > Gaussian Blur.
Step 8
With our Gaussian Blur applied to our shape, we can now save the shape to our project folder using the same instructions in Step 6.
After you’ve completed these eight steps, you should have two birds in your project folder, a clear and crisp image of a bird and a blurry bird. You can now incorporate these images into your next mobile application.
In this tutorial, I hope you’ve learned how to use the depth of field concept to bring your games to life. Although I’ve used a bird in my tutorial, you can use almost any object to create a scene with depth using the depth of field concept. You can apply depth of field to the background on your next 2D side scroller or apply the concept to certain elements of your next horror game. Thanks for reading!