- Home /
How to make background for 2D game
Hey, I want to create background for my 2D game. Which contains of 6 different layers. I dont know how to set them. I also want to move my background. Different layers will move at diferent speed. Can any one help me with this? Thanks in advance...!!!
Answer by Romano · Feb 12, 2014 at 04:43 PM
I'm assuming if the game is 2D you have already selected the defaults for 2D when you started the new project. You can import your 6 background layers into the project, and if its already set up for 2D it'll automatically import them as sprites. You can then drag them into the scene and position them so that they all overlap. To order them correctly what I would then do is select all 6 layers in the hierarchy and in the inspector go to Sorting Layer and create a new one called Background. That won't do anything noticeable, but will come in handy if you add a player. Then you can select each individual background sprite and in the inspector go to Order in Layer. The "furthest away" background layer should be 0, the next 1, etc and the closest would be 5. Or you can number them 1 to 6 if that makes it easier. (I think you need to set your camera's Z position to minus something to make sure the images are visible. I leave the Z position of all my sprites at 0 so they can all be seen by my camera, which is at -10.)
To move the backgrounds at different speeds (called parallaxing) you can write a script to move each layer the opposite direction from the way the camera moves. Each layer should do the opposite of what the camera is doing multiplied by a different parallax scale for each layer. Parallax scale is just a word for how much the background should move relative to the camera's movement. This method requires that your background is a bit larger than the size you set your camera to.
If you haven't already done it I'd recommend downloading Unity's own 2D Platformer project and taking a look at their parallax script:
using UnityEngine;
using System.Collections;
public class BackgroundParallax : MonoBehaviour
{
public Transform[] backgrounds; // Array of all the backgrounds to be parallaxed.
public float parallaxScale; // The proportion of the camera's movement to move the backgrounds by.
public float parallaxReductionFactor; // How much less each successive layer should parallax.
public float smoothing; // How smooth the parallax effect should be.
private Transform cam; // Shorter reference to the main camera's transform.
private Vector3 previousCamPos; // The postion of the camera in the previous frame.
void Awake ()
{
// Setting up the reference shortcut.
cam = Camera.main.transform;
}
void Start ()
{
// The 'previous frame' had the current frame's camera position.
previousCamPos = cam.position;
}
void Update ()
{
// The parallax is the opposite of the camera movement since the previous frame multiplied by the scale.
float parallax = (previousCamPos.x - cam.position.x) * parallaxScale;
// For each successive background...
for(int i = 0; i < backgrounds.Length; i++)
{
// ... set a target x position which is their current position plus the parallax multiplied by the reduction.
float backgroundTargetPosX = backgrounds[i].position.x + parallax * (i * parallaxReductionFactor + 1);
// Create a target position which is the background's current position but with it's target x position.
Vector3 backgroundTargetPos = new Vector3(backgroundTargetPosX, backgrounds[i].position.y, backgrounds[i].position.z);
// Lerp the background's position between itself and it's target position.
backgrounds[i].position = Vector3.Lerp(backgrounds[i].position, backgroundTargetPos, smoothing * Time.deltaTime);
}
// Set the previousCamPos to the camera's position at the end of this frame.
previousCamPos = cam.position;
}
}
The comments in their code do a better job of explaining how it works than I'm doing.
This is just one way of moving backgrounds. You can move them relative to the player's direction and not the camera, if the camera never needs to move. You can get into all sorts of complex ways of parallaxing, but I think this is the simplest one.
Hope this at least points you in the right direction. Good luck!
Thanx a lot @Romano for the help... But actually the problem is that i have created my project in the 3D mode.... So, i think it will not be possible to insert those layers directly in the project.. It will be great help if you can show me how to insert them in the 3D project as 2D background layers.
And my project is a 2D runner game in which i am moving the track towards my character and the character will not move any where.
So, there is no need to move those layers relative to the character. the layers are going to move in only one direction.
If you don't want to stick with the 3D mode then you can go to Edit, Project Settings, Editor and then in the inspector change the default behaviour mode to 2D. Would that work?
Answer by fox2402 · Feb 12, 2014 at 02:37 PM
So in fact, you want your 6 different layers to move at a different speed? I'm not a good artist, but you should try something like adding a script that'll make move your layers, then you adjust the speed as you wish (try to put the variable in public to set it in game)and to set it, just put a plane a make a part of the layer transparent to see the layer below it. I hope that it answer what you wanted.
Answer by nadhimali · Jun 22, 2015 at 06:20 AM
#pragma strict
//javascript for prallax scrolling
// Just Assign your Camera and use this code in any background or foreground
var CameraInUse : Transform ;
//the speed you wants | 1 is the 100% speed
var ScrollSpeed : float;
/* Xshift allows you to move the background horz if you wants
to shift its possition with movement */
var XShift : float;
function Update () {
// you multiplay the Cam X Pos to the scroll speed and the -1 makes it go backward as you go forward
// if ScrollSpeed is 1 then your background speed will be equal to Cam transform in X
transform.position.x = CameraInUse.position.x * (ScrollSpeed * -1);
}
Your answer
![](https://koobas.hobune.stream/wayback/20220613133259im_/https://answers.unity.com/themes/thub/images/avi.jpg)
Follow this Question
Related Questions
PNG files in front of background 0 Answers
Animated background in multiple scenes 0 Answers
Background/overlay scenes (not layers) : Possible in Unity? 1 Answer
Set a constant 2d background? 2 Answers
GameObject behind the background 0 Answers