Serries làm Game Không Chiến-Bước 1-Bạn có thể hướng dẫn tôi cách tạo ra một hình nền trôi từ trái qua phải kiểu như con tàu vũ trụ đang bay trong không gian không?

Spread the love

À, cái này hay lắm 🌌 — kiểu nền cuộn (scrolling background) để tạo cảm giác tàu vũ trụ đang bay trong không gian 🚀.
Mình sẽ hướng dẫn bạn cách đơn giản nhất trong Unity 2D:


🔧 Cách 1: Dùng Quad/Sprite + Material lặp texture

  1. Chuẩn bị một hình nền (texture) dạng tile, ví dụ sao, tinh vân… (kích thước nên 512×512 hoặc 1024×1024, dạng seamless để lặp được).
  2. Tạo một Quad hoặc Sprite phủ kín màn hình.
  3. Tạo Material mới → Shader = Unlit/Texture (để không bị ảnh sáng).
  4. Gán texture nền vào material, check Wrap Mode = Repeat trong Import Settings của texture.
  5. Tạo script để di chuyển UV offset:
using UnityEngine;

public class BackgroundScroller : MonoBehaviour
{
    public float scrollSpeed = 0.2f;
    private Material mat;
    private Vector2 offset;

    void Start()
    {
        mat = GetComponent<Renderer>().material;
        offset = Vector2.zero;
    }

    void Update()
    {
        offset.x += scrollSpeed * Time.deltaTime;
        mat.mainTextureOffset = offset;
    }
}
  • Gắn script này vào Quad/Sprite có Material nền.
  • Chỉnh scrollSpeed để nền trôi nhanh/chậm.

🔧 Cách 2: Dùng 2 hình nền nối nhau

Nếu texture của bạn không phải seamless thì dùng kiểu “parallax scrolling”:

  1. Tạo 2 sprite nền đặt cạnh nhau (nối liền).
  2. Viết script di chuyển chúng từ trái sang phải.
  3. Khi một cái chạy hết màn hình, dịch nó ra sau cái kia để lặp lại.

Ví dụ script:

using UnityEngine;

public class LoopingBackground : MonoBehaviour
{
    public float scrollSpeed = 2f;
    private float spriteWidth;
    private Vector3 startPos;

    void Start()
    {
        startPos = transform.position;
        spriteWidth = GetComponent<SpriteRenderer>().bounds.size.x;
    }

    void Update()
    {
        transform.Translate(Vector3.right * scrollSpeed * Time.deltaTime);

        if (transform.position.x >= startPos.x + spriteWidth)
        {
            transform.position = startPos;
        }
    }
}

👉 Bạn chỉ cần duplicate 2 sprite nền đặt sát nhau, cả 2 cùng có script này thì sẽ tạo ảo giác cuộn vô tận.


🎮 Hiệu ứng nâng cao

  • Dùng nhiều layer nền (ngôi sao gần, ngôi sao xa) → tốc độ khác nhau để có cảm giác chiều sâu (parallax).
  • Thêm particle system (sao băng, bụi sáng) cho sinh động.

👉 Bạn muốn mình viết luôn ví dụ parallax scrolling nhiều lớp nền (3 lớp: xa, trung, gần) để giống game bắn tàu ngoài không gian không?

Hãy bình luận đầu tiên

Để lại một phản hồi

Thư điện tử của bạn sẽ không được hiện thị công khai.


*