Adding a background - 04 - Space Shooter - Unity Official Tutorials

We're making a space game and space is, well, black.

But flat black is boring.

So let's add a background to our game.

First, let's begin by deactivating our player

game object, it will simply be in the way for now.

Next create a quad to hold our

background image by selecting Create - Quad

from the Hierarchy's Create menu.

Rename this Background.

Where is it?

We've created a quad, but we can't see it in our game.

Let's switch to the Scene view to see what's going on.

There it is, it's oriented in a way

that's not facing the main camera.

The main camera can't see it.

To adjust this let's first reset

the game object's transform to make sure

it is at origin

and then let's change the background's

transform rotation along the X axis.

Let's set this value to 90 degrees.

Now the background quad is facing

towards our main camera.

and we can see it now in the game view.

I'm going to switch back to the Scene view.

The stock quad comes with a

component we don't need.

We can safely remove the mesh collider

component as we won't be using it.

Next, let's add a texture to this background.

In Assets there is a directory called Textures.

Inside Textures we will find an image

tile_nebula_green.

Let's select this image.

When we select an image and inspect it

we are looking at that image's importer

We will leave the importer settings as they are.

But if the preview window is open

we can some additional information about this image.

If the preview window is collapsed

we can drag the bar titled Preview upwards

until we see the image clearly.

The information at the bottom of the Preview window

tells us the current resolution of the

image in our project, the current compression method,

if any, and the total size of the imported image.

What is important for us to note here is that

this is a very large image.

1024 by 2048.

So this image is more than large enough to stretch

behind our 600 by 900 game view.

This is also telling us that the image is not square

but rectangular.

There are a number of ways that we can get

a texture on to a mesh.

Let's try one of the most simply ways.

Grab the image, drag it,

and drop it on the background quad in the scene.

Done!

Let's get a better view of our background.

Use Frame Selected to focus the

Scene view camera

The image has been applied to the background quad.

It's dark and squashed but it's there.

What just happened?

We can see that the texture has been attached

to a material and the material has been

associated with the quad by a reference

in the mesh renderer.

Our mesh filter holds the mesh data,

in this case the quad.

The mesh renderer renders that mesh using

the materials in the mesh renderer's Materials Array.

The renderer is only able to use a texture

if it's part of a material.

We did not create a material, we simply

dragged the texture on to the quad.

It was Unity that created the material for us.

When we drag a texture on to a mesh,

if Unity cannot find an associated material

with that texture Unity will create

a new material for us.

Then Unity will automatically add that material

to that mesh renderer's Materials Array.

This automatic material will always

with the default diffuse shader.

Let's look at our background.

Is it ready to go? No.

It's small, square, squashed,

a bit dark and a little hard to see.

The first thing we need to do is scale up

our quad to fit our background.

We can do this by changing the

transform's Scale properties.

The quad is a very simple 2 dimensional plane.

We can scale the quad along the X and Y axis,

but not along the Z axis.

Trying to scale the Z axis does nothing.

Let's reset the scale now that we've played with it.

What scale should we use?

Let's first look at the texture itself.

It's 1024 by 2048.

To keep the image undistorted when we scale it up

we should keep an aspect ratio of 1:2.

This means our X scale should always be

half of our Y scale.

Or conversely our Y scale must always

be twice our X.

To see this properly in the game let's

switch back to the Game view.

In the Game view select the background quad

and scale it along the X axis

until it fills the screen.

It's more than filling the screen when we use

a scale value of 12 or more.

We have enough resolution that we can afford

to lose some of the image off the sides.

So let's pick a good round number,

like 15. It's more than big enough.

So that we can maintain our 1:2 aspect ratio

what is 15 times 2? 30.

If we have 15 in our X we need 30 in our Y.

Now the background fills the game view

with no distortion.

Let's look at it in the Scene view.

Use Frame Selected to focus the

Scene view camera to the background's new size.

and we can see that we now have a nice big background.

The background is still a bit too dark

The material is using a simple diffuse shader.

This means that the texture is being treated like

a simple painted surface using matt,

not glossy paint.

The surface of our background is being lit

by the lights in our scene.

These lights have been setup to light our player ship.

1 light, the rim light, is shining up

from below and won't light the surface

of the background at all.

The other 2 have very shallow angles

that only rake the surface of the quad.

So our background isn't receiving very

much light from our lighting rig.

This is great for our player ship

but not so great for our background.

We could add a light shining straight

down to light the background.

But this would add another light to the ship

lighting it in a way that we wouldn't want.

We could put the background and it's new light

on a separate layer so that the background

light did not mix with out existing lights

on the player ship.

But there is a better way.

For more information on layers and how to use them

see the information linked below.

If we think about our background image

we simply want to have it display

behind our game.

It's a flat plane, we do not need specialised

lighting like we need for our ship

and it's a waste to shine a directional light

on a simply quad just to flat light it's contents.

When dealing with a material,

how that material treats the texture

depends upon what shader we choose.

Diffuse treats the texture like matte paint.

The specular shader will treat that texture

like glossy paint, or shiny plastic.

There are many other built-in shaders

that come with Unity.

More can be found on the Asset Store

and we can write our own custom shaders.

For more information on shaders

see the information linked below.

For our purposes we don't need any

specialised lighting on our background.

As a matter of fact we don't need any lighting at all.

For our background, let's change the shader.

Let's choose Unlit - Texture

for the shader on the nebula material.

Now our background is independent

of our lighting system, and it displays

the texture exactly as it looks

in the original image

and it uses no lights at all.

In the game it's nice and bright.

If we change the shader back to diffuse

we can see how much darker it is in the game.

Let's bring back our player and check that

everything looks good in context

now that we have a background in place.

Okay, something's wrong with our ship.

Let's look at it in the Scene view

to see what's going on.

Ah, the player ship is buried

in the middle of the background,

they are both at origin.

The background should be behind the game.

So let's grab the background and adjust it.

along the Y axis.

We can slide it in to a good position by hand

or we can simply set the transform position

on the Y axis to -10.

Now the background is down and out of the way.

When we look back at the game we can't

see any change to the background,

except for the fact that it is no longer

in the middle of our space ship.

This is due to the fact that our camera

is orthographic and has no perspective.

The background can be any distance from the

camera as long as it's within it's clipping plane

and still look exactly the same.

We have now setup our background and our lighting.

Next let's begin to create game play elements

by moving the player ship.