Unity создает движущийся узор фона

Question

Я новичок в Unity и мне нужна помощь в создании фона, который будет выглядеть примерно так (немного нервно, потому что это рисунок), я хочу, чтобы он был как заполнить каждый размер экрана и иметь размер 1/8 от экран (черный ящик):

Answer 1

Вы можете использовать следующую настройку:

1. Сначала изображение должно иметь границы, подобные этой, и установить режим обтекания для повторения в настройках импорта

   

2. Ваш фон должен быть ScreenSpace Overlay Холст (зависит от вашей настройки курса)

3. В этом Canvas есть объект RawImage, используйте ваше изображение в качестве текстуры и добавьте к нему этот компонент

   [RequireComponent(typeof(RawImage))]
   public class BackgroundController : MonoBehaviour
   {
       [Header("References")]
       [SerializeField] private RectTransform _rectTransform;
       [SerializeField] private RectTransform _parentRectTransform;
       [SerializeField] private RawImage _image;
       [Header("Settings")]
       [SerializeField] private Vector2 repeatCount;
       [SerializeField] private Vector2 scroll;
       [SerializeField] private Vector2 offset;
   
       private void Awake()
       {
           if (!_image) _image = GetComponent<RawImage>();
   
           _image.uvRect = new Rect(offset, repeatCount);
       }
   
       // Start is called before the first frame update
       private void Start()
       {
           if (!_rectTransform) _rectTransform = GetComponent<RectTransform>();
           if (!_parentRectTransform) _parentRectTransform = GetComponentInParent<RectTransform>();
   
           SetScale();
       }
   
       // Update is called once per frame
       private void Update()
       {
   #if UNITY_EDITOR
           // Only done in the Unity editor since later it is unlikely that your screensize changes
           SetScale();
   #endif
           offset += scroll * Time.deltaTime;
           _image.uvRect = new Rect(offset, repeatCount);
       }
   
       private void SetScale()
       {
           // get the diagonal size of the screen since the parent is the Canvas with
           // ScreenSpace overlay it is always fiting the screensize
           var parentCorners = new Vector3[4];
           _parentRectTransform.GetLocalCorners(parentCorners);
           var diagonal = Vector3.Distance(parentCorners[0], parentCorners[2]);
   
           // set width and height to at least the diagonal
           _rectTransform.sizeDelta = new Vector2(diagonal, diagonal);
       }
   }
   

Сначала масштабируется RawImage, чтобы соответствовать диагонали Размер родителя. Так как он уже умещается на экране, это дает нам размеры экрана => всегда заполняет весь экран, независимо от масштаба или поворота (пока ваш RawImage находится в центре экрана курса).

Используя repeatCount, вы определяете, как часто текстура должна быть на фоне.

Затем с помощью scroll вы можете определить, как быстро и в каком направлении должен прокручиваться фон. Сценарий в основном просто обновляет RawImage.uvRect каждый кадр.

Наконец, вы просто поворачиваете RawImage, так что прокрутка идет в нужном вам направлении

Answer 2

Значит, вам нужен какой-нибудь бесконечный фон прокрутки?

Вот простой способ его создания.

1) Вам понадобится наклонное изображение (которое может быть соединены одна сторона с другой без проблем). Вы можете использовать один кадр из вашего GIF. Добавьте его к своим активам (просто перетащите его туда).

2) В вашей сцене Unity создайте новый объект Quad ( GameObject-> 3d Object-> Quad )

3) Перетащите изображение из окна активов прямо на свой Quad. Это применит к ней текстуру.

4) Создайте простой скрипт на вашем объекте Quad. Я вызвал мой RollerScript

using System.Collections;
using UnityEngine;

public class RollerScript : MonoBehaviour
{
    public float speed = 2f;
    public MeshRenderer renderer;

    void Update()
    {
        Vector2 offset = new Vector2(Time.time * speed, Time.time * speed);
        renderer.material.mainTextureOffset = offset;
    }
}

5) Go обратно в редактор и назначил поле визуализации (перетащите объект Quad из иерархии в это поле)

6) Нажмите Play и настройте параметр скорости в окне редактора скриптов. Ваша текстура будет прокручиваться по диагонали вправо-вверх (как на вашем GIF). Если вы хотите другое направление, вы можете изменить эту строку:

Vector2 offset = new Vector2(Time.time * speed, Time.time * speed);

Установите значение x или y для Vector2 равным нулю, если вы не хотите использовать горизонтальную / вертикальную прокрутку. Измените значение x или y на -x или -y, если хотите прокрутить в противоположном направлении.