Stretching Background sprite

Hi, I am making a 2D game for Android and IOS where I have to spawn new background elements as my game progresses during the game play.Example spawn new planets and stars in the current scene, in background as shown in the screenshot below. But I cannot figure a solid way out, of doing it.

What I’v tried so far :

1: Create UI image element using new UI in unity 4.6.1 and set rect transform to stretch height and width with parent canvas ie according to screen size.

Issue: the image stretches with the screen size, but there is no way I can sort the layer with a custom layer.

2:Create 2D gameobject ie Sprite.

Issue: I cannot scale the background sprite to the screen size, thereby showing the camera color(red) on the edges. [Image below].

Also how do I spawn new elements programatically.

Thanks.

For people who are still looking for the answer, I’ve managed to achieve what I wanted using the new UI features. You basically hve to add the “Canvas Scaler” component to the Canvas Element, and scale both the width and height. Here are my inspector settings.

-Create new canvas.

  Component **_Canvas_**: [ Read more about UI.Canvas here.  http://docs.unity3d.com/Manual/UICanvas.html]
         — Render mode :* Screen Space - Camera*.
         — Pixel Perfect : unchecked.
         — Render Camera : *Main camera*.[Which ever camera you want to attach]
         — Plane distance : *100*.
         — Sorting layer : “*Background*” [You'll have to define it; 'Add Layer'--> 'Add Sorting Layer']
         — Order in layer : *0* [How you want]  

  Component _**Canvas Scaler**_:
        — UI Scale mode : *Scale with Screen Size*.
        — Reference Resolution **X** : *1080    *** Y**:*1920. [Potrait mode. Otherwise if Landscape mode.]*
        — Screen Match Mode : *Match width or height*.
        — Match : *0.5*.
        — Reference Pixels per unit : *100*.

Hope it helps someone and eases their work, unlike me who struggled for about a month to find the solution. :smiley:

After reading a number of solutions I combined a few to make something worked for my setup, which seems similar to yours. I’m using Unity 5.2.

I needed a background image to stretch to whatever resolution was thrown at it. In my case it is a solid color. I needed lighting to function on it so camera background was not a solution. Steps to create a stretch sprite/image background in a 2d project.

  1. Create a canvas.
  2. Render mode: Screen Space - Camera
  3. Render Camera: Drag your main camera from the hierarchy into this slot.
  4. Plane Distance: 1 (you may wish to adjust this a bit, but 1 will most likely work. Use the 3d view to see where the canvas is in relation to the rest of your world space objects.)
  5. Order in layer: 0
  6. Now create a UI > Image in side the canvas.
  7. In the Rect Transform click on the square showing the anchor presets. Hold alt and click stretch that includes both directions.
  8. Material: Set to a sprite diffuse for lighting to work.
  9. Done

You can use sprite.creat

Also you can make the sprite and get them ready then just clone in code during game play (Not sure how it will turn out exactly but never hurts to try)

This is an example you shouldn’t use it because well its poorly written just to get you an idea of what i meant


public class Sample: MonoBehaviour {
	public GameObject Planet1, Planet2, Planet3;
	public Vector3 Planet1vec;
	void Update(){
		if (transform.position.y > 10) {
			Instantiate (Planet1, Planet1vec, Planet1.transform.localRotation);
				}
	}
}

First you have to set your ui scale mode to “Scale with screen size”

click on you canvas in your hierarchy, find the component Canvas scaler open the dropdown “ui scale mode”
and select “Scale with screen size”.

For your second question (better if you had in a separate question, please do that for the 2nd time):

just Instantiate as a regular 3d game object and then set its parent to the canvas or any panel you want to.

newItem.transform.parent = myPanel.transform;