CODEWITHSUNDEEP
c#unity-game-enginetexturesoffsettiling
TommyE
TommyE

Reputation: 368

Scroll 2D/3D background via texture offset

I have been trying to make an infinite scrolling 2D background in Unity using a quad to display a Texture. My idea was to change the offset of the quad depending on the player's position. For some reason when I change the offset my image does not repeat properly and once an offset of 2 has been reached completely disappears.

An image of 3 different x offset values on my texture

If anyone knows how to fix this if you could get back to me it would be much appreciated.

enter image description here

Upvotes: 5

Views: 18284

Answers (2)

Anton Nikonov
Anton Nikonov

Reputation: 11

Loop Background Image Animation in Canvas:

  1. Create background Canvas.

  2. Canvas Setup:

    Render Mode > Screen Space - Camera.

    Render Camera > Main Camera.

    Order In Layer > -1.

  3. Import the Image into your project folder.

  4. Image Setup:

    Texture Type > Sprite 2D and UI.

    Mesh Type > Full Rect.

    Wrap Mode > Mirror.

  5. Add a UI/Image in your background Canvas and set Anchor Presets to Stretch.

  6. Create new Material in your project folder.

  7. Material Setup:

    Shader > UI/Default.

  8. Background Image Setup:

    Source Image > Your Image (step #5).

    Material > Your Material (step #7).

  9. Create BackgroundAnimation.cs Script and use code below.

  10. Attach your script to the Background Image.

    using UnityEngine;
using UnityEngine.UI;

public class BackgroundAnimation : MonoBehaviour
{
private Image _image;

private readonly float _scrollSpeed = 0.125f;

private void Awake()
{
    _image = GetComponent<Image>();
}

private void Start()
{
    _image.material.mainTextureOffset = new(0, 0);
}

private void Update()
{
    ScrollBackground();
}

private void OnApplicationQuit()
{
    _image.material.mainTextureOffset = new(0, 0);
}

private void ScrollBackground()
{
     Vector2 textureOffset = new(0, Time.time * _scrollSpeed);
    _image.material.mainTextureOffset = textureOffset;
}
}

Upvotes: 0

Programmer
Programmer

Reputation: 125315

Select the original Texture not the GameOBject.

1. Change Texture Type to Texture.

2. Change Wrap Mode to Repeat.

3. Click Apply. Done!

enter image description here

Latest version of Unity menu for Textures has changed. See the below image:

enter image description here

Now to animate the texture from script,

1. Create a Quad GameObject -> 3D Object ->Quad. Scale the Quad to the size you want

2. Create a light. GameObject->Light->Directional Light. You can adjust the light Intensity to whatever you like.

3. Drag your Texture/Sprite to the Quad in the Scene View.

Now for your script:

public GameObject quadGameObject;
private Renderer quadRenderer;

float scrollSpeed = 0.5f;

void Start()
{
    quadRenderer = quadGameObject.GetComponent<Renderer>();
}

void Update()
{
    Vector2 textureOffset = new Vector2(Time.time*scrollSpeed,0);
    quadRenderer.material.mainTextureOffset = textureOffset;
}

For 2D, you can also use a Plane or Quad from the GameObject ---> 3D Object menu and the code above should work fine.

Upvotes: 5

Related Questions