Terapkan desain di Studio | Dokumentasi

Menerapkan desain Anda adalah proses membuat wireframe Anda di Studio menggunakan elemen UI bawaan dan kustom dengan skrip yang memicu UI Anda secara kontekstual. Langkah menarik dari tutorial ini adalah di mana Anda dapat melihat semua desain dan kerja keras Anda bersatu menjadi satu set alur kerja yang kohesif yang lengkap dan siap untuk interaksi pemain.

Menggunakan file permainan laser tag contoh .rbxl sebagai referensi, bagian dari kurikulum desain antarmuka pengguna ini menunjukkan kepada Anda cara menghidupkan perencanaan UI Anda, termasuk panduan tentang:

Mengambil ID aset dari perpustakaan aset UI sehingga Anda dapat mereproduksi komponen UI permainan laser tag contoh.
Meniru berbagai perangkat langsung di Studio untuk melihat bagaimana UI Anda ditampilkan di berbagai layar dan rasio aspek.
Membuat objek ScreenGui, SurfaceGui, dan BillboardGui untuk menampilkan UI Anda di layar pemain, permukaan bagian, dan dalam ruang 3D, masing-masing.

Setelah Anda meninjau teknik di bagian ini, Anda dapat menerapkannya pada proyek Anda sendiri untuk membuat komponen UI yang menarik yang membantu pemain menavigasi apa yang dapat mereka lakukan dalam permainan Anda.

Instruksi di bagian tutorial ini menunjukkan kepada Anda cara mereproduksi komponen UI dengan tepat menggunakan Perpustakaan Aset Desain UI. Proses ini memakan waktu sekitar 90 menit atau kurang dari awal hingga akhir. Jika Anda tidak ingin menggunakan nilai yang disediakan, Anda dapat menyesuaikan setiap elemen UI untuk memenuhi spesifikasi permainan Anda sendiri, atau menggunakan contoh itu sendiri untuk sisa tutorial.

Dapatkan perpustakaan aset

Perpustakaan aset adalah kumpulan aset yang dapat Anda tambahkan ke inventaris Anda untuk akses dan penggunaan yang mudah. Perpustakaan aset yang akan Anda gunakan untuk proyek Anda dari Toko Creator mencakup sembilan aset elemen UI 2D individual, dan versi akhir dari komponen tujuan, pemilih blaster, dan informasi pemain yang Anda buat di bagian tutorial ini.

**Ikon MultiBlaster**
rbxassetid://14309094777

**Ikon SingleBlaster**
rbxassetid://14309094641

**Ikon Tim Pink**
rbxassetid://14309678581

**Trapezoid Terbalik**
rbxassetid://14304827304

**Ikon Tim Hijau**
rbxassetid://14309678701

**Multi-directional Fade**
rbxassetid://14304827147

**Ikon Tombol Ledakan - Default**
rbxassetid://18308375067

**Ikon Tombol Ledakan - Ditekan**
rbxassetid://18308372597

**Ikon Crosshair**
rbxassetid://14400935532

Ikon Hit Marker
rbxassetid://14401148777

**Ikon Panah Pilihan**
rbxassetid://14309187282

**Border Fade**
rbxassetid://14309518632

Untuk mendapatkan perpustakaan aset dari inventaris Anda ke dalam permainan Anda:

Tambahkan perpustakaan aset ke inventaris Anda.
1. Arahkan ke halaman detail perpustakaan aset di Toko Creator.
2. Di sudut kanan atas, klik tombol Dapatkan Model. Perpustakaan aset sekarang ada di inventaris Anda, dan Anda dapat menggunakan kembali aset ini di proyek mana pun di platform.
Di Studio, arahkan ke tab Beranda, lalu klik tombol Toolbox. Jendela Toolbox terbuka.
Di jendela Toolbox, klik tab Inventaris. Penyortiran Model Saya ditampilkan.
Klik menu dropdown, lalu pilih penyortiran Paket Saya.
Klik ubin Komponen UI Layar Akhir, lalu di jendela Explorer, pilih Komponen Selesai, lalu seret ke dalam layanan StarterGui. Anda sekarang dapat mengaktifkan komponen akhir mana pun untuk merujuk desain mereka.

Meniru perangkat

Emulator Perangkat Studio memungkinkan Anda untuk menguji bagaimana pemain akan melihat dan berinteraksi dengan UI Anda di berbagai perangkat. Alat ini adalah bagian penting dari proses implementasi karena rasio aspek viewport Anda di Studio tidak selalu mencerminkan rasio aspek layar yang digunakan pemain untuk mengakses permainan Anda, dan penting bahwa UI Anda dapat dibaca dan diakses di setiap perangkat.

Sebagai contoh, jika Anda tidak menguji UI Anda pada berbagai ukuran layar, pemain dengan layar besar mungkin tidak dapat 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 meniru UI Anda di berbagai ukuran layar:

Dari menu Uji Studio, aktifkan Emulator Perangkat.
Di dropdown resolusi, pilih Resolusi Aktual. Ini memungkinkan Anda melihat resolusi sebenarnya dari elemen UI Anda di perangkat yang Anda tiru.
Di dropdown perangkat, pilih setidaknya satu perangkat dalam bagian Telepon, Tablet, Desktop, dan Konsol.

Buat objek ScreenGui

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

Anda dapat membuat beberapa objek ScreenGui untuk mengatur dan menampilkan pengelompokan elemen UI secara kontekstual selama permainan. Sebagai contoh, permainan laser tag contoh mencakup lima objek ScreenGui terpisah yang awalnya dinonaktifkan hingga pemain memenuhi berbagai kondisi selama alur pengguna utama permainan:

HUDGui - Menampilkan informasi kunci tentang permainan saat pemain aktif dalam satu putaran, seperti tujuan dan total poin setiap tim.
PickABlasterGui - Menampilkan semua pilihan blaster saat pemain memulai atau bergabung kembali dalam satu putaran.
ForceFieldGui - Menampilkan grid heksagonal saat pemain memilih blaster dan sementara mereka tidak dapat dikalahkan.
OutStateGui - Menampilkan batas gelap di sekitar layar saat pemain ditandai keluar.
RoundResultsGui - Menampilkan overlay gelap di atas layar dengan informasi tentang tim mana yang memenangkan putaran.

Setelah Anda membuat objek ScreenGui, Anda dapat membuat dan menyesuaikan GuiObjects anaknya sesuai dengan tujuan setiap wadah. Untuk menunjukkan, di bagian-bagian berikutnya, Anda akan belajar bagaimana menerapkan elemen UI untuk tiga kategori informasi yang perlu diketahui pemain untuk berhasil dalam permainan laser tag contoh. Anda dapat menyesuaikan bagian mana pun dari proses ini untuk memenuhi spesifikasi permainan Anda sendiri.

Untuk membuat objek ScreenGui:

Di jendela Explorer, arahkan ke layanan StarterGui, lalu klik ikon ⊕. Menu kontekstual ditampilkan.
Masukkan ScreenGui.
Ganti nama ScreenGui sesuai dengan konteks elemen UI anaknya.
Ulangi proses ini untuk setiap pengelompokan elemen UI yang perlu Anda tampilkan di layar setiap pemain.

UI Tujuan

Mengikuti praktik terbaik hierarki visual dari Wireframe Your Layouts, bagian ini mengajarkan Anda bagaimana menerapkan semua elemen UI di layar yang berkaitan dengan tujuan permainan. Pengelompokan elemen UI ini berada di dekat bagian atas layar karena tujuan dan poin setiap tim memiliki signifikansi terbesar dalam cara memenangkan permainan.

Sebagai contoh, contoh ini menyediakan komponen UI tujuan yang dirujuk pemain untuk mengetahui apa yang perlu mereka lakukan untuk berhasil dalam satu putaran. Saat pemain menandai anggota tim musuh dan mendapatkan poin, komponen ini melacak skor setiap tim terhadap tujuan keseluruhan dalam prompt header. Untuk tinjauan tingkat tinggi tentang semua skrip klien dan server yang bekerja sama untuk melacak poin, lihat Lacak poin dalam Kurikulum Pemrograman Gameplay.

Untuk mereproduksi UI tujuan dengan tepat dalam contoh permainan Laser Tag:

Buat wadah untuk seluruh komponen.
1. Masukkan Frame ke dalam objek HUDGui ScreenGui.
  1. Di jendela Explorer, arahkan ke layanan StarterGui.
  2. Arahkan ke objek HUDGui anaknya, lalu klik ikon ⊕. Menu kontekstual ditampilkan.
  3. Dari menu kontekstual, masukkan Frame.
2. Pilih Frame baru, lalu di jendela Properties,
  1. Atur AnchorPoint ke 0.5, 0 untuk mengatur titik asal frame di tengah atas dirinya (50% dari kiri ke kanan frame, dan 0% dari atas ke bawah frame).
  2. Atur BackgroundTransparency ke 1 untuk membuat latar belakang frame sepenuhnya transparan.
  3. Atur Position ke {0.5, 0},{0.03, 0} untuk mengatur frame dekat tengah atas layar (50% dari kiri ke kanan layar, dan 3% dari atas ke bawah layar sehingga ada sedikit buffer).
  4. Atur Size ke {0.5, 0},{0.13, 0} sehingga elemen frame mengambil sebagian besar bagian atas layar untuk menarik perhatian pemain (50% secara horizontal, dan 13% secara vertikal).
  5. Atur Name ke Objective.
3. OPTIONAL
  Masukkan UIAspectRatioConstraint ke dalam Objective untuk memastikan rasio aspek label tetap sama tidak peduli ukuran layar pemain. Contoh ini mengatur properti UIAspectRatioConstraint.AspectRatio ke 7.
Buat wadah untuk objek prompt tujuan.
1. Masukkan Frame ke dalam Objective.
2. Pilih Frame baru, lalu di jendela Properties,
  1. Atur AnchorPoint ke 0.5, 0 untuk mengatur titik asal frame di tengah atas dirinya (50% dari kiri ke kanan frame, dan 0% dari atas ke bawah frame).
  2. Atur BackgroundTransparency ke 1 untuk membuat latar belakang frame sepenuhnya transparan.
  3. Atur Position ke {0.5, 0},{0, 0} untuk mengatur frame di tengah wadah (50% dari kiri ke kanan frame induk, dan 0% dari atas ke bawah frame induk).
  4. Atur Size ke {1, 0},{0.67, 0} sehingga komponen UI pemilihan mengambil lebih dari setengah wadah dari atas ke bawah (100% secara horizontal dan 67% secara vertikal dari frame induk).
  5. Atur Name ke ObjectiveDisplay.
Buat elemen judul.
1. Masukkan ImageLabel ke dalam ObjectiveDisplay.
2. Pilih ImageLabel, lalu di jendela Properties,
  1. Atur AnchorPoint ke 0.5, 1 untuk mengatur titik asal label di tengah bawah dirinya (50% dari kiri ke kanan label, dan 100% dari atas ke bawah label).
  2. Atur BackgroundTransparency ke 1 untuk membuat latar belakang label sepenuhnya transparan.
  3. Atur LayoutOrder ke -1.
  4. Atur Position ke {0.5, 0},{0.34, 0} untuk mengatur label dekat tengah atas frame (50% dari kiri ke kanan frame induk, dan 34% dari atas ke bawah frame induk).
  5. Atur Size ke {0.46, 0},{0.34, 0} untuk memperlebar area prompt menjadi hampir setengah dari frame (46% secara horizontal dan 34% secara vertikal dari frame induk).
  6. Atur Name ke Header.
  7. Atur Image ke rbxassetid://14304828123 untuk menampilkan trapezoid.
  8. Atur ImageTransparency ke 0.15 untuk membuat header semi-transparan.
3. OPTIONAL
  Masukkan UIAspectRatioConstraint ke dalam ImageLabel untuk memastikan rasio aspek label tetap sama tidak peduli ukuran layar pemain. Contoh ini mengatur properti UIAspectRatioConstraint.AspectRatio ke 13.781.
4. Masukkan TextLabel ke dalam Header untuk menampilkan judul.
5. Pilih label baru, lalu di jendela Properties,
  1. Atur AnchorPoint ke 0.5, 0.5 untuk mengatur titik asal label baru di tengah dirinya (50% dari kiri ke kanan label, dan 50% dari atas ke bawah label).
  2. Atur BackgroundTransparency ke 1 untuk membuat latar belakang label sepenuhnya transparan.
  3. Atur Position ke {0.5, 0},{0.5, 0} untuk memindahkan label ke tengah label induknya (50% dari kiri ke kanan label induk, dan 50% dari atas ke bawah label induk).
  4. Atur Size ke {0.62, 0},{0.55, 0} untuk memperlebar ruang teks menjadi lebih dari setengah label induk (62% secara horizontal dan 55% secara vertikal dari label induk).
  5. Atur Name ke HeaderTextLabel.
  6. Atur FontFace ke Montserrat untuk sesuai dengan estetika futuristik.
  7. Atur Weight ke Medium untuk menebalkan font.
  8. Atur Text ke TUJUAN.
  9. Aktifkan TextScaled.
Buat elemen prompt.
1. Masukkan ImageLabel ke dalam ObjectiveDisplay.
2. Pilih ImageLabel, lalu di jendela Properties,
  1. Atur AnchorPoint ke 0.5, 1 untuk mengatur titik asal label di tengah bawah dirinya (50% dari kiri ke kanan label, dan 100% dari atas ke bawah label).
  2. Atur BackgroundTransparency ke 1 untuk membuat latar belakang label sepenuhnya transparan.
  3. Atur Position ke {0.5, 0},{1, 0} untuk memindahkan label ke tengah bawah frame induknya (50% dari kiri ke kanan frame induk, dan 100% dari atas ke bawah frame induk).
  4. Atur Size ke {0.89, 0},{0.66, 0} untuk memperlebar ruang teks menjadi hampir seluruh lebar frame induk (89% secara horizontal dan 66% secara vertikal dari frame induk).
  5. Atur Name ke Body.
  6. Atur Image ke rbxassetid://14304827265 untuk menampilkan trapezoid terbalik.
  7. Atur ImageColor3 ke 0, 0, 0 untuk mewarnai gambar hitam.
  8. Atur ImageTransparency ke 0.3 untuk membuat header semi-transparan.
3. OPTIONAL
  Masukkan UIAspectRatioConstraint ke dalam ImageLabel untuk memastikan rasio aspek label tetap sama tidak peduli ukuran layar pemain. Contoh ini mengatur properti UIAspectRatioConstraint.AspectRatio ke 13.781.
4. Masukkan TextLabel ke dalam Body untuk menampilkan prompt.
5. Pilih label baru, lalu di jendela Properties,
  1. Atur AnchorPoint ke 0.5, 0.5 untuk mengatur titik asal label baru di tengah dirinya (50% dari kiri ke kanan label, dan 50% dari atas ke bawah label).
  2. Atur BackgroundTransparency ke 1 untuk membuat latar belakang label sepenuhnya transparan.
  3. Atur Position ke {0.5, 0},{0.5, 0} untuk memindahkan label ke tengah label induknya (50% dari kiri ke kanan label induk, dan 50% dari atas ke bawah label induk).
  4. Atur Size ke {0.85, 0},{0.39, 0} untuk memperlebar ruang teks menjadi lebih dari setengah label induk (85% secara horizontal dan 39% secara vertikal dari label induk).
  5. Atur Name ke BodyTextLabel.
  6. Atur FontFace ke Montserrat untuk sesuai dengan estetika futuristik.
  7. Atur Weight ke Medium untuk menebalkan font.
  8. Atur TextColor3 ke 255, 255, 255 untuk membuat teks putih di latar belakang gelap.
  9. Atur Text ke Tag pemain lawan untuk mendapatkan poin! Tim pertama yang mencapai %d poin menang..
  10. Aktifkan TextScaled.
Buat wadah untuk penghitung tim tujuan.
1. Masukkan Frame ke dalam Objective.
2. Pilih Frame baru, lalu di jendela Properties,
  1. Atur AnchorPoint ke 0.5, 1 untuk mengatur titik asal label di tengah bawah dirinya (50% dari kiri ke kanan frame, dan 100% dari atas ke bawah frame).
  2. Atur BackgroundTransparency ke 1 untuk membuat latar belakang frame sepenuhnya transparan.
  3. Atur Position ke {0.5, 0},{1, 0} untuk mengatur frame di tengah bawah wadah (50% dari kiri ke kanan frame induk, dan 100% dari atas ke bawah frame induk).
  4. Atur Size ke {0.44, 0},{0.27, 0} sehingga komponen UI pemilihan mengambil kurang dari setengah wadah dari kiri ke kanan (44% secara horizontal dan 27% secara vertikal dari frame induk).
  5. Atur Name ke TeamPointCounter.
Buat padding untuk penghitung tim.
1. Masukkan objek UIListLayout ke dalam frame dari langkah 5.
2. Pilih objek UIListLayout, lalu di jendela Properties,
  1. Atur Padding ke 0.025, 0 untuk memberikan ruang antara penghitung tim yang akan datang.
  2. Atur FillDirection ke Horizontal sehingga setiap penghitung tim ditampilkan berdampingan.
  3. Atur HorizontalAlignment ke Center sehingga setiap penghitung tim sejajar di tengah satu sama lain.
Buat elemen penghitung tim hijau.
1. Masukkan ImageLabel ke dalam TeamPointCounter.
2. Pilih ImageLabel, lalu di jendela Properties,
  1. Atur BackgroundTransparency ke 1 untuk membuat latar belakang label sepenuhnya transparan.
  2. Atur Position ke {0.5, 0},{1, 0} untuk memindahkan label ke tengah bawah frame induknya (50% dari kiri ke kanan frame induk, dan 100% dari atas ke bawah frame induk).
  3. Atur Size ke {0.5, 0},{1, 0} untuk memperlebar label menjadi setengah lebar frame induk (50% secara horizontal dan 100% secara vertikal dari frame induk).
  4. Atur Name ke TeamACounter.
  5. Atur Image ke rbxassetid://14304826831 untuk menampilkan fade arah.
  6. Atur ImageColor3 ke 88, 218, 171 untuk mewarnai gambar hijau mint.
3. Konfigurasikan atribut kustom untuk melacak bahwa label ini untuk tim hijau.
  1. Di jendela Properties, arahkan ke bagian Attributes, lalu klik ikon plus. Dialog pop-up ditampilkan.
  2. Di kolom Name, masukkan teamColor.
  3. Di menu dropdown Type, pilih BrickColor.
  4. Klik tombol Simpan.
  5. Atur atribut teamColor baru ke Mint.
4. Masukkan TextLabel ke dalam TeamACounter untuk menampilkan prompt.
5. Pilih label baru, lalu di jendela Properties,
  1. Atur AnchorPoint ke 1, 0.5 untuk mengatur titik asal label baru di tengah kanan dirinya (100% dari kiri ke kanan label, dan 50% dari atas ke bawah label).
  2. Atur BackgroundTransparency ke 1 untuk membuat latar belakang label sepenuhnya transparan.
  3. Atur Position ke {0.95, 0},{0.5, 0} untuk memindahkan label ke kanan label induknya (95% dari kiri ke kanan label induk, dan 50% dari atas ke bawah label induk).
  4. Atur Size ke {0.85, 0},{0.39, 0} untuk memperlebar ruang teks menjadi lebih dari setengah label induk (85% secara horizontal dan 39% secara vertikal dari label induk).
  5. Atur FontFace ke Montserrat untuk sesuai dengan estetika futuristik.
  6. Atur Weight ke Bold untuk menebalkan font.
  7. Atur TextColor3 ke 255, 255, 255 untuk membuat teks putih di latar belakang gelap.
  8. Atur Text ke -.
  9. Aktifkan TextScaled.
  10. Atur TextXAlignment ke Right.
6. Masukkan objek UIStroke ke dalam TextLabel, lalu di jendela Properties, atur Color ke 8, 78, 52 untuk memberi garis tepi pada dash dengan stroke hijau gelap.
Buat elemen penghitung tim pink.
1. Duplikat TeamAICounter dan anak-anaknya.
2. Pilih TeamACounter duplikat, lalu di jendela Properties,
  1. Atur Name ke TeamBCounter.
  2. Atur Image ke rbxassetid://14305849451 untuk menampilkan fade arah di arah yang berlawanan.
  3. Atur ImageColor3 ke 255, 170, 255 untuk mewarnai gambar pink karnasi.
  4. Atur atribut teamColor ke Carnation Pink.
3. Pilih TextLabel duplikat dari TeamBCounter, lalu di jendela Properties,
  1. Atur AnchorPoint ke 0, 0.5 untuk mengatur titik asal label baru di tengah kiri dirinya (0% dari kiri ke kanan label, dan 50% dari atas ke bawah label).
  2. Atur Position ke {0.05, 0},{0.5, 0} untuk memindahkan label ke kiri label induknya (5% dari kiri ke kanan label induk, dan 50% dari atas ke bawah label induk).
  3. Atur TextXAlignment ke Left.
4. Pilih UIStroke duplikat dari TeamBCounter, lalu di jendela Properties, atur Color ke 158, 18, 94 untuk memberi garis tepi pada dash dengan stroke pink gelap.
Rujuk skrip ReplicatedStorage berikut dalam file tempat contoh Laser Tag yang secara programatis memperbarui prompt tujuan dan melacak poin tim.

Skrip berikut memerlukan serangkaian skrip modul yang bekerja sama untuk mengatur tampilan Heads Up Display (HUD) utama, termasuk setObjective dan startSyncingTeamPoints. Setelah seorang pemain bergabung dalam satu putaran dan memilih blaster mereka, skrip ini memastikan semua elemen UI HUD ditampilkan dengan tepat untuk status pemain, perangkat, dan status tim.

local Players = game:GetService("Players")

local setPlayerPortrait = require(script.setPlayerPortrait)
local setPlayerName = require(script.setPlayerName)
local startSyncingTeamColor = require(script.startSyncingTeamColor)
local setObjective = require(script.setObjective)
local setupTouchButtonAsync = require(script.setupTouchButtonAsync)
local startSyncingTeamPoints = require(script.startSyncingTeamPoints)
local disableMouseWhileGuiEnabled = require(script.disableMouseWhileGuiEnabled)
local setupHitmarker = require(script.setupHitmarker)

local localPlayer = Players.LocalPlayer
local gui = localPlayer.PlayerGui:WaitForChild("HUDGui")

setPlayerPortrait(gui)
setPlayerName(gui)
startSyncingTeamColor(gui)
setObjective(gui)
startSyncingTeamPoints(gui)
disableMouseWhileGuiEnabled(gui)
setupHitmarker(gui)
setupTouchButtonAsync(gui)

Sekarang, setelah seorang pemain memilih blaster mereka, UI tujuan ditampilkan di bagian atas layar mereka, dan melacak poin setiap tim.

UI Blaster

Mengikuti praktik terbaik hierarki visual dari Wireframe Your Layouts, bagian ini mengajarkan Anda bagaimana menerapkan semua elemen UI di layar yang berkaitan dengan blaster pemain. Pengelompokan elemen UI ini mengambil sebagian besar ruang layar dekat tengah layar karena berfungsi sebagai titik fokus untuk menarik perhatian pemain ke aksi di ruang 3D, dan memiliki signifikansi terbesar untuk bermain permainan.

Crosshair

Crosshair adalah elemen UI yang memberi tahu pemain di mana mereka akan membuat dampak saat mereka menembakkan senjata mereka. Elemen UI ini adalah persyaratan gameplay yang penting untuk permainan tembak-menembak orang pertama karena pemain perlu dapat mengarahkan blaster mereka dengan akurat dan menandai anggota tim musuh.

Seperti kebanyakan permainan lain dalam genre tembak-menembak orang pertama, permainan laser tag contoh menempatkan crosshair di tengah layar sehingga pemain memiliki sesuatu yang statis untuk difokuskan saat avatar mereka bergerak melalui ruang 3D. Selain mengurangi mabuk perjalanan, penempatan ini memungkinkan crosshair dapat terlihat sambil juga menyatu dengan lingkungan secara keseluruhan.

Untuk mereproduksi crosshair dengan tepat dalam contoh permainan Laser Tag:

Masukkan ImageLabel ke dalam objek HUDGui ScreenGui.
1. Di jendela Explorer, arahkan ke layanan StarterGui.
2. Arahkan ke objek HUDGui anaknya, lalu klik ikon ⊕. Menu kontekstual ditampilkan.
3. Dari menu kontekstual, masukkan ImageLabel.
Pilih ImageLabel baru, lalu di jendela Properties,
1. Atur Image ke rbxassetid://14400935446.
2. Atur AnchorPoint ke 0.5, 0.5 untuk mengatur titik asal label di tengah label (50% dari kiri ke kanan label, dan 50% dari atas ke bawah label).
3. Atur BackgroundTransparency ke 1 untuk membuat latar belakang label sepenuhnya transparan.
4. Atur Name ke Crosshair.
5. Atur Position ke {0.5,0},{0.5,0} untuk mengatur label di tengah layar.
6. Atur ScaleType ke Fit sehingga gambar sesuai dengan wadahnya dan tidak meregang pada berbagai ukuran layar.
OPTIONAL
Masukkan UIAspectRatioConstraint ke dalam Crosshair untuk memastikan rasio aspek label tetap sama tidak peduli ukuran layar pemain. Contoh ini mengatur properti UIAspectRatioConstraint.AspectRatio ke 0.895.

Hit marker

Hit marker adalah elemen UI yang hanya ditampilkan ketika tembakan mengenai pemain lain di tim musuh. Seperti crosshair, elemen UI ini adalah persyaratan gameplay yang penting untuk permainan tembak-menembak orang pertama karena memberikan umpan balik visual ketika pemain berhasil menandai lawan mereka.

Untuk mereproduksi hit marker dengan tepat dalam contoh permainan Laser Tag:

Masukkan ImageLabel ke dalam objek Crosshair ImageLabel.
1. Di jendela Explorer, arahkan ke layanan StarterGui.
2. Arahkan ke objek Crosshair anaknya, lalu klik ikon ⊕. Menu kontekstual ditampilkan.
3. Dari menu kontekstual, masukkan ImageLabel.
Pilih ImageLabel baru, lalu di jendela Properties,
1. Atur Image ke rbxassetid://14401148736 untuk menampilkan ikon hit marker persegi panjang.
2. Atur AnchorPoint ke 0.5, 0.5 untuk mengatur titik asal label di tengah label.
3. Atur BackgroundTransparency ke 1 untuk membuat latar belakang label sepenuhnya transparan.
4. Atur Position ke {0.5,0},{0.5,0} untuk mengatur label di tengah layar.
5. Atur Name ke Hitmarker.
6. Atur Size ke {0.6, 0},{0.06, 0} untuk mengurangi ukuran persegi panjang di sekitar tengah crosshair.
7. Atur ImageTransparency ke 1 untuk membuat hit marker sepenuhnya transparan. Skrip di langkah berikutnya mengubah transparansi kembali menjadi 0 setiap kali tembakan pemain mengenai pemain lain di tim musuh.
Rujuk skrip ReplicatedStorage berikut dalam file tempat contoh Laser Tag yang secara programatis menampilkan hit marker ketika tembakan mengenai pemain di tim musuh.

Skrip berikut memerlukan serangkaian skrip modul yang bekerja sama untuk mengatur tampilan Heads Up Display (HUD) utama, termasuk setupHitmarker. Setelah seorang pemain bergabung dalam satu putaran dan memilih blaster mereka, skrip ini memastikan semua elemen UI HUD ditampilkan dengan tepat untuk status pemain, perangkat, dan status tim.

local Players = game:GetService("Players")

local setPlayerPortrait = require(script.setPlayerPortrait)
local setPlayerName = require(script.setPlayerName)
local startSyncingTeamColor = require(script.startSyncingTeamColor)
local setObjective = require(script.setObjective)
local setupTouchButtonAsync = require(script.setupTouchButtonAsync)
local startSyncingTeamPoints = require(script.startSyncingTeamPoints)
local disableMouseWhileGuiEnabled = require(script.disableMouseWhileGuiEnabled)
local setupHitmarker = require(script.setupHitmarker)

local localPlayer = Players.LocalPlayer
local gui = localPlayer.PlayerGui:WaitForChild("HUDGui")

setPlayerPortrait(gui)
setPlayerName(gui)
startSyncingTeamColor(gui)
setObjective(gui)
startSyncingTeamPoints(gui)
disableMouseWhileGuiEnabled(gui)
setupHitmarker(gui)
setupTouchButtonAsync(gui)

Sekarang, setiap kali seorang pemain menembakkan blaster mereka dan tembakan mengenai pemain lain, hit marker ditampilkan sesaat.

Pemilih blaster

Pemilih blaster adalah komponen UI yang digunakan pemain untuk memilih jenis blaster mereka sebelum bergabung atau bergabung kembali dalam satu putaran. Permainan laser tag contoh menyediakan dua jenis blaster: satu yang menghasilkan beberapa sinar dengan penyebaran horizontal yang lebar, dan yang lainnya menghasilkan satu sinar. Jenis blaster yang dipilih pemain mempengaruhi strategi mereka selama putaran, menjadikan komponen UI ini sebagai alur kerja yang penting untuk keseluruhan permainan.

Langkah-langkah berikut merinci cara membuat beberapa wadah untuk pengelompokan elemen UI yang berbeda, header dengan prompt, tombol navigasi dan pilih, serta prefab tombol blaster. Logika skrip untuk keseluruhan komponen mengisi karakteristik visual yang berbeda ke dalam prefab tombol blaster sesuai dengan instance Configuration yang mewakili setiap jenis blaster.

Pengaturan ini memungkinkan Anda untuk membuat instance Configuration tambahan untuk lebih banyak jenis blaster yang secara otomatis ditampilkan dengan benar dalam pemilih blaster tanpa perlu membuat tombol individual dalam StarterGui.PickABlasterGui.

Untuk mereproduksi pemilih blaster dengan tepat dalam contoh permainan Laser Tag:

Buat wadah untuk seluruh komponen.
1. Masukkan Frame ke dalam objek PickABlaster ScreenGui.
  1. Di jendela Explorer, arahkan ke layanan StarterGui.
  2. Arahkan ke objek PickABlaster anaknya, lalu klik ikon ⊕. Menu kontekstual ditampilkan.
  3. Dari menu kontekstual, masukkan Frame.
2. Pilih frame baru, lalu di jendela Properties,
  1. Atur AnchorPoint ke 0.5, 1 untuk mengatur titik asal frame di tengah bawah dirinya (50% dari kiri ke kanan frame, dan 100% dari atas ke bawah frame).
  2. Atur BackgroundTransparency ke 1 untuk membuat latar belakang frame sepenuhnya transparan.
  3. Atur Position ke {0.5, 0},{0.9, 0} untuk mengatur frame dekat tengah bawah layar (50% dari kiri ke kanan layar, dan 92.4% dari atas ke bawah layar).
  4. Atur Size ke {0.8, 0},{0.25, 0} sehingga komponen UI pemilih blaster mengambil sebagian besar layar untuk menarik perhatian pemain (80% secara horizontal, dan 25% secara vertikal).
  5. Atur Name ke Component.
3. OPTIONAL
  Masukkan UIAspectRatioConstraint ke dalam Component untuk memastikan rasio aspek frame dan elemen UI anaknya tetap sama tidak peduli ukuran layar pemain. Contoh ini mengatur properti UIAspectRatioConstraint.AspectRatio ke 5.
Buat wadah untuk menampung pengelompokan elemen UI.
1. Masukkan Frame ke dalam Component.
2. Pilih frame baru, lalu di jendela Properties,
  1. Atur AnchorPoint ke 0.5, 0.5 untuk mengatur titik asal frame di tengah dirinya (50% dari kiri ke kanan frame, dan 50% dari atas ke bawah frame).
  2. Atur BackgroundTransparency ke 1 untuk membuat latar belakang frame sepenuhnya transparan.
  3. Atur Position ke {0.5, 0},{0.375, 0} untuk mengatur frame dekat tengah atas wadah (50% dari kiri ke kanan frame induk, dan 37.5% dari atas ke bawah frame induk).
  4. Atur Size ke {1, 0},{0.75, 0} sehingga komponen UI pemilihan mengambil 3/4 dari wadah (100% secara horizontal dan 75% secara vertikal dari frame induk).
  5. Atur Name ke SelectionFrame.
Buat prompt untuk pemilih blaster.
1. Masukkan ImageLabel ke dalam SelectionFrame.
2. Pilih label baru, lalu di jendela Properties,
  1. Atur AnchorPoint ke 0.5, 1 untuk mengatur titik asal label di tengah bawah dirinya (50% dari kiri ke kanan label, dan 100% dari atas ke bawah label).
  2. Atur BackgroundTransparency ke 1 untuk membuat latar belakang label sepenuhnya transparan.
  3. Atur LayoutOrder ke -1.
  4. Atur Position ke {0.5, 0},{0.22, 0} untuk mengatur label dekat tengah atas frame (50% dari kiri ke kanan frame induk, dan 22% dari atas ke bawah frame induk).
  5. Atur Size ke {0.45, 0},{0.22, 0} untuk memperlebar area prompt menjadi hampir setengah dari frame (45% secara horizontal dan 22% secara vertikal dari frame induk).
  6. Atur Name ke Header.
  7. Atur Image ke rbxassetid://14304828123 untuk menampilkan trapezoid.
  8. Atur ImageTransparency ke 0.15 untuk membuat header semi-transparan.
3. OPTIONAL
  Masukkan UIAspectRatioConstraint ke dalam label untuk memastikan rasio aspek label tetap sama tidak peduli ukuran layar pemain. Contoh ini mengatur properti UIAspectRatioConstraint.AspectRatio ke 13.78.
4. Masukkan TextLabel ke dalam Header untuk menampilkan prompt.
5. Pilih label baru, lalu di jendela Properties,
  1. Atur AnchorPoint ke 0.5, 0.5 untuk mengatur titik asal label baru di tengah dirinya (50% dari kiri ke kanan label, dan 50% dari atas ke bawah label).
  2. Atur BackgroundTransparency ke 1 untuk membuat latar belakang label sepenuhnya transparan.
  3. Atur Position ke {0.5, 0},{0.5, 0} untuk memindahkan label ke tengah label induknya (50% dari kiri ke kanan label induk, dan 50% dari atas ke bawah label induk).
  4. Atur Size ke {0.6, 0},{0.55, 0} untuk memperlebar ruang teks menjadi lebih dari setengah label induk (60% secara horizontal dan 55% secara vertikal dari label induk).
  5. Atur Name ke HeaderTextLabel.
  6. Atur FontFace ke Montserrat untuk sesuai dengan estetika futuristik.
  7. Atur Weight ke Medium untuk menebalkan font.
  8. Atur Text ke PILIH SEBUAH BLASTER.
  9. Aktifkan TextScaled.
Buat wadah untuk wadah tombol blaster dan panah pemilihan Anda.
1. Masukkan ImageLabel ke dalam SelectionFrame.
2. Pilih label baru, lalu di jendela Properties,
  1. Hapus nilai Image default.
  2. Atur AnchorPoint ke 0.5, 1 untuk mengatur titik asal label di tengah bawah dirinya (50% dari kiri ke kanan label, dan 100% dari atas ke bawah label).
  3. Atur BackgroundColor ke 0, 0, 0 untuk membuat label hitam.
  4. Atur BackgroundTransparency ke 0.3 untuk mengurangi opasitas label sebesar 30%, dan mencocokkan semua elemen UI hitam dalam permainan.
  5. Atur Position ke {0.5, 0},{1, 0} untuk mengatur label ke tengah bawah frame (50% dari kiri ke kanan frame induk, dan 100% dari atas ke bawah frame induk).
  6. Atur Size ke {1, 0},{0.77, 0} untuk memperlebar area label ke ruang di bawah prompt (100% secara horizontal dan 77% secara vertikal dari frame induk).
3. Bulatkan sudut wadah.
  1. Masukkan objek UICorner ke dalam label.
  2. Pilih objek sudut baru, lalu di jendela Properties, atur CornerRadius ke 0.075, 0 untuk membulatkan sudut.
Buat wadah untuk tombol blaster Anda.
1. Masukkan Frame ke dalam label dari langkah 4.
2. Pilih frame baru, lalu di jendela Properties,
  1. Atur AnchorPoint ke 0.5, 0.5 untuk mengatur titik asal frame baru di tengah dirinya (50% dari kiri ke kanan frame, dan 50% dari atas ke bawah frame).
  2. Atur BackgroundTransparency ke 1 untuk membuat latar belakang frame sepenuhnya transparan.
  3. Atur Position ke {0.5, 0},{0.5, 0} untuk mengatur frame di tengah label induknya (50% dari kiri ke kanan label induk, dan 50% dari atas ke bawah label induk).
  4. Atur Size ke {0.85, 0},{0.77, 0} untuk memperlebar area frame menjadi sebagian besar label (85% secara horizontal dan 77% secara vertikal dari label induk).
  5. Atur Name ke Container.
Buat padding untuk semua tombol blaster yang akan datang.
1. Masukkan objek UIListLayout ke dalam frame dari langkah 5.
2. Pilih objek tata letak baru, lalu di jendela Properties,
  1. Atur Padding ke 0.035, 0 untuk memberikan ruang antara semua tombol yang akan datang.
  2. Atur FillDirection ke Horizontal sehingga setiap tombol ditampilkan berdampingan.
  3. Atur HorizontalAlignment dan VerticalAlignment ke Center sehingga setiap tombol sejajar di tengah satu sama lain.
Buat tombol navigasi kiri.
1. Masukkan objek ImageButton ke dalam ImageLabel dari langkah 4.
2. Pilih tombol baru, lalu di jendela Properties,
  1. Hapus nilai Image default.
  2. Atur AnchorPoint ke 0, 0.5 untuk mengatur titik asal tombol baru di tengah kiri dirinya (0% dari kiri ke kanan tombol, dan 50% dari atas ke bawah tombol).
  3. Atur BackgroundTransparency ke 0.15 untuk memberikan umpan balik visual saat hover bahwa tombol dapat dipilih.
  4. Atur Position ke {0.02, 0},{0.5, 0} untuk memberikan padding di sebelah kiri tombol dari wadah induknya (2% dari kiri ke kanan label induk, dan 50% dari atas ke bawah label induk).1. Atur Size menjadi {0.04, 0},{0.33, 0} untuk membuat tombol pemilihan jauh lebih kecil daripada tombol blaster (4% secara horizontal dan 33% secara vertikal dari bingkai induk).
Atur Name menjadi NavigationButtonLeft.

Bulatkan sudut tombol.
1. Masukkan objek UICorner ke dalam tombol.
2. Pilih objek sudut baru, lalu di jendela Properties, atur CornerRadius menjadi 0.1, 0 untuk membulatkan sudut.

Masukkan objek ImageLabel ke dalam tombol.
Pilih label baru, lalu di jendela Properties,
1. Atur AnchorPoint menjadi 0.5, 0.5 untuk mengatur titik asal label baru di tengah dirinya sendiri (50% dari kiri ke kanan label, dan 50% dari atas ke bawah label).
2. Atur Position menjadi {0.45, 0},{0.5, 0} untuk mengatur label dekat tengah tombol induknya (45% dari kiri ke kanan tombol induk, dan 50% dari atas ke bawah tombol induk). Nilai ini tidak berada di tengah karena sebuah panah tidak secara visual terlihat seperti berada di tengah tombol pada {0.5, 0},{0.5, 0}.
3. Atur Size menjadi {0.8, 0},{0.8, 0} untuk memperlebar area label agar lebih banyak ruang di bawah prompt (80% secara horizontal dan 80% secara vertikal dari bingkai induk).
4. Atur BackgroundTransparency menjadi 1 untuk membuat latar belakang gambar sepenuhnya transparan.
5. Atur Image menjadi rbxassetid://14309187238.
6. Atur ScaleType menjadi Fit.

Buat tombol navigasi kanan.
1. Duplikat NavigationButtonLeft.
2. Pilih tombol duplikat, lalu di jendela Properties,
  1. Atur AnchorPoint menjadi 1, 0.5 untuk mengatur titik asal tombol baru di tengah kanan dirinya sendiri (100% dari kiri ke kanan tombol, dan 50% dari atas ke bawah tombol).
  2. Atur Position menjadi {0.98, 0},{0.5, 0} untuk memberikan padding ke kanan tombol dari kontainer induknya (98% dari kiri ke kanan label induk, dan 50% dari atas ke bawah label induk).
  3. Atur Name menjadi NavigationButtonRight.
3. Pilih objek anak ImageLabel-nya.
  1. Atur Rotation menjadi 180 untuk membalik gambar.
  2. Atur Position menjadi {0.55, 0},{0.5, 0} untuk mengatur label dekat tengah tombol induknya (55% dari kiri ke kanan tombol induk, dan 50% dari atas ke bawah tombol induk). Nilai ini tidak berada di tengah karena sebuah panah tidak secara visual terlihat seperti berada di tengah tombol pada {0.5, 0},{0.5, 0}.

Buat tombol SELECT.
1. Masukkan objek ImageButton ke dalam Component. Perhatikan bagaimana proses ini menjaga tombol pilih terpisah dari SelectionFrame sehingga Anda dapat menambahkan padding antara bagian utama komponen dengan tombol pilih.
2. Pilih tombol baru, lalu di jendela Properties,
  1. Hapus nilai Image default.
  2. Atur AnchorPoint menjadi 0.5, 1 untuk mengatur titik asal tombol baru di tengah bawah dirinya sendiri (50% dari kiri ke kanan tombol, dan 100% dari atas ke bawah tombol).
  3. Atur BackgroundTransparency menjadi 0.15 untuk memberikan umpan balik visual saat hover bahwa tombol dapat dipilih.
  4. Atur Position menjadi {0.5, 0},{0.99, 0} untuk mengatur tombol dekat tengah bawah kontainernya (50% dari kiri ke kanan bingkai induk, dan 99% dari atas ke bawah bingkai induk).
  5. Atur Size menjadi {0.17, 0},{0.18, 0} untuk memperpanjang tombol di bawah tombol blaster (17% secara horizontal dan 18% secara vertikal dari bingkai induk).
  6. Atur Name menjadi SelectButton.

Bulatkan sudut tombol.
1. Masukkan objek UICorner ke dalam tombol.
2. Pilih objek sudut baru, lalu di jendela Properties, atur CornerRadius menjadi 0.2, 0 untuk membulatkan sudut.

Masukkan objek TextLabel ke dalam tombol sehingga Anda dapat menampilkan ajakan untuk bertindak.
Pilih label baru, lalu di jendela Properties,
1. Atur AnchorPoint menjadi 0.5, 0.5 untuk mengatur titik asal label baru di tengah dirinya sendiri (50% dari kiri ke kanan label, dan 50% dari atas ke bawah label).
2. Atur BackgroundTransparency menjadi 1 untuk membuat latar belakang label sepenuhnya transparan.
3. Atur Position menjadi {0.5, 0},{0.5, 0} untuk memindahkan label ke tengah tombol (50% dari kiri ke kanan tombol induk, dan 50% dari atas ke bawah tombol induk).
4. Atur Size menjadi {0.9, 0},{0.55, 0} untuk memperlebar ruang teks hampir ke seluruh lebar label induk (90% secara horizontal dan 55% secara vertikal dari label induk).
5. Atur Name menjadi SelectTextLabel.
6. Atur FontFace menjadi Montserrat untuk sesuai dengan estetika futuristik.
7. Atur Weight menjadi Medium untuk menebalkan font.
8. Atur Text menjadi SELECT.
9. Aktifkan TextScaled.

Buat prefab tombol blaster.
1. Di layanan ReplicatedStorage, buat struktur folder untuk mengatur objek UI Anda. Contoh ini menggunakan folder Instances dengan folder anak Guis.
2. Masukkan objek ImageButton ke dalam folder Guis.
3. Pilih tombol baru, lalu di jendela Properties,
  1. Hapus nilai Image default.
  2. Atur AnchorPoint menjadi 0.5, 0.5 untuk mengatur titik asal tombol baru di tengah dirinya sendiri (50% dari kiri ke kanan tombol, dan 50% dari atas ke bawah tombol).
  3. Atur BackgroundTransparency menjadi 0.65 untuk memberikan umpan balik visual bahwa tombol tidak dalam fokus. Skrip di langkah 12 memberikan umpan balik visual programatik saat tombol dalam fokus.
  4. Atur LayoutOrder menjadi 2.
  5. Atur Name menjadi BlasterButtonPrefab.
  6. Atur Size menjadi {0.8, 0},{0.8, 0}.
  7. Atur ImageTransparency menjadi 1 untuk membuat gambar sepenuhnya transparan.
4. Masukkan UIAspectRatioConstraint ke dalam BlasterButtonPrefab untuk memastikan rasio aspek tombol tetap sama dalam komponen tidak peduli ukuran layar pemain.
5. Bulatkan sudut tombol.
  1. Masukkan objek UICorner ke dalam BlasterButtonPrefab.
  2. Pilih UICorner, lalu di jendela Properties, atur CornerRadius menjadi 0.05, 0 untuk membulatkan sudut.
6. Masukkan objek ImageLabel ke dalam BlasterButtonPrefab.
7. Pilih label baru, lalu di jendela Properties,
  1. Hapus ID aset placeholder dalam properti Image. Skrip di langkah 7 secara programatik memasukkan potret pemain ke dalam label gambar.
  2. Atur AnchorPoint menjadi 0.5, 0.5 untuk mengatur titik asal label baru di tengah dirinya sendiri (50% dari kiri ke kanan label, dan 50% dari atas ke bawah label).
  3. Atur BackgroundTransparency menjadi 1 untuk membuat latar belakang label sepenuhnya transparan.
  4. Atur Position menjadi {0.52, 0},{0.497, 0} untuk mengatur label dekat tengah tombol induknya (52% dari kiri ke kanan tombol induk, dan 49.7% dari atas ke bawah tombol induk). Nilai ini tidak berada di tengah karena blaster tidak secara visual terlihat seperti berada di tengah tombol pada {0.5, 0},{0.5, 0}.
  5. Atur Size menjadi {1.20, 0},{0.9, 0} untuk memperlebar area label di luar tombol (120% secara horizontal dan 90% secara vertikal dari tombol induk).
  6. Atur ScaleType menjadi Fit.
Referensikan skrip ReplicatedStorage berikut dalam file tempat contoh Laser Tag yang secara programatik menampilkan tombol untuk setiap blaster, mengubah ukuran tombol saat pemain memilih tombol yang tidak dalam fokus, dan mengaitkan pemilihan blaster pemain ke avatar mereka.

Skrip berikut memerlukan serangkaian skrip yang bekerja sama untuk membuat pemilih blaster. Ketika seorang pemain bergabung dengan permainan atau respawn kembali ke dalam ronde setelah kesehatan mereka mencapai nol, skrip ini mengaktifkan semua elemen UI pemilih blaster hingga pemain membuat pilihan mereka.

local Players = game:GetService("Players")
local ReplicatedStorage = game:GetService("ReplicatedStorage")

local GuiAttribute = require(ReplicatedStorage.GuiAttribute)
local setupBlasterButtons = require(script.setupBlasterButtons)
local connectResetSelectionOnEnabled = require(script.connectResetSelectionOnEnabled)

local localPlayer = Players.LocalPlayer
local gui = localPlayer.PlayerGui:WaitForChild("PickABlasterGui")

setupBlasterButtons(gui)
connectResetSelectionOnEnabled(gui)
gui:SetAttribute(GuiAttribute.selectedIndex, 1)

Sekarang, setiap kali seorang pemain bergabung dengan permainan atau respawn kembali ke dalam ronde setelah kesehatan mereka mencapai nol, UI pemilih blaster ditampilkan, mereka dapat membuat pilihan, dan setiap tombol berfungsi seperti yang diharapkan.

Tombol ledakan

Tombol ledakan adalah komponen UI yang digunakan pemain untuk menembakkan blaster mereka jika mereka mengakses permainan melalui perangkat seluler atau tablet. Contoh permainan laser tag menggunakan tombol ledakan dengan ikon yang menggambarkan baik crosshair dan ledakan untuk mengkomunikasikan fungsi tombol tanpa teks.

Untuk mereproduksi tombol ledakan dengan tepat dalam contoh permainan Laser Tag:

Masukkan objek ImageButton ke dalam objek HUDGui ScreenGui.
1. Di jendela Explorer, navigasikan ke layanan StarterGui.
2. Arahkan mouse ke objek anak HUDGui, lalu klik ikon ⊕. Menu kontekstual ditampilkan.
3. Dari menu kontekstual, masukkan objek ImageButton.
Di viewport, pindahkan tombol ke tempat jempol pemain secara alami beristirahat sehingga Anda dapat mendapatkan gambaran visual tentang bagaimana tombol akan terlihat di perangkat pemain, lalu di jendela Properties,
1. Atur Image menjadi rbxassetid://18308375035 untuk menampilkan ikon tombol ledakan.
2. Atur PressedImage menjadi rbxassetid://18308372558 untuk menampilkan versi terbalik dari ikon tombol ledakan saat pemain menekan tombol.
3. Atur BackgroundTransparency menjadi 1 untuk membuat latar belakang label sepenuhnya transparan.
4. Atur Name menjadi BlastButton.
5. Atur ScaleType menjadi Fit sehingga gambar sesuai dengan wadahnya dan tidak meregang pada berbagai ukuran layar.
6. Atur ImageTransparency menjadi 0.3 untuk mengurangi opasitas label sehingga sesuai dengan semua elemen UI hitam dalam permainan.
Masukkan UIAspectRatioConstraint ke dalam BlastButton untuk memastikan rasio aspek tombol tetap sama tidak peduli ukuran layar pemain.
Referensikan skrip ReplicatedStorage berikut dalam file tempat contoh Laser Tag yang secara programatik menampilkan tombol ledakan saat pemain menggunakan input sentuh pada perangkat yang menerima kontrol sentuh.

Skrip berikut memerlukan serangkaian skrip modul yang bekerja sama untuk mengatur tampilan utama Heads Up Display (HUD), termasuk setupTouchButtonAsync. Setelah seorang pemain bergabung dengan ronde dan memilih blaster mereka, skrip ini memastikan semua elemen UI HUD ditampilkan dengan tepat untuk status pemain, perangkat, dan status tim.

local Players = game:GetService("Players")

local setPlayerPortrait = require(script.setPlayerPortrait)
local setPlayerName = require(script.setPlayerName)
local startSyncingTeamColor = require(script.startSyncingTeamColor)
local setObjective = require(script.setObjective)
local setupTouchButtonAsync = require(script.setupTouchButtonAsync)
local startSyncingTeamPoints = require(script.startSyncingTeamPoints)
local disableMouseWhileGuiEnabled = require(script.disableMouseWhileGuiEnabled)
local setupHitmarker = require(script.setupHitmarker)

local localPlayer = Players.LocalPlayer
local gui = localPlayer.PlayerGui:WaitForChild("HUDGui")

setPlayerPortrait(gui)
setPlayerName(gui)
startSyncingTeamColor(gui)
setObjective(gui)
startSyncingTeamPoints(gui)
disableMouseWhileGuiEnabled(gui)
setupHitmarker(gui)
setupTouchButtonAsync(gui)

Sekarang, ketika seorang pemain bergabung dengan permainan dan menggunakan input sentuh pada perangkat yang menerima kontrol sentuh, tombol ledakan ditampilkan di kanan atas tombol lompat.

UI Pemain

Mengikuti praktik terbaik hierarki visual dari Wireframe Your Layouts, bagian ini mengajarkan Anda cara menerapkan semua elemen UI di layar yang berkaitan dengan status pemain. Pengelompokan elemen UI ini berada di dekat sisi layar karena pemain dapat memahami informasi perifer ini tanpa mengalihkan perhatian mereka dari gameplay.

Indikator pemain

Indikator pemain adalah komponen UI yang dirujuk pemain untuk dengan cepat memahami tim mana mereka tergabung segera setelah mereka muncul di zona spawn tim mereka. Contoh permainan laser tag menyediakan dua versi indikator pemain tergantung pada apakah pemain berada di tim hijau atau pink.

Mengikuti panduan dari Select a Color Theme, kedua versi indikator pemain menggabungkan warna tim dengan ikon unik yang sederhana dengan detail minimal sehingga tetap terbaca di layar kecil. Menyediakan dua bentuk umpan balik visual sangat penting karena membantu menjaga desain tetap dapat diakses bagi pemain dengan buta warna.

Untuk mereproduksi komponen indikator pemain dengan tepat dalam contoh permainan Laser Tag:

Masukkan Frame ke dalam objek HUDGui ScreenGui.
1. Di jendela Explorer, navigasikan ke layanan StarterGui.
2. Arahkan mouse ke objek anak HUDGui, lalu klik ikon ⊕. Menu kontekstual ditampilkan.
3. Dari menu kontekstual, masukkan Frame.
Pilih Frame baru, lalu di jendela Properties,
1. Atur AnchorPoint menjadi 0, 1 untuk mengatur titik asal bingkai di tengah bawah dirinya sendiri (0% dari kiri ke kanan bingkai, dan 100% dari atas ke bawah bingkai).
2. Atur BackgroundTransparency menjadi 1 untuk membuat latar belakang label sepenuhnya transparan.
3. Atur Name menjadi PlayerDisplay.
4. Atur Position menjadi {0.02, 0},{0.97, 0} untuk mengatur bingkai dekat kiri bawah layar.
5. Atur Size menjadi {0.23, 0},{0.08, 0} untuk memperpendek dan memperlebar bingkai.
6. Aktifkan ClipsDescendants untuk memangkas GuiObjects anak yang melampaui bingkai.
Buat bentuk poligon.
1. Masukkan objek ImageLabel ke dalam PlayerDisplay.
2. Pilih label baru, lalu di jendela Properties,
  1. Atur Image menjadi rbxassetid://14304828123 untuk menampilkan ikon trapezoid.
  2. Atur AnchorPoint menjadi 1, 1 untuk mengatur titik asal label di kanan bawah dirinya sendiri (100% dari kiri ke kanan label, dan 100% dari atas ke bawah label).
  3. Atur BackgroundTransparency menjadi 1 untuk membuat latar belakang label sepenuhnya transparan.
  4. Atur Name menjadi Block.
  5. Atur Position menjadi {1,0},{1,0} untuk mengatur label ke sisi kanan bingkai.
  6. Atur Size menjadi {1.858, 0},{0.581, 0} untuk memperlebar label di luar bingkai, dan memperpendeknya sedikit lebih dari setengah panjang bingkai.
  7. Atur ImageTransparency menjadi 0.15 untuk membuat label sedikit transparan.
  8. Atur ScaleType menjadi Fit sehingga gambar sesuai dengan wadahnya dan tidak meregang pada berbagai ukuran layar.
  1. Masukkan UIAspectRatioConstraint ke dalam Block untuk memastikan rasio aspek label dan elemen UI anaknya tetap sama tidak peduli ukuran layar pemain.
  2. Pilih batasan baru, lalu di jendela Properties, atur AspectRatio menjadi 13.78.
Buat kotak untuk potret pemain.
1. Masukkan objek ImageLabel ke dalam PlayerDisplay.
2. Pilih label baru, lalu di jendela Properties,
  1. Hapus ID aset placeholder dalam properti Image. Skrip di langkah 7 secara programatik memasukkan potret pemain ke dalam label gambar.
  2. Atur AnchorPoint menjadi 0, 1 untuk mengatur titik asal label di kiri bawah dirinya sendiri (0% dari kiri ke kanan label, dan 100% dari atas ke bawah label).
  3. Atur BackgroundColor3 menjadi 0, 0, 0 untuk mengatur warna latar belakang label menjadi hitam.
  4. Atur BackgroundTransparency menjadi 0.3 untuk mengurangi opasitas label sebesar 30%, dan mencocokkan semua elemen UI hitam dalam permainan.
  5. Atur Name menjadi PlayerPortrait.
  6. Atur Position menjadi {0.11, 0},{1, 0} untuk mengatur label ke sisi kiri bentuk poligon.
  7. Atur Size menjadi {0.23, 0},{1, 0} untuk memperkecil label.
  8. Atur ImageTransparency menjadi 0.15 untuk membuat label sedikit transparan.
  9. Atur ScaleType menjadi Fit sehingga gambar sesuai dengan wadahnya dan tidak meregang pada berbagai ukuran layar.
  1. Masukkan UIAspectRatioConstraint ke dalam PlayerPortrait untuk memastikan rasio aspek label dan elemen UI anaknya tetap sama tidak peduli ukuran layar pemain.
  2. Masukkan UICorner ke dalam PlayerPortrait, lalu di jendela Properties, atur CornerRadius menjadi 0.05, 0 untuk sedikit membulatkan sudut.
Buat label teks untuk nama pemain.
1. Masukkan objek TextLabel ke dalam PlayerDisplay.
2. Pilih label baru, lalu di jendela Properties,
  1. Atur AnchorPoint menjadi 0, 0.5 untuk mengatur titik asal tombol baru di tengah kiri dirinya sendiri (0% dari kiri ke kanan tombol, dan 50% dari atas ke bawah tombol).
  2. Atur BackgroundTransparency menjadi 1 untuk membuat latar belakang label sepenuhnya transparan.
  3. Atur Name menjadi PlayerNameTextLabel.
  4. Atur Position menjadi {0.35, 0},{0.72, 0} untuk mengatur label ke sisi kanan kontainernya (35% dari kiri ke kanan label induk, dan 72% dari atas ke bawah label induk).
  5. Atur Size menjadi {0.52, 0},{0.3, 0} sehingga teks dapat mengambil sebagian besar area bentuk poligon (52% secara horizontal dan 30% secara vertikal dari bingkai induk).
  6. Atur FontFace menjadi Montserrat untuk sesuai dengan estetika futuristik.
  7. Atur Weight menjadi Bold untuk menebalkan font.
  8. Hapus teks placeholder dalam properti Text. Skrip di langkah 7 secara programatik memasukkan nama pemain ke dalam label teks.
  9. Aktifkan TextScaled.
  10. Atur TextXAlignment menjadi Left.
Buat ikon dan warna tim yang ditampilkan di sebelah kiri potret pemain.
1. Masukkan Folder ke dalam PlayerDisplay, lalu ganti namanya menjadi TeamIcons.
2. Buat ikon dan warna tim hijau.
  1. Masukkan objek ImageLabel ke dalam TeamIcons.
  2. Pilih label baru, lalu di jendela Properties,
    
    Atur AnchorPoint menjadi 0, 1 untuk mengatur titik asal label di kiri bawah dirinya sendiri (0% dari kiri ke kanan label, dan 100% dari atas ke bawah label).
    
    Atur BackgroundColor3 menjadi 88, 218, 171 untuk mengatur warna latar belakang label menjadi hijau mint.
    
    Atur Name menjadi TeamAIcon.
    
    Atur Position menjadi {0, 0},{1, 0} untuk mengatur label ke sisi kiri bingkai.
    
    Atur Size menjadi {0.135, 0},{0.58, 0} untuk memperkecil label ke kiri potret pemain.
    
    Atur ImageTransparency menjadi 1 untuk membuat label transparan.
  1. Konfigurasikan atribut kustom untuk melacak bahwa label ini untuk tim hijau. Langkah ini sangat penting untuk skrip di langkah 7.
    
    Di jendela Properties, navigasikan ke bagian Attributes, lalu klik ikon plus. Dialog pop-up muncul.
    
    Di bidang Name, masukkan teamColor.
    
    Di menu dropdown Type, pilih BrickColor.
    
    Klik tombol Save.
    
    Atur atribut teamColor baru menjadi Mint.
  2. Masukkan UIAspectRatioConstraint ke dalam TeamAIcon untuk memastikan rasio aspek label dan elemen UI anaknya tetap sama tidak peduli ukuran layar pemain.
  3. Buat ikon.
    
    Masukkan objek ImageLabel ke dalam TeamAIcon.
    
    Pilih label baru, lalu di jendela Properties,
    
    Atur Image menjadi rbxassetid://14309678670 untuk menampilkan ikon tim hijau.
    
    Atur AnchorPoint menjadi 0.5, 0.5 untuk mengatur titik asal label di tengah dirinya sendiri (50% dari kiri ke kanan label, dan 50% dari atas ke bawah label).
    
    Atur BackgroundTransparency menjadi 1 untuk membuat latar belakang label sepenuhnya transparan.
    
    Atur Name menjadi Icon.
    
    Atur Position menjadi {0.5, 0},{0.5, 0} untuk mengatur label ke tengah label induknya.
    
    Atur Size menjadi {0.7, 0},{0.6, 0} untuk memperkecil label.
    
    Atur ScaleType menjadi Fit sehingga gambar sesuai dengan wadahnya dan tidak meregang pada berbagai ukuran layar.
3. Buat ikon dan warna tim pink.
  1. Duplikat TeamAIcon dan anak-anaknya.
  2. Pilih TeamAIcon duplikat, lalu di jendela Properties,
    
    Atur BackgroundColor3 menjadi 255, 170, 255 untuk mengatur warna latar belakang label menjadi pink karnasi.
    
    Atur Name menjadi TeamBIcon.
    
    Atur atribut teamColor menjadi Carnation Pink.
    
    Pilih anak Icon duplikat dari TeamBIcon, lalu di jendela Properties, atur Image menjadi rbxassetid://14309678549 untuk menampilkan ikon tim pink.
Referensikan skrip ReplicatedStorage berikut dalam file tempat contoh Laser Tag yang secara programatik menampilkan indikator pemain dengan warna dan ikon tim yang sesuai saat pemain aktif dalam ronde.

Skrip berikut memerlukan serangkaian skrip modul yang bekerja sama untuk mengatur tampilan utama Heads Up Display (HUD), termasuk startSyncingTeamColor, setPlayerName, dan setPlayerPortrait. Setelah seorang pemain bergabung dengan ronde dan memilih blaster mereka, skrip ini memastikan semua elemen UI HUD ditampilkan dengan tepat untuk status pemain, perangkat, dan status tim.

local Players = game:GetService("Players")

local setPlayerPortrait = require(script.setPlayerPortrait)
local setPlayerName = require(script.setPlayerName)
local startSyncingTeamColor = require(script.startSyncingTeamColor)
local setObjective = require(script.setObjective)
local setupTouchButtonAsync = require(script.setupTouchButtonAsync)
local startSyncingTeamPoints = require(script.startSyncingTeamPoints)
local disableMouseWhileGuiEnabled = require(script.disableMouseWhileGuiEnabled)
local setupHitmarker = require(script.setupHitmarker)

local localPlayer = Players.LocalPlayer
local gui = localPlayer.PlayerGui:WaitForChild("HUDGui")

setPlayerPortrait(gui)
setPlayerName(gui)
startSyncingTeamColor(gui)
setObjective(gui)
startSyncingTeamPoints(gui)
disableMouseWhileGuiEnabled(gui)
setupHitmarker(gui)
setupTouchButtonAsync(gui)

Sekarang, setiap kali seorang pemain bergabung atau bergabung kembali ke ronde setelah respawn, indikator pemain ditampilkan di kiri bawah layar mereka.

Layar medan gaya

Layar medan gaya adalah elemen UI yang menutupi viewport untuk memberi tahu pemain bahwa mereka aman dari tembakan tim musuh saat bergabung atau bergabung kembali ke ronde. Mengikuti pedoman estetika untuk ikon dari Choose an Art Style, contoh permainan laser tag memanfaatkan pola heksagonal semi-transparan untuk melambangkan medan gaya. Keputusan desain ini tidak hanya memperkuat gaya seni futuristik secara keseluruhan untuk semua UI dalam permainan, tetapi juga mengkomunikasikan status pemain tanpa teks atau panduan tambahan.

Untuk mereproduksi layar medan gaya dengan tepat dalam contoh permainan Laser Tag:

Masukkan objek ImageLabel ke dalam objek ForceFieldGui ScreenGui.
1. Di jendela Explorer, navigasikan ke layanan StarterGui.
2. Arahkan mouse ke objek anak ForceFieldGui, lalu klik ikon ⊕. Menu kontekstual ditampilkan.
3. Dari menu kontekstual, masukkan objek ImageLabel.
Pilih label baru, lalu di jendela Properties,
1. Atur Image menjadi rbxassetid://14462567888.
2. Atur BackgroundTransparency menjadi 0.8 untuk membuat medan gaya transparan.
3. Atur Size menjadi {1, 0},{1, 0} untuk membuat gambar mengisi seluruh layar (100% secara horizontal dan 100% secara vertikal dari ScreenGui induk).
4. Atur ScaleType menjadi Tile untuk membuat heksagon mengulang di seluruh layar.
5. Atur TileSize menjadi {0, 104},{0, 180}.
Masukkan objek UIGradient ke dalam label.
Pilih objek gradien baru, lalu di jendela Properties,
1. Atur Color menjadi urutan warna yang dimulai dengan biru, berubah menjadi putih, lalu kembali menjadi biru.
  1. Atur Color menjadi 120, 192, 250 untuk menerapkan nuansa biru muda ke semua heksagon.
  2. Klik properti Color, lalu klik tombol ⋯. Pop-up urutan warna ditampilkan.
    
    Setiap segitiga pada sumbu bawah urutan warna adalah titik kunci yang menentukan nilai warna dari properti pada titik gambar itu dari kiri ke kanan.
  3. Klik dan seret pada urutan warna hingga mencapai nilai Time 0.05, lalu klik kotak kecil di samping Color untuk membuka jendela pop-up Colors.
  4. Pilih warna putih cerah, lalu tutup jendela pop-up.
  5. Klik dan seret pada urutan warna hingga mencapai nilai Time 0.95, lalu buka jendela pop-up Colors lagi, dan pilih warna putih yang sama seperti sebelumnya.
2. Atur Rotation menjadi 225 untuk membuat bagian biru dari urutan warna Anda ditampilkan di sudut kiri atas dan kanan bawah.
3. Atur Transparency menjadi urutan angka yang membuat medan gaya terlihat berkilau.
  1. Klik properti Transparency, lalu klik tombol ⋯. Pop-up urutan angka ditampilkan. Setiap kotak di awal dan akhir urutan angka adalah titik kunci yang menentukan nilai transparansi dari properti pada titik gambar itu dari kiri ke kanan.
  2. Atur properti waktu dan nilai berikut di seluruh urutan angka:
  - Time = 0, Value = 0.25
  - Time = .101, Value = 0.875
  - Time = .183, Value = 0
  - Time = .3, Value = 1
  - Time = .7, Value = 1
  - Time = 1, Value = 0.9
Duplikat ImageLabel dari langkah 2.
Pilih objek UIGradient dalam label duplikat, lalu di jendela Properties,
1. Atur Rotation menjadi -45 untuk membalik gambar sehingga hampir mencerminkan satu sama lain di sepanjang sumbu Y.
2. Modifikasi Transparency untuk membuat kilau terlihat lebih organik.
  1. Klik properti Transparency, lalu klik tombol ⋯. Pop-up urutan angka ditampilkan.
  2. Pilih keyframe ketiga, lalu klik tombol Delete.
Referensikan skrip ReplicatedStorage berikut dalam file tempat contoh Laser Tag yang secara programatik menampilkan layar medan gaya saat pemain bergabung atau bergabung kembali ke ronde.

Skrip klien ReplicatedStorage.ForceFieldClientVisuals berikut menggantikan visual default ForceField dengan StarterGui.ForceFieldGui. Ketika pemain masuk ke dalam permainan dan muncul di SpawnLocation dengan properti Duration yang lebih besar dari 0, perilaku default di setiap permainan adalah memberikan avatar mereka orb pelindung biru yang sesaat mencegah mereka kehilangan kesehatan.

Skrip ini dimulai dengan mendengarkan ketika ForceField ditambahkan ke karakter, menonaktifkan visual force field orang pertama default, kemudian mengaktifkan objek ForceFieldGui ScreenGui. Perlu dicatat bahwa ini tidak berdampak pada visual orang ketiga ketika pemain melihat pemain lain yang muncul kembali ke dalam permainan.

Visual force field orang pertama mencakup grid heksagonal futuristik di perimeter layar. — Visual force field orang pertama

Visual force field orang ketiga mencakup orb berkilau biru di sekitar pemain yang muncul ke dalam permainan. — Visual force field orang ketiga

local Players = game:GetService("Players")

local localPlayer = Players.LocalPlayer

local function onCharacterAddedAsync(character: Model)
	local forceField = character:WaitForChild("ForceField", 3)
	if not forceField then
		-- Jika pemain muncul di titik spawn dengan ForceField dinonaktifkan
		return
	end

	forceField.Visible = false
	localPlayer.PlayerGui:WaitForChild("ForceFieldGui").Enabled = true
	forceField.Destroying:Wait()
	localPlayer.PlayerGui.ForceFieldGui.Enabled = false
end

if localPlayer.Character then
	onCharacterAddedAsync(localPlayer.Character)
end

localPlayer.CharacterAdded:Connect(onCharacterAddedAsync)

Sekarang, setiap kali pemain bergabung atau bergabung kembali ke ronde setelah muncul kembali, UI layar force field baru ditampilkan alih-alih visual ForceField orang pertama default.

Layar respawn

Layar respawn adalah elemen UI yang meredupkan viewport untuk memberi tahu pemain bahwa mereka telah ditandai keluar, dan bahwa server sedang dalam proses menghidupkan kembali mereka ke zona spawn mereka. Elemen UI ini penting karena memberi pemain waktu untuk memproses bahwa mereka telah ditandai keluar, dan merencanakan langkah berikutnya sebelum mereka bergabung kembali ke ronde aktif.

Untuk informasi lebih lanjut tentang perilaku respawn kustom dalam permainan laser tag contoh, lihat Respawn Characters dari kurikulum Gameplay Scripting.

Untuk mereproduksi layar respawn dengan tepat dalam permainan Laser Tag contoh:

Buat banner informasi pusat.
1. Masukkan ImageLabel ke dalam objek OutStateGui ScreenGui.
  1. Di jendela Explorer, navigasikan ke layanan StarterGui.
  2. Arahkan ke objek anak OutStateGui, lalu klik ikon ⊕. Menu kontekstual ditampilkan.
  3. Dari menu kontekstual, masukkan ImageLabel.
2. Pilih label baru, lalu di jendela Properties,
  1. Set AnchorPoint ke 0.5, 0.5 untuk mengatur titik asal tombol baru di tengah dirinya (50% dari kiri ke kanan label, dan 50% dari atas ke bawah label).
  2. Set BackgroundTransparency ke 1 untuk membuat latar belakang label sepenuhnya transparan.
  3. Set Position ke {0.5, 0},{0.5, 0} untuk mengatur label di tengah kontainernya (50% dari kiri ke kanan ScreenGui induk, dan 50% dari atas ke bawah ScreenGui induk).
  4. Set Size ke {0.48, 0},{0.06, 0} untuk memperlebar label (48% secara horizontal dan 6% secara vertikal dari ScreenGui induk).
  5. Set Name ke Block.
  6. Set Image ke rbxassetid://14304827265 untuk membuat gambar menjadi trapezoid.
  7. Set ImageColor ke 0,0,0 untuk membuat trapezoid berwarna hitam.
  8. Set ImageTransparency ke 0.3 untuk mengurangi opasitas label sebesar 30%, dan mencocokkan semua elemen UI hitam dalam permainan.
3. Masukkan UIAspectRatioConstraint ke dalam Block untuk memastikan rasio aspek label dan elemen UI anaknya tetap sama tidak peduli ukuran layar pemain.
4. Pilih batasan baru, lalu di jendela Properties, set AspectRatio ke 13.78.
5. Masukkan TextLabel ke dalam Block untuk teks informasi.
6. Pilih label baru, lalu di jendela Properties,
  1. Set AnchorPoint ke 0.5, 0.5 untuk mengatur titik asal label di tengah dirinya (50% dari kiri ke kanan label, dan 50% dari atas ke bawah label).
  2. Set BackgroundTransparency ke 1 untuk membuat latar belakang label sepenuhnya transparan.
  3. Set Position ke {0.5, 0},{0.5, 0} untuk mengatur label di tengah label induknya (50% dari kiri ke kanan label induk, dan 50% dari atas ke bawah label induk).
  4. Set Size ke {.85, 0},{0.55, 0} sehingga teks dapat mengambil sebagian besar area trapezoid (85% secara horizontal dan 55% secara vertikal dari label induk).
  5. Set Name ke BodyTextLabel.
  6. Set FontFace ke Montserrat untuk sesuai dengan estetika futuristik.
  7. Set Weight ke Bold untuk menebalkan font.
  8. Set Text ke Respawning….
  9. Set TextColor3 ke 255, 255, 255 untuk membuat teks berwarna putih.
  10. Aktifkan TextScaled.
Buat header.
1. Masukkan ImageLabel ke dalam Block.
2. Pilih label baru, lalu di jendela Properties,
  1. Set AnchorPoint ke 0.5, 1 untuk mengatur titik asal label di tengah-bawah dirinya (50% dari kiri ke kanan label, dan 100% dari atas ke bawah label).
  2. Set BackgroundTransparency ke 1 untuk membuat latar belakang label sepenuhnya transparan.
  3. Set Position ke {0.5, 0},{0, 0} untuk mengatur label di atas-tengah label induknya (50% dari kiri ke kanan label induk, dan 0% dari atas ke bawah label induk).
  4. Set Size ke {0.46, 0},{0.56, 0} untuk memperlebar label (46% secara horizontal dan 56% secara vertikal dari label induk).
  5. Set Name ke Header.
  6. Set Image ke rbxassetid://14304826985 untuk membuat gambar menjadi fade multi-arah.
  7. Set ImageColor ke 245, 46, 46 untuk membuat fade berwarna merah untuk menandakan bahwa pemain sementara tidak aktif saat mereka ditandai keluar dari ronde.
3. Masukkan TextLabel ke dalam Header untuk teks informasi.
4. Pilih label baru, lalu di jendela Properties,
  1. Set AnchorPoint ke 0.5, 0.5 untuk mengatur titik asal label di tengah dirinya (50% dari kiri ke kanan label, dan 50% dari atas ke bawah label).
  2. Set BackgroundTransparency ke 1 untuk membuat latar belakang label sepenuhnya transparan.
  3. Set Position ke {0.5, 0},{0.5, 0} untuk mengatur label di tengah label induknya (50% dari kiri ke kanan label induk, dan 50% dari atas ke bawah label induk).
  4. Set Size ke {.85, 0},{0.55, 0} sehingga teks dapat mengambil sebagian besar area fade (85% secara horizontal dan 55% secara vertikal dari label induk).
  5. Set Name ke HeaderTextLabel.
  6. Set FontFace ke Montserrat untuk sesuai dengan estetika futuristik.
  7. Set Weight ke Black untuk menebalkan font.
  8. Set Text ke TAGGED - YOU'RE OUT!
  9. Set TextColor3 ke 255, 255, 255 untuk membuat teks berwarna putih.
  10. Aktifkan TextScaled.
Buat fade di sekitar tepi layar.
1. Masukkan ImageLabel ke dalam OutStateGui.
2. Pilih label baru, lalu di jendela Properties,
  1. Set AnchorPoint ke 0.5, 0.5 untuk mengatur titik asal label di tengah dirinya (50% dari kiri ke kanan label, dan 50% dari atas ke bawah label).
  2. Set BackgroundColor3 ke 0,0,0 untuk mengatur warna latar belakang label menjadi hitam.
  3. Set BackgroundTransparency ke 0.5 untuk membuat latar belakang label setengah transparan.
  4. Set Position ke {0.5, 0},{0.5, 0} untuk mengatur label di tengah kontainernya (50% dari kiri ke kanan ScreenGui induk, dan 50% dari atas ke bawah ScreenGui induk).
  5. Set Size ke {1, 0},{1, 0} untuk memperlebar label ke seluruh layar (100% secara horizontal dan 100% secara vertikal dari ScreenGui induk).
  6. Set ZIndex ke -1 untuk menampilkan fade di belakang elemen UI lainnya.
  7. Set Name ke Header.
  8. Set Image ke rbxassetid://14309518613 untuk membuat gambar menjadi border fade.
  9. Set ImageTransparency ke 0.1 untuk membuat fade sedikit transparan.
Untuk meningkatkan kinerja, Anda dapat melewatkan aset gambar dan sebaliknya menggunakan objek UIGradient dengan urutan angka transparansi kustom. Untuk mempelajari lebih lanjut tentang teknik fade ini, lihat Modifikasi Penampilan UI - Gradien.
Referensikan skrip ReplicatedStorage berikut dalam file tempat Laser Tag contoh yang secara programatis menampilkan layar respawn ketika kesehatan pemain mencapai nol, dan mereka sedang dalam proses respawn kembali ke zona spawn tim mereka.

Skrip klien ReplicatedStorage.PlayerStateHandler berikut berisi fungsi yang memicu berbagai jenis perilaku sesuai dengan atribut playerState. Semua respons peristiwa dikelompokkan secara logis dalam skrip ini karena mereka memerlukan perilaku serupa untuk mengaktifkan atau menonaktifkan kontrol pemain, gerakan kamera, dan lapisan UI mana yang terlihat.

Ketika kesehatan pemain mencapai nol, playerState mereka menjadi TaggedOut, yang memicu fungsi onTaggedOut(). onTaggedOut() segera memicu perilaku berikut:

Pemain tidak dapat bergerak di arena.
Pemain tidak dapat menggerakkan kamera mereka.
Pemain tidak dapat menggunakan blaster mereka.
StarterGui.OutStateGui menjadi eksklusif diaktifkan.

Ketika pemain respawn, playerState mereka menjadi SelectingBlaster, yang memicu fungsi onSelectingBlaster(). onSelectingBlaster() kemudian secara eksklusif mengaktifkan StarterGui.PickABlasterGui, yang secara otomatis menonaktifkan layar respawn. Untuk informasi lebih lanjut tentang kondisi ini, lihat Tangani Status Klien dari kurikulum Gameplay Scripting.

local ReplicatedStorage = game:GetService("ReplicatedStorage")
local Players = game:GetService("Players")

local PlayerState = require(ReplicatedStorage.PlayerState)
local PlayerAttribute = require(ReplicatedStorage.PlayerAttribute)
local BlasterState = require(ReplicatedStorage.Blaster.BlasterState)
local togglePlayerMovement = require(script.togglePlayerMovement)
local togglePlayerCamera = require(script.togglePlayerCamera)
local scheduleDestroyForceField = require(ReplicatedStorage.scheduleDestroyForceField)

local localPlayer = Players.LocalPlayer

local playerGui = localPlayer.PlayerGui
local guiLayers = {
	playerGui:WaitForChild("HUDGui"),
	playerGui:WaitForChild("OutStateGui"),
	playerGui:WaitForChild("PickABlasterGui"),
}

-- Nonaktifkan semua Lapisan UI kecuali pengecualian yang diberikan
local function setGuiExclusivelyEnabled(enabledGui: ScreenGui?)
	-- guiLayers berisi daftar gui yang harus diatur secara eksklusif.
	for _, screenGui in guiLayers do
		screenGui.Enabled = screenGui == enabledGui
	end
end

local function onSelectingBlaster()
	-- Aktifkan kamera sehingga pemain dapat melihat sekitar saat memilih blaster
	togglePlayerCamera(true)
	togglePlayerMovement(false)
	setGuiExclusivelyEnabled(playerGui.PickABlasterGui)

	-- Nonaktifkan blaster saat memilih blaster
	localPlayer:SetAttribute(PlayerAttribute.blasterStateClient, BlasterState.Disabled)
end

local function onPlaying()
	-- Aktifkan gerakan pemain setelah memilih blaster
	togglePlayerMovement(true)
	setGuiExclusivelyEnabled(playerGui.HUDGui)

	-- Aktifkan blaster saat bermain
	localPlayer:SetAttribute(PlayerAttribute.blasterStateClient, BlasterState.Ready)

	-- Jadwalkan logika hancurkan force field saat pemain mulai bermain
	scheduleDestroyForceField()
end

local function onTaggedOut()
	-- Nonaktifkan kontrol saat ditandai keluar
	togglePlayerMovement(false)
	togglePlayerCamera(false)
	setGuiExclusivelyEnabled(playerGui.OutStateGui)

	-- Nonaktifkan blaster saat ditandai keluar
	localPlayer:SetAttribute(PlayerAttribute.blasterStateClient, BlasterState.Disabled)
end

local function onInLobby()
	-- Aktifkan kontrol saat di lobi
	togglePlayerMovement(true)
	togglePlayerCamera(true)

	-- Sembunyikan semua HUD saat di lobi
	setGuiExclusivelyEnabled(nil)

	-- Nonaktifkan blaster saat di lobi
	localPlayer:SetAttribute(PlayerAttribute.blasterStateClient, BlasterState.Disabled)
end

local function onPlayerStateChanged(newPlayerState: string)
	if newPlayerState == PlayerState.SelectingBlaster then
		onSelectingBlaster()
	elseif newPlayerState == PlayerState.Playing then
		onPlaying()
	elseif newPlayerState == PlayerState.TaggedOut then
		onTaggedOut()
	elseif newPlayerState == PlayerState.InLobby then
		onInLobby()
	else
		warn(`Invalid player state ({newPlayerState})`)
	end
end

-- Tangani status pemain awal jika diatur
local initialPlayerState = localPlayer:GetAttribute(PlayerAttribute.playerState)
onPlayerStateChanged(initialPlayerState)

local function updateFromPlayerState()
	onPlayerStateChanged(localPlayer:GetAttribute(PlayerAttribute.playerState))
end

-- Tangani pembaruan status pemain di masa depan
localPlayer:GetAttributeChangedSignal(PlayerAttribute.playerState):Connect(updateFromPlayerState)

-- Pastikan perubahan masih diterapkan setelah respawn
localPlayer.CharacterAdded:Connect(updateFromPlayerState)

Sekarang, setiap kali kesehatan pemain mencapai nol, layar respawn ditampilkan sampai pemain respawn kembali ke zona spawn mereka.

Sekarang Anda sudah familiar dengan GuiObjects umum untuk UI di layar, coba untuk mereproduksi objek RoundResultsGui ScreenGui dan semua anaknya untuk tampilan di layar ketika pemain menang atau kalah dalam pertandingan. Anda dapat menggunakan file contoh permainan laser tag sample laser tag game .rbxl sebagai referensi, atau sesuaikan nilai-nilai untuk memenuhi persyaratan gameplay permainan Anda sendiri.

Buat objek SurfaceGui

Untuk menampilkan UI di permukaan bagian dalam ruang 3D yang merespons logika skrip untuk setiap pemain individu, Anda dapat mengaitkan objek SurfaceGui ke bagian yang ingin Anda tampilkan UI Anda di dalam layanan ReplicatedStorage. Teknik ini memastikan UI dan logika skripnya tersedia untuk server dan klien setiap pemain.

Objek SurfaceGui berisi semua GuiObjects yang ditampilkan di permukaan bagian dalam ruang 3D. Permainan laser tag contoh hanya mencakup satu instance objek SurfaceGui: meter cooldown yang ditampilkan di atas blaster setiap pemain. Objek ini memerlukan logika skrip untuk setiap pemain karena secara aktif merespons input setiap pemain individu, dan memberikan umpan balik visual tentang kapan mereka dapat menembakkan blaster mereka lagi.

Untuk membuat objek SurfaceGui:

Di jendela Explorer, arahkan ke layanan ReplicatedStorage, lalu klik ikon ⊕. Menu kontekstual ditampilkan.
Dari menu kontekstual, masukkan objek Part.
Masukkan objek ScreenGui ke dalam bagian.
Ganti nama SurfaceGui sesuai dengan konteks elemen UI anaknya.
Ulangi proses ini untuk setiap elemen UI yang perlu Anda tampilkan di permukaan bagian dalam ruang 3D.

Meter cooldown

Meter cooldown adalah komponen UI yang memberi tahu pemain berapa lama mereka harus menunggu sebelum mereka dapat menembakkan blaster mereka lagi. Jeda kecil ini mencegah pemain dari menembak secepat mereka dapat mengklik atau menekan tombol, yang tidak realistis untuk gameplay laser tag.

Untuk mereproduksi meter cooldown dengan tepat dalam permainan Laser Tag contoh:

Buat bagian untuk menampung objek SurfaceGui Anda.
1. Di jendela Explorer, arahkan ke Workspace, lalu klik ikon ⊕. Menu kontekstual ditampilkan.
2. Dari menu kontekstual, masukkan bagian block. Ini adalah lokasi sementara untuk bagian sehingga Anda dapat memvisualisasikan perubahan di setiap langkah proses.
Posisi dan orientasikan bagian di sekitar posisi di mana karakter pemain akan memegang blaster mereka, lalu di jendela Properties,
1. Set Transparency ke 1 untuk membuat bagian sepenuhnya transparan.
2. Set Name ke CooldownBarPrefab.
3. Set Size ke 0.169, 0.027, 2.537 untuk mengubah ukuran bagian menjadi panjang blaster.
4. Nonaktifkan CanCollide dan CanQuery.
Masukkan SurfaceGui ke dalam CooldownBarPrefab.
Pilih SurfaceGui baru, lalu di jendela Properties,
1. Set Face ke Top sehingga UI ditampilkan menghadap ke atas.
2. Set LightInfluence dan MaxDistance ke 0.
3. Set PixelsPerStud ke 200.
Buat bar hitam.
1. Masukkan ImageLabel ke dalam SurfaceGui.
2. Pilih label baru, lalu di jendela Properties,
  1. Hapus nilai Image default.
  2. Set AnchorPoint ke 0.5, 0.5 untuk mengatur titik asal label di tengah dirinya (50% dari kiri ke kanan label, dan 50% dari atas ke bawah label).
  3. Set BackgroundColor3 ke 0,0,0 untuk mengatur warna latar belakang label menjadi hitam.
  4. Set BackgroundTransparency ke 0.4 untuk membuat latar belakang label semi-transparan.
  5. Set Position ke {0.5, 0},{0.5, 0} untuk mengatur label di tengah kontainernya (50% dari kiri ke kanan SurfaceGui induk, dan 50% dari atas ke bawah SurfaceGui induk).
  6. Set Size ke {1, 0},{1, 0} untuk memperlebar label ke seluruh bagian (100% secara horizontal dan 100% secara vertikal dari SurfaceGui induk).
  7. Set Name ke Container.
Bulatkan sudut kontainer.
1. Masukkan objek UICorner ke dalam Container.
2. Pilih UICorner, lalu di jendela Properties, set CornerRadius ke 0.15, 0 untuk sedikit membulatkan sudut.
Buat bar merah.
1. Masukkan ImageLabel ke dalam Container.
2. Pilih label baru, lalu di jendela Properties,
  1. Hapus nilai Image default.
  2. Set AnchorPoint ke 1, 0.5 untuk mengatur titik asal label di kanan-tengah dirinya (100% dari kiri ke kanan label, dan 50% dari atas ke bawah label).
  3. Set BackgroundColor3 ke 172, 13, 13 untuk mengatur warna latar belakang label menjadi merah gelap.
  4. Set BackgroundTransparency ke 0.2 untuk membuat latar belakang label sedikit transparan.
  5. Set Name ke Bar.
  6. Set Position ke {1, 0},{0.5, 0} untuk mengatur label di kanan-tengah kontainernya (100% dari kiri ke kanan label induk, dan 50% dari atas ke bawah label induk).
  7. Set Size ke {0, 0},{1, 0} untuk memperpanjang label ke atas label induknya (0% secara horizontal dan 100% secara vertikal dari label induk). Langkah ini juga bermanfaat untuk perilaku tweening yang terjadi dalam skrip di langkah 8.
Bulatkan sudut label.
1. Masukkan objek UICorner ke dalam Bar.
2. Pilih UICorner, lalu di jendela Properties set CornerRadius ke 0.15, 0 untuk sedikit membulatkan sudut.
Pindahkan CooldownBarPrefab ke ReplicatedStorage.
1. Buat struktur folder untuk mengatur objek UI Anda. Contoh menggunakan folder Instances dengan folder anak Guis.
2. Pindahkan CooldownBarPrefab ke dalam Guis.
Referensikan skrip ReplicatedStorage berikut dalam file tempat Laser Tag contoh yang secara programatis melampirkan meter cooldown ke blaster pemain, kemudian menganimasi bar merah setelah pemain menembakkan blaster mereka.

Skrip klien ReplicatedStorage.FirstPersonBlasterVisuals berikut menangani semua logika visual untuk blaster orang pertama pemain. Ini memerlukan serangkaian skrip modul yang bekerja sama untuk mengatur visual blaster yang terasa lebih realistis untuk gameplay laser tag, termasuk FirstPersonBlasterVisuals.addCooldownBar dan FirstPersonBlasterVisuals.runCooldownBarEffect.

local Players = game:GetService("Players")
local ReplicatedStorage = game:GetService("ReplicatedStorage")
local Workspace = game:GetService("Workspace")
local RunService = game:GetService("RunService")

local BlastData = require(ReplicatedStorage.Blaster.BlastData)
local PlayerAttribute = require(ReplicatedStorage.PlayerAttribute)
local PlayerState = require(ReplicatedStorage.PlayerState)
local getBlasterConfig = require(ReplicatedStorage.Blaster.getBlasterConfig)

local runBlastVisuals = require(script.runBlastVisuals)
local setupAnimations = require(script.setupAnimations)
local addCooldownBar = require(script.addCooldownBar)
local runCooldownBarEffect = require(script.runCooldownBarEffect)

local laserBlastedBindableEvent = ReplicatedStorage.Instances.LaserBlastedBindableEvent

local RIG_OFFSET_FROM_CAMERA = CFrame.new(2, -2, -3) * CFrame.Angles(math.rad(0.25), math.rad(95.25), 0)

local localPlayer = Players.LocalPlayer
local currentCamera = Workspace.CurrentCamera

local rigModel = nil
local cooldownBar = nil
local animations = {}

local function addFirstPersonVisuals()
	local blasterConfig = getBlasterConfig()

	-- Tambahkan rig orang pertama
	rigModel = blasterConfig.RigModel:Clone()
	rigModel.Parent = Workspace

	-- Tambahkan cooldownBar
	cooldownBar = addCooldownBar(rigModel.PrimaryPart.CooldownBarAttachment)

	animations = setupAnimations(blasterConfig, rigModel)
end

local function removeFirstPersonVisuals()
	for _, animation in animations do
		animation:Stop()
		animation:Destroy()
		animation = nil
	end
	if rigModel then
		-- Ini juga menghancurkan bar cooldown karena diparent ke rig
		rigModel:Destroy()
		rigModel = nil
	end
end

-- Jalankan efek visual orang pertama saat ledakan terjadi
laserBlastedBindableEvent.Event:Connect(function(blastData: BlastData.Type)
	runBlastVisuals(rigModel.PrimaryPart.TipAttachment, blastData, animations.blastAnimation)
	runCooldownBarEffect(cooldownBar)
end)

-- Ikat rig ke kamera jika ada
RunService.RenderStepped:Connect(function()
	if rigModel then
		-- Perbarui CFrame rig relatif terhadap posisi kamera dan RIG_OFFSET_FROM_CAMERA
		rigModel:PivotTo(currentCamera.CFrame * RIG_OFFSET_FROM_CAMERA)
	end
end)

-- Menangani perubahan visual saat blasterType berubah saat bermain
localPlayer:GetAttributeChangedSignal(PlayerAttribute.blasterType):Connect(function()
	local playerState = localPlayer:GetAttribute(PlayerAttribute.playerState)
	if playerState == PlayerState.Playing then
		removeFirstPersonVisuals()
		addFirstPersonVisuals()
	end
end)

-- Menangani perubahan visual saat playerState berubah
localPlayer:GetAttributeChangedSignal(PlayerAttribute.playerState):Connect(function()
	local newPlayerState = localPlayer:GetAttribute(PlayerAttribute.playerState)
	-- Hapus visual saat pemain memilih blaster atau berada di lobi
	if newPlayerState == PlayerState.SelectingBlaster or newPlayerState == PlayerState.InLobby then
		removeFirstPersonVisuals()
	-- Tambahkan visual kembali saat pemain selesai memilih blaster.
	elseif newPlayerState == PlayerState.Playing then
		addFirstPersonVisuals()
	end
end)

Sekarang, setiap kali pemain menembakkan blaster mereka, bar cooldown dianimasikan untuk mengkomunikasikan kapan pemain dapat menembak lagi.

Buat objek BillboardGui

Untuk menampilkan elemen UI dalam ruang 3D yang merespons logika skrip dan selalu menghadap kamera setiap pemain terlepas dari sudut pandang mereka, seperti nama pemain atau penanda peta, Anda dapat membuat objek BillboardGui sebagai anak dari BasePart atau Attachment yang ada dalam ruang 3D.

Permainan laser tag contoh mencakup dua objek BillboardGui terpisah dalam layanan ReplicatedStorage:

OtherPlayerIndicatorGuiPrefab - Menampilkan lingkaran merah muda atau hijau di atas kepala setiap pemain ketika mereka aktif dalam ronde.
TaggedOutIndicatorGuiPrefab - Menampilkan di atas kepala pemain ketika mereka ditandai keluar dari ronde.

Setelah Anda membuat objek BillboardGui, Anda dapat membuat dan menyesuaikan GuiObjects anaknya sesuai dengan tujuan setiap kontainer. Untuk mendemonstrasikan, di bagian segera berikutnya, Anda akan belajar bagaimana menerapkan elemen UI untuk kedua jenis indikator dalam permainan laser tag contoh. Anda dapat menyesuaikan bagian mana pun dari proses untuk memenuhi spesifikasi permainan Anda sendiri.

Untuk membuat objek BillboardGui:

Di jendela Explorer, arahkan ke BasePart atau Attachment, lalu klik ikon ⊕. Menu kontekstual ditampilkan.
Dari menu kontekstual, masukkan objek BillboardGui.
Ganti nama BillboardGui sesuai dengan konteks elemen UI anaknya.
Ulangi proses ini untuk setiap elemen UI yang perlu Anda tampilkan secara kontekstual di atas kepala pemain.

Indikator tim

Indikator tim adalah elemen UI yang memberi tahu pemain tim mana yang dimiliki pemain lain dalam ronde sehingga mereka dapat dengan mudah membedakan antara sekutu mereka dan anggota tim musuh. Informasi ini penting karena gameplay permainan tembak-menembak orang pertama mengharuskan pemain untuk membuat keputusan strategis cepat saat mereka berada di zona pertempuran sehingga mereka tidak ditandai keluar dan kehilangan pertandingan.

Untuk mereproduksi indikator tim dengan tepat dalam permainan Laser Tag contoh:

Masukkan objek BillboardGui ke dalam rig sementara.
1. Dari tab Home atau Avatar di toolbar, klik Character.
2. Pilih dari opsi yang tersedia. Contoh menggunakan tipe rig R15, bentuk tubuh feminim, dan avatar Rthro. Rig ditampilkan baik di viewport 3D maupun di jendela Explorer di bawah nama Rig.
3. Di jendela Explorer, navigasikan ke mesh Head anak rig, lalu klik ikon ⊕. Menu kontekstual ditampilkan.
4. Dari menu kontekstual, masukkan BillboardGui.
Pilih BillboardGui baru, lalu di jendela Properties,
1. Set LightInfluence ke 0 untuk mencegah cahaya lingkungan mempengaruhi warna indikator.
2. Set Name ke OtherPlayerIndicatorPrefab.
3. Set Size ke {0, 10},{0, 10} untuk membuat label jauh lebih kecil.
4. Set StudsOffsetWorldSpace ke 0, 4, 0 untuk memposisikannya di atas kepala rig.
Masukkan objek Frame ke dalam OtherPlayerIndicatorPrefab.
Pilih frame baru, lalu di jendela Properties,
1. Set AnchorPoint ke 0.5, 0.5 untuk mengatur titik asal frame di tengah dirinya (50% dari kiri ke kanan label, dan 50% dari atas ke bawah label).
2. Set BackgroundColor3 ke 255, 3, 0 untuk mengatur warna latar belakang frame menjadi merah sebagai warna placeholder.
3. Set Position ke {0.5, 0},{0.5, 0} untuk mengatur frame di tengah kontainernya (50% dari kiri ke kanan BillboardGui induk, dan 50% dari atas ke bawah BillboardGui induk).
4. Set Size ke {1, -2},{1, -2} untuk memperpendek frame ke area permukaan BillboardGui.
Masukkan objek UICorner ke dalam Frame untuk membulatkan sudut sepenuhnya.
Masukkan objek UIStroke ke dalam Frame untuk memberi garis tepi pada lingkaran indikator.
Pindahkan OtherPlayerIndicatorPrefab ke ReplicatedStorage.
Referensikan skrip ReplicatedStorage berikut dalam file tempat Laser Tag 1A contoh yang secara programatis menampilkan indikator tim untuk setiap pemain dalam ronde aktif kecuali mereka berada di tim musuh dan terhalang.

Skrip ReplicatedStorage.OtherPlayerIndicatorGuiSetup berikut dijalankan ketika pemain muncul di arena untuk ronde aktif. Ini melampirkan indikator tim dengan memanggil fungsi addIndicatorToCharacter(), yang menemukan objek Head dari setiap karakter pemain yang berpartisipasi dalam ronde. Jika mereka belum memiliki indikator tim, skrip kemudian mengkloning dan menambahkan UI otherPlayerIndicatorPrefab ke Head karakter, dan mengatur warna indikator tim ke warna tim mereka.

Jika pemain lain berada di tim yang sama, indikator tim selalu ditampilkan, bahkan jika mereka bersembunyi di belakang objek dalam ruang 3D; jika pemain lain berada di tim musuh, indikator tim hanya ditampilkan jika tidak ada objek dalam ruang 3D yang menghalangi mereka.

local Players = game:GetService("Players")
local ReplicatedStorage = game:GetService("ReplicatedStorage")

local localPlayer = Players.LocalPlayer
local otherPlayerIndicatorPrefab = ReplicatedStorage.Instances.Guis.OtherPlayerIndicatorPrefab

local characterSpawnConnectionsByPlayer: { [Player]: RBXScriptConnection } = {}
local playerAddedConnection: RBXScriptConnection?

local function removeIndicatorFromPlayer(player: Player)
	if not player.Character then
		return
	end

	local head = player.Character:WaitForChild("Head", 3)
	if not head then
		return
	end

	local gui = head:FindFirstChild(otherPlayerIndicatorPrefab.Name)
	if gui then
		gui:Destroy()
	end
end

local function addIndicatorToCharacter(otherCharacter: Model?)
	local otherPlayer = Players:GetPlayerFromCharacter(otherCharacter)
	if not otherPlayer then
		return
	end

	task.spawn(function()
		local otherHead = otherCharacter:WaitForChild("Head", 3)
		if not otherHead then
			return
		end

		-- Hanya tambahkan indikator ke pemain yang berpartisipasi dalam ronde
		if not otherPlayer.Team then
			return
		end

		-- Hindari menambahkan indikator duplikat, buat yang baru hanya jika tidak ada
		local gui = otherHead:FindFirstChild(otherPlayerIndicatorPrefab.Name)
		if not gui then
			gui = otherPlayerIndicatorPrefab:Clone()
			gui.Frame.BackgroundColor3 = otherPlayer.TeamColor.Color
			gui.Parent = otherHead
		end

		-- Indikator selalu di atas hanya jika pemain bersahabat

		local isFriendly = otherPlayer.Team == localPlayer.Team
		gui.AlwaysOnTop = isFriendly
	end)
end

local function addIndicatorWhenCharacterSpawns(player: Player)
	if characterSpawnConnectionsByPlayer[player] then
		return
	end
	local connection = player.CharacterAdded:Connect(addIndicatorToCharacter)
	characterSpawnConnectionsByPlayer[player] = connection
end

local function stopSyncingIndicators()
	for _, connection in characterSpawnConnectionsByPlayer do
		connection:Disconnect()
	end
	table.clear(characterSpawnConnectionsByPlayer)

	if playerAddedConnection then
		playerAddedConnection:Disconnect()
		playerAddedConnection = nil
	end

	for _, player in Players:GetPlayers() do
		removeIndicatorFromPlayer(player)
	end
end

local function addIndicatorToPlayer(player: Player)
	if player == localPlayer then
		return
	end

	addIndicatorToCharacter(player.Character)
	addIndicatorWhenCharacterSpawns(player)
end

local function startSyncingIndicators()
	for _, player in Players:GetPlayers() do
		addIndicatorToPlayer(player)
	end

	if not playerAddedConnection then
		playerAddedConnection = Players.PlayerAdded:Connect(addIndicatorToPlayer)
	end
end

local function onLocalTeamChanged()
	local localTeam = localPlayer.Team
	if localTeam then
		startSyncingIndicators()
	else
		stopSyncingIndicators()
	end
end

localPlayer:GetPropertyChangedSignal("Team"):Connect(onLocalTeamChanged)
onLocalTeamChanged()

Sekarang, setiap kali pemain berada dalam ronde aktif, indikator tim ditampilkan di atas kepala pemain lain kecuali mereka berada di tim musuh dan di belakang objek.

Indikator ditandai keluar

Indikator ditandai keluar adalah elemen UI yang memberi tahu pemain ketika pemain lain tidak lagi aktif dalam ronde dan sedang dalam proses respawn kembali ke zona spawn mereka. Informasi ini penting karena gameplay permainan tembak-menembak orang pertama mengharuskan pemain untuk bergerak ke target berikutnya segera setelah mereka menandai keluar pemain sehingga mereka tidak menjadi rentan di arena dengan bermain di lokasi yang sama terlalu lama.

Untuk mereproduksi indikator ditandai keluar dengan tepat dalam permainan Laser Tag contoh:

Masukkan objek BillboardGui ke dalam rig sementara sehingga Anda dapat memvisualisasikan perubahan di setiap langkah proses.
1. Dari tab Home atau Avatar di toolbar, klik Character.
2. Pilih dari opsi yang tersedia. Contoh menggunakan tipe rig R15, bentuk tubuh maskulin, dan avatar Rthro. Rig ditampilkan baik di viewport 3D maupun di jendela Explorer di bawah nama Rig.
3. Di jendela Explorer, navigasikan ke mesh Head anak rig, lalu klik ikon ⊕. Menu kontekstual ditampilkan.
4. Dari menu kontekstual, masukkan BillboardGui.
Pilih BillboardGui baru, lalu di jendela Properties,
1. Set LightInfluence ke 0 untuk mencegah cahaya lingkungan mempengaruhi warna indikator.
2. Set Name ke TaggedOutIndicatorGuiPrefab.
3. Set Size ke {3, 0},{0.5, 0} untuk memperlebar ruang untuk label.
4. Set StudsOffset ke 0, 3.25, 0 untuk memposisikannya di atas kepala pemain.
Masukkan objek ImageLabel ke dalam TaggedOutIndicatorGuiPrefab.
Pilih label baru, lalu di jendela Properties,
1. Set AnchorPoint ke 0.5, 0.5 untuk mengatur titik asal label di tengah dirinya (50% dari kiri ke kanan label, dan 50% dari atas ke bawah label).
2. Set BackgroundTransparency ke 1 untuk membuat latar belakang label sepenuhnya transparan.
3. Set Name ke Frame.
4. Set Position ke {0.5, 0},{0.5, 0} untuk mengatur label di tengah kontainernya (50% dari kiri ke kanan BillboardGui induk, dan 50% dari atas ke bawah BillboardGui induk).
5. Set Size ke {1, 0},{1, 0} untuk memperlebar label ke seluruh BillboardGui (100% secara horizontal dan 100% secara vertikal dari BillboardGui induk).
6. Set Image ke rbxassetid://14304826985 untuk membuat gambar menjadi fade multi-arah.
7. Set ImageColor ke 245, 46, 46 untuk mewarnai label merah.
Untuk meningkatkan kinerja, Anda dapat melewatkan aset gambar dan sebaliknya menggunakan objek UIGradient dengan urutan angka transparansi kustom. Untuk mempelajari lebih lanjut tentang teknik fade ini, lihat Modifikasi Penampilan UI - Gradien.
Masukkan objek TextLabel ke dalam Frame.
Pilih label baru, lalu di jendela Properties,
1. Set AnchorPoint ke 0.5, 0.5 untuk mengatur titik asal label di tengah dirinya (50% dari kiri ke kanan label, dan 50% dari atas ke bawah label).
2. Set BackgroundTransparency ke 1 untuk membuat latar belakang label sepenuhnya transparan.
3. Set Name ke BodyTextLabel.
4. Set Position ke {0.5, 0},{0.5, 0} untuk mengatur label di tengah kontainernya (50% dari kiri ke kanan label induk, dan 50% dari atas ke bawah label induk).
5. Set Size ke {0.85, 0},{0.7, 0} sehingga teks dapat mengambil sebagian besar area fade (85% secara horizontal dan 70% secara vertikal dari label gambar induk).
6. Set FontFace ke Montserrat untuk sesuai dengan estetika futuristik.
7. Set Weight ke Bold untuk menebalkan font.
8. Set Text ke TAGGED.
9. Set TextColor3 ke 255, 255, 255 untuk membuat teks berwarna putih.
10. Aktifkan TextScaled.
Pindahkan TaggedOutIndicatorGuiPrefab ke ReplicatedStorage.
Referensikan skrip ServerScriptService berikut dalam file tempat Laser Tag 1A contoh yang secara programatis menampilkan indikator ditandai keluar saat pemain sedang respawn kembali ke zona spawn tim mereka.

Skrip server ServerScriptService.SetupHumanoid berikut dijalankan segera setelah pemain memuat permainan. Ini memastikan bahwa setiap kali karakter pemain ditambahkan ke model data, setupHumanoidAsync dipanggil dengan Humanoid mereka.

local Players = game:GetService("Players")

local setupHumanoidAsync = require(script.setupHumanoidAsync)

local function onCharacterAdded(player: Player, character: Model)
	local humanoid = character:WaitForChild("Humanoid")
	setupHumanoidAsync(player, humanoid)
end

local function onPlayerAdded(player: Player)
	-- Panggil onCharacterAdded jika pemain sudah memiliki karakter
	if player.Character then
		onCharacterAdded(player, player.Character)
	end
	-- Panggil onCharacterAdded untuk semua spawn karakter di masa depan untuk pemain ini
	player.CharacterAdded:Connect(function(character: Model)
		onCharacterAdded(player, character)
	end)
end

-- Panggil onPlayerAdded untuk pemain yang sudah ada dalam permainan
for _, player in Players:GetPlayers() do
	onPlayerAdded(player)
end
-- Panggil onPlayerAdded untuk semua pemain di masa depan
Players.PlayerAdded:Connect(onPlayerAdded)

Sekarang, setiap kali kesehatan pemain mencapai nol, indikator ditandai keluar ditampilkan di atas kepala mereka sampai mereka respawn.

Selamat telah menyelesaikan Kurikulum Desain Antarmuka Pengguna! Sekarang Anda memiliki pengalaman dalam menciptakan gaya seni, merancang tata letak Anda, dan menerapkan desain Anda di Studio dari awal hingga akhir, Anda dapat memperluas proyek Anda dengan UI dan fungsionalitas baru, atau mengikuti kurikulum tutorial tambahan, seperti Kurikulum Scripting Gameplay yang mengajarkan Anda tentang organisasi umum dan detail implementasi kunci dari permainan laser tag contoh. Selamat berkarya!