Menerapkan desain Anda adalah proses membuat wireframe di Studio menggunakan elemen UI bawaan dan kustom dengan skrip yang memicu UI Anda secara kontekstual. Langkah menarik dalam tutorial ini adalah saat Anda dapat melihat semua desain dan kerja keras Anda bergabung menjadi satu set alur kerja yang kohesif yang lengkap dan siap untuk interaksi pemain.
Menggunakan file pengalaman laser tag sampel .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 merekonstruksi komponen UI dari pengalaman laser tag sampel.
- 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 pengalaman Anda.
Instruksi di bagian tutorial ini menunjukkan kepada Anda bagaimana cara tepat untuk mereproduksi komponen UI 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 diberikan, Anda dapat menyesuaikan setiap elemen UI untuk memenuhi spesifikasi pengalaman Anda sendiri, atau menggunakan sampel itu sendiri untuk sisa tutorial.
Dapatkan perpustakaan aset
Perpustakaan aset adalah koleksi 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 individu, dan versi akhir dari komponen objektif, pemilih blaster, dan informasi pemain yang Anda buat di bagian tutorial ini.
rbxassetid://14309094777
rbxassetid://14309094641
rbxassetid://14309678581
rbxassetid://14304828203
rbxassetid://14304827304
rbxassetid://14309678701
rbxassetid://14304826876
rbxassetid://14304827147
rbxassetid://18308375067
rbxassetid://18308372597
rbxassetid://14400935532
rbxassetid://14401148777
rbxassetid://14462567943
rbxassetid://14309187282
rbxassetid://14309518632
Untuk mendapatkan perpustakaan aset dari inventaris Anda ke dalam pengalaman Anda:
Tambahkan perpustakaan aset ke inventaris Anda.
- Arahkan ke halaman rincian perpustakaan aset di Toko Creator.
- 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. Sortiran Model Saya ditampilkan.
Klik menu dropdown, lalu pilih sortiran Paket Saya.
Klik ubin Komponen UI Layar Akhir, lalu di jendela Explorer, pilih Komponen Selesai, lalu seret mereka ke dalam layanan StarterGui. Sekarang Anda dapat mengaktifkan salah satu komponen akhir 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 merupakan bagian penting dari proses implementasi karena rasio aspek dari viewport Anda di Studio tidak selalu mencerminkan rasio aspek dari layar yang digunakan pemain untuk mengakses pengalaman Anda, dan penting agar UI Anda dapat dibaca dan diakses di setiap perangkat.
Sebagai contoh, jika Anda tidak menguji UI Anda di 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 Sebenarnya. Ini memungkinkan Anda untuk 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 pada layar, dan layanan StarterGui menyalin isinya ke setiap kontainer PlayerGui pemain saat mereka masuk ke pengalaman.
Anda dapat membuat beberapa objek ScreenGui untuk mengorganisasi dan menampilkan pengelompokan elemen UI selaras selama permainan. Misalnya, pengalaman laser tag sampel mencakup lima objek ScreenGui terpisah yang awalnya dinonaktifkan sampai pemain memenuhi berbagai kondisi selama alur pengguna utama dari pengalaman:
- HUDGui - Menampilkan informasi kunci tentang gameplay pengalaman saat pemain aktif dalam suatu ronde, seperti objektif dan total poin masing-masing tim.
- PickABlasterGui - Menampilkan semua pilihan blaster saat pemain memulai atau bergabung kembali ke dalam rond.
- ForceFieldGui - Menampilkan grid hexagonal saat pemain memilih blaster dan sementara mereka tidak dapat tersentuh.
- OutStateGui - Menampilkan batas gelap di sekitar layar saat pemain terkena tag.
- RoundResultsGui - Menampilkan overlay gelap di bagian atas layar dengan informasi tentang tim mana yang memenangkan ronde.
Setelah Anda membuat objek ScreenGui, Anda dapat membuat dan menyesuaikan GuiObjects anaknya sesuai dengan tujuan setiap kontainer. Untuk menunjukkan, dalam bagian-bagian segera berikutnya, Anda akan belajar bagaimana menerapkan elemen UI untuk tiga kategori informasi yang perlu diketahui pemain agar berhasil dalam pengalaman laser tag sampel. Anda dapat menyesuaikan bagian mana pun dari proses ini untuk memenuhi spesifikasi pengalaman 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 Objektif
Mengikuti praktik terbaik hierarki visual dari Wireframe Your Layouts, bagian ini mengajarkan Anda bagaimana menerapkan semua elemen UI di layar yang berkaitan dengan objektif pengalaman. Pengelompokan elemen UI ini berada di dekat bagian atas layar karena objektif dan poin masing-masing tim memiliki signifikansi terbesar dalam memenangkan permainan.
Sebagai contoh, sampel menyediakan komponen UI objektif yang dirujuk pemain untuk mengetahui apa yang perlu mereka lakukan untuk berhasil dalam suatu ronde. Saat pemain memberi tag anggota tim musuh dan mendapatkan poin, komponen ini melacak skor masing-masing 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 di Kurikulum Scripting Gameplay.
Untuk mereproduksi UI objektif dengan tepat dalam pengalaman Laser Tag sampel:
Buat wadah untuk seluruh komponen.
Masukkan Frame ke dalam objek HUDGui ScreenGui.
- Di jendela Explorer, arahkan ke layanan StarterGui.
- Arahkan ke objek anak HUDGui nya, lalu klik ikon ⊕. Menu kontekstual ditampilkan.
- Dari menu kontekstual, masukkan Frame.
Pilih Frame baru, lalu di jendela Properties,
- Atur AnchorPoint menjadi 0.5, 0 untuk mengatur titik asal bingkai di tengah atas dirinya (50% dari kiri ke kanan bingkai, dan 0% dari atas ke bawah bingkai).
- Atur BackgroundTransparency menjadi 1 untuk membuat latar belakang bingkai sepenuhnya transparan.
- Atur Position menjadi {0.5, 0},{0.03, 0} untuk mengatur bingkai dekat dengan tengah atas layar (50% dari kiri ke kanan layar, dan 3% dari atas ke bawah layar sehingga ada sedikit buffer).
- Atur Size menjadi {0.5, 0},{0.13, 0} sehingga elemen bingkai memakan sebagian besar bagian atas layar untuk menarik perhatian pemain (50% secara horizontal, dan 13% secara vertikal).
- Atur Name menjadi Objective.
(Opsional) Masukkan UIAspectRatioConstraint ke dalam Objective untuk memastikan rasio aspek label tetap sama tidak peduli ukuran layar pemain. Sampel ini mengatur propertinya UIAspectRatioConstraint.AspectRatio menjadi 7.
Buat wadah untuk objek prompt objektif.
Masukkan Frame ke dalam Objective.
Pilih Frame baru, lalu di jendela Properties,
- Atur AnchorPoint menjadi 0.5, 0 untuk mengatur titik asal bingkai di tengah atas dirinya (50% dari kiri ke kanan bingkai, dan 0% dari atas ke bawah bingkai).
- Atur BackgroundTransparency menjadi 1 untuk membuat latar belakang bingkai sepenuhnya transparan.
- Atur Position menjadi {0.5, 0},{0, 0} untuk mengatur bingkai di tengah kontainer (50% dari kiri ke kanan bingkai induk, dan 0% dari atas ke bawah bingkai induk).
- Atur Size menjadi {1, 0},{0.67, 0} sehingga komponen UI pemilihan memakan lebih dari setengah kontainer dari atas ke bawah (100% secara horizontal dan 67% secara vertikal dari bingkai induk).
- Atur Name menjadi ObjectiveDisplay.
Buat elemen judul.
Masukkan ImageLabel ke dalam ObjectiveDisplay.
Pilih ImageLabel, lalu di jendela Properties,
- Atur AnchorPoint menjadi 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).
- Atur BackgroundTransparency menjadi 1 untuk membuat latar belakang label sepenuhnya transparan.
- Atur LayoutOrder menjadi -1.
- Atur Position menjadi {0.5, 0},{0.34, 0} untuk mengatur label dekat dengan bagian atas tengah bingkai (50% dari kiri ke kanan bingkai induk, dan 34% dari atas ke bawah bingkai induk).
- Atur Size menjadi {0.46, 0},{0.34, 0} untuk memperluas area prompt hingga hampir setengah dari bingkai (46% secara horizontal dan 34% secara vertikal dari bingkai induk).
- Atur Name menjadi Header.
- Atur Image menjadi rbxassetid://14304828123 untuk menampilkan trapezoid.
- Atur ImageTransparency menjadi 0.15 untuk membuat header semi-transparan.
(Opsional) Masukkan UIAspectRatioConstraint ke dalam ImageLabel untuk memastikan rasio aspek label tetap sama tidak peduli ukuran layar pemain. Sampel ini mengatur propertinya UIAspectRatioConstraint.AspectRatio menjadi 13.781.
Masukkan TextLabel ke dalam Header untuk menampilkan judul.
Pilih label baru, lalu di jendela Properties,
- Atur AnchorPoint menjadi 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).
- Atur BackgroundTransparency menjadi 1 untuk membuat latar belakang label sepenuhnya transparan.
- Atur Position menjadi {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).
- Atur Size menjadi {0.62, 0},{0.55, 0} untuk memperluas ruang teks menjadi lebih dari setengah dari label induk (62% secara horizontal dan 55% secara vertikal dari label induk).
- Atur Name menjadi HeaderTextLabel.
- Atur FontFace menjadi Montserrat untuk sesuai dengan estetika futuristik.
- Atur Weight menjadi Medium untuk membuat font lebih tebal.
- Atur Text menjadi OBJEKTIF.
- Aktifkan TextScaled.
Buat elemen prompt.
Masukkan ImageLabel ke dalam ObjectiveDisplay.
Pilih ImageLabel, lalu di jendela Properties,
- Atur AnchorPoint menjadi 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).
- Atur BackgroundTransparency menjadi 1 untuk membuat latar belakang label sepenuhnya transparan.
- Atur Position menjadi {0.5, 0},{1, 0} untuk memindahkan label ke tengah bawah bingkai induknya (50% dari kiri ke kanan bingkai induk, dan 100% dari atas ke bawah bingkai induk).
- Atur Size menjadi {0.89, 0},{0.66, 0} untuk memperluas ruang teks menjadi hampir lebar penuh bingkai induk (89% secara horizontal dan 66% secara vertikal dari bingkai induk).
- Atur Name menjadi Body.
- Atur Image menjadi rbxassetid://14304827265 untuk menampilkan trapezoid terbalik.
- Atur ImageColor3 menjadi 0, 0, 0 untuk mewarnai gambar hitam.
- Atur ImageTransparency menjadi 0.3 untuk membuat header semi-transparan.
(Opsional) Masukkan UIAspectRatioConstraint ke dalam ImageLabel untuk memastikan rasio aspek label tetap sama tidak peduli ukuran layar pemain. Sampel ini mengatur propertinya UIAspectRatioConstraint.AspectRatio menjadi 13.781.
Masukkan TextLabel ke dalam Body untuk menampilkan prompt.
Pilih label baru, lalu di jendela Properties,
- Atur AnchorPoint menjadi 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).
- Atur BackgroundTransparency menjadi 1 untuk membuat latar belakang label sepenuhnya transparan.
- Atur Position menjadi {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).
- Atur Size menjadi {0.85, 0},{0.39, 0} untuk memperluas ruang teks menjadi lebih dari setengah dari label induk (85% secara horizontal dan 39% secara vertikal dari label induk).
- Atur Name menjadi BodyTextLabel.
- Atur FontFace menjadi Montserrat untuk sesuai dengan estetika futuristik.
- Atur Weight menjadi Medium untuk membuat font lebih tebal.
- Atur TextColor3 menjadi 255, 255, 255 untuk membuat teks berwarna putih di latar belakang gelap.
- Atur Text menjadi Tag pemain lawan untuk mendapatkan poin! Tim pertama yang mencapai %d poin menang..
- Aktifkan TextScaled.
Buat wadah untuk penghitung tim objektif.
Masukkan Frame ke dalam Objective.
Pilih Frame baru, lalu di jendela Properties,
- Atur AnchorPoint menjadi 0.5, 1 untuk mengatur titik asal label di tengah bawah dirinya (50% dari kiri ke kanan bingkai, dan 100% dari atas ke bawah bingkai).
- Atur BackgroundTransparency menjadi 1 untuk membuat latar belakang bingkai sepenuhnya transparan.
- Atur Position menjadi {0.5, 0},{1, 0} untuk mengatur bingkai di tengah bawah kontainer (50% dari kiri ke kanan bingkai induk, dan 100% dari atas ke bawah bingkai induk).
- Atur Size menjadi {0.44, 0},{0.27, 0} sehingga komponen UI pemilihan mengambil sekitar kurang dari setengah kontainer dari kiri ke kanan (44% secara horizontal dan 27% secara vertikal dari bingkai induk).
- Atur Name menjadi TeamPointCounter.
Buat padding untuk penghitungan tim.
- Masukkan objek UIListLayout ke dalam bingkai dari langkah 5.
- Pilih objek UIListLayout, lalu di jendela Properties,
- Atur Padding menjadi 0.025, 0 untuk memberikan ruang antara penghitung tim yang akan datang.
- Atur FillDirection menjadi Horizontal sehingga setiap penghitung tim ditampilkan berdampingan.
- Atur HorizontalAlignment menjadi Center sehingga setiap penghitung tim sejajar di tengah satu sama lain.
Buat elemen penghitung tim hijau.
Masukkan ImageLabel ke dalam TeamPointCounter.
Pilih ImageLabel, lalu di jendela Properties,
- Atur BackgroundTransparency menjadi 1 untuk membuat latar belakang label sepenuhnya transparan.
- Atur Position menjadi {0.5, 0},{1, 0} untuk memindahkan label ke tengah bawah bingkai induk (50% dari kiri ke kanan bingkai induk, dan 100% dari atas ke bawah bingkai induk).
- Atur Size menjadi {0.5, 0},{1, 0} untuk memperluas label hingga setengah lebar bingkai induk (50% secara horizontal dan 100% secara vertikal dari bingkai induk).
- Atur Name menjadi TeamACounter.
- Atur Image menjadi rbxassetid://14304826831 untuk menampilkan fade arah.
- Atur ImageColor3 menjadi 88, 218, 171 untuk mewarnai gambar menjadi mint hijau.
Konfigurasi atribut kustom untuk melacak bahwa label ini adalah untuk tim hijau.
- Di jendela Properties, arahkan ke bagian Attributes, lalu klik ikon tambah. Jendela pop-up ditampilkan.
- Di bidang Name, masukkan teamColor.
- Di menu dropdown Type, pilih BrickColor.
- Klik tombol Simpan.
- Atur atribut teamColor baru menjadi Mint.
Masukkan TextLabel ke dalam TeamACounter untuk menampilkan prompt.
Pilih label baru, lalu di jendela Properties,
- Atur AnchorPoint menjadi 1, 0.5 untuk mengatur titik asal label baru di kanan tengah dirinya (100% dari kiri ke kanan label, dan 50% dari atas ke bawah label).
- Atur BackgroundTransparency menjadi 1 untuk membuat latar belakang label sepenuhnya transparan.
- Atur Position menjadi {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).
- Atur Size menjadi {0.85, 0},{0.39, 0} untuk memperluas ruang teks menjadi lebih dari setengah dari label induk (85% secara horizontal dan 39% secara vertikal dari label induk).
- Atur FontFace menjadi Montserrat untuk sesuai dengan estetika futuristik.
- Atur Weight menjadi Bold untuk membuat font lebih tebal.
- Atur TextColor3 menjadi 255, 255, 255 untuk membuat teks berwarna putih di latar belakang gelap.
- Atur Text menjadi -.
- Aktifkan TextScaled.
- Atur TextXAlignment menjadi Right.
Masukkan objek UIStroke ke dalam TextLabel, lalu di jendela Properties, atur Color menjadi 8, 78, 52 untuk memberi garis tepi pada dash dengan stroke hijau gelap.
Buat elemen penghitung tim pink.
Duplikasi TeamAICounter dan anak-anaknya.
Pilih duplikat TeamACounter, lalu di jendela Properties,
- Atur Name menjadi TeamBCounter.
- Atur Image menjadi rbxassetid://14305849451 untuk menampilkan fade arah yang berlawanan.
- Atur ImageColor3 menjadi 255, 170, 255 untuk mewarnai gambar menjadi carnation pink.
- Atur atribut teamColor menjadi Carnation Pink.
Pilih duplikat TextLabel anak dari TeamBCounter, lalu di jendela Properties,
- Atur AnchorPoint menjadi 0, 0.5 untuk mengatur titik asal label baru di kiri tengah dirinya (0% dari kiri ke kanan label, dan 50% dari atas ke bawah label).
- Atur Position menjadi {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).
- Atur TextXAlignment menjadi Left.
Pilih duplikat UIStroke anak dari TeamBCounter, lalu di jendela Properties, atur Color menjadi 158, 18, 94 untuk memberi garis tepi pada dash dengan stroke pink gelap.
Rujuk skrip ReplicatedStorage berikut dalam file tempat Laser Tag sampel yang secara programatis memperbarui prompt objektif dan melacak poin tim.
Skrip berikut memerlukan satu set skrip modul yang bekerja sama untuk mengatur tampilan utama Heads Up Display (HUD), termasuk setObjective dan startSyncingTeamPoints. Setelah pemain bergabung dalam sebuah ronde dan memilih blaster mereka, skrip ini memastikan semua elemen UI HUD ditampilkan dengan benar sesuai dengan status pemain, perangkat, dan status tim.
Sekarang, setelah pemain memilih blaster mereka, UI objektif ditampilkan di bagian atas layar mereka, dan melacak poin masing-masing 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 memakan sebagian besar ruang layar dekat dengan tengah layar karena berfungsi sebagai titik fokus untuk menarik perhatian pemain pada aksi di ruang 3D, dan memiliki signifikansi terbesar untuk bermain game.
Bidikan
Bidikan adalah elemen UI yang memberi tahu pemain ke mana mereka akan membuat dampak saat mereka menembakkan senjata mereka. Elemen UI ini adalah persyaratan penting dalam gameplay untuk pengalaman penembak orang pertama karena pemain perlu dapat dengan akurat mengarahkan blaster mereka dan memberi tag anggota tim musuh.
Seperti kebanyakan pengalaman lain dalam genre penembak orang pertama, pengalaman laser tag sampel menempatkan bidikan di tengah layar sehingga pemain memiliki sesuatu yang statis untuk difokuskan saat avatar mereka bergerak melalui ruang 3D. Selain mengurangi mual akibat gerakan, penempatan ini memungkinkan bidikan menjadi terlihat sambil juga menyatu dengan keseluruhan lingkungan.
Untuk mereproduksi bidikan dalam pengalaman Laser Tag sampel dengan tepat:
Masukkan ImageLabel ke dalam objek HUDGui ScreenGui.
Di jendela Explorer, arahkan ke layanan StarterGui.
Arahkan ke objek anak HUDGui, lalu klik ikon ⊕. Menu kontekstual ditampilkan.
Dari menu kontekstual, masukkan ImageLabel.
Pilih ImageLabel baru, lalu di jendela Properties,
- Atur Image menjadi rbxassetid://14400935446.
- Atur AnchorPoint menjadi 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).
- Atur BackgroundTransparency menjadi 1 untuk membuat latar belakang label sepenuhnya transparan.
- Atur Name menjadi Crosshair.
- Atur Position menjadi {0.5,0},{0.5,0} untuk mengatur label di tengah layar.
- Atur ScaleType menjadi Fit sehingga gambarnya pas di dalam wadahnya dan tidak meregang di berbagai ukuran layar.
(Opsional) Masukkan UIAspectRatioConstraint ke dalam Crosshair untuk memastikan rasio aspek label tetap sama tidak peduli ukuran layar pemain. Sampel ini mengatur propertinya UIAspectRatioConstraint.AspectRatio menjadi 0.895.
Penanda hit
Penanda hit adalah elemen UI yang hanya ditampilkan ketika suatu ledakan mengenai pemain lain di tim musuh. Seperti bidikan, elemen UI ini adalah persyaratan penting untuk pengalaman penembak orang pertama karena memberikan umpan balik visual tentang kapan pemain berhasil memberi tag lawan mereka.
Untuk mereproduksi penanda hit dalam pengalaman Laser Tag sampel dengan tepat:
Masukkan ImageLabel ke dalam objek Crosshair ImageLabel.
Di jendela Explorer, arahkan ke layanan StarterGui.
Arahkan ke objek anak Crosshair, lalu klik ikon ⊕. Menu kontekstual ditampilkan.
Dari menu kontekstual, masukkan ImageLabel.
Pilih ImageLabel baru, lalu di jendela Properties,
- Atur Image menjadi rbxassetid://14401148736 untuk menampilkan ikon penanda hit berbentuk persegi panjang.
- Atur AnchorPoint menjadi 0.5, 0.5 untuk mengatur titik asal label di tengah label.
- Atur BackgroundTransparency menjadi 1 untuk membuat latar belakang label sepenuhnya transparan.
- Atur Position menjadi {0.5,0},{0.5,0} untuk mengatur label di tengah layar.
- Atur Name menjadi Hitmarker.
- Atur Size menjadi {0.6, 0},{0.06, 0} untuk mengurangi ukuran persegi panjang di sekitar tengah bidikan.
- Atur ImageTransparency menjadi 1 untuk membuat penanda hit sepenuhnya transparan. Skrip di langkah berikutnya mengembalikan transparansi kembali ke 0 setiap kali ledakan seorang pemain mengenai pemain lain di tim musuh.
Rujuk skrip ReplicatedStorage berikut dalam file tempat Laser Tag sampel yang secara programatis menampilkan penanda hit ketika ledakan mengenai pemain di tim musuh.
Skrip berikut memerlukan satu set skrip modul yang bekerja sama untuk mengatur tampilan utama Heads Up Display (HUD), termasuk setupHitmarker. Setelah pemain bergabung dalam sebuah ronde dan memilih blaster mereka, skrip ini memastikan semua elemen UI HUD ditampilkan dengan benar sesuai dengan status pemain, perangkat, dan status tim.
Sekarang, setiap kali pemain menembak blaster mereka dan ledakan mengenai pemain lain, penanda hit akan ditampilkan sesaat.
Pemilih blaster
Pemilih blaster adalah komponen UI yang digunakan pemain untuk memilih jenis blaster mereka sebelum bergabung atau bergabung kembali ke dalam ronde. Pengalaman laser tag sampel menyediakan dua jenis blaster: satu yang memproduksi beberapa sinar dengan penyebaran horizontal yang lebar, dan satu lagi yang memproduksi satu sinar. Jenis blaster yang dipilih pemain mempengaruhi strategi mereka selama ronde, menjadikan komponen UI ini sebagai alur kerja penting untuk keseluruhan pengalaman.
Langkah-langkah berikut merinci cara membuat beberapa wadah untuk pengelompokan elemen UI yang berbeda, sebuah header dengan prompt, tombol navigasi dan pilih, serta prefab tombol blaster. Logika skrip untuk keseluruhan komponen mengisi berbagai karakteristik visual ke dalam prefab tombol blaster sesuai dengan instansi Configuration yang mewakili masing-masing jenis blaster.
Pengaturan ini memungkinkan Anda untuk membuat instansi 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 dalam pengalaman Laser Tag sampel dengan tepat:
Buat wadah untuk seluruh komponen.
Masukkan Frame ke dalam objek PickABlaster ScreenGui.
- Di jendela Explorer, arahkan ke layanan StarterGui.
- Arahkan ke objek anak PickABlaster, lalu klik ikon ⊕. Menu kontekstual ditampilkan.
- Dari menu kontekstual, masukkan Frame.
Pilih bingkai baru, lalu di jendela Properties,
- Atur AnchorPoint menjadi 0.5, 1 untuk mengatur titik asal bingkai di bagian bawah tengah dirinya (50% dari kiri ke kanan bingkai, dan 100% dari atas ke bawah bingkai).
- Atur BackgroundTransparency menjadi 1 untuk membuat latar belakang bingkai sepenuhnya transparan.
- Atur Position menjadi {0.5, 0},{0.9, 0} untuk mengatur bingkai dekat tengah bawah layar (50% dari kiri ke kanan layar, dan 92.4% dari atas ke bawah layar).
- Atur Size menjadi {0.8, 0},{0.25, 0} sehingga komponen UI pemilih blaster memakan sebagian besar layar untuk menarik perhatian pemain (80% secara horizontal, dan 25% secara vertikal).
- Atur Name menjadi Component.
(Opsional) Masukkan UIAspectRatioConstraint ke dalam Component untuk memastikan rasio aspek bingkai dan elemen UI anaknya tetap sama tidak peduli ukuran layar pemain. Sampel ini mengatur propertinya UIAspectRatioConstraint.AspectRatio menjadi 5.
Buat wadah untuk menampung pengelompokan elemen UI.
Masukkan Frame ke dalam Component.
Pilih bingkai baru, lalu di jendela Properties,
- Atur AnchorPoint menjadi 0.5, 0.5 untuk mengatur titik asal bingkai di tengah dirinya (50% dari kiri ke kanan bingkai, dan 50% dari atas ke bawah bingkai).
- Atur BackgroundTransparency menjadi 1 untuk membuat latar belakang bingkai sepenuhnya transparan.
- Atur Position menjadi {0.5, 0},{0.375, 0} untuk mengatur bingkai dekat tengah atas kontainer (50% dari kiri ke kanan bingkai induk, dan 37.5% dari atas ke bawah bingkai induk).
- Atur Size menjadi {1, 0},{0.75, 0} sehingga komponen UI pilihan memakan 3/4 dari kontainer (100% secara horizontal dan 75% secara vertikal dari bingkai induk).
- Atur Name menjadi SelectionFrame.
Buat prompt untuk pemilih blaster.
Masukkan ImageLabel ke dalam SelectionFrame.
Pilih label baru, lalu di jendela Properties,
- Atur AnchorPoint menjadi 0.5, 1 untuk mengatur titik asal label di bagian bawah tengah dirinya (50% dari kiri ke kanan label, dan 100% dari atas ke bawah label).
- Atur BackgroundTransparency menjadi 1 untuk membuat latar belakang label sepenuhnya transparan.
- Atur LayoutOrder menjadi -1.
- Atur Position menjadi {0.5, 0},{0.22, 0} untuk mengatur label dekat atas tengah bingkai (50% dari kiri ke kanan bingkai induk, dan 22% dari atas ke bawah bingkai induk).
- Atur Size menjadi {0.45, 0},{0.22, 0} untuk memperluas area prompt menjadi hampir setengah dari bingkai (45% secara horizontal dan 22% secara vertikal dari bingkai induk).
- Atur Name menjadi Header.
- Atur Image menjadi rbxassetid://14304828123 untuk menampilkan trapezoid.
- Atur ImageTransparency menjadi 0.15 untuk membuat header semi-transparan.
(Opsional) Masukkan UIAspectRatioConstraint ke dalam label untuk memastikan rasio aspek label tetap sama tidak peduli ukuran layar pemain. Sampel ini mengatur propertinya UIAspectRatioConstraint.AspectRatio menjadi 13.78.
Masukkan TextLabel ke dalam Header untuk menampilkan prompt.
Pilih label baru, lalu di jendela Properties,
- Atur AnchorPoint menjadi 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).
- Atur BackgroundTransparency menjadi 1 untuk membuat latar belakang label sepenuhnya transparan.
- Atur Position menjadi {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).
- Atur Size menjadi {0.6, 0},{0.55, 0} untuk memperluas ruang teks menjadi lebih dari setengah dari label induk (60% secara horizontal dan 55% secara vertikal dari label induk).
- Atur Name menjadi HeaderTextLabel.
- Atur FontFace menjadi Montserrat untuk sesuai dengan estetika futuristik.
- Atur Weight menjadi Medium untuk membuat font lebih tebal.
- Atur Text menjadi PILIH BLASTER.
- Aktifkan TextScaled.
Buat wadah untuk kontainer tombol blaster dan panah pemilihan Anda.
Masukkan ImageLabel ke dalam SelectionFrame.
Pilih label baru, lalu di jendela Properties,
- Hapus nilai Image default.
- Atur AnchorPoint menjadi 0.5, 1 untuk mengatur titik asal label di bagian bawah tengah dirinya (50% dari kiri ke kanan label, dan 100% dari atas ke bawah label).
- Atur BackgroundColor menjadi 0, 0, 0 untuk membuat label hitam.
- Atur BackgroundTransparency menjadi 0.3 untuk mengurangi opasitas label sebesar 30%, dan mencocokkan semua elemen UI hitam dalam pengalaman.
- Atur Position menjadi {0.5, 0},{1, 0} untuk mengatur label ke tengah bawah bingkai (50% dari kiri ke kanan bingkai induk, dan 100% dari atas ke bawah bingkai induk).
- Atur Size menjadi {1, 0},{0.77, 0} untuk memperluas area label hingga ruang di bawah prompt (100% secara horizontal dan 77% secara vertikal dari bingkai induk).
Membulatkan sudut kotak kontainer.
- Masukkan objek UICorner ke dalam label.
- Pilih objek sudut baru, lalu di jendela Properties, atur CornerRadius menjadi 0.075, 0 untuk membulatkan sudut.
Buat kontainer untuk tombol blaster Anda.
Masukkan Frame ke dalam label dari langkah 4.
Pilih bingkai baru, lalu di jendela Properties,
- Atur AnchorPoint menjadi 0.5, 0.5 untuk mengatur titik asal bingkai baru di tengah dirinya (50% dari kiri ke kanan bingkai, dan 50% dari atas ke bawah bingkai).
- Atur BackgroundTransparency menjadi 1 untuk membuat latar belakang bingkai sepenuhnya transparan.
- Atur Position menjadi {0.5, 0},{0.5, 0} untuk mengatur bingkai di tengah label induknya (50% dari kiri ke kanan bingkai induk, dan 50% dari atas ke bawah bingkai induk).
- Atur Size menjadi {0.85, 0},{0.77, 0} untuk memperluas area bingkai menjadi sebagian besar dari label (85% secara horizontal dan 77% secara vertikal dari label induk).
- Atur Name menjadi Container.
Buat padding untuk semua tombol blaster di masa depan.
- Masukkan objek UIListLayout ke dalam bingkai dari langkah 5.
- Pilih objek layout baru, lalu di jendela Properties,
- Atur Padding menjadi 0.035, 0 untuk memberikan ruang antara semua tombol di masa depan.
- Atur FillDirection menjadi Horizontal sehingga setiap tombol ditampilkan berdampingan.
- Atur HorizontalAlignment dan VerticalAlignment menjadi Center sehingga setiap tombol sejajar di tengah satu sama lain.
Buat tombol navigasi kiri.
Masukkan objek ImageButton ke dalam ImageLabel dari langkah 4.
Pilih tombol baru, lalu di jendela Properties,
- Hapus nilai Image default.
- Atur AnchorPoint menjadi 0, 0.5 untuk mengatur titik asal tombol baru di kiri tengah dirinya (0% dari kiri ke kanan tombol, dan 50% dari atas ke bawah tombol).
- Atur BackgroundTransparency menjadi 0.15 untuk memberikan umpan balik visual saat mouse melayang yang menunjukkan bahwa tombol tersebut dapat dipilih.
- Atur Position menjadi {0.02, 0},{0.5, 0} untuk memberikan padding ke kiri tombol dari kontainer induknya (2% dari kiri ke kanan label induk, dan 50% dari atas ke bawah label induk).
- Atur Size menjadi {0.04, 0},{0.33, 0} untuk membuat tombol pemilih jauh lebih kecil daripada tombol blaster (4% secara horizontal dan 33% secara vertikal dari bingkai induk).
- Atur Name menjadi NavigationButtonLeft.
Bulatkan sudut tombol.
- Masukkan objek UICorner ke dalam tombol.
- Pilih objek sudut baru, lalu di jendela Properties, setel CornerRadius ke 0.1, 0 untuk membulatkan sudut.
Masukkan objek ImageLabel ke dalam tombol.
Pilih label baru, lalu di jendela Properties,
- Setel AnchorPoint ke 0.5, 0.5 untuk menetapkan titik asal label baru di tengah dirinya sendiri (50% dari kiri ke kanan label, dan 50% dari atas ke bawah label).
- Setel Position ke {0.45, 0},{0.5, 0} untuk menempatkan 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 tampak berada di tengah tombol pada {0.5, 0},{0.5, 0}.
- Setel Size ke {0.8, 0},{0.8, 0} untuk memperlebar area label agar ada ruang di bawah prompt (80% secara horizontal dan 80% secara vertikal dari bingkai induk).
- Setel BackgroundTransparency ke 1 untuk membuat latar belakang gambar sepenuhnya transparan.
- Setel Image ke rbxassetid://14309187238.
- Setel ScaleType ke Fit.
Buat tombol navigasi kanan.
Duplikat NavigationButtonLeft.
Pilih tombol duplikat, lalu di jendela Properties,
- Setel AnchorPoint ke 1, 0.5 untuk menetapkan titik asal tombol baru di kanan-tengah dirinya sendiri (100% dari kiri ke kanan tombol, dan 50% dari atas ke bawah tombol).
- Setel Position ke {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).
- Setel Name ke NavigationButtonRight.
Pilih objek anak ImageLabel.
- Setel Rotation ke 180 untuk membalik gambar.
- Setel Position ke {0.55, 0},{0.5, 0} untuk menempatkan 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 tampak berada di tengah tombol pada {0.5, 0},{0.5, 0}.
Buat tombol SELECT.
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 dan tombol pilih.
Pilih tombol baru, lalu di jendela Properties,
- Hapus nilai Image default.
- Setel AnchorPoint ke 0.5, 1 untuk menetapkan titik asal tombol baru di bawah-tengah dirinya sendiri (50% dari kiri ke kanan tombol, dan 100% dari atas ke bawah tombol).
- Setel BackgroundTransparency ke 0.15 untuk memberikan umpan balik visual saat hover bahwa tombol dapat dipilih.
- Setel Position ke {0.5, 0},{0.99, 0} untuk menempatkan tombol dekat bagian tengah bawah kontainernya (50% dari kiri ke kanan bingkai induk, dan 99% dari atas ke bawah bingkai induk).
- Setel Size ke {0.17, 0},{0.18, 0} untuk memanjangkan tombol di bawah tombol blaster (17% secara horizontal dan 18% secara vertikal dari bingkai induk).
- Setel Name ke SelectButton.
Bulatkan sudut tombol.
- Masukkan objek UICorner ke dalam tombol.
- Pilih objek sudut baru, lalu di jendela Properties, setel CornerRadius ke 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,
- Setel AnchorPoint ke 0.5, 0.5 untuk menetapkan titik asal label baru di tengah dirinya sendiri (50% dari kiri ke kanan label, dan 50% dari atas ke bawah label).
- Setel BackgroundTransparency ke 1 untuk membuat latar belakang label sepenuhnya transparan.
- Setel Position ke {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).
- Setel Size ke {0.9, 0},{0.55, 0} untuk memperlebar ruang teks menjadi hampir seluruh lebar label induk (90% secara horizontal dan 55% secara vertikal dari label induk).
- Setel Name ke SelectTextLabel.
- Setel FontFace ke Montserrat untuk memenuhi estetika futuristik.
- Setel Weight ke Medium untuk mengentalkan font.
- Setel Text ke SELECT.
- Aktifkan TextScaled.
Buat prefab tombol blaster.
- Di layanan ReplicatedStorage, buat struktur folder untuk mengatur objek UI Anda. Contoh menggunakan folder Instances dengan folder anak Guis.
- Masukkan objek ImageButton ke dalam folder Guis.
- Pilih tombol baru, lalu di jendela Properties,
- Hapus nilai Image default.
- Setel AnchorPoint ke 0.5, 0.5 untuk menetapkan titik asal tombol baru di tengah dirinya sendiri (50% dari kiri ke kanan tombol, dan 50% dari atas ke bawah tombol).
- Setel BackgroundTransparency ke 0.65 untuk memberikan umpan balik visual bahwa tombol tidak berada dalam fokus. Skrip di langkah 12 memberikan umpan balik visual programatik saat tombol dalam fokus.
- Setel LayoutOrder ke 2.
- Setel Name ke BlasterButtonPrefab.
- Setel Size ke {0.8, 0},{0.8, 0}.
- Setel ImageTransparency ke 1 untuk membuat gambar sepenuhnya transparan.
- Masukkan UIAspectRatioConstraint ke dalam BlasterButtonPrefab untuk memastikan rasio aspek tombol tetap sama dalam komponen tidak peduli ukuran layar pemain.
- Bulatkan sudut tombol.
- Masukkan objek UICorner ke dalam BlasterButtonPrefab.
- Pilih UICorner, lalu di jendela Properties, setel CornerRadius ke 0.05, 0 untuk membulatkan sudut.
- Masukkan objek ImageLabel ke dalam BlasterButtonPrefab.
- Pilih label baru, lalu di jendela Properties,
- Hapus ID aset placeholder dalam properti Image. Skrip di langkah 7 akan secara programatik memasukkan potret pemain ke dalam label gambar.
- Setel AnchorPoint ke 0, 1 untuk menetapkan titik asal label di kiri-bawah dirinya sendiri (0% dari kiri ke kanan label, dan 100% dari atas ke bawah label).
- Setel BackgroundColor3 ke 0, 0, 0 untuk mengatur warna latar belakang label menjadi hitam.
- Setel BackgroundTransparency ke 0.3 untuk mengurangi opasitas label sebesar 30%, dan mencocokkan semua elemen UI hitam dalam pengalaman.
- Setel Name ke PlayerPortrait.
- Setel Position ke {0.11, 0},{1, 0} untuk menempatkan label di sisi kiri bentuk poligonal.
- Setel Size ke {0.23, 0},{1, 0} untuk memperkecil label.
- Setel ImageTransparency ke 0.15 untuk membuat label sedikit transparan.
- Setel ScaleType ke Fit sehingga gambar pas di dalam wadahnya dan tidak meregang pada berbagai ukuran layar.
Rujuk skrip berikut di ReplicatedStorage dalam file tempat contoh Laser Tag yang secara programatik menampilkan tombol untuk setiap blaster, mengubah skala tombol saat pemain memilih tombol yang tidak dalam fokus, dan mengaitkan pemilihan blaster pemain dengan avatar mereka.
Skrip berikut memerlukan sekumpulan skrip yang bekerja sama untuk membuat pemilih blaster. Ketika seorang pemain bergabung dengan pengalaman atau respawn kembali ke putaran setelah kesehatan mereka mencapai nol, skrip ini mengaktifkan semua elemen UI pemilih blaster hingga pemain membuat pilihan mereka.
Sekarang, setiap kali pemain bergabung dengan pengalaman atau respawn kembali ke putaran setelah kesehatan mereka mencapai nol, UI pemilih blaster ditampilkan, mereka dapat membuat pemilihan, dan setiap tombol berfungsi seperti yang diharapkan.
Tombol letusan
Tombol letusan adalah komponen UI yang digunakan pemain untuk menembakkan blaster mereka jika mereka mengakses pengalaman melalui perangkat seluler atau tablet. Contoh pengalaman laser tag menggunakan tombol letusan dengan ikon yang menggambarkan baik bidikan dan letusan untuk mengkomunikasikan fungsi tombol tanpa teks.
Untuk membuat tombol letusan persis seperti dalam pengalaman Laser Tag:
Masukkan objek ImageButton ke dalam objek HUDGui ScreenGui.
Di jendela Explorer, navigasikan ke layanan StarterGui.
Arahkan mouse ke objek anak HUDGui, lalu klik ikon ⊕. Menu konteks ditampilkan.
Dari menu konteks, masukkan objek ImageButton.
Di viewport, pindahkan tombol ke tempat jempol pemain secara alami bersandar sehingga Anda dapat mendapatkan pemahaman visual tentang bagaimana tombol akan terlihat di perangkat pemain, lalu di jendela Properties,
- Setel Image ke rbxassetid://18308375035 untuk menampilkan ikon tombol letusan.
- Setel PressedImage ke rbxassetid://18308372558 untuk menampilkan versi terbalik dari ikon tombol letusan ketika seorang pemain menekan tombol.
- Setel BackgroundTransparency ke 1 untuk membuat latar belakang label sepenuhnya transparan.
- Setel Name ke BlastButton.
- Setel ScaleType ke Fit sehingga gambar pas di dalam wadahnya dan tidak meregang pada berbagai ukuran layar.
- Setel ImageTransparency ke 0.3 untuk mengurangi opasitas label sehingga sesuai dengan semua elemen UI hitam dalam pengalaman.
Masukkan UIAspectRatioConstraint ke dalam BlastButton untuk memastikan rasio aspek tombol tetap sama tidak peduli ukuran layar pemain.
Rujuk skrip berikut di ReplicatedStorage dalam file tempat contoh Laser Tag yang secara programatik menampilkan tombol letusan ketika seorang pemain menggunakan input sentuh pada perangkat yang menerima kontrol sentuh.
Skrip berikut memerlukan satu set modul skrip yang bekerja bersama untuk mengatur tampilan Heads Up Display (HUD) utama, termasuk setupTouchButtonAsync. Setelah seorang pemain bergabung dengan putaran dan memilih blaster mereka, skrip ini memastikan semua elemen UI HUD ditampilkan dengan tepat untuk status pemain, perangkat, dan status tim.
Sekarang, ketika pemain bergabung dengan pengalaman dan menggunakan input sentuh pada perangkat yang menerima kontrol sentuh, tombol letusan ditampilkan di kanan atas tombol lompat.
UI Pemain
Mengikuti praktik terbaik hierarki visual dari Wireframe Your Layouts, bagian ini mengajarkan Anda cara mengimplementasikan semua elemen UI di layar yang terkait dengan status pemain. Kelompok elemen UI ini dekat dengan sisi layar karena pemain dapat memahami informasi perifer ini tanpa mengalihkan perhatian mereka dari permainan.
Indikator Pemain
Indikator pemain adalah komponen UI yang digunakan pemain untuk dengan cepat memahami tim mana mereka termasuk segera setelah mereka muncul di zona spawn tim mereka. Pengalaman laser tag contoh menyediakan dua versi indikasi pemain tergantung pada apakah pemain berada di tim hijau atau merah muda.
Mengikuti panduan dari Pilih Tema Warna, kedua versi indikator pemain menggabungkan warna tim dengan ikon unik yang sederhana dengan detail minimal sehingga tetap terbaca di layar kecil. Memberikan dua bentuk umpan balik visual sangat penting karena membantu menjaga desain tetap aksesibel bagi pemain dengan kebutaan warna.
Untuk mereproduksi komponen indikator pemain dengan tepat dalam pengalaman Laser Tag:
Masukkan Frame ke dalam objek HUDGui ScreenGui.
- Di jendela Explorer, navigasikan ke layanan StarterGui.
- Arahkan mouse ke objek anak HUDGui, lalu klik ikon ⊕. Menu konteks ditampilkan.
- Dari menu konteks, masukkan Frame.
Pilih Frame baru, lalu di jendela Properties,
Setel AnchorPoint ke 0, 1 untuk menetapkan titik asal bingkai di bagian bawah-tengah dirinya sendiri (0% dari kiri ke kanan bingkai, dan 100% dari atas ke bawah bingkai).
Setel BackgroundTransparency ke 1 untuk membuat latar belakang label sepenuhnya transparan.
Setel Name ke PlayerDisplay.
Setel Position ke {0.02, 0},{0.97, 0} untuk menempatkan bingkai dekat kiri bawah layar.
Setel Size ke {0.23, 0},{0.08, 0} untuk memperpendek dan memperlebar bingkai.
Aktifkan ClipsDescendants untuk memangkas GuiObjects anak yang melampaui bingkai.
Buat bentuk poligonal.
Masukkan objek ImageLabel ke dalam PlayerDisplay.
Pilih label baru, lalu di jendela Properties,
- Setel Image ke rbxassetid://14304828123 untuk menampilkan ikon trapezium.
- Setel AnchorPoint ke 1, 1 untuk menetapkan titik asal label di bagian bawah-kanan dirinya sendiri (100% dari kiri ke kanan label, dan 100% dari atas ke bawah label).
- Setel BackgroundTransparency ke 1 untuk membuat latar belakang label sepenuhnya transparan.
- Setel Name ke Block.
- Setel Position ke {1,0},{1,0} untuk menempatkan label di sisi kanan bingkai.
- Setel Size ke {1.858, 0},{0.581, 0} untuk memperlebar label keluar dari bingkai, dan mempersingkatnya sedikit lebih dari setengah panjang bingkai.
- Setel ImageTransparency ke 0.15 untuk membuat label sedikit transparan.
- Setel ScaleType ke Fit sehingga gambar pas di dalam wadahnya dan tidak meregang pada berbagai ukuran layar.
- Masukkan UIAspectRatioConstraint ke dalam Block untuk memastikan label dan elemen UI anaknya tetap memiliki rasio aspek yang sama tidak peduli ukuran layar pemain.
- Pilih batasan baru, lalu di jendela Properties, setel AspectRatio ke 13.78.
Buat kotak untuk potret pemain.
Masukkan objek ImageLabel ke dalam PlayerDisplay.
Pilih label baru, lalu di jendela Properties,
- Hapus ID aset placeholder dalam properti Image. Skrip di langkah 7 secara programatik akan memasukkan potret pemain ke dalam label gambar.
- Setel AnchorPoint ke 0, 1 untuk menetapkan titik asal label di kiri-bawah dirinya sendiri (0% dari kiri ke kanan label, dan 100% dari atas ke bawah label).
- Setel BackgroundColor3 ke 0, 0, 0 untuk mengatur warna latar belakang label menjadi hitam.
- Setel BackgroundTransparency ke 0.3 untuk mengurangi opasitas label sebesar 30%, dan mencocokkan semua elemen UI hitam dalam pengalaman.
- Setel Name ke PlayerPortrait.
- Setel Position ke {0.11, 0},{1, 0} untuk menempatkan label di sisi kiri bentuk poligonal.
- Setel Size ke {0.23, 0},{1, 0} untuk memperkecil label.
- Setel ImageTransparency ke 0.15 untuk membuat label sedikit transparan.
- Setel ScaleType ke Fit sehingga gambar pas di dalam wadahnya dan tidak meregang pada berbagai ukuran layar.
- Masukkan UIAspectRatioConstraint ke dalam PlayerPortrait untuk memastikan label dan elemen UI anaknya tetap memiliki rasio aspek yang sama tidak peduli ukuran layar pemain.
- Masukkan UICorner ke dalam PlayerPortrait, lalu di jendela Properties, setel CornerRadius ke 0.05, 0 untuk sedikit membulatkan sudut.
Buat label teks untuk nama pemain.
Masukkan objek TextLabel ke dalam PlayerDisplay.
Pilih label baru, lalu di jendela Properties,
- Setel AnchorPoint ke 0, 0.5 untuk menetapkan titik asal tombol baru di kiri-tengah dirinya sendiri (0% dari kiri ke kanan tombol, dan 50% dari atas ke bawah tombol).
- Setel BackgroundTransparency ke 1 untuk membuat latar belakang label sepenuhnya transparan.
- Setel Name ke PlayerNameTextLabel.
- Setel Position ke {0.35, 0},{0.72, 0} untuk menempatkan label di sisi kanan kontainernya (35% dari kiri ke kanan label induk, dan 72% dari atas ke bawah label induk).
- Setel Size ke {0.52, 0},{0.3, 0} sehingga teks dapat mengambil sebagian besar area bentuk poligonal (52% secara horizontal dan 30% secara vertikal dari bingkai induk).
- Setel FontFace ke Montserrat untuk memenuhi estetika futuristik.
- Setel Weight ke Bold untuk mengentalkan font.
- Hapus teks placeholder dalam properti Text. Skrip di langkah 7 secara programatik akan memasukkan nama pemain ke dalam label teks.
- Aktifkan TextScaled.
- Setel TextXAlignment ke Left.
Buat ikon dan warna tim yang ditampilkan di sebelah kiri potret pemain.
Masukkan Folder ke dalam PlayerDisplay, lalu ganti namanya menjadi TeamIcons.
Buat ikon dan warna tim hijau.
- Masukkan objek ImageLabel ke dalam TeamIcons.
- Pilih label baru, lalu di jendela Properties,
- Setel AnchorPoint ke 0, 1 untuk menetapkan titik asal label di kiri-bawah dirinya sendiri (0% dari kiri ke kanan label, dan 100% dari atas ke bawah label).
- Setel BackgroundColor3 ke 88, 218, 171 untuk mengatur warna latar belakang label menjadi hijau mint.
- Setel Name ke TeamAIcon.
- Setel Position ke {0, 0},{1, 0} untuk menempatkan label di sisi kiri bingkai.
- Setel Size ke {0.135, 0},{0.58, 0} untuk memperkecil label ke kiri potret pemain.
- Setel ImageTransparency ke 1 untuk membuat label transparan.
- Konfigurasikan atribut kustom untuk melacak bahwa label ini untuk tim hijau. Langkah ini sangat penting bagi skrip di langkah 7.
- Di jendela Properties, navigasikan ke bagian Attributes, lalu klik ikon plus. Sebuah dialog pop-up muncul.
- Dalam kolom Name, masukkan teamColor.
- Dalam menu dropdown Type, pilih BrickColor.
- Klik tombol Save.
- Atur atribut teamColor baru ke Mint.
- Masukkan UIAspectRatioConstraint ke dalam TeamAIcon untuk memastikan label dan elemen UI anaknya tetap memiliki rasio aspek yang sama tidak peduli ukuran layar pemain.
- Buat ikon.
- Masukkan objek ImageLabel ke dalam TeamAIcon.
- Pilih label baru, lalu di jendela Properties,
- Setel Image ke rbxassetid://14309678670 untuk menampilkan ikon tim hijau.
- Setel AnchorPoint ke 0.5, 0.5 untuk menetapkan titik asal label di tengah dirinya sendiri (50% dari kiri ke kanan label, dan 50% dari atas ke bawah label).
- Setel BackgroundTransparency ke 1 untuk membuat latar belakang label sepenuhnya transparan.
- Setel Name ke Icon.
- Setel Position ke {0.5, 0},{0.5, 0} untuk menempatkan label di tengah label induknya.
- Setel Size ke {0.7, 0},{0.6, 0} untuk memperkecil label.
- Setel ScaleType ke Fit sehingga gambar pas di dalam wadahnya dan tidak meregang pada berbagai ukuran layar.
Buat ikon dan warna tim merah muda.
- Duplikat TeamAIcon dan anak-anaknya.
- Pilih TeamAIcon duplikat, lalu di jendela Properties,
- Setel BackgroundColor3 ke 255, 170, 255 untuk mengatur warna latar belakang label menjadi merah muda.
- Setel Name ke TeamBIcon.
- Atur atribut teamColor ke Carnation Pink.
- Pilih anak duplikat Icon dari TeamBIcon, lalu di jendela Properties, setel Image ke rbxassetid://14309678549 untuk menampilkan ikon tim merah muda.
Rujuk skrip berikut di ReplicatedStorage dalam file tempat contoh Laser Tag yang secara programatik menampilkan indikator pemain dengan warna tim dan ikon yang sesuai saat seorang pemain aktif dalam putaran.
Skrip berikut memerlukan sekumpulan modul skrip yang bekerja sama untuk mengatur tampilan Heads Up Display (HUD) utama, termasuk startSyncingTeamColor, setPlayerName, dan setPlayerPortrait. Setelah seorang pemain bergabung dengan putaran dan memilih blaster, skrip ini memastikan semua elemen UI HUD ditampilkan dengan tepat untuk status pemain, perangkat, dan status tim.
Sekarang, setiap kali pemain bergabung atau bergabung kembali dalam putaran setelah respawn, indikator pemain ditampilkan di kiri bawah layar mereka.
Layar medan gaya
Skrin medan gaya adalah elemen UI yang melapisi viewport untuk memberitahukan pemain bahwa mereka aman dari tembakan tim musuh saat bergabung atau bergabung kembali dalam putaran. Mengikuti pedoman estetika untuk ikon dari Pilih Gaya Seni, pengalaman laser tag contoh memanfaatkan pola heksagonal semi-transparan untuk melambangkan medan gaya. Keputusan desain ini tidak hanya memperkuat gaya seni futuristik keseluruhan untuk semua UI dalam pengalaman, tetapi juga mengkomunikasikan status pemain tanpa teks atau panduan tambahan.
Untuk mereproduksi layar medan gaya dengan tepat dalam pengalaman Laser Tag:
Masukkan objek ImageLabel ke dalam objek ForceFieldGui ScreenGui.
Di jendela Explorer, navigasikan ke layanan StarterGui.
Arahkan mouse ke objek anak ForceFieldGui, lalu klik ikon ⊕. Menu konteks ditampilkan.
Dari menu konteks, masukkan objek ImageLabel.
Pilih label baru, lalu di jendela Properties,
Setel Image ke rbxassetid://14462567888.
Setel BackgroundTransparency ke 0.8 untuk membuat medan gaya transparan.
Setel Size ke {1, 0},{1, 0} untuk membuat gambar memenuhi seluruh layar (100% secara horizontal dan 100% secara vertikal dari ScreenGui induk).
Setel ScaleType ke Tile agar heksagon mengisi seluruh layar.
Setel TileSize ke {0, 104},{0, 180}.
Masukkan objek UIGradient ke dalam label.
Pilih objek gradien baru, lalu di jendela Properties,
Setel Color menjadi urutan warna yang dimulai dengan biru, berubah menjadi putih, kemudian berubah menjadi biru lagi.
Setel Color ke 120, 192, 250 untuk menerapkan nuansa biru muda pada semua heksagon.
Klik properti Color, lalu klik tombol ⋯. Sebuah pop-up urutan warna ditampilkan.
Setiap segitiga pada sumbu bawah urutan warna adalah titik kunci yang menentukan nilai warna dari properti pada titik gambar tersebut dari kiri ke kanan.
Klik dan seret pada urutan warna hingga mencapai nilai Time 0.05, kemudian klik kotak kecil di samping Color untuk membuka jendela pop-up Colors.
Pilih warna putih cerah, lalu tutup jendela pop-up.
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.
Setel Rotation ke 225 agar bagian biru dari urutan warna Anda ditampilkan di sudut kiri atas dan kanan bawah.
Setel Transparency menjadi urutan angka yang membuat medan gaya terlihat seperti berkilau.
Klik properti Transparency, lalu klik tombol ⋯. Sebuah pop-up urutan angka muncul. Setiap kotak di awal dan akhir urutan angka adalah titik kunci yang menentukan nilai transparansi dari properti pada titik gambar tersebut dari kiri ke kanan.
Atur properti waktu dan nilai berikut sepanjang 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,
Setel Rotation ke -45 untuk membalik gambar sehingga hampir mencerminkan satu sama lain di sepanjang sumbu Y.
Modifikasi Transparency untuk membuat kilau terlihat lebih organik.
- Klik properti Transparency, lalu klik tombol ⋯. Sebuah pop-up urutan angka muncul.
- Pilih keyframe ketiga, lalu klik tombol Delete.
Rujuk skrip berikut di ReplicatedStorage dalam file tempat contoh Laser Tag yang secara programatik menampilkan layar medan gaya saat seorang pemain bergabung atau bergabung kembali dalam putaran.
Skrip klien ReplicatedStorage.ForceFieldClientVisuals berikut menggantikan visual default ForceField dengan StarterGui.ForceFieldGui. Ketika pemain masuk ke dalam pengalaman dan muncul di SpawnLocation dengan properti Duration yang lebih besar dari 0, perilaku default di setiap pengalaman adalah memberikan avatar mereka dengan orbs pelindung biru yang sementara mencegah mereka kehilangan kesehatan.
Skrip ini dimulai dengan mendengarkan ketika ForceField ditambahkan ke karakter, menonaktifkan visual force field default tampilan orang pertama, lalu mengaktifkan objek ForceFieldGui ScreenGui. Perlu diingat bahwa ini tidak mempengaruhi visual orang ketiga ketika pemain melihat pemain lain yang respawn kembali ke dalam pengalaman.
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 seorang pemain bergabung atau bergabung kembali ke ronde setelah respawn, UI layar force field baru ditampilkan alih-alih visual force field ForceField orang pertama yang default.
Layar respawn
Layar respawn adalah elemen UI yang meredupkan tampilan untuk memberi tahu pemain bahwa mereka telah ditandai keluar, dan bahwa server sedang dalam proses merespawn mereka kembali ke zona spawn mereka. Elemen UI ini penting karena memberikan waktu kepada pemain untuk memproses bahwa mereka telah ditandai keluar, dan merencanakan langkah mereka berikutnya sebelum mereka bergabung kembali ke ronde aktif.
Untuk informasi lebih lanjut tentang perilaku respawn kustom dalam pengalaman laser tag sampel, lihat Respawn Karakter dari kurikulum Gameplay Scripting.
Untuk merekonstruksi layar respawn dalam pengalaman sampel Laser Tag:
Buat banner informasi tengah.
Sisipkan ImageLabel ke dalam objek OutStateGui ScreenGui.
Di jendela Explorer, navigasikan ke layanan StarterGui.
Arahkan kursor ke objek anak OutStateGui, kemudian klik ikon ⊕. Menu kontekstual akan ditampilkan.
Dari menu kontekstual tersebut, sisipkan ImageLabel.
Pilih label baru, kemudian di jendela Properties,
Atur AnchorPoint menjadi 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).
Atur BackgroundTransparency menjadi 1 untuk membuat latar belakang label sepenuhnya transparan.
Atur Position menjadi {0.5, 0},{0.5, 0} untuk menempatkan label di tengah wadahnya (50% dari kiri ke kanan dari ScreenGui orang tua, dan 50% dari atas ke bawah dari ScreenGui orang tua).
Atur Size menjadi {0.48, 0},{0.06, 0} untuk memperlebar label (48% secara horizontal dan 6% secara vertikal dari ScreenGui orang tua).
Atur Name menjadi Block.
Atur Image menjadi rbxassetid://14304827265 untuk membuat gambar menjadi trapezoid.
Atur ImageColor menjadi 0,0,0 untuk membuat trapezoid berwarna hitam.
Atur ImageTransparency menjadi 0.3 untuk mengurangi opasitas label sebesar 30%, dan mencocokkan semua elemen UI hitam dalam pengalaman.
Sisipkan UIAspectRatioConstraint ke dalam Block untuk memastikan rasio aspek label dan elemen UI anaknya tetap sama tidak peduli ukuran layar pemain.
Pilih batasan baru tersebut, kemudian di jendela Properties, atur AspectRatio menjadi 13.78.
Sisipkan TextLabel ke dalam Block untuk teks informasi.
Pilih label baru, kemudian di jendela Properties,
Atur AnchorPoint menjadi 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).
Atur BackgroundTransparency menjadi 1 untuk membuat latar belakang label sepenuhnya transparan.
Atur Position menjadi {0.5, 0},{0.5, 0} untuk menempatkan label di tengah label induknya (50% dari kiri ke kanan label induk, dan 50% dari atas ke bawah label induk).
Atur Size menjadi {.85, 0},{0.55, 0} sehingga teks dapat menempati sebagian besar area trapezoid (85% secara horizontal dan 55% secara vertikal dari label induk).
Atur Name menjadi BodyTextLabel.
Atur FontFace menjadi Montserrat untuk mencocokkan estetika futuristik.
Atur Weight menjadi Bold untuk menebalkan font.
Atur Text menjadi Respawning….
Atur TextColor3 menjadi 255, 255, 255 untuk membuat teks berwarna putih.
Aktifkan TextScaled.
Buat header.
Sisipkan ImageLabel ke dalam Block.
Pilih label baru, kemudian di jendela Properties,
Atur AnchorPoint menjadi 0.5, 1 untuk mengatur titik asal label di bagian bawah-tengah dirinya (50% dari kiri ke kanan label, dan 100% dari atas ke bawah label).
Atur BackgroundTransparency menjadi 1 untuk membuat latar belakang label sepenuhnya transparan.
Atur Position menjadi {0.5, 0},{0, 0} untuk menempatkan label di atas-tengah label induknya (50% dari kiri ke kanan label induk, dan 0% dari atas ke bawah label induk).
Atur Size menjadi {0.46, 0},{0.56, 0} untuk memperlebar label (46% secara horizontal dan 56% secara vertikal dari label induk).
Atur Name menjadi Header.
Atur Image menjadi rbxassetid://14304826985 untuk membuat gambar menjadi fade multi-arah.
Atur ImageColor menjadi 245, 46, 46 untuk membuat fade berwarna merah yang menandakan bahwa pemain tidak aktif sementara mereka ditandai keluar dari ronde.
Sisipkan TextLabel ke dalam Header untuk teks informasi.
Pilih label baru, kemudian di jendela Properties,
Atur AnchorPoint menjadi 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).
Atur BackgroundTransparency menjadi 1 untuk membuat latar belakang label sepenuhnya transparan.
Atur Position menjadi {0.5, 0},{0.5, 0} untuk menempatkan label di tengah label induknya (50% dari kiri ke kanan label induk, dan 50% dari atas ke bawah label induk).
Atur Size menjadi {.85, 0},{0.55, 0} sehingga teks dapat menempati sebagian besar area fade (85% secara horizontal dan 55% secara vertikal dari label induk).
Atur Name menjadi HeaderTextLabel.
Atur FontFace menjadi Montserrat untuk mencocokkan estetika futuristik.
Atur Weight menjadi Black untuk menebalkan font.
Atur Text menjadi TAGGED - ANDA KELUAR!
Atur TextColor3 menjadi 255, 255, 255 untuk membuat teks berwarna putih.
Aktifkan TextScaled.
Buat fade di sekeliling tepi layar.
- Sisipkan ImageLabel ke dalam OutStateGui.
- Pilih label baru, kemudian di jendela Properties,
- Atur AnchorPoint menjadi 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).
- Atur BackgroundColor3 menjadi 0,0,0 untuk mengatur warna latar belakang label menjadi hitam.
- Atur BackgroundTransparency menjadi 0.5 untuk membuat latar belakang label setengah transparan.
- Atur Position menjadi {0.5, 0},{0.5, 0} untuk menempatkan label di tengah wadahnya (50% dari kiri ke kanan dari ScreenGui induk, dan 50% dari atas ke bawah dari ScreenGui induk).
- Atur Size menjadi {1, 0},{1, 0} untuk memperlebar label ke seluruh layar (100% secara horizontal dan 100% secara vertikal dari ScreenGui induk).
- Atur ZIndex menjadi -1 untuk menampilkan fade di belakang elemen UI lainnya.
- Atur Name menjadi Header.
- Atur Image menjadi rbxassetid://14309518613 untuk membuat gambar menjadi border fade.
- Atur ImageTransparency menjadi 0.1 untuk membuat fade sedikit tembus pandang.
Untuk meningkatkan kinerja, Anda dapat melewatkan aset gambar tersebut dan sebaliknya menggunakan objek UIGradient dengan urutan angka transparansi kustom. Untuk mempelajari lebih lanjut tentang teknik fade ini, lihat Pengubah Penampilan UI - Gradien.
Referensikan skrip ReplicatedStorage berikut dalam file tempat Laser Tag yang akan menampilkan layar respawn secara programatis ketika kesehatan seorang pemain mencapai nol, dan mereka dalam proses merespawn kembali ke zona spawn tim mereka.
Skrip klien ReplicatedStorage.PlayerStateHandler berikut berisi fungsi yang memicu berbagai jenis perilaku sesuai atribut playerState. Semua respons acara dikelompokkan secara logis dalam skrip ini karena memerlukan perilaku serupa dalam mengaktifkan atau menonaktifkan kontrol pemain, pergerakan kamera, dan lapisan UI mana yang terlihat.
Ketika kesehatan seorang pemain mencapai nol, playerState mereka menjadi TaggedOut, yang memicu fungsi onTaggedOut(). onTaggedOut() langsung memicu perilaku berikut:
- Pemain tidak dapat bergerak di arena.
- Pemain tidak dapat menggerakkan kamera mereka.
- Pemain tidak dapat menggunakan blaster mereka.
- StarterGui.OutStateGui menjadi aktif secara eksklusif.
Ketika pemain respawn, playerState mereka menjadi SelectingBlaster, yang memicu fungsi onSelectingBlaster(). onSelectingBlaster() kemudian mengaktifkan secara eksklusif 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 diaktifkan secara eksklusif.
for _, screenGui in guiLayers do
screenGui.Enabled = screenGui == enabledGui
end
end
local function onSelectingBlaster()
-- Aktifkan kamera agar 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 penghancuran 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 ditetapkan
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 tetap diterapkan setelah respawn
localPlayer.CharacterAdded:Connect(updateFromPlayerState)
Sekarang, setiap kali kesehatan seorang pemain mencapai nol, layar respawn ditampilkan sampai pemain respawn kembali ke zona spawn mereka.
Sekarang setelah Anda akrab dengan GuiObjects umum untuk UI di layar, coba untuk merekonstruksi objek RoundResultsGui ScreenGui dan semua anaknya untuk tampilan layar ketika pemain menang atau kalah dalam pertandingan. Anda dapat menggunakan file pengalaman laser tag sampel .rbxl sebagai referensi, atau sesuaikan nilai untuk memenuhi persyaratan gameplay pengalaman Anda sendiri.
Buat objek SurfaceGui
Untuk menampilkan UI pada permukaan bagian dalam ruang 3D yang merespons logika pemrograman untuk setiap pemain individu, Anda dapat mengaitkan objek SurfaceGui ke bagian yang ingin Anda tampilkan UI Anda dalam layanan ReplicatedStorage. Teknik ini memastikan UI dan logika pemrograman Anda tersedia untuk server dan setiap klien pemain.
Objek SurfaceGui berisi semua GuiObjects yang ditampilkan pada permukaan bagian dalam ruang 3D. Pengalaman laser tag sampel hanya mencakup satu instance dari objek SurfaceGui: meteran cooldown yang ditampilkan di atas setiap blaster pemain. Objek ini memerlukan logika pemrograman untuk setiap pemain karena secara aktif merespons input masing-masing pemain, dan memberikan umpan balik visual ketika mereka dapat menembakkan blaster mereka lagi.
Untuk membuat objek SurfaceGui:
- Di jendela Explorer, arahkan kursor ke layanan ReplicatedStorage, lalu klik ikon ⊕. Menu kontekstual akan ditampilkan.
- Dari menu kontekstual tersebut, sisipkan objek Part.
- Sisipkan 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 pada permukaan bagian dalam ruang 3D.
Meteran cooldown
Meteran cooldown adalah komponen UI yang memberi tahu pemain berapa lama mereka harus menunggu sebelum dapat menembakkan blaster mereka lagi. Jeda kecil ini mencegah pemain menembak secepat yang mereka klik atau tekan tombol, yang tidak realistis untuk gameplay laser tag.
Untuk merekonstruksi meteran cooldown dalam pengalaman sampel Laser Tag:
Buat bagian untuk menampung objek SurfaceGui Anda.
- Di jendela Explorer, arahkan kursor ke Workspace, lalu klik ikon ⊕. Menu kontekstual akan ditampilkan.
- Dari menu kontekstual tersebut, sisipkan bagian block. Ini adalah lokasi sementara untuk bagian tersebut 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,
- Atur Transparency menjadi 1 untuk membuat bagian sepenuhnya transparan.
- Atur Name menjadi CooldownBarPrefab.
- Atur Size menjadi 0.169, 0.027, 2.537 untuk mengatur bagian dengan ukuran sekitar panjang blaster.
- Nonaktifkan CanCollide dan CanQuery.
Sisipkan SurfaceGui ke dalam CooldownBarPrefab.
Pilih SurfaceGui baru, lalu di jendela Properties,
- Atur Face menjadi Top agar UI ditampilkan menghadap ke atas.
- Atur LightInfluence dan MaxDistance menjadi 0.
- Atur PixelsPerStud menjadi 200.
Buat bar hitam.
Sisipkan ImageLabel ke dalam SurfaceGui.
Pilih label baru, lalu di jendela Properties,
- Hapus nilai default Image.
- Atur AnchorPoint menjadi 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).
- Atur BackgroundColor3 menjadi 0,0,0 untuk mengatur warna latar belakang label menjadi hitam.
- Atur BackgroundTransparency menjadi 0.4 untuk membuat latar belakang label semi-transparan.
- Atur Position menjadi {0.5, 0},{0.5, 0} untuk menempatkan label di tengah wadahnya (50% dari kiri ke kanan dari SurfaceGui induk, dan 50% dari atas ke bawah dari SurfaceGui induk).
- Atur Size menjadi {1, 0},{1, 0} untuk memperlebar label ke seluruh bagian (100% secara horizontal dan 100% secara vertikal dari SurfaceGui induknya).
- Atur Name menjadi Container.
Bulatkan sudut kontainer.
- Sisipkan objek UICorner ke dalam Container.
- Pilih UICorner, lalu di jendela Properties, atur CornerRadius menjadi 0.15, 0 untuk sedikit membulatkan sudut.
Buat bar merah.
- Sisipkan ImageLabel ke dalam Container.
- Pilih label baru, lalu di jendela Properties,
- Hapus nilai default Image.
- Atur AnchorPoint menjadi 1, 0.5 untuk mengatur titik asal label di sisi kanan-tengah dirinya (100% dari kiri ke kanan label, dan 50% dari atas ke bawah label).
- Atur BackgroundColor3 menjadi 172, 13, 13 untuk mengatur warna latar belakang label menjadi merah tua.
- Atur BackgroundTransparency menjadi 0.2 untuk membuat latar belakang label sedikit transparan.
- Atur Name menjadi Bar.
- Atur Position menjadi {1, 0},{0.5, 0} untuk menempatkan label di sisi kanan-tengah wadahnya (100% dari kiri ke kanan dari label induknya, dan 50% dari atas ke bawah dari label induknya).
- Atur Size menjadi {0, 0},{1, 0} untuk memperpanjang label ke bagian atas dari label induknya (0% secara horizontal dan 100% secara vertikal dari label induk). Langkah ini juga bermanfaat untuk perilaku tweening yang terjadi dalam skrip pada langkah 8.
Bulatkan sudut label.
- Sisipkan objek UICorner ke dalam Bar.
- Pilih UICorner, lalu di jendela Properties, atur CornerRadius menjadi 0.15, 0 untuk sedikit membulatkan sudut.
Pindahkan CooldownBarPrefab ke ReplicatedStorage.
- Buat struktur folder untuk mengatur objek UI Anda. Sampel menggunakan folder Instances dengan folder anak Guis.
- Pindahkan CooldownBarPrefab ke dalam Guis.
Referensikan skrip ReplicatedStorage berikut dalam file tempat Laser Tag yang secara programatis memasang meteran cooldown ke blaster pemain, lalu 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 menyiapkan 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 cooldown bar karena dipasang 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)
-- Kaitkan rig ke kamera jika ada
RunService.RenderStepped:Connect(function()
if rigModel then
-- Perbarui posisi rig relatif terhadap posisi kamera dan RIG_OFFSET_FROM_CAMERA
rigModel:PivotTo(currentCamera.CFrame * RIG_OFFSET_FROM_CAMERA)
end
end)
-- Menyelesaikan perubahan visual saat jenis blaster berubah saat bermain
localPlayer:GetAttributeChangedSignal(PlayerAttribute.blasterType):Connect(function()
local playerState = localPlayer:GetAttribute(PlayerAttribute.playerState)
if playerState == PlayerState.Playing then
removeFirstPersonVisuals()
addFirstPersonVisuals()
end
end)
-- Menyelesaikan perubahan visual saat status pemain berubah
localPlayer:GetAttributeChangedSignal(PlayerAttribute.playerState):Connect(function()
local newPlayerState = localPlayer:GetAttribute(PlayerAttribute.playerState)
-- Hapus visual saat pemain memilih blaster atau sedang 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 seorang pemain menembakkan blaster mereka, bar cooldown dianimasi untuk mengkomunikasikan kapan pemain dapat menembak lagi.
Buat objek BillboardGui
Untuk menampilkan elemen UI dalam ruang 3D yang merespons logika pemrograman 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.
Pengalaman laser tag sampel 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 saat mereka ditandai keluar dari ronde.
Setelah Anda membuat objek BillboardGui, Anda dapat membuat dan menyesuaikan elemen GuiObjects anaknya sesuai dengan tujuan masing-masing kontainer. Untuk menunjukkan, dalam bagian-bagian yang segera mengikuti, Anda akan belajar cara menerapkan elemen UI untuk kedua jenis indikator dalam pengalaman laser tag sampel. Anda dapat menyesuaikan bagian mana pun dari proses untuk memenuhi spesifikasi pengalaman Anda sendiri.
Untuk membuat objek BillboardGui:
- Di jendela Explorer, arahkan kursor ke BasePart atau Attachment, lalu klik ikon ⊕. Menu kontekstual akan ditampilkan.
- Dari menu kontekstual tersebut, sisipkan objek BillboardGui.
- Ganti nama BillboardGui sesuai dengan konteks elemen UI anaknya.
- Ulangi proses ini untuk setiap elemen UI yang perlu Anda tampilkan 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 pengalaman penembak orang pertama mengharuskan pemain untuk membuat keputusan strategis yang cepat saat mereka berada di zona pertempuran sehingga mereka tidak ditandai keluar dan kehilangan pertandingan.
Untuk merekonstruksi indikator tim dalam pengalaman sampel Laser Tag:
Sisipkan objek BillboardGui ke dalam rig sementara.
Dari toolbar tab Home atau Avatar, klik Character.
Pilih dari opsi yang tersedia. Sampel menggunakan tipe rig R15, bentuk tubuh feminim, dan avatar Rthro. Rig ditampilkan baik di viewport 3D maupun di jendela Explorer dengan nama Rig.
Di jendela Explorer, navigasikan ke mesh Head anak rig, lalu klik ikon ⊕. Menu kontekstual akan ditampilkan.
Dari menu kontekstual tersebut, sisipkan BillboardGui.
Pilih BillboardGui baru, lalu di jendela Properties,
Atur LightInfluence menjadi 0 untuk mencegah cahaya lingkungan mempengaruhi warna indikator.
Atur Name menjadi OtherPlayerIndicatorPrefab.
Atur Size menjadi {0, 10},{0, 10} untuk membuat label jauh lebih kecil.
Atur StudsOffsetWorldSpace menjadi 0, 4, 0 untuk menempatkannya di atas kepala rig.
Sisipkan objek Frame ke dalam OtherPlayerIndicatorPrefab.
Pilih frame baru, lalu di jendela Properties,
Atur AnchorPoint menjadi 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).
Atur BackgroundColor3 menjadi 255, 3, 0 untuk mengatur warna latar belakang frame menjadi merah sebagai warna placeholder.
Atur Position menjadi {0.5, 0},{0.5, 0} untuk menempatkan frame di tengah wadahnya (50% dari kiri ke kanan dari BillboardGui induk, dan 50% dari atas ke bawah dari BillboardGui induk).
Atur Size menjadi {1, -2},{1, -2} untuk memperpendek frame sehingga sesuai dengan area permukaan dari BillboardGui.
Sisipkan objek UICorner ke dalam Frame untuk membulatkan sudut sepenuhnya.
Sisipkan objek UIStroke ke dalam Frame untuk membuat garis tepi indikator.
Pindahkan OtherPlayerIndicatorPrefab ke ReplicatedStorage.
Referensikan skrip ReplicatedStorage berikut dalam file tempat Laser Tag 1A yang secara programatis menampilkan indikator tim untuk setiap pemain dalam ronde aktif kecuali mereka berada di tim musuh dan terhalang.
Skrip ReplicatedStorage.OtherPlayerIndicatorGuiSetup berikut berjalan ketika pemain muncul ke arena untuk ronde aktif. Ini melampirkan indikator tim dengan memanggil fungsi addIndicatorToCharacter(), yang mencari 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 sesuai warna tim mereka.
Jika pemain lain berada di tim yang sama, indikator tim selalu ditampilkan, bahkan jika mereka bersembunyi di balik objek di ruang 3D; jika pemain lain berada di tim musuh, indikator tim hanya ditampilkan jika tidak ada objek di 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 yang 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 berada 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 seorang 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 merespawn kembali ke zona spawn mereka. Informasi ini penting karena gameplay pengalaman penembak orang pertama mengharuskan pemain untuk bergerak ke target berikutnya segera setelah mereka menandai keluar seorang pemain sehingga mereka tidak menjadi rentan di arena dengan bermain di lokasi yang sama terlalu lama.
Untuk merekonstruksi indikator ditandai keluar dalam pengalaman sampel Laser Tag:
Sisipkan objek BillboardGui ke dalam rig sementara sehingga Anda dapat memvisualisasikan perubahan di setiap langkah proses.
Dari toolbar tab Home atau Avatar, klik Character.
Pilih dari opsi yang tersedia. Sampel menggunakan tipe rig R15, bentuk tubuh maskulin, dan avatar Rthro. Rig ditampilkan baik di viewport 3D maupun di jendela Explorer dengan nama Rig.
Di jendela Explorer, navigasikan ke mesh Head anak rig, lalu klik ikon ⊕. Menu kontekstual akan ditampilkan.
Dari menu kontekstual tersebut, sisipkan BillboardGui.
Pilih BillboardGui baru, lalu di jendela Properties,
Atur LightInfluence menjadi 0 untuk mencegah cahaya lingkungan mempengaruhi warna indikator.
Atur Name menjadi TaggedOutIndicatorGuiPrefab.
Atur Size menjadi {3, 0},{0.5, 0} untuk memperlebar ruang untuk sebuah label.
Atur StudsOffset menjadi 0, 3.25, 0 untuk menempatkannya di atas kepala pemain.
Sisipkan objek ImageLabel ke dalam TaggedOutIndicatorGuiPrefab.
Pilih label baru, lalu di jendela Properties,
- Atur AnchorPoint menjadi 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).
- Atur BackgroundTransparency menjadi 1 untuk membuat latar belakang label sepenuhnya transparan.
- Atur Name menjadi Frame.
- Atur Position menjadi {0.5, 0},{0.5, 0} untuk menempatkan label di tengah wadahnya (50% dari kiri ke kanan dari BillboardGui induknya, dan 50% dari atas ke bawah dari BillboardGui induknya).
- Atur Size menjadi {1, 0},{1, 0} untuk memperlebar label ke seluruh BillboardGui (100% secara horizontal dan 100% secara vertikal dari BillboardGui induk).
- Atur Image menjadi rbxassetid://14304826985 untuk membuat gambar menjadi fade multi-arah.
- Atur ImageColor menjadi 245, 46, 46 untuk memberi tint merah pada label.
Untuk meningkatkan kinerja, Anda dapat melewatkan aset gambar ini dan sebaliknya menggunakan objek UIGradient dengan urutan angka transparansi kustom. Untuk mempelajari lebih lanjut tentang teknik fade ini, lihat Pengubah Penampilan UI - Gradien.
Sisipkan objek TextLabel ke dalam Frame.
Pilih label baru, lalu di jendela Properties,
Atur AnchorPoint menjadi 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).
Atur BackgroundTransparency menjadi 1 untuk membuat latar belakang label sepenuhnya transparan.
Atur Name menjadi BodyTextLabel.
Atur Position menjadi {0.5, 0},{0.5, 0} untuk menempatkan label di tengah wadahnya (50% dari kiri ke kanan dari label induk, dan 50% dari atas ke bawah dari label induk).
Atur Size menjadi {0.85, 0},{0.7, 0} sehingga teks dapat menempati sebagian besar area fade (85% secara horizontal dan 70% secara vertikal dari label gambar induk).
Atur FontFace menjadi Montserrat untuk mencocokkan estetika futuristik.
Atur Weight menjadi Bold untuk menebalkan font.
Atur Text menjadi TAGGED.
Atur TextColor3 menjadi 255, 255, 255 untuk membuat teks berwarna putih.
Aktifkan TextScaled.
Pindahkan TaggedOutIndicatorGuiPrefab ke ReplicatedStorage.
Referensikan skrip ServerScriptService berikut dalam file tempat Laser Tag 1A yang secara programatis menampilkan indikator ditandai keluar sementara pemain merespawn kembali ke zona spawn tim mereka.
Skrip server ServerScriptService.SetupHumanoid berikut berjalan segera setelah pemain memuat pengalaman. 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 respawn 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 di game
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 karena telah menyelesaikan Kurikulum Desain Antarmuka Pengguna! Sekarang Anda memiliki pengalaman membuat gaya seni, membuat kerangka layout 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 Pemrograman Gameplay yang mengajarkan Anda tentang organisasi umum dan rincian implementasi kunci dari pengalaman laser tag sampel. Selamat berkarya!