Unity创建动人图案背景

Question

我是 Unity 新手，需要一些帮助来创建一个看起来像这样的背景（有点紧张，因为它是 gif），我希望它能够填充每个屏幕尺寸并具有屏幕大小的 1/8（黑盒子）：

Answer 1

您可以使用以下设置：

1. 首先，图像应该有像这样的边框，并在导入设置中将其环绕模式设置为重复

2. 你的背景应该是ScreenSpace Overlay画布（当然取决于你的设置）

3. 在该画布中有一个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即可使滚动向您想要的最终方向移动

请注意，当然还有一个基于纯着色器的解决方案，因为在着色器中您也​​可以访问时间变量。不过我不是着色器专家 ^^