To get started, the first thing we'll need to do is add in our backgrounds:
Art Assets
folder in the example code folder for this chapter, bring the background
sprite into the Project tab under the Assets/Sprites
folder by dragging and dropping it there.These assets are also created by Kenney and the art provided in addition to additional plane colors and assets can be found at http://kenney.nl/assets/tappy-plane.
background
sprite from the Project tab, you'll notice that the Inspector tab should have Texture Type set to Sprite (2D and UI)
. If not, change it and then press the Apply button.At this point, I want to point out the Pixels Per Unit property as it is important for our logic in the code we'll write later. By default, it is set to 100
, so the background image (which is 800 x 480) will be 8 x 4.8 units in the Unity scene. This works out nicely for this case because we will mostly be using the width, but for traditional sprites that come in powers of 2 values (such as 64 x 64), you may wish to change this value to the width or height value to make the image easier to work with.
We now have our background centered in the world, but you'll notice that if we play the game we see this blue background around our image, which is fairly unappealing:
When dealing with mobile games, you want to have your project support many different resolutions and aspect ratios, so we will zoom our camera in so that if we're using many of the common aspect ratios seen for games it'll look correct for us.
Main Camera
object. From the Inspector tab, go to the Camera component and change the Size property to 2.2
.The Size property (known as the orthographicSize
property in code) is half of the vertical size of the camera. Our background image is 480 pixels tall so setting the Size property to 2.4 would make the camera fit vertically exactly with the image. However, setting the Size property to 2.2 zooms us so that we have some leeway for working in different resolutions on the width side of things.
You can also press the + button and create your own custom resolutions to support such as the 1920x1080 of iPhone 6s Plus or qHD and wqHD of some more recent Android devices.
For a very detailed solution towards the thinking of supporting multiple resolutions, though this is in a different game engine, it does a good job explaining the thought process for it. See http://v-play.net/doc/vplay-different-screen-sizes/.