Bagaimana Menerapkan Pengguliran Tak Terbatas di Unity UI

Pengguliran tanpa batas di UI mengacu pada teknik di mana konten (seperti tampilan daftar, kisi, atau gulir) secara dinamis memuat dan menampilkan item tambahan saat pengguna menggulir, sehingga menciptakan ilusi konten tanpa batas. Fitur ini biasa digunakan dalam aplikasi dan game untuk menyajikan kumpulan atau koleksi data yang besar tanpa membebani pengguna dengan semua item sekaligus.

Dalam tutorial ini, kita akan mempelajari cara mengimplementasikan sistem pengguliran tak terbatas yang efisien dalam kerangka UI Unity. Kami akan membahas pengaturan tampilan gulir, memuat konten secara dinamis, menangani peristiwa gulir, dan mengoptimalkan kinerja.

Langkah 1: Menyiapkan Proyek

Mulailah dengan membuat proyek 2D atau 3D baru di Unity. Beri nama proyek Anda "InfiniteScrollingUI". Pastikan Anda telah menginstal komponen UI yang diperlukan dengan memilih Window -> Package Manager dan menginstal paket UIElements dan TextMeshPro jika belum diinstal.

Langkah 2: Membuat Tampilan Gulir

Di Editor Unity:

1. Klik kanan di jendela Hierarchy dan pilih UI -> ScrollView.
2. Perluas ScrollView di Hierarki untuk menemukan objek game Viewport dan Content.
3. Hapus komponen default Text dari objek game Content.

Langkah 3: Menyiapkan Templat Item

Buat templat UI untuk item yang akan ditampilkan dalam tampilan gulir:

1. Klik kanan pada objek game Content dan pilih UI -> Text. Ini akan menjadi templat item Anda.
2. Sesuaikan tampilan elemen Teks agar sesuai dengan desain Anda (misalnya ukuran font, warna).
3. Nonaktifkan templat item dengan menghapus centang pada komponen Teks agar tidak terlihat di dalam game.

Langkah 4: Membuat Skrip Perilaku Pengguliran Tak Terbatas

Buat skrip untuk menangani pemuatan dinamis dan tampilan item dalam tampilan gulir. Klik kanan pada folder Assets, pilih Create -> C# Script, dan beri nama "InfiniteScrollingUI". Klik dua kali skrip untuk membukanya di editor kode Anda.

// InfiniteScrollingUI.cs
using UnityEngine;
using UnityEngine.UI;
using System.Collections.Generic;

public class InfiniteScrollingUI : MonoBehaviour
{
    public RectTransform itemTemplate;
    public RectTransform content;

    private List items = new List();

    void Start()
    {
        InitializeItems();
    }

    void InitializeItems()
    {
        for (int i = 0; i < 20; i++)
        {
            RectTransform newItem = Instantiate(itemTemplate, content);
            newItem.gameObject.SetActive(true);
            newItem.GetComponent().text = "Item " + i;
            items.Add(newItem);
        }
    }

    public void OnScroll(Vector2 scrollDelta)
    {
        if (scrollDelta.y < 0 && content.anchoredPosition.y < -itemTemplate.rect.height * (items.Count - 10))
        {
            RectTransform firstItem = items[0];
            items.RemoveAt(0);
            firstItem.anchoredPosition = items[items.Count - 1].anchoredPosition + Vector2.up * itemTemplate.rect.height;
            items.Add(firstItem);
        }
        else if (scrollDelta.y > 0 && content.anchoredPosition.y > 0)
        {
            RectTransform lastItem = items[items.Count - 1];
            items.RemoveAt(items.Count - 1);
            lastItem.anchoredPosition = items[0].anchoredPosition - Vector2.up * itemTemplate.rect.height;
            items.Insert(0, lastItem);
        }
    }
}

Lampirkan skrip InfiniteScrollingUI ke objek game ScrollView. Di jendela Inspektur, tetapkan Item Template dan Content RectTransforms ke bidangnya masing-masing.

Langkah 5: Menangani Acara Gulir

Tambahkan pemicu peristiwa ke ScrollView untuk mendeteksi peristiwa gulir dan memanggil metode OnScroll dari skrip InfiniteScrollingUI.

1. Pilih objek game ScrollView di Hierarki.
2. Di jendela Inspektur, klik Tambahkan Komponen dan pilih Pemicu Peristiwa.
3. Klik Tambahkan Jenis Acara Baru dan pilih Gulir.
4. Seret objek game ScrollView dari Hierarki ke bidang Object pada acara gulir baru.
5. Di tarik-turun Event, pilih InfiniteScrollingUI -> OnScroll.

Langkah 6: Menguji Sistem Pengguliran Tak Terbatas

Tekan tombol putar di Unity untuk menguji sistem gulir tak terbatas Anda. Gulir ke atas dan ke bawah di ScrollView untuk melihat item dimuat dan didaur ulang secara dinamis.

Kesimpulan

Menerapkan sistem pengguliran tak terbatas di Unity UI adalah teknik berharga untuk menangani kumpulan data besar dan meningkatkan respons antarmuka pengguna. Dengan memanfaatkan pemuatan dan daur ulang konten dinamis, Anda dapat menciptakan pengalaman penelusuran yang lancar bagi pengguna, baik mereka menavigasi daftar, kisi, atau komponen UI lainnya.

Bereksperimenlah dengan berbagai tata letak UI, kecepatan gulir, dan pengoptimalan untuk menyesuaikan sistem gulir tak terbatas dengan kebutuhan spesifik proyek Anda. Pendekatan ini tidak hanya meningkatkan keterlibatan pengguna tetapi juga memastikan aplikasi Anda bekerja secara efisien di berbagai perangkat dan platform.