Kreator
Memulai
Tutorial menengah
Jalur lanjutan

Buat bilah skor

*Konten ini diterjemahkan menggunakan AI (Beta) dan mungkin mengandung kesalahan. Untuk melihat halaman ini dalam bahasa Inggris, klik di sini.

Sebuah bilah skor adalah elemen UI yang menampilkan informasi pemain yang penting untuk permainan pengalaman Anda, seperti statistik level mereka, jumlah mata uang, atau item kekuatan dalam inventaris mereka. Dengan menampilkan bilah skor langsung di layar pemain, Anda dapat menjaga perhatian mereka pada apa yang mereka perlukan untuk mencapai berbagai tujuan dalam pengalaman Anda.

Menggunakan file Gold Rush .rbxl sebagai referensi, tutorial ini menunjukkan kepada Anda cara membuat bilah skor yang melacak jumlah emas yang dikumpulkan pemain, termasuk panduan tentang:

  • Membuat sebuah bingkai di tengah atas layar.
  • Menambahkan ikon mahkota yang mengkomunikasikan apa yang dilacak oleh bilah skor tanpa panduan teks.
  • Memasukkan teks skor yang mencatat jumlah emas yang dikumpulkan pemain.
  • Menguji desain UI Anda di berbagai perangkat yang disimulasi untuk meninjau penampilannya di layar dan rasio aspek yang berbeda.

Buat bingkai

Untuk menampilkan elemen UI di layar setiap pemain, Anda dapat membuat objek ScreenGui dalam layanan StarterGui. Objek ScreenGui adalah wadah utama untuk UI yang muncul di layar, dan layanan StarterGui menyalin kontennya ke setiap wadah PlayerGui pemain saat mereka memasuki pengalaman.

Setelah Anda membuat objek ScreenGui, Anda dapat membuat dan menyesuaikan GuiObjects anaknya sesuai dengan tujuan setiap wadah. Untuk mendemonstrasikan konsep ini, bagian ini mengajarkan Anda cara membuat objek ScreenGui dengan objek anak Frame yang akan berisi ikon dan teks dari bilah skor.

Selain menyesuaikan properti bingkai, bagian ini juga memberikan petunjuk tentang menambahkan objek anak UISizeConstraint dan UIListLayout ke bingkai. Teknik ini memastikan bahwa GuiObjects secara otomatis tersusun secara horizontal saat Anda menyisipkannya ke dalam bingkai, dan bahwa mereka selalu terbaca di ukuran layar yang lebih kecil. Jika Anda tidak mengikuti panduan ini, setiap GuiObject yang Anda tambahkan ke bingkai akan tersusun di luar batas bingkai.

Untuk membuat wadah bingkai di dalam file tempat contoh Gold Rush:

  1. Buat objek ScreenGui untuk menampung UI di layar Anda.

    1. Di jendela Explorer, arahkan ke StarterGui dan klik ikon ⊕. Menu kontekstual ditampilkan.
    2. Sisipkan ScreenGui.

  2. Buat wadah untuk seluruh komponen UI bilah skor.

    1. Sisipkan Frame ke dalam objek ScreenGui.

    2. Pilih Frame yang baru, lalu di jendela Properties,

      1. Atur AnchorPoint ke 0.5, 0 untuk mengatur titik asal bingkai di tengah atas dirinya (50% dari kiri ke kanan bingkai, dan 0% dari atas ke bawah bingkai).
      2. Atur BackgroundColor ke 0.6 untuk membuat latar belakang bingkai berwarna hitam.
      3. Atur BackgroundTransparency ke 0.6 untuk membuat latar belakang bingkai semi-transparan.
      4. Atur Position ke {0.5, 0},{0.01, 0} untuk mengatur bingkai dekat tengah atas layar (50% dari kiri ke kanan layar, dan 1% dari atas ke bawah layar).
      5. Atur Size ke {0.25, 0},{0.08, 0} agar bingkai mengambil sebagian besar tengah layar untuk menarik perhatian pemain (25% secara horizontal, dan 8% secara vertikal).
      6. Atur Name ke ScoreBarFrame.

  3. Tambahkan batasan ke bingkai sehingga kontennya selalu terbaca di ukuran layar kecil.

    1. Sisipkan objek UISizeConstraint ke dalam ScoreBarFrame.
    2. Pilih batasan yang baru, lalu di jendela Properties, atur MinSize ke 0, 40 untuk memastikan bingkai tidak menyusut kurang dari 40 piksel secara vertikal.

  4. Tambahkan objek tata letak ke bingkai supaya kontennya tersusun dari kiri ke kanan dan berada di tengah secara vertikal dalam batas bingkai.

    1. Sisipkan objek UIListLayout ke dalam ScoreBarFrame.
    2. Pilih objek tata letak yang baru, lalu di jendela Properties,
      1. Atur FillDirection ke Horizontal.
      2. Atur VerticalAlignment ke Center.

Tambahkan ikon

Ikon adalah simbol yang mewakili tindakan, objek, atau konsep dalam suatu pengalaman. Menggunakan ikon yang sederhana dan intuitif memungkinkan pemain untuk dengan mudah mengenali apa yang Anda komunikasikan dengan UI Anda tanpa menggunakan teks, yang dapat memenuhi layar dan mengalihkan perhatian dari konten yang penting.

Sebagai contoh, contoh ini menggunakan ikon mahkota emas yang sederhana untuk menunjukkan seberapa banyak emas yang telah dikumpulkan pemain. Ikon ini mudah dikenali sebagai tujuan paling penting dalam pengalaman, dan mencakup detail minimal sehingga tetap terbaca di layar perangkat seluler.

Untuk membuat ulang ikon mahkota emas dalam file tempat contoh Gold Rush:

  1. Sisipkan objek ImageLabel ke dalam ScoreBarFrame.

    1. Di jendela Explorer, arahkan ke ScoreBarFrame dan klik ikon ⊕. Menu kontekstual ditampilkan.

    2. Sisipkan ImageLabel.

  2. Pilih label yang baru, lalu di jendela Properties,

    1. Atur Image ke rbxassetid://5673786644 untuk menjadikan ikon tersebut sebagai mahkota.

    2. Atur BackgroundTransparency ke 1 untuk membuat latar belakang label sepenuhnya transparan.

    3. Atur LayoutOrder ke 1. Ini memastikan ikon tetap menjadi GuiObject pertama di bingkai dari kiri ke kanan saat Anda menyisipkan teks di bagian berikutnya dari tutorial.

    4. Atur Size ke {1.25,0},{1,0} untuk memperlebar area label melebihi lebar bingkai.

    5. Atur SizeConstraint ke RelativeYY untuk mempertahankan rasio aspek ikon dengan mengubah ukuran label sesuai tinggi bingkai induk.

Sisipkan teks skor

Teks skor mencatat skor pemain dalam suatu pengalaman, seperti berapa banyak poin yang mereka peroleh dalam sebuah pertandingan. Penting agar semua teks UI jelas dan mudah dibaca sehingga pemain dapat dengan cepat memahami informasi yang mereka butuhkan untuk berhasil dalam pengalaman Anda.

Sebagai contoh, contoh ini menggunakan teks besar di atas warna yang kontras sehingga tidak menyatu dengan latar belakang yang berisik. Ini sangat penting untuk aksesibilitas karena memastikan teks tetap terbaca saat pemain bergerak melalui ruang 3D, yang mungkin mencakup objek-objek yang memiliki warna sama dengan teks.

Untuk membuat ulang teks skor dalam file tempat contoh Gold Rush:

  1. Sisipkan objek TextLabel ke dalam ScoreBarFrame.

    1. Di jendela Explorer, arahkan ke ScoreBarFrame dan klik ikon ⊕. Menu kontekstual ditampilkan.

    2. Sisipkan TextLabel.

  2. Pilih label yang baru, lalu di jendela Properties,

    1. Atur BackgroundTransparency ke 1 untuk membuat latar belakang label sepenuhnya transparan.

    2. Atur Size ke {1,0},{1,0} untuk melebar label ke seluruh bingkai (100% secara horizontal dan 100% secara vertikal dari bingkai induknya). Label melebar melebihi batas bingkai karena terhalang oleh ikon.

    3. Atur SizeConstraint ke RelativeYY untuk memastikan ukuran label menyesuaikan dengan tinggi bingkai induk, dan mempertahankan rasio aspek ikon. Langkah ini juga membuat label tetap berbentuk persegi dan berada dalam batas bingkai.

    4. Atur Font ke GothamSSm untuk mencocokkan estetika lingkungan.

    5. Atur Text ke 0 untuk memulai skor dari nol.

    6. Atur TextColor3 ke 255, 200, 100 untuk memberikan warna emas pada teks.

    7. Atur TextSize ke 30 untuk membuat teks lebih besar di layar.

    8. Atur TextXAlignment ke Left untuk memastikan teks skor tetap rata kiri di dekat ikon mahkota terlepas dari apakah skor pemain adalah 0, 1.000, atau 1.000.000.

Uji desain

Emulator Device Emulator Studio memungkinkan Anda untuk menguji bagaimana pemain akan melihat dan berinteraksi dengan UI Anda pada berbagai perangkat. Alat ini adalah bagian penting dari desain UI karena rasio aspek viewport Anda di Studio tidak selalu mencerminkan rasio aspek layar yang digunakan pemain untuk mengakses pengalaman Anda, dan penting agar UI Anda terbaca dan dapat diakses di setiap perangkat.

Sebagai contoh, jika Anda tidak menguji UI Anda pada berbagai ukuran layar, pemain dengan layar besar mungkin tidak bisa membaca teks Anda atau memahami ikon Anda, dan pemain dengan layar kecil mungkin tidak dapat melihat ruang 3D karena elemen UI Anda memakan terlalu banyak ruang di layar.

Untuk mensimulasikan UI Anda di berbagai ukuran layar:

  1. Dari menu Test Studio, aktifkan Device Emulator.

  2. Di dropdown resolusi, pilih Actual Resolution. Ini memungkinkan Anda untuk melihat resolusi sebenarnya dari elemen UI Anda pada perangkat yang Anda simulasi.

    Opsi pengaturan Device Emulator ditunjukkan di bagian atas jendela viewport.

  3. Di dropdown perangkat, pilih setidaknya satu perangkat dalam bagian Phone, Tablet, Desktop, dan Console.

©2026 Roblox Corporation. Roblox, logo Roblox, dan Powering Imagination termasuk dalam merek dagang kami yang terdaftar dan tidak terdaftar di AS dan negara lainnya.
Ketentuan·Privasi·Aksesibilitas·Dukungan Pelanggan
Bahasa Indonesia