Menerapkan desain Anda adalah proses membuat wireframe Anda di Studio menggunakan elemen UI bawaan dan khusus dengan skrip yang memicu konteks UI Anda secara kontekstual.Langkah menarik dari tutorial ini adalah di mana Anda bisa melihat semua desain dan kerja keras Anda bersama-sama menjadi satu set alur kerja yang kohesif dan siap untuk interaksi pemain.
Menggunakan file tag laser sampel pengalaman.rbxl sebagai referensi, bagian ini dari kurikulum desain antarmuka pengguna menunjukkan cara membawa rencana UI Anda ke kehidupan, termasuk panduan tentang:
- Mengambil ID aset dari perpustakaan aset UI sehingga Anda dapat membuat ulang komponen UI pengalaman tag laser sampel.
- Memodifikasi berbagai perangkat langsung di Studio untuk melihat bagaimana UI Anda ditampilkan di berbagai layar dan rasio aspek.
- Membuat ScreenGui , SurfaceGui , dan BillboardGui objek untuk menampilkan UI Anda di layar pemain, permukaan bagian, dan di dalam ruang 3D, masing-masing.
Setelah Anda meninjau teknik di bagian ini, Anda dapat menerapkannya ke 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 cara untuk benar-benar membuat ulang komponen UI menggunakan Perpustakaan Aset Desain UI.Proses ini memakan waktu sekitar 90 menit atau kurang dari awal sampai selesai.Jika Anda tidak ingin menggunakan nilai yang disediakan, Anda dapat menyesuaikan setiap elemen UI untuk memenuhi spesifikasi pengalaman Anda sendiri, atau gunakan sampel itu sendiri untuk sisa tutorial.
Dapatkan perpustakaan aset
Perpustakaan aset adalah koleksi aset yang dapat Anda tambahkan ke inventaris Anda untuk akses mudah dan penggunaan ulang.Perpustakaan aset yang akan Anda gunakan untuk proyek Anda dari Toko Pencipta termasuk sembilan aset UI individ 2D, dan versi akhir dari tujuan, pemilih blaster, dan komponen informasi pemain yang Anda buat di bagian tutorial ini.
Anda dapat menambahkan sebagian besar perpustakaan ke inventaris Anda di Studio dengan mengklik tautan Tambahkan ke Inventaris di komponen berikut.Setelah aset berada di inventaris Anda, Anda dapat menggunakannya kembali di proyek apa pun di platform.
Untuk mendapatkan perpustakaan aset dari inventaris Anda ke pengalaman Anda:
Di bilah alat, pilih tab Tampilkan .
Klik Toolbox . Jendela Toolbox ditampilkan.
Di jendela Toolbox , klik tab Inventaris . Tampilan urutan Model Saya ditampilkan.
Klik menu dropdown, lalu pilih sortir Paket Saya .
Klik tombol Komponen UI Layar Akhir , lalu di jendela Explorer , pilih Komponen Selesai , lalu seret ke layanan StarterGui .Sekarang Anda dapat mengaktifkan salah satu komponen akhir untuk merujuk desainnya.
Memodifikasi 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 dari jendela pandang Anda di Studio tidak harus mencerminkan rasio aspek yang digunakan pemain layar untuk mengakses pengalaman Anda, dan penting agar 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 memecahkan ikon Anda, dan pemain dengan layar kecil mungkin tidak dapat melihat ruang 3D karena elemen UI Anda mengambil terlalu banyak ruang di layar.
Untuk meniru layar Anda ke ukuran layar terkecil:
Di bilah alat, pilih tab Tes .
Klik Perangkat . Viewport berubah untuk mencerminkan rasio aspek laptop rata-rata.
Di bilah resolusi, pilih Resolusi Sebenarnya .Ini memungkinkan Anda untuk melihat resolusi sebenarnya dari elemen UI Anda di perangkat yang Anda emulasi.
Di bilah dropdown perangkat, pilih perangkat dengan ukuran layar terkecil yang dapat digunakan pemain untuk mengakses pengalaman Anda.Sementara opsi terbaik bervariasi tergantung pada perangkat yang mendukung pengalaman Anda, tes tag laser sampel dengan iPhone 4S untuk memverifikasi bagaimana UI terlihat dengan ruang layar terbatas.
Membuat 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 kontennya ke wadah PlayerGui pemain saat mereka memasuki pengalaman.
Anda dapat membuat beberapa objek ScreenGui untuk mengatur dan menampilkan kelompok elemen UI secara kontekstual selama gameplay.Sebagai contoh, pengalaman label laser sampel termasuk lima objek terpisah yang awalnya dinonaktifkan sampai pemain memenuhi kondisi berbeda selama aliran pengguna utama pengalaman:
- HUDGui - Menampilkan informasi kunci tentang gameplay pengalaman saat pemain aktif dalam ronde, seperti tujuan dan total poin setiap tim.
- PickABlasterGui - Menampilkan semua pilihan blaster saat pemain memulai atau bergabung kembali dengan ronde.
- ForceFieldGui - Menampilkan grid berbentuk segi enam saat pemain memilih blaster dan saat mereka sementara tidak terkalahkan.
- OutStateGui - Menampilkan border gelap di sekitar layar saat pemain ditagih keluar.
- RoundResultsGui - Menampilkan overlay gelap di atas layar dengan informasi tentang tim mana yang memenangkan ronde.
Setelah Anda membuat objek ScreenGui , Anda dapat membuat dan menyesuaikan anaknya GuiObjects sesuai dengan tujuan setiap wadah.Untuk menunjukkan, dalam bagian langsung yang mengikuti, Anda akan belajar cara menerapkan elemen UI untuk tiga kategori informasi yang perlu diketahui pemain agar berhasil dalam pengalaman tag laser sampel. Anda dapat menyesuaikan bagian mana pun dari proses untuk memenuhi spesifikasi pengalaman Anda sendiri .
Untuk membuat objek ScreenGui :
Di jendela Explorer , hover di atas layanan StarterGui , lalu klik ikon ⊕ . Menu konteks ditampilkan.
Sisipkan ScreenGui .
Ganti nama ScreenGui sesuai dengan konteks elemen UI anaknya.
Ulangi proses ini untuk setiap kelompok elemen UI yang perlu Anda tampilkan di layar setiap pemain.
UI Tujuan
Setelah mengikuti praktik terbaik hierarki visual dari Wireframe Layout Anda, bagian ini mengajarkan Anda cara menerapkan semua elemen UI di layar terkait dengan tujuan pengalaman.Grup ini dari elemen UI berada di dekat bagian atas layar karena tujuan dan poin masing-masing tim paling signifikan tentang cara memenangkan game.
Sebagai contoh, sampel memberikan komponen UI objektif yang pemain referensikan untuk mengetahui apa yang perlu mereka lakukan untuk berhasil dalam ronde.Sebagai pemain menandai anggota tim musuh dan mendapatkan poin, komponen ini melacak skor masing-masing tim terhadap tujuan keseluruhan dalam prompt judul.Untuk tinjauan tingkat tinggi dari semua skrip klien dan server yang bekerja bersama untuk melacak titik, lihat Melacak titik di Kurikulum Pemrograman Gameplay.
Untuk benar-benar membuat ulang UI tujuan dalam pengalaman sampel Tag Laser:
Buat wadah untuk seluruh komponen.
Masukkan Frame ke dalam objek HUDGui ScreenGui
- Di jendela Explorer , navigasikan ke layanan StarterGui .
- Pasang mouse di atas objek anaknya HUDGui , lalu klik ikon ⊕. Menu konteks ditampilkan.
- Dari menu konteks, masukkan Frame .
Pilih Frame baru , kemudian di jendela Properti ,
- Tetapkan Titik Anchor ke 0.5, 0 untuk mengatur titik asal frame di bagian tengah atas dirinya sendiri (50% dari kiri ke kanan frame, dan 0% dari bagian atas ke bawah frame).
- Tetapkan Transparansi Latar Belakang ke 1 untuk membuat latar belakang frame benar-benar透明.
- Tetapkan Posisi ke {0.5, 0},{0.03, 0} untuk mengatur frame di dekat bagian tengah layar (50% dari kiri ke kanan layar, dan 3% dari atas ke bawah layar sehingga ada sedikit penyangga).
- Tetapkan Ukuran ke supaya elemen frame mengambil bagian besar dari bagian atas layar untuk menarik perhatian pemain (50% secara horizontal, dan 13% secara vertikal).
- Tetapkan Nama ke Tujuan .
(Opsi) Sisipkan Batasan Aspek UI ke Tujuan untuk memastikan rasio aspek label tetap sama tidak peduli ukuran layar pemain.Sampel menetapkan properti UIAspectRatioConstraint.AspectRatio ke 7 .
Buat wadah untuk objek prompt tujuan.
Sisipkan Frame ke Tujuan .
Pilih Frame baru , kemudian di jendela Properti ,
- Tetapkan Titik Anchor ke 0.5, 0 untuk mengatur titik asal frame di bagian tengah atas dirinya sendiri (50% dari kiri ke kanan frame, dan 0% dari bagian atas ke bawah frame).
- Tetapkan Transparansi Latar Belakang ke 1 untuk membuat latar belakang frame benar-benar透明.
- Tetapkan Posisi ke {0.5, 0},{0, 0} untuk menetapkan frame di tengah kontainer (50% dari kiri ke kanan frame orang tua, dan 0% dari atas ke bawah frame orang tua).
- Tetapkan Ukuran ke {1, 0},{0.67, 0} sehingga komponen UI seleksi mengambil sekitar lebih dari setengah dari wadah dari atas ke bawah (100% secara horizontal dan 67% secara vertikal dari frame orang tua).
- Tetapkan Nama ke Tampilan Tujuan .
Buat elemen judul.
Sisipkan Label Gambar ke Tampilan Tujuan .
Pilih Label Gambar , kemudian di jendela Properti ,
- Tetapkan Titik Anchor ke 0.5, 1 untuk mengatur titik asal label di bagian tengah bawah (50% dari kiri ke kanan label, dan 100% dari atas ke bawah label).
- Tetapkan Transparansi Latar Belakang ke 1 untuk membuat latar belakang label benar-benar transparan.
- Tetapkan Urutan Tata Letak ke .
- Tetapkan Posisi ke {0.5, 0},{0.34, 0} untuk mengatur label di dekat bagian atas tengah frame (50% dari kiri ke kanan frame orangtua, dan 34% dari bagian atas ke bawah frame orangtua).
- Tetapkan Ukuran ke {0.46, 0},{0.34, 0} untuk memperluas area prompt hampir setengah dari frame (46% secara horizontal dan 34% secara vertikal dari frame orang tua).
- Tetapkan Nama ke Kepala.
- Tetapkan Gambar untuk rbxassetid://14304828123 untuk menampilkan trapesium.
- Tetapkan Transparansi Gambar ke 0.15 untuk membuat judul semi-透明.
(Opsi) Sisipkan Batasan UIAspectRatio ke dalam Label Gambar untuk memastikan rasio aspek label tetap sama tidak peduli ukuran layar pemain.Set sampel menetapkan properti UIAspectRatioConstraint.AspectRatio ke 13.781 .
Sisipkan Label Teks ke Header untuk menampilkan judul.
Pilih label baru, lalu di jendela Properti ,
- Tetapkan Titik Anchor ke 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).
- Tetapkan Transparansi Latar Belakang ke 1 untuk membuat latar belakang label benar-benar transparan.
- Tetapkan Posisi ke {0.5, 0},{0.5, 0} untuk memindahkan label ke tengah label orang tuanya (50% dari kiri ke kanan label orang tuanya, dan 50% dari atas ke bawah label orang tuanya).
- Tetapkan Ukuran ke {0.62, 0},{0.55, 0} untuk memperluas ruang teks ke lebih dari setengah label orangtua (62% secara horizontal dan 55% secara vertikal dari label orangtua).
- Tetapkan Nama ke HeaderTextLabel .
- Tetapkan FontFace ke Montserrat untuk sesuai dengan estetika futuristik.
- Tetapkan Berat ke Sedang untuk mempertebal font.
- Tetapkan Teks ke OBJEKTIF .
- Aktifkan Skala Teks .
Buat elemen prompt.
Sisipkan Label Gambar ke Tampilan Tujuan .
Pilih Label Gambar , kemudian di jendela Properti ,
- Tetapkan Titik Anchor ke 0.5, 1 untuk mengatur titik asal label di bagian tengah bawah (50% dari kiri ke kanan label, dan 100% dari atas ke bawah label).
- Tetapkan Transparansi Latar Belakang ke 1 untuk membuat latar belakang label benar-benar transparan.
- Atur Posisi ke {0.5, 0},{1, 0} untuk memindahkan label ke bagian tengah bawah frame orang tuanya (50% dari kiri ke kanan frame orang tuanya, dan 100% dari atas ke bawah frame orang tuanya).
- Tetapkan Ukuran ke {0.89, 0},{0.66, 0} untuk memperluas ruang teks hampir sepenuhnya ke lebar keseluruhan frame orang tua (89% secara horizontal dan 66% secara vertikal dari frame orang tua).
- Atur Nama ke Tubuh .
- Tetapkan Gambar untuk rbxassetid://14304827265 untuk menampilkan trapesium terbalik.
- Tetapkan Warna Gambar3 ke 0, 0, 0 untuk mengecat gambar hitam.
- Tetapkan Transparansi Gambar ke 0.3 untuk membuat judul semi-透明.
(Opsi) Sisipkan Batasan UIAspectRatio ke dalam Label Gambar untuk memastikan rasio aspek label tetap sama tidak peduli ukuran layar pemain.Sampel menetapkan properti UIAspectRatioConstraint.AspectRatio ke 13.781 .
Sisipkan Label Teks ke Tubuh untuk menampilkan perintah.
Pilih label baru, lalu di jendela Properti ,
- Tetapkan Titik Anchor ke 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).
- Tetapkan Transparansi Latar Belakang ke 1 untuk membuat latar belakang label benar-benar transparan.
- Tetapkan Posisi ke {0.5, 0},{0.5, 0} untuk memindahkan label ke tengah label orang tuanya (50% dari kiri ke kanan label orang tuanya, dan 50% dari atas ke bawah label orang tuanya).
- Tetapkan Ukuran untuk {0.85, 0},{0.39, 0} untuk memperluas ruang teks ke lebih dari setengah label orangtua (85% secara horizontal dan 39% secara vertikal dari label orangtua).
- Tetapkan Nama ke BodyTextLabel .
- Tetapkan FontFace ke Montserrat untuk sesuai dengan estetika futuristik.
- Tetapkan Berat ke Sedang untuk mempertebal font.
- Tetapkan TextColor3 untuk 255, 255, 255 membuat teks putih melawan latar belakang gelap.
- Atur Teks untuk Tag lawan pemain untuk mencetak poin! Tim pertama dengan %d poin menang.
- Aktifkan Skala Teks .
Buat wadah untuk counter tim tujuan.
Sisipkan Frame ke Tujuan .
Pilih Frame baru , kemudian di jendela Properti ,
- Tetapkan Titik Anchor ke 0.5, 1 untuk mengatur titik asal label di bagian tengah bawah (50% dari kiri ke kanan frame, dan 100% dari atas ke bawah frame).
- Tetapkan Transparansi Latar Belakang ke 1 untuk membuat latar belakang frame benar-benar透明.
- Tetapkan Posisi ke {0.5, 0},{1, 0} untuk menetapkan frame di bagian tengah bawah wadah (50% dari kiri ke kanan frame orang tua, dan 100% dari atas ke bawah frame orang tua).
- Tetapkan Ukuran ke {0.44, 0},{0.27, 0} sehingga komponen UI seleksi mengambil sekitar kurang dari setengah dari wadah dari kiri ke kanan (44% secara horizontal dan 27% secara vertikal dari frame orang tua).
- Tetapkan Nama ke TeamPointCounter .
Buat padding untuk counter tim.
- Masukkan objek UIListLayout ke dalam frame dari langkah 5.
- Pilih objek UIListLayout , lalu di jendela Properti ,
- Tetapkan Padding ke 0.025, 0 untuk memberikan ruang di antara counter tim masa depan.
- Tetapkan Arah Isi ke Horizontal sehingga setiap tim counter ditampilkan di samping satu sama lain.
- Tetapkan Alignment Horizontal ke Tengah sehingga setiap tim counter berbaris di tengah satu sama lain.
Buat elemen balasan tim hijau.
Sisipkan Label Gambar ke TeamPointCounter .
Pilih Label Gambar , kemudian di jendela Properti ,
- Tetapkan Transparansi Latar Belakang ke 1 untuk membuat latar belakang label benar-benar transparan.
- Atur Posisi ke {0.5, 0},{1, 0} untuk memindahkan label ke bagian tengah bawah frame orang tuanya (50% dari kiri ke kanan frame orang tuanya, dan 100% dari atas ke bawah frame orang tuanya).
- Tetapkan Ukuran ke {0.5, 0},{1, 0} untuk memperluas label menjadi setengah lebar frame orang tua (50% secara horizontal dan 100% secara vertikal dari frame orang tua).
- Tetapkan Nama ke TeamACounter .
- Tetapkan Gambar untuk rbxassetid://14304826831 untuk menampilkan fade arah.
- Tetapkan Warna Gambar3 ke 88, 218, 171 untuk mengecat gambar mint hijau.
Konfigurasi atribut khusus untuk melacak bahwa label ini untuk tim hijau.
- Di jendela Properti , navigasikan ke bagian Attribut , lalu klik ikon plus. Dialog pop-up ditampilkan.
- Di bidang Nama , masukkan warna tim .
- Di menu dropdown Tipe , pilih Warna Bata .
- Klik tombol Simpan .
- Tetapkan atribut baru teamColor ke Mint .
Sisipkan Label Teks ke TeamACounter untuk menampilkan perintah.
Pilih label baru, lalu di jendela Properti ,
- Tetapkan Titik Anchor ke 1, 0.5 untuk mengatur titik asal label baru di bagian tengah kanan dirinya (100% dari kiri ke kanan label, dan 50% dari atas ke bawah label).
- Tetapkan Transparansi Latar Belakang ke 1 untuk membuat latar belakang label benar-benar transparan.
- Tetapkan Posisi ke {0.95, 0},{0.5, 0} untuk memindahkan label ke kanan label orang tuanya (95% dari kiri ke kanan label orang tuanya, dan 50% dari atas ke bawah label orang tuanya).
- Tetapkan Ukuran untuk {0.85, 0},{0.39, 0} untuk memperluas ruang teks ke lebih dari setengah label orangtua (85% secara horizontal dan 39% secara vertikal dari label orangtua).
- Tetapkan FontFace ke Montserrat untuk sesuai dengan estetika futuristik.
- Tetapkan Berat untuk Berani untuk mempertebal font.
- Tetapkan TextColor3 untuk 255, 255, 255 membuat teks putih melawan latar belakang gelap.
- Tetapkan Teks ke - .
- Aktifkan Skala Teks .
- Tetapkan Alignment TextX ke Kanan .
Sisipkan objek UIStroke ke dalam Label Teks , lalu di jendela Properti , atur Warna ke untuk menggarisbawahkan dasbor dengan stroke hijau gelap.
Buat elemen hitungan tim merah muda.
Duplikasi TeamAICounter dan anak-anaknya.
Pilih duplikat TeamACounter , kemudian di jendela Properti ,
- Tetapkan Nama ke TeamBCounter .
- Atur Gambar ke untuk menampilkan fade arah di arah yang berlawanan.
- Tetapkan Warna Gambar3 ke 255, 170, 255 untuk mengecat karangan gambar merah muda.
- Tetapkan atribut teamColor ke Karnasi Merah Muda .
Pilih anak duplikat Label Teks dari TeamBCounter , lalu di jendela Properti ,
- Tetapkan Titik Anchor ke 0, 0.5 untuk mengatur titik asal label baru di bagian tengah kiri dirinya (0% dari kiri ke kanan label, dan 50% dari bagian atas ke bawah label).
- Tetapkan Posisi ke {0.05, 0},{0.5, 0} untuk memindahkan label ke kiri label orangtuanya (5% dari kiri ke kanan label orangtuanya, dan 50% dari atas ke bawah label orangtuanya).
- Tetapkan Alignment TextX ke Kiri .
Pilih anak duplikat UIStroke dari TeamBCounter , lalu di jendela Properti , atur Warna ke untuk menggarisbawahi dasbor dengan stroke merah muda gelap.
Referensikan skrip berikut ReplicatedStorage dalam file tempat sampel Laser Tag yang secara programatik memperbarui prompt tujuan dan melacak poin tim.
Skrip berikut memerlukan serangkaian skrip modul yang bekerja bersama untuk mengatur Tampilan Peringatan Utama (HUD), termasuk setObjective dan startSyncingTeamPoints.Setelah pemain bergabung dengan ronde dan memilih blaster mereka, skrip ini memastikan semua elemen UI HUD ditampilkan dengan benar untuk status, perangkat, dan status tim pemain.
Sekarang, setelah pemain memilih blaster mereka, UI tujuan ditampilkan di bagian atas layar mereka, dan melacak poin setiap tim.
UI Peledak
Setelah mengikuti praktik terbaik hierarki visual dari Wireframe Layout Anda, bagian ini mengajarkan Anda cara menerapkan semua elemen UI di layar terkait dengan blaster pemain.Grup ini dari elemen UI mengambil sebagian besar ruang layar di dekat pusat layar karena berfungsi sebagai titik fokus untuk menarik perhatian pemain terhadap tindakan di ruang 3D, dan memiliki arti paling penting untuk memainkan game.
Garis Bidik Salib
Sebuah crosshair adalah elemen UI yang memberi tahu pemain di mana mereka akan membuat dampak ketika mereka meledakkan senjata mereka.Elemen UI ini adalah persyaratan permainan penting untuk pengalaman penembak orang pertama karena pemain perlu dapat dengan akurat menargetkan blaster dan menandai anggota tim musuh.
Seperti kebanyakan pengalaman lain dalam genre penembak orang pertama, posisi tag laser sampel menempatkan crosshair di tengah layar sehingga pemain memiliki sesuatu yang statis untuk difokuskan saat avatar mereka bergerak melalui ruang 3D.Selain mengurangi penyakit gerakan, penempatan ini memungkinkan crosshair terlihat sementara juga menyatu dengan lingkungan keseluruhan.
Untuk membuat ulang persis crosshair dalam pengalaman Laser Tag sampel :
Sisipkan Label Gambar ke dalam objek HUDGui ScreenGui
Di jendela Explorer , navigasikan ke layanan StarterGui .
Pasang mouse di atas objek anaknya HUDGui , lalu klik ikon ⊕ . Menu konteks ditampilkan.
Dari menu konteks, masukkan Label Gambar .
Pilih label gambar baru ImageLabel , kemudian di jendela Properti ,
- Tetapkan Gambar ke .
- Tetapkan Titik Anchor 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).
- Tetapkan Transparansi Latar Belakang ke 1 untuk membuat latar belakang label benar-benar transparan.
- Tetapkan Nama ke Garis Bidik .
- Tetapkan Posisi ke {0.5,0},{0.5,0} untuk menetapkan label di tengah layar.
- Atur Tipe Skala menjadi Sesuai sehingga gambar pas di dalam kontainer dan tidak memanjang di berbagai ukuran layar.
(Opsi) Sisipkan Batasan Aspek UI ke Garis Bidik untuk memastikan rasio aspek label tetap sama tidak peduli ukuran layar pemain.Set sampel menetapkan properti UIAspectRatioConstraint.AspectRatio ke 0,895 .
Penanda tekan
Penanda pukul adalah elemen UI yang hanya ditampilkan saat ledakan membuat dampak dengan pemain lain di tim musuh.Seperti crosshair, elemen UI ini adalah persyaratan permainan penting untuk pengalaman penembak orang pertama karena memberikan umpan balik visual ketika pemain berhasil menandai lawan mereka.
Untuk menghasilkan ulang tanda pukul tepat dalam pengalaman Laser Tag sampel:
Masukkan Label Gambar ke dalam objek Garis Bidik ImageLabel
Di jendela Explorer , navigasikan ke layanan StarterGui .
Pasang mouse di atas objek anaknya Garis Bidik , lalu klik ikon ⊕ . Menu konteks ditampilkan.
Dari menu konteks, masukkan Label Gambar .
Pilih label gambar baru ImageLabel , kemudian di jendela Properti ,
- Tetapkan Gambar ke untuk menampilkan ikon penanda hit persegi panjang.
- Tetapkan Titik Anchor ke 0.5, 0.5 untuk mengatur titik asal label di tengah label.
- Tetapkan Transparansi Latar Belakang ke 1 untuk membuat latar belakang label benar-benar transparan.
- Tetapkan Posisi ke {0.5,0},{0.5,0} untuk menetapkan label di tengah layar.
- Tetapkan Nama ke Hitmarker .
- Tetapkan Ukuran untuk {0.6, 0},{0.06, 0} untuk mengurangi ukuran segi empat di sekitar tengah bidik.
- Tetapkan Transparansi Gambar ke 1 untuk membuat penanda pukulan sepenuhnya transparanSkrip di langkah berikutnya mengembalikan transparansi ke 0 setiap kali ledakan pemain membuat dampak dengan pemain lain di tim musuh.
Referensikan skrip berikut ReplicatedStorage dalam file tempat sampel Laser Tag yang menampilkan penanda pukul secara programatik saat ledakan membuat dampak dengan pemain di tim musuh.
Skrip berikut memerlukan serangkaian skrip modul yang bekerja bersama untuk mengatur Tampilan Peringatan Utama (HUD), termasuk setupHitmarker.Setelah pemain bergabung dengan ronde dan memilih blaster mereka, skrip ini memastikan semua elemen UI HUD ditampilkan dengan benar untuk status, perangkat, dan status tim pemain.
Sekarang, setiap kali pemain meledakkan blaster mereka dan ledakan membuat dampak dengan pemain lain, penanda pukul momenarily ditampilkan.
Pemilih blaster
Pemilih blaster adalah komponen UI yang pemain gunakan untuk memilih jenis blaster mereka sebelum bergabung atau bergabung kembali dengan ronde.Pengalaman label laser sampel memberikan dua jenis peledak: satu yang menghasilkan beberapa balok dengan penyebaran horizontal yang luas, dan lain yang menghasilkan satu balok.Jenis peledak yang dipilih pemain mempengaruhi strategi mereka selama ronde, menjadikan komponen UI ini alur kerja penting untuk pengalaman keseluruhan.
Langkah berikut menjelaskan cara membuat beberapa kontainer untuk kumpulan elemen UI yang berbeda, judul dengan perintah, navigasi dan tombol pilih, dan prefab tombol blaster.Logika pemrograman untuk komponen keseluruhan mengisi karakteristik visual yang berbeda ke tombol prefab blaster sesuai dengan Configuration yang mewakili setiap ketikblaster.
Pengaturan ini memungkinkan Anda untuk membuat instans tambahan Configuration untuk lebih banyak jenis peledak yang secara otomatis ditampilkan dengan benar dalam pemilih peledak tanpa perlu membuat tombol individual dalam StarterGui.PickABlasterGui .
Untuk membuat ulang persis pemilih blaster dalam pengalaman Laser Tag sampel :
Buat wadah untuk seluruh komponen.
Masukkan Frame ke dalam objek PickABlaster ScreenGui
- Di jendela Explorer , navigasikan ke layanan StarterGui .
- Pasang mouse di atas objek anaknya PickABlaster , lalu klik ikon ⊕ . Menu konteks ditampilkan.
- Dari menu konteks, masukkan Frame .
Pilih frame baru, lalu di jendela Properti ,
- Tetapkan Titik Anchor ke 0.5, 1 untuk mengatur titik asal frame di bagian tengah bawah (50% dari kiri ke kanan frame, dan 100% dari atas ke bawah frame).
- Tetapkan Transparansi Latar Belakang ke 1 untuk membuat latar belakang frame benar-benar透明.
- Tetapkan Posisi ke {0.5, 0},{0.9, 0} untuk mengatur frame di dekat bagian tengah bawah layar (50% dari kiri ke kanan layar, dan 92,4% dari atas ke bawah layar).
- Tetapkan Ukuran ke supaya komponen UI pemilih peledak mengambil bagian besar dari layar untuk menarik perhatian pemain (80% secara horizontal, dan 25% secara vertikal).
- Tetapkan Nama ke Komponen .
(Opsi) Sisipkan Batasan UIAspectRatio ke Komponen untuk memastikan rasio aspek frame dan elemen anaknya tetap sama tidak peduli ukuran layar pemain.Sampel menetapkan properti UIAspectRatioConstraint.AspectRatio ke 5 .
Buat wadah untuk menyimpan grup elemen UI.
Sisipkan Frame ke Komponen .
Pilih frame baru, lalu di jendela Properti ,
- Tetapkan Titik Anchor ke 0.5, 0.5 untuk mengatur titik asal bingkai di tengah dirinya sendiri (50% dari kiri ke kanan bingkai, dan 50% dari atas ke bawah bingkai).
- Tetapkan Transparansi Latar Belakang ke 1 untuk membuat latar belakang frame benar-benar透明.
- Tetapkan Posisi ke {0.5, 0},{0.375, 0} untuk mengatur frame di dekat bagian tengah atas wadah (50% dari kiri ke kanan frame orangtua, dan 37.5% dari atas ke bawah frame orangtua).
- Tetapkan Ukuran ke sehingga komponen UI seleksi mengambil 3/4 dari wadah (100% secara horizontal dan 75% secara vertikal dari frame orangtua).
- Tetapkan Nama ke Frame Pilihan .
Buat perintah untuk pemilih blaster.
Sisipkan Label Gambar ke Frame Pilihan .
Pilih label baru, lalu di jendela Properti ,
- Tetapkan Titik Anchor ke 0.5, 1 untuk mengatur titik asal label di bagian tengah bawah (50% dari kiri ke kanan label, dan 100% dari atas ke bawah label).
- Tetapkan Transparansi Latar Belakang ke 1 untuk membuat latar belakang label benar-benar transparan.
- Tetapkan Urutan Tata Letak ke .
- Tetapkan Posisi ke {0.5, 0},{0.22, 0} untuk mengatur label di dekat bagian atas tengah frame (50% dari kiri ke kanan frame orang tua, dan 22% dari atas ke bawah frame orang tua).
- Tetapkan Ukuran ke {0.45, 0},{0.22, 0} untuk memperluas area prompt hampir setengah dari frame (45% secara horizontal dan 22% secara vertikal dari frame orang tua).
- Tetapkan Nama ke Kepala .
- Tetapkan Gambar untuk rbxassetid://14304828123 untuk menampilkan trapesium.
- Tetapkan Transparansi Gambar ke 0.15 untuk membuat judul semi-透明.
(Opsi) Sisipkan Batasan Rasio UIAspect ke label untuk memastikan rasio aspek label tetap sama tidak peduli ukuran layar pemain.Sampel menetapkan properti UIAspectRatioConstraint.AspectRatio ke 13.78 .
Sisipkan Label Teks ke Header untuk menampilkan perintah.
Pilih label baru, lalu di jendela Properti ,
- Tetapkan Titik Anchor ke 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).
- Tetapkan Transparansi Latar Belakang ke 1 untuk membuat latar belakang label benar-benar transparan.
- Tetapkan Posisi ke {0.5, 0},{0.5, 0} untuk memindahkan label ke tengah label orang tuanya (50% dari kiri ke kanan label orang tuanya, dan 50% dari atas ke bawah label orang tuanya).
- Tetapkan Ukuran ke {0.6, 0},{0.55, 0} untuk memperluas ruang teks ke lebih dari setengah label orangtua (60% secara horizontal dan 55% secara vertikal dari label orangtua).
- Tetapkan Nama ke HeaderTextLabel .
- Tetapkan FontFace ke Montserrat untuk sesuai dengan estetika futuristik.
- Tetapkan Berat ke Sedang untuk mempertebal font.
- Tetapkan Teks ke PILIH BLASTER .
- Aktifkan Skala Teks .
Buat kontainer untuk kontainer tombol blaster dan panah pemilihan Anda.
Sisipkan Label Gambar ke Frame Pilihan .
Pilih label baru, lalu di jendela Properti ,
- Hapus nilai default Gambar default.
- Tetapkan Titik Anchor ke 0.5, 1 untuk mengatur titik asal label di bagian tengah bawah (50% dari kiri ke kanan label, dan 100% dari atas ke bawah label).
- Tetapkan BackgroundColor ke 0, 0, 0 untuk membuat label hitam.
- Tetapkan Transparansi Latar Belakang ke 0.3 untuk mengurangi opasitas label sebesar 30%, dan cocokkan semua elemen UI hitam di pengalaman.
- Tetapkan Posisi ke {0.5, 0},{1, 0} untuk menetapkan label ke bagian bawah tengah frame (50% dari kiri ke kanan frame orang tua, dan 100% dari atas ke bawah frame orang tua).
- Tetapkan Ukuran ke {1, 0},{0.77, 0} untuk memperluas area label ke ruang di bawah prompt (100% secara horizontal dan 77% secara vertikal dari frame orang tua).
Putar sudut-sudut kontainer.
- Sisipkan objek UICorner ke dalam label.
- Pilih objek sudut baru, lalu di jendela Properti , atur CornerRadius menjadi 0.075, 0 untuk membulatkan sudut.
Buat kontainer untuk tombol peledak Anda.
Sisipkan Frame ke label dari langkah 4.
Pilih frame baru, lalu di jendela Properti ,
- Tetapkan Titik Anchor ke 0.5, 0.5 untuk mengatur titik asal baru frame di tengah dirinya sendiri (50% dari kiri ke kanan frame, dan 50% dari atas ke bawah frame).
- Tetapkan Transparansi Latar Belakang ke 1 untuk membuat latar belakang frame benar-benar透明.
- Tetapkan Posisi ke {0.5, 0},{0.5, 0} untuk mengatur frame di tengah label orang tuanya (50% dari kiri ke kanan frame orang tuanya, dan 50% dari atas ke bawah frame orang tuanya).
- Tetapkan Ukuran ke {0.85, 0},{0.77, 0} untuk memperluas area bingkai ke sebagian besar label (85% secara horizontal dan 77% secara vertikal dari label orisinal).
- Tetapkan Nama ke Kontainer .
Buat padding untuk semua tombol peledak masa depan.
- Masukkan objek UIListLayout ke dalam frame dari langkah 5.
- Pilih objek tata letak baru, lalu di jendela Properti ,
- Tetapkan Padding ke 0.035, 0 untuk memberikan ruang di antara semua tombol masa depan.
- Tetapkan Arah Isi ke Horizontal sehingga setiap tombol ditampilkan di samping satu sama lain.
- Atur kedua HorizontalAlignment dan Alignment Vertikal ke Tengah sehingga setiap tombol sesuai dengan tengah satu sama lain.
Buat tombol navigasi kiri.
Sisipkan objek Tombol Gambar ke dalam Label Gambar dari langkah 4.
Pilih tombol baru, lalu di jendela Properti ,
- Hapus nilai default Gambar default.
- Tetapkan Titik Anchor ke 0, 0.5 untuk mengatur titik asal tombol baru di bagian tengah kiri dirinya (0% dari kiri ke kanan tombol, dan 50% dari bagian atas ke bawah tombol).
- Atur Transparansi Latar Belakang ke 0.15 untuk memberikan umpan balas visual pada hover bahwa tombol dapat dipilih.
- Tetapkan Posisi ke {0.02, 0},{0.5, 0} untuk memberikan pengisi ke kiri tombol dari kontainer orang tuanya (2% dari kiri ke kanan label orang tuanya, dan 50% dari bagian atas ke bagian bawah label orang tuanya).
- Tetapkan Ukuran ke {0.04, 0},{0.33, 0} untuk membuat tombol pemilihan jauh lebih kecil dari tombol blaster (4% secara horizontal dan 33% secara vertikal dari frame orang tua).
- Tetapkan Nama ke Tombol Navigasi Kiri .
Putar sudut tombol.
- Masukkan objek UICorner ke dalam tombol.
- Pilih objek sudut baru, lalu di jendela Properti , atur CornerRadius menjadi 0.1, 0 untuk membulatkan sudut.
Masukkan objek Label Gambar ke dalam tombol.
Pilih label baru, lalu di jendela Properti ,
- Tetapkan Titik Anchor ke 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).
- Tetapkan Posisi ke {0.45, 0},{0.5, 0} untuk mengatur label di dekat tengah tombol orangtuanya (45% dari kiri ke kanan tombol orangtuanya, dan 50% dari atas ke bawah tombol orangtuanya).Nilai ini tidak berada di tengah karena panah tidak secara visual terlihat seperti berada di tengah tombol di {0.5, 0},{0.5, 0} .
- Tetapkan Ukuran ke {0.8, 0},{0.8, 0} untuk memperluas area label ke ruang di bawah prompt (80% secara horizontal dan 80% secara vertikal dari frame orang tua).
- Tetapkan Transparansi Latar Belakang ke untuk membuat latar belakang gambar benar-benar transparan.
- Tetapkan Gambar ke .
- Tetapkan Tipe Skala menjadi Sesuai .
Buat tombol navigasi yang tepat.
Duplikasi Tombol Navigasi Kiri .
Pilih tombol duplikat, lalu di jendela Properti ,
- Tetapkan Titik Anchor ke 1, 0.5 untuk mengatur titik asal tombol baru di bagian tengah kanan dirinya (100% dari kiri ke kanan tombol, dan 50% dari atas ke bawah tombol).
- Tetapkan Posisi ke {0.98, 0},{0.5, 0} untuk memberikan pengisi ke kanan tombol dari kontainer orangtuanya (98% dari kiri ke kanan label orangtuanya, dan 50% dari atas ke bawah label orangtuanya).
- Atur Nama ke Tombol Navigasi Kanan .
Pilih objek anaknya Label Gambar .
- Tetapkan Rotasi ke 180 untuk membalikkan gambar.
- Tetapkan Posisi ke {0.55, 0},{0.5, 0} untuk mengatur label di dekat tengah tombol orangtuanya (55% dari kiri ke kanan tombol orangtuanya, dan 50% dari atas ke bawah tombol orangtuanya).Nilai ini tidak berada di tengah karena panah tidak secara visual terlihat seperti berada di tengah tombol di {0.5, 0},{0.5, 0} .
Buat tombol PILIH .
Sisipkan Tombol Gambar ke Komponen .Perhatikan bagaimana proses ini menjaga tombol pilih terpisah dari Frame Pemilihan sehingga Anda dapat menambahkan padding di antara bagian utama komponen dari tombol pilih.
Pilih tombol baru, lalu di jendela Properti ,
- Hapus nilai default Gambar default.
- Tetapkan Titik Anchor ke 0.5, 1 untuk mengatur titik asal tombol baru di bagian tengah bawah dirinya (50% dari kiri ke kanan tombol, dan 100% dari atas ke bawah tombol).
- Atur Transparansi Latar Belakang ke 0.15 untuk memberikan umpan balas visual pada hover bahwa tombol dapat dipilih.
- Tetapkan Posisi ke {0.5, 0},{0.99, 0} untuk mengatur tombol di dekat bagian tengah bawah wadahnya (50% dari kiri ke kanan frame orang tua, dan 99% dari atas ke bawah frame orang tua).
- Tetapkan Ukuran ke {0.17, 0},{0.18, 0} untuk memperpanjang tombol di bawah tombol blaster (17% secara horizontal dan 18% secara vertikal dari frame orang tua).
- Atur Nama ke Tombol Pilih .
Putar sudut tombol.
- Masukkan objek UICorner ke dalam tombol.
- Pilih objek sudut baru, lalu di jendela Properti , atur CornerRadius menjadi 0.2, 0 untuk membulatkan sudut.
Sisipkan objek Label Teks ke dalam tombol sehingga Anda dapat menampilkan panggilan untuk action.
Pilih label baru, lalu di jendela Properti ,
- Tetapkan Titik Anchor ke 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).
- Tetapkan Transparansi Latar Belakang ke 1 untuk membuat latar belakang label benar-benar transparan.
- Tetapkan Posisi ke {0.5, 0},{0.5, 0} untuk memindahkan label ke tengah tombol (50% dari kiri ke kanan tombol orang tua, dan 50% dari atas ke bawah tombol orang tua).
- Tetapkan Ukuran ke {0.9, 0},{0.55, 0} untuk memperluas ruang teks ke hampir semua lebar label orangtua (90% secara horizontal dan 55% secara vertikal dari label orangtua).
- Tetapkan Nama ke SelectTextLabel .
- Tetapkan FontFace ke Montserrat untuk sesuai dengan estetika futuristik.
- Tetapkan Berat ke Sedang untuk mempertebal font.
- Tetapkan Teks untuk PILIH .
- Aktifkan Skala Teks .
Buat tombol pemblokir pra-fabrik.
- Di layanan ReplicatedStorage , buat struktur folder untuk mengatur objek UI Anda.Sampel menggunakan folder Instansi dengan folder anak Guis .
- Masukkan objek Tombol Gambar ke dalam folder Guis .
- Pilih tombol baru, lalu di jendela Properti ,
- Hapus nilai default Gambar default.
- Tetapkan Titik Anchor ke 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).
- Tetapkan Transparansi Latar Belakang ke 0.65 untuk memberikan umpan balas visual bahwa tombol tidak fokus.Skrip di langkah 12 memberikan umpan balas visual programatik saat tombol berfokus.
- Tetapkan Urutan Tata Letak ke .
- Tetapkan Nama ke BlasterButtonPrefab .
- Tetapkan Ukuran ke .
- Tetapkan Transparansi Gambar ke 1 untuk membuat gambar benar-benar透明.
- Sisipkan Batasan Aspek UI ke Tombol BlasterPrefab untuk memastikan aspek rasio tombol tetap sama dalam komponen tidak peduli ukuran layar pemain.
- Putar sudut tombol.
- Sisipkan objek UICorner ke dalam BlasterButtonPrefab .
- Pilih UICorner , lalu di jendela Properti , atur CornerRadius ke untuk membulatkan sudut.
- Sisipkan Label Gambar ke BlasterButtonPrefab .
- Pilih label baru, lalu di jendela Properti ,
- Hapus nilai default Gambar default.
- Tetapkan Titik Anchor ke 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).
- Tetapkan Transparansi Latar Belakang ke 1 untuk membuat latar belakang label benar-benar transparan.
- Tetapkan Posisi ke {0.52, 0},{0.497, 0} untuk mengatur label di dekat tengah tombol orangtuanya (52% dari kiri ke kanan tombol orangtuanya, dan 49,7% dari atas ke bawah tombol orangtuanya).Nilai ini tidak berada di tengah karena blaster tidak secara visual terlihat seperti berada di tengah tombol di {0.5, 0},{0.5, 0} .
- Tetapkan Ukuran ke {1.20, 0},{0.9, 0} untuk memperluas area label di luar tombol (120% secara horizontal dan 90% secara vertikal dari tombol orang tua).
- Tetapkan Tipe Skala menjadi Sesuai .
Referensikan skrip berikut ReplicatedStorage dalam file tempat sampel Laser Tag yang menampilkan tombol secara programatik untuk setiap blaster, skala tombol saat pemain memilih tombol yang tidak fokus, dan lampirkan pilihan blaster pemain ke avatar mereka.
Skrip berikut memerlukan serangkaian skrip yang bekerja bersama untuk membuat pemilih blaster.Ketika pemain bergabung dengan pengalaman atau respawn kembali ke ronde setelah kesehatan mereka mencapai nol, skrip ini mengaktifkan semua elemen UI pemilih blaster sampai pemain membuat pilihan mereka.
Sekarang, setiap kali pemain bergabung dengan pengalaman atau respawn kembali ke 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 pemain gunakan untuk meledakkan peledak mereka jika mereka mengakses pengalaman melalui perangkat seluler atau tablet.Pengalaman tag laser sampel menggunakan tombol blaster dengan ikon yang menunjukkan krosshair dan ledakan untuk berkomunikasi fungsi tombol tanpa teks
Untuk membuat ulang tombol ledakan dengan tepat dalam pengalaman Laser Tag sampel :
Sisipkan Tombol Gambar ke dalam objek HUDGui ScreenGui
Di jendela Explorer , navigasikan ke layanan StarterGui .
Pasang mouse di atas objek anaknya HUDGui , lalu klik ikon ⊕ . Menu konteks ditampilkan.
Dari menu konteks, masukkan Tombol Gambar .
Di jendela pandang, pindahkan tombol ke tempat jari pemain alami beristirahat sehingga Anda dapat mendapatkan perasaan visual tentang apa tombol akan terlihat di perangkat pemain, lalu di jendela Properti ,
- Tetapkan Gambar ke untuk menampilkan ikon tombol ledakan.
- Tetapkan Gambar Tekan ke rbxassetid://18308372558 untuk menampilkan versi terbalik dari ikon tombol ledakan saat pemain menekan tombol.
- Tetapkan Transparansi Latar Belakang ke 1 untuk membuat latar belakang label benar-benar transparan.
- Tetapkan Nama ke Tombol Peledak .
- Atur Tipe Skala menjadi Sesuai sehingga gambar pas di dalam kontainer dan tidak memanjang di berbagai ukuran layar.
- Tetapkan Transparansi Gambar ke untuk mengurangi opasitas label sehingga sesuai dengan semua elemen UI hitam dalam pengalaman.
Sisipkan Batasan UIAspectRatio ke Tombol Peledak untuk memastikan rasio aspek tombol tetap sama tidak peduli ukuran layar pemain.
Referensikan skrip berikut ReplicatedStorage dalam file tempat sampel Laser Tag yang menampilkan tombol blaster secara programatik saat pemain menggunakan input sentuh pada perangkat yang menerima kendalisentuh.
Skrip berikut memerlukan serangkaian skrip modul yang bekerja bersama untuk mengatur Tampilan Peringatan Utama (HUD), termasuk setupTouchButtonAsync.Setelah pemain bergabung dengan ronde dan memilih blaster mereka, skrip ini memastikan semua elemen UI HUD ditampilkan dengan benar untuk status, perangkat, dan status tim pemain.
Sekarang, ketika pemain bergabung dengan pengalaman dan menggunakan input sentuhan di perangkat yang menerima kendalisentuhan, tombol blaster ditampilkan di bagian atas kanan tombol lompat.
UI Pemain
Setelah mengikuti praktik terbaik hierarki visual dari Wireframe Layout Anda, bagian ini mengajarkan Anda cara menerapkan semua elemen UI di layar terkait dengan kondisi pemain.Grup ini dari elemen UI berada di dekat sisi layar karena pemain dapat memahami informasi peripheral ini tanpa mengalihkan perhatian mereka dari gameplay.
Indikator pemain
Indikator pemain adalah komponen UI yang pemain referensikan untuk dengan cepat memecahkan tim mana mereka berada segera setelah mereka muncul di zona spawn tim mereka.Pengalaman tag laser sampel memberikan dua versi indikator pemain tergantung pada apakah pemain berada di tim hijau atau merah muda .
Setelah mengikuti panduan dari Pilih Tema Warna, kedua versi indikator pemain menggabungkan warna tim dengan ikon unik dan sederhana dengan sedikit rincian sehingga tetap dapat dibaca di layar kecil.Memberikan dua bentuk umpan balas visual penting karena membantu menjaga desain tetap terjangkau bagi pemain dengan ketakbisaan warna.
Untuk membuat ulang persis komponen indikator pemain dalam pengalaman Laser Tag sampel: Laser Tag
Masukkan Frame ke dalam objek HUDGui ScreenGui
- Di jendela Explorer , navigasikan ke layanan StarterGui .
- Pasang mouse di atas objek anaknya HUDGui , lalu klik ikon ⊕. Menu konteks ditampilkan.
- Dari menu konteks, masukkan Frame .
Pilih Frame baru , kemudian di jendela Properti ,
Tetapkan Titik Anchor ke 0, 1 untuk mengatur titik asal frame di bagian tengah bawah (0% dari kiri ke kanan frame, dan 100% dari atas ke bawah frame).
Tetapkan Transparansi Latar Belakang ke 1 untuk membuat latar belakang label benar-benar transparan.
Tetapkan Nama ke PlayerDisplay .
Atur Posisi ke {0.02, 0},{0.97, 0} untuk mengatur frame di dekat bagian bawah kiri layar.
Tetapkan Ukuran untuk {0.23, 0},{0.08, 0} untuk mengurangi dan memperluas frame.
Aktifkan KlipDescendants untuk memotong GuiObjects anak yang meluas di luar frame.
Buat bentuk poligonal.
Sisipkan Label Gambar ke PlayerDisplay .
Pilih label baru, lalu di jendela Properti ,
- Tetapkan Gambar ke rbxassetid://14304828123 untuk menampilkan ikon trapesium.
- Tetapkan Titik Anchor ke 1, 1 untuk mengatur titik asal label di bagian bawah kanan (100% dari kiri ke kanan label, dan 100% dari atas ke bawah label).
- Tetapkan Transparansi Latar Belakang ke 1 untuk membuat latar belakang label benar-benar transparan.
- Tetapkan Nama ke Blok .
- Tetapkan Posisi ke {1,0},{1,0} untuk menetapkan label ke sisi kanan frame.
- Tetapkan Ukuran ke {1.858, 0},{0.581, 0} untuk memperluas label di luar bingkai, dan mempersingkatnya sedikit lebih dari setengah panjang bingkai.
- Atur Transparansi Gambar ke 0.15 untuk membuat label sedikit transparan.
- Atur Tipe Skala menjadi Sesuai sehingga gambar pas di dalam kontainer dan tidak memanjang di berbagai ukuran layar.
- Sisipkan Batasan UI Aspek Rasio ke Blok untuk memastikan label dan elemen UI anaknya tetap sama tidak peduli ukuran layar pemain.
- Pilih batasan baru, lalu di jendela Properti , atur Rasio Aspek menjadi 13.78.
Buat kotak untuk potret pemain.
Sisipkan Label Gambar ke PlayerDisplay .
Pilih label baru, lalu di jendela Properti ,
- Hapus asetID penyimpan tempat dalam properti Gambar .Skrip di langkah 7 secara programat memasukkan potret pemain ke label gambar.
- Tetapkan Titik Anchor ke 0, 1 untuk mengatur titik asal label di bagian bawah kiri dirinya sendiri (0% dari kiri ke kanan label, dan 100% dari atas ke bawah label).
- Tetapkan BackgroundColor3 untuk 0, 0, 0 untuk mengatur warna latar belakang label menjadi hitam.
- Tetapkan Transparansi Latar Belakang ke 0.3 untuk mengurangi opasitas label sebesar 30%, dan cocokkan semua elemen UI hitam di pengalaman.
- Tetapkan Nama ke PlayerPortrait .
- Tetapkan Posisi ke {0.11, 0},{1, 0} untuk menetapkan label ke sisi kiri bentuk poligonal.
- Tetapkan Ukuran ke {0.23, 0},{1, 0} untuk mengurangi label.
- Atur Transparansi Gambar ke 0.15 untuk membuat label sedikit transparan.
- Atur Tipe Skala menjadi Sesuai sehingga gambar pas di dalam kontainer dan tidak memanjang di berbagai ukuran layar.
- Sisipkan Batasan UIAspectRatio ke PlayerPortrait untuk memastikan aspek label dan elemen anaknya tetap sama tidak peduli ukuran layar pemain.
- Sisipkan UICorner ke PlayerPortrait , lalu di jendela Properti , atur Radius Sudut ke untuk sedikit membulatkan sudut.
Buat label teks untuk nama pemain.
Sisipkan objek Label Teks ke dalam Layar Pemutar .
Pilih label baru, lalu di jendela Properti ,
- Tetapkan Titik Anchor ke 0, 0.5 untuk mengatur titik asal tombol baru di bagian tengah kiri dirinya (0% dari kiri ke kanan tombol, dan 50% dari bagian atas ke bawah tombol).
- Tetapkan Transparansi Latar Belakang ke 1 untuk membuat latar belakang label benar-benar transparan.
- Tetapkan Nama ke PlayerNameTextLabel .
- Tetapkan Posisi ke {0.35, 0},{0.72, 0} untuk menetapkan label ke sisi kanan wadahnya (35% dari kiri ke kanan label orang tua, dan 72% dari atas ke bawah label orang tua).
- Tetapkan Ukuran ke sehingga teks dapat mengambil sebagian besar area bentuk poligonal (52% secara horizontal dan 30% secara vertikal dari frame orangtua).
- Tetapkan FontFace ke Montserrat untuk sesuai dengan estetika futuristik.
- Tetapkan Berat untuk Berani untuk mempertebal font.
- Hapus teks placeholder di dalam properti Teks . Skrip di langkah 7 secara programat memasukkan nama pemain ke dalam label teks.
- Aktifkan Skala Teks .
- Tetapkan Alignment TextX ke Kiri .
Buat ikon tim dan warna yang ditampilkan di sebelah kiri portret pemain.
Sisipkan Folder ke PlayerDisplay , lalu ganti namanya menjadi Ikon Tim .
Buat ikon tim hijau dan warna.
- Sisipkan Label Gambar ke Ikon Tim .
- Pilih label baru, lalu di jendela Properti ,
- Tetapkan Titik Anchor ke 0, 1 untuk mengatur titik asal label di bagian bawah kiri dirinya sendiri (0% dari kiri ke kanan label, dan 100% dari atas ke bawah label).
- Tetapkan BackgroundColor3 untuk 88, 218, 171 untuk mengatur warna latar belakang label menjadi hijau mint.
- Tetapkan Nama ke TeamAIcon .
- Tetapkan Posisi ke {0, 0},{1, 0} untuk menetapkan label ke sisi kiri frame.
- Tetapkan Ukuran untuk {0.135, 0},{0.58, 0} untuk mengurangi label ke kiri dari potret pemain.
- Tetapkan Transparansi Gambar ke 1 untuk membuat label transparan
- Konfigurasi atribut khusus untuk melacak bahwa label ini untuk tim hijau. Langkah ini sangat penting untuk skrip di langkah 7.
- Di jendela Properti , navigasikan ke bagian Attribut , lalu klik ikon plus. Dialog pop-up ditampilkan.
- Di bidang Nama , masukkan warna tim .
- Di menu dropdown Tipe , pilih Warna Bata .
- Klik tombol Simpan .
- Tetapkan atribut baru teamColor ke Mint .
- Sisipkan Batasan UIAspectRatio ke TeamAIcon untuk memastikan aspek label dan elemen anaknya tetap sama tidak peduli ukuran layar pemain.
- Buat ikon.
- Sisipkan Label Gambar ke TeamAIcon .
- Pilih label baru, lalu di jendela Properti ,
- Tetapkan Gambar ke rbxassetid://14309678670 untuk menampilkan ikon tim hijau.
- Tetapkan Titik Anchor ke 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).
- Tetapkan Transparansi Latar Belakang ke 1 untuk membuat latar belakang label benar-benar transparan.
- Tetapkan Nama ke Ikon .
- Tetapkan Posisi ke {0.5, 0},{0.5, 0} untuk menetapkan label ke tengah label orang tuanya.
- Tetapkan Ukuran ke {0.7, 0},{0.6, 0} untuk mengurangi label.
- Atur Tipe Skala menjadi Sesuai sehingga gambar pas di dalam kontainer dan tidak memanjang di berbagai ukuran layar.
Buat ikon tim merah muda dan warna.
- Duplikasi TeamAIcon dan anak-anaknya.
- Pilih duplikat TeamAIcon , kemudian di jendela Properti ,
- Tetapkan BackgroundColor3 untuk 255, 170, 255 untuk mengatur warna latar belakang label menjadi merah muda karnasi.
- Tetapkan Nama ke TeamBIcon .
- Tetapkan atribut teamColor ke Karnasi Merah Muda .
- Pilih anak duplikat Ikon dari TeamBIcon, lalu di jendela Properti, atur Gambar ke untuk menampilkan ikon tim merah muda.
Referensikan skrip berikut ReplicatedStorage dalam file tempat contoh Laser Tag yang menampilkan indikator pemain dengan warna dan ikon tim yang tepat saat pemain aktif dalam ronde.
Skrip berikut memerlukan serangkaian skrip modul yang bekerja bersama untuk mengatur Tampilan Kepala Utama (HUD), termasuk startSyncingTeamColor , setPlayerName , dan setPlayerPortrait .Setelah pemain bergabung dengan ronde dan memilih blaster mereka, skrip ini memastikan semua elemen UI HUD ditampilkan dengan benar untuk status, perangkat, dan status tim pemain.
Sekarang, setiap kali pemain bergabung atau bergabung kembali dengan ronde setelah respawn, indikator pemain ditampilkan di bagian bawah kiri layar mereka.
Layar bidang gaya
Layar medan gaya adalah elemen UI yang melapisi jendela pandang untuk memberi tahu pemain bahwa mereka aman dari tembakan tim musuh saat bergabung atau bergabung kembali dengan ronde.Setelah mengikuti panduan estetika untuk ikon dari Pilih Gaya Seni, pengalaman tag laser sampel menggunakan pola berbentuk segi enam semi-transparan untuk mewakili medan gaya.Keputusan desain ini tidak hanya memperkuat gaya seni futuristik keseluruhan untuk semua UI dalam pengalaman, tetapi juga berkomunikasi dengan kondisi pemain tanpa teks atau panduan tambahan.
Untuk membuat ulang persis layar medan gaya dalam pengalaman sampel Tag Laser:
Masukkan Label Gambar ke dalam objek ForceFieldGui ScreenGui
Di jendela Explorer , navigasikan ke layanan StarterGui .
Pasang mouse di atas objek anaknya ForceFieldGui , lalu klik ikon ⊕ . Menu konteks ditampilkan.
Dari menu konteks, masukkan Label Gambar .
Pilih label baru, lalu di jendela Properti ,
Tetapkan Gambar ke .
Atur Transparansi Latar Belakang ke 0.8 untuk membuat medan gaya transparan.
Tetapkan Ukuran ke {1, 0},{1, 0} untuk membuat gambar mengisi seluruh layar (100% secara horizontal dan 100% secara vertikal dari ScreenGui orangtua).
Tetapkan Tipe Skala ke Ubin untuk membuat ubin segi enam di seluruh layar.
Atur Ukuran Ubin ke {0, 104},{0, 180}.
Sisipkan objek UIGradient ke dalam label.
Pilih objek gradien baru, lalu di jendela Properti ,
Atur Warna menjadi urutan warna yang dimulai biru, berubah putih, lalu berubah biru lagi.
Tetapkan Warna ke untuk menerapkan nuansa biru muda ke semua segi enam.
Klik properti Warna , lalu klik tombol ⋯ . Pop-up urutan warna muncul.
Setiap segi tiga pada sumbu bawah warna urutan warna adalah titik kunci yang menentukan nilai warna properti pada titik gambar dari kiri ke kanan.
Klik dan seret pada urutan warna sampai Anda mencapai nilai Waktu dari 0.05 , lalu klik kotak kecil di samping Warna untuk membuka jendela pop-up Warna .
Pilih putih cerah, lalu tutup jendela pop-up.
Klik dan seret pada urutan warna sampai Anda mencapai nilai Waktu dari 0.95 , lalu buka kembali jendela pop-up Warna dan pilih warna putih yang sama seperti sebelumnya.
Tetapkan Rotasi ke 225 untuk menampilkan bagian biru dari urutan warna Anda di sudut kiri atas dan kanan bawah.
Tetapkan Transparansi ke serangkaian angka yang membuat medan gaya terlihat seperti berkilau.
Klik properti Transparansi , lalu klik tombol ⋯ .Pop-up urutan angka tampil.Setiap kotak di awal dan akhir urutan angka adalah titik kunci yang menentukan nilai transparansi properti pada titik gambar dari kiri ke kanan.
Tetapkan properti waktu dan nilai berikut di seluruh urutan angka:
- Waktu = 0 , Nilai = 0.25
- Waktu = .101 , Nilai = 0.875
- Waktu = .183 , Nilai = 0
- Waktu = .3 , Nilai = 1
- Waktu = .7 , Nilai = 1
- Waktu = 1 , Nilai = 0.9
Duplikasi Label Gambar dari langkah 2.
Pilih objek UIGradient di dalam label duplikat, lalu di jendela Properti ,
Tetapkan Rotasi ke -45 untuk membalikkan gambar sehingga hampir saling mencerminkan di sepanjang sumbu Y.
Modifikasi Transparansi untuk membuat kilauan terlihat lebih organik.
- Klik properti Transparansi , lalu klik tombol ⋯ . Pop-up seri angka muncul.
- Pilih keyframe ketiga, lalu klik tombol Hapus .
Referensikan skrip berikut ReplicatedStorage dalam file tempat sampel Laser Tag yang menampilkan layar medan gaya secara programatik saat pemain bergabung atau bergabung kembali dengan ronde.
Skrip klien berikut ReplicatedStorage.ForceFieldClientVisuals menggantikan visual default ForceField dengan StarterGui.ForceFieldGui.Ketika pemain dimuat 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 bola biru pelindung yang sesaat menghalangi mereka dari kehilangan kesehatan.
Skrip ini dimulai dengan mendengarkan ketika ForceField ditambahkan ke karakter, menonaktifkan visual medan gaya default pertama, lalu mengaktifkan objek ForceFieldGui ScreenGui.Perhatikan bahwa ini tidak mempengaruhi visual orang ketiga saat 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 pemain bergabung atau bergabung kembali dengan ronde setelah respawn, UI layar medan gaya baru ditampilkan alih-alih visual pertama orang pertama ForceField default.
Layar bangkit ulang
Layar respawn adalah elemen UI yang membuat viewport redup untuk memberi tahu pemain bahwa mereka telah ditagih kembali ke zona spawn mereka, dan bahwa server sedang dalam proses menghidupkan kembali mereka kembali ke zona spawn mereka.Elemen UI ini penting karena memberi pemain waktu untuk memproses bahwa mereka telah ditagih keluar, dan merencanakan langkah berikutnya sebelum mereka bergabung kembali dengan ronde aktif.
Untuk informasi lebih lanjut tentang perilaku respawn khusus dalam pengalaman tag laser sampel, lihat Respawn Karakter dari kurikulum Pemrograman Gameplay.
Untuk benar-benar membuat ulang layar respawn dalam pengalaman sampel Tag Laser:
Buat banner informasi pusat.
Masukkan Label Gambar ke dalam objek OutStateGui ScreenGui.
Di jendela Explorer , navigasikan ke layanan StarterGui .
Pasang mouse di atas objek anaknya OutStateGui , lalu klik ikon ⊕ . Menu konteks ditampilkan.
Dari menu konteks, masukkan Label Gambar .
Pilih label baru, lalu di jendela Properti ,
Tetapkan Titik Anchor ke 0.5, 0.5 untuk mengatur titik asal tombol baru di tengah dirinya sendiri (50% dari kiri ke kanan label, dan 50% dari atas ke bawah label).
Tetapkan Transparansi Latar Belakang ke 1 untuk membuat latar belakang label benar-benar transparan.
Tetapkan Posisi ke {0.5, 0},{0.5, 0} untuk mengatur label di tengah kontainer (50% dari kiri ke kanan ScreenGui orangtua, dan 50% dari atas ke bawah ScreenGui orangtua).
Tetapkan Ukuran ke {0.48, 0},{0.06, 0} untuk memperluas label (48% secara horizontal dan 6% secara vertikal dari ScreenGui orangtua).
Tetapkan Nama ke Blok .
Tetapkan Gambar ke untuk membuat gambar menjadi trapesium
Tetapkan Warna Gambar ke 0,0,0 untuk membuat trapesium hitam.
Tetapkan Transparansi Gambar ke 0.3 untuk mengurangi opacitas label sebesar 30%, dan cocokkan semua elemen UI hitam di pengalaman.
Sisipkan Batasan UI Aspek Rasio ke Blok untuk memastikan label dan elemen UI anaknya tetap sama tidak peduli ukuran layar pemain.
Pilih batasan baru, lalu di jendela Properti , atur Rasio Aspek menjadi 13.78.
Sisipkan Label Teks ke Blok untuk teks informasi.
Pilih label baru, lalu di jendela Properti ,
Tetapkan Titik Anchor ke 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).
Tetapkan Transparansi Latar Belakang ke 1 untuk membuat latar belakang label benar-benar transparan.
Tetapkan Posisi ke {0.5, 0},{0.5, 0} untuk menetapkan label di tengah label orang tuanya (50% dari kiri ke kanan label orang tuanya, dan 50% dari atas ke bawah label orang tuanya).
Tetapkan Ukuran ke sehingga teks dapat mengambil sebagian besar area trapezoid (85% secara horizontal dan 55% secara vertikal dari label orangtua).
Tetapkan Nama ke BodyTextLabel .
Tetapkan FontFace ke Montserrat untuk sesuai dengan estetika futuristik.
Tetapkan Berat untuk Berani untuk mempertebal font.
Tetapkan Teks ke Respawning… .
Atur TextColor3 ke 255, 255, 255 untuk membuat teks putih.
Aktifkan Skala Teks .
Buat judul kepala.
Sisipkan Label Gambar ke Blok .
Pilih label baru, lalu di jendela Properti ,
Tetapkan Titik Anchor ke 0.5, 1 untuk mengatur titik asal label di bagian tengah bawah (50% dari kiri ke kanan label, dan 100% dari atas ke bawah label).
Tetapkan Transparansi Latar Belakang ke 1 untuk membuat latar belakang label benar-benar transparan.
Tetapkan Posisi ke {0.5, 0},{0, 0} untuk mengatur label di bagian tengah atas label orangtuanya (50% dari kiri ke kanan label orangtuanya, dan 0% dari atas ke bawah label orangtuanya).
Tetapkan Ukuran ke {0.46, 0},{0.56, 0} untuk memperluas label (46% secara horizontal dan 56% secara vertikal dari label orangtua).
Tetapkan Nama ke Kepala .
Tetapkan Gambar ke untuk membuat gambar menjadi fade multi-arah.
Tetapkan Warna Gambar ke 245, 46, 46 untuk membuat fade merah untuk menandakan bahwa pemain tidak aktif sementara saat mereka diberi label keluar dari ronde.
Sisipkan Label Teks ke Kepala untuk teks informasi.
Pilih label baru, lalu di jendela Properti ,
Tetapkan Titik Anchor ke 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).
Tetapkan Transparansi Latar Belakang ke 1 untuk membuat latar belakang label benar-benar transparan.
Tetapkan Posisi ke {0.5, 0},{0.5, 0} untuk menetapkan label di tengah label orang tuanya (50% dari kiri ke kanan label orang tuanya, dan 50% dari atas ke bawah label orang tuanya).
Tetapkan Ukuran ke sehingga teks dapat mengambil sebagian besar area fade (85% secara horizontal dan 55% secara vertikal dari label orangtua).
Tetapkan Nama ke HeaderTextLabel .
Tetapkan FontFace ke Montserrat untuk sesuai dengan estetika futuristik.
Tetapkan Berat ke Hitam untuk mempertebal font.
Tetapkan Teks ke DIBERI TAG - KAMU KELUAR! 9. Atur TextColor3 ke 255, 255, 255 untuk membuat teks putih.
Aktifkan Skala Teks .
Buat fade di sekitar perbatasan layar.
- Sisipkan Label Gambar ke OutStateGui .
- Pilih label baru, lalu di jendela Properti ,
- Tetapkan Titik Anchor ke 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).
- Tetapkan BackgroundColor3 untuk 0,0,0 untuk mengatur warna latar belakang label menjadi hitam.
- Tetapkan Transparansi Latar Belakang ke untuk membuat latar belakang label setengah transparan.
- Tetapkan Posisi ke {0.5, 0},{0.5, 0} untuk mengatur label di tengah kontainer (50% dari kiri ke kanan ScreenGui orangtua, dan 50% dari atas ke bawah ScreenGui orangtua).
- Tetapkan Ukuran ke {1, 0},{1, 0} untuk memperluas label ke seluruh layar (100% secara horizontal dan 100% secara vertikal dari ScreenGui orangtua).
- Tetapkan ZIndex ke -1 untuk menampilkan fade di belakang elemen UI lainnya.
- Tetapkan Nama ke Kepala .
- Tetapkan Gambar untuk rbxassetid://14309518613 untuk membuat gambar menjadi memudar perbatasan
- Atur Transparansi Gambar ke 0.1 untuk membuat fade sedikit transparan.
Untuk meningkatkan pelaksanaan, Anda dapat melewati aset gambar dan alih-alih menggunakan objek UIGradient dengan urutan nomor transparansi khusus.Untuk mempelajari lebih lanjut tentang teknik memudar ini, lihat Pengubah Penampilan UI - Gradien.
Referensikan skrip berikut ReplicatedStorage dalam file contoh Laser Tag yang menampilkan ulang layar respawn secara programatik saat kesehatan pemain mencapai nol, dan mereka berada dalam proses respawn kembali ke zona spawn tim mereka.
Skrip klien berikut ReplicatedStorage.PlayerStateHandler berisi fungsi yang memicu berbagai jenis perilaku sesuai dengan atribut playerState.Semua respons acara dikelompokkan secara logis bersama-sama dalam skrip ini karena mereka memerlukan perilaku serupa untuk mengaktifkan atau menonaktifkan kendalipemutar, gerakan kamera, dan lapisan UI mana yang terlihat.
Ketika kesehatan pemain mencapai nol, kesehatan mereka playerState menjadi TaggedOut, yang memicu fungsi onTaggedOut().onTaggedOut() langsung memicu perilaku berikut:
- Pemain tidak bisa bergerak di arena.
- Pemain tidak dapat memindahkan kamera mereka.
- Pemain tidak dapat menggunakan blaster mereka.
- The StarterGui.OutStateGui menjadi eksklusif diaktifkan.
Ketika pemain muncul kembali, 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 Keadaan Klien dari kurikulum Skrip Gameplay.
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 Tingkat 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 sekeliling 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 medan gaya penghancur saat pemain mulai bermain
scheduleDestroyForceField()
end
local function onTaggedOut()
-- Nonaktifkan kontrol saat ditagih keluar
togglePlayerMovement(false)
togglePlayerCamera(false)
setGuiExclusivelyEnabled(playerGui.OutStateGui)
-- Nonaktifkan blaster saat ditagih keluar
localPlayer:SetAttribute(PlayerAttribute.blasterStateClient, BlasterState.Disabled)
end
local function onInLobby()
-- Aktifkan kontrol saat berada di lobi
togglePlayerMovement(true)
togglePlayerCamera(true)
-- Sembunyikan semua HUD saat berada di lobi
setGuiExclusivelyEnabled(nil)
-- Nonaktifkan blaster saat berada 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 atur
local initialPlayerState = localPlayer:GetAttribute(PlayerAttribute.playerState)
onPlayerStateChanged(initialPlayerState)
local function updateFromPlayerState()
onPlayerStateChanged(localPlayer:GetAttribute(PlayerAttribute.playerState))
end
-- Tangani pembaruan status pemain 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 akrab dengan umum GuiObjects untuk UI di layar, coba recreate objek RoundResultsGui ScreenGui dan semua anaknya untuk tampilan di layar saat pemain menang atau kalah dalam mencocokkan.Anda dapat menggunakan file tag laser sampel pengalaman file sebagai referensi, atau menyesuaikan nilai untuk memenuhi persyaratan gameplay pengalaman Anda sendiri.
Membuat objek SurfaceGui
Untuk menampilkan UI di permukaan bagian di ruang 3D yang menanggapi logika pemrograman untuk setiap pemain individu , Anda dapat memindahkan objek SurfaceGui ke bagian yang ingin Anda tampilkan UI Anda di dalam layanan ReplicatedStorage.Teknik ini memastikan UI dan logika skrip Anda tersedia untuk server dan klien masing-masing pemain.
SurfaceGui objek berisi semua GuiObjects yang ditampilkan di permukaan bagian di ruang 3D.Pengalaman tag laser sampel hanya mencakup satu instansi objek SurfaceGui : meter penunggu yang ditampilkan di atas blaster setiap pemain.Objek ini membutuhkan logika skrip untuk setiap pemain karena ia secara aktif menanggapi masukan masing-masing pemain individu, dan memberikan umpan balas visual ketika mereka dapat meledakkan blaster mereka lagi.
Untuk membuat objek SurfaceGui :
Di jendela Explorer , hover di atas layanan ReplicatedStorage , lalu klik ikon ⊕ . Menu konteks ditampilkan.
Dari menu konteks, masukkan objek Bagian .
Sisipkan objek ScreenGui ke bagian.
Ganti nama SurfaceGui sesuai konteks elemen UI anaknya.
Ulangi proses ini untuk setiap elemen UI yang perlu ditampilkan di permukaan bagian di ruang 3D.
Meter penurunan panas
Meter penunggu adalah komponen UI yang memberi tahu pemain berapa lama mereka harus menunggu sebelum mereka dapat meledakkan blaster mereka lagi.Pause ringan ini mencegah pemain dapat meledak secepat yang mereka bisa klik atau tekan tombol, yang tidak realistis untuk gameplaytag laser.
Untuk benar-benar membuat ulang meter penunggu dalam pengalaman sampel Tag Laser:
Buat bagian untuk menahan objek SurfaceGui Anda.
- Di jendela Explorer , gulir di atas Ruang kerja , lalu klik ikon ⊕. Menu konteks ditampilkan.
- Dari menu konteks, masukkan bagian blok .Ini adalah lokasi sementara untuk bagian sehingga Anda dapat memvisualisasikan perubahan di setiap langkah proses.
Posisikan dan orientasikan bagian di sekitar posisi di mana karakter pemain akan memegang blaster, lalu di jendela Properti ,
Atur Transparansi menjadi 1 untuk membuat bagian sepenuhnya transparan.
Tetapkan Nama ke CooldownBarPrefab .
Tetapkan Ukuran untuk 0.169, 0.027, 2.537 untuk memperbesar bagian seukuran panjang blaster.
Nonaktifkan CanCollide dan CanQuery .
Sisipkan SurfaceGui ke CooldownBarPrefab .
Pilih SurfaceGui baru , kemudian di jendela Properti ,
Tetapkan Wajah ke Atas sehingga UI ditampilkan menghadap ke atas.
Tetapkan Pengaruh Cahaya dan Jarak Maksimum ke .
Tetapkan PixelsPerStud ke .
Buat bilah hitam.
Sisipkan Label Gambar ke dalam SurfaceGui .
Pilih label baru, lalu di jendela Properti ,
- Hapus nilai default Gambar default.
- Tetapkan Titik Anchor ke 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).
- Tetapkan BackgroundColor3 untuk 0,0,0 untuk mengatur warna latar belakang label menjadi hitam.
- Tetapkan Transparansi Latar Belakang ke 0.4 untuk membuat latar belakang label semi-transparan.
- Tetapkan Posisi ke {0.5, 0},{0.5, 0} untuk mengatur label di tengah kontainer (50% dari kiri ke kanan SurfaceGui orangtua, dan 50% dari atas ke bawah SurfaceGui orangtua).
- Tetapkan Ukuran ke {1, 0},{1, 0} untuk memperluas label ke seluruh bagian (100% secara horizontal dan 100% secara vertikal dari SurfaceGui orangtua).
- Tetapkan Nama ke Kontainer .
Putar sudut-sudut kontainer.
Masukkan objek UICorner ke dalam Container .
Pilih UICorner , lalu di jendela Properti , atur Radius Sudut ke untuk sedikit membulatkan sudut.
Buat bilah merah.
- Masukkan Label Gambar ke Kontainer .
- Pilih label baru, lalu di jendela Properti ,
- Hapus nilai default Gambar default.
- Tetapkan Titik Anchor ke 1, 0.5 untuk mengatur titik asal label di bagian tengah kanan dirinya (100% dari kiri ke kanan label, dan 50% dari atas ke bawah label).
- Tetapkan BackgroundColor3 untuk 172, 13, 13 untuk mengatur warna latar belakang label menjadi merah gelap.
- Tetapkan Transparansi Latar Belakang ke 0.2 untuk membuat latar belakang label sedikit transparan.
- Atur Nama ke Bar .
- Tetapkan Posisi ke {1, 0},{0.5, 0} untuk menetapkan label di bagian tengah kanan kontainer (100% dari kiri ke kanan label orang tua, dan 50% dari atas ke bawah label orang tua).
- Tetapkan Ukuran ke {0, 0},{1, 0} untuk memperpanjang label ke bagian atas label orangtuanya (0% secara horizontal dan 100% secara vertikal dari label orangtuanya).Langkah ini juga bermanfaat untuk perilaku remaja yang terjadi dalam skrip di langkah 8.
Putar sudut label.
- Masukkan objek UICorner ke dalam Bar .
- Pilih UICorner , lalu di jendela Properti , atur Radius Sudut ke 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 Guis .
Referensikan skrip berikut ReplicatedStorage dalam file tempat contoh Laser Tag yang secara programatik menempelkan meter penunggu ke blaster pemain, lalu animasikan bilah merah setelah pemain meledakkan blaster mereka.
Skrip klien berikut ReplicatedStorage.FirstPersonBlasterVisuals menangani semua logika visual untuk peledak orang pertama pemain.Ini membutuhkan serangkaian skrip modul yang bekerja bersama untuk mengatur visual blaster yang terasa lebih realistis untuk gameplaytag laser, 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 bilah pendingin karena diberikan ke rig
rigModel:Destroy()
rigModel = nil
end
end
-- Jalankan efek visual orang pertama saat terjadi ledakan
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 ke CFrame rig terkait dengan 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 visual yang berubah saat pemainState 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 meledakkan blaster mereka, bilah penundaan beranimasi untuk berkomunikasi ketika pemain dapat meledakkan lagi.
Membuat objek BillboardGui
Untuk menampilkan elemen UI dalam ruang 3D yang menanggapi 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 di ruang 3D.
Pengalaman label laser sampel termasuk dua objek terpisah BillboardGui dalam layanan ReplicatedStorage:
- OtherPlayerIndicatorGuiPrefab - Menampilkan lingkaran merah muda atau hijau di atas kepala setiap pemain saat mereka aktif dalam ronde.
- TaggedOutIndicatorGuiPrefab - Tampilkan di atas kepala pemain saat mereka diberi label keluar dari ronde.
Setelah Anda membuat objek BillboardGui , Anda dapat membuat dan menyesuaikan anaknya GuiObjects sesuai dengan tujuan setiap wadah.Untuk menunjukkan, dalam bagian langsung yang mengikuti, Anda akan belajar cara menerapkan elemen UI untuk kedua jenis indikator dalam pengalaman tag laser sampel. Anda dapat menyesuaikan bagian mana pun dari proses untuk memenuhi spesifikasi pengalaman Anda sendiri .
Untuk membuat objek BillboardGui :
- Di jendela Explorer , hover over BasePart atau Attachment , lalu klik ikon ⊕ . Menu konteks ditampilkan.
- Dari menu konteks, masukkan objek BillboardGui .
- Ganti nama BillboardGui sesuai konteks elemen UI anaknya.
- Ulangi proses ini untuk setiap elemen UI yang perlu ditampilkan secara kontekstual di atas kepala pemain.
Indikator tim
Indikator tim adalah elemen UI yang memberi tahu pemain mana tim pemain lain di ronde tersebut berada sehingga mereka dapat dengan mudah membedakan antara sekutu dan anggota tim musuh.Informasi ini penting karena pengalaman gameplay penembak orang pertama memerlukan pemain untuk membuat keputusan strategis cepat saat mereka berada di zona pertempuran sehingga mereka tidak ditagih dan kehilangan mencocokkan.
Untuk benar-benar membuat ulang indikator tim dalam pengalaman sampel Tag Laser:
Masukkan objek BillboardGui ke dalam rakit sementara.
Dari tab Avatar di bilah alat, klik Pembangun Rig .
Pilih dari opsi yang tersedia.Sampel menggunakan ketikrig R15 , bentuk tubuh wanita , dan avatar Rthro .Rig ditampilkan di kedua jendela pandang 3D dan di jendela Explorer di bawah nama Rig .
Di jendela Explorer , navigasikan ke mesh anak kapal Kepala anak kapal, lalu klik ikon ⊕ . Menu konteks ditampilkan.
Dari menu konteks, masukkan BillboardGui .
Pilih BillboardGui baru , kemudian di jendela Properti ,
Tetapkan Pengaruh Cahaya ke untuk mencegah cahaya lingkungan mempengaruhi warna indikator.
Tetapkan Nama ke Indikator Prefab Pemain Lain .
Tetapkan Ukuran untuk {0, 10},{0, 10} untuk membuat label menjadi lebih kecil secara signifikan
Tetapkan StudsOffsetWorldSpace ke 0, 4, 0 untuk menempatkannya di atas kepala rig.
Masukkan objek Frame ke dalam OtherPlayerIndicatorPrefab .
Pilih frame baru, lalu di jendela Properti ,
Tetapkan Titik Anchor ke 0.5, 0.5 untuk mengatur titik asal frame di tengah dirinya sendiri (50% dari kiri ke kanan label, dan 50% dari atas ke bawah label).
Atur BackgroundColor3 ke 255, 3, 0 untuk mengatur warna latar belakang frame menjadi merah sebagai warna penyimpan sebagai warna penyimpan.
Tetapkan Posisi ke {0.5, 0},{0.5, 0} untuk menetapkan frame ke tengah kontainer (50% dari kiri ke kanan dari BillboardGui orang tua, dan 50% dari atas ke bawah dari BillboardGui orang tua).
Tetapkan Ukuran untuk {1, -2},{1, -2} untuk memperpendek frame ke area permukaan BillboardGui.
Sisipkan objek UICorner ke dalam Frame untuk sepenuhnya membulatkan sudut.
Sisipkan objek UIStroke ke dalam Frame untuk menggambarkan lingkaran indikator.
Pindahkan Indikator Pemain LainPrefab ke Penyimpanan Replikasi .
Referensikan skrip berikut ReplicatedStorage dalam sampel Laser Tag 1A tempat file yang ditampilkan secara programatik untuk menunjukkan indikator tim untuk setiap pemain dalam ronde aktif kecuali mereka berada di tim musuh dan ditutup.
Skrip berikut ReplicatedStorage.OtherPlayerIndicatorGuiSetup berjalan saat pemain muncul di arena untuk ronde aktif.Ini menempelkan 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 indikator pemain lainPrefab UI ke 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 balik objek di ruang 3D; jika pemain lain berada di tim musuh, indikator tim hanya ditampilkan jika tidak ada objek di ruang 3D untuk menutupinya.
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, membuat 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 berada di atas hanya jika pemain ramah
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 di ronde aktif, indikator tim ditampilkan di atas kepala pemain lain kecuali mereka berada di tim musuh dan di belakang objek.
Indikator ditandai keluar
Indikator yang ditandai adalah elemen UI yang memberi tahu pemain ketika pemain lain tidak lagi aktif dalam ronde dan berada dalam proses respawn kembali ke zona spawn mereka.Informasi ini penting karena gameplay pengalaman penembak orang pertama memerlukan pemain untuk pindah ke target berikutnya secepat mereka menandai pemain sehingga mereka tidak menjadi rentan di arena dengan bermain di lokasi yang sama terlalu lama.
Untuk menghasilkan ulang indikator yang ditandai persis dalam pengalaman sampel Tag Laser:
Sisipkan objek BillboardGui ke dalam rakit sementara sehingga Anda dapat melakukan visualisasi perubahan di setiap langkah proses.
Dari tab Avatar di bilah alat, klik Pembangun Rig .
Pilih dari opsi yang tersedia.Sampel menggunakan ketikrig R15, bentuk tubuh laki-laki, dan avatar Rthro.Rig ditampilkan di kedua jendela pandang 3D dan di jendela Explorer di bawah nama Rig .
Di jendela Explorer , navigasikan ke mesh anak kapal Kepala anak kapal, lalu klik ikon ⊕ . Menu konteks ditampilkan.
Dari menu konteks, masukkan BillboardGui .
Pilih BillboardGui baru , kemudian di jendela Properti ,
Tetapkan Pengaruh Cahaya ke untuk mencegah cahaya lingkungan mempengaruhi warna indikator.
Tetapkan Nama ke TaggedOutIndicatorGuiPrefab .
Tetapkan Ukuran ke {3, 0},{0.5, 0} untuk memperluas ruang untuk label.
Tetapkan StudsOffset ke 0, 3.25, 0 untuk menempatkannya di atas kepala pemain.
Sisipkan objek Label Gambar ke dalam TaggedOutIndicatorGuiPrefab .
Pilih label baru, lalu di jendela Properti ,
- Tetapkan Titik Anchor ke 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).
- Tetapkan Transparansi Latar Belakang ke 1 untuk membuat latar belakang label benar-benar transparan.
- Tetapkan Nama ke Frame .
- Tetapkan Posisi ke {0.5, 0},{0.5, 0} untuk menetapkan label ke tengah kontainer (50% dari kiri ke kanan dari BillboardGui orang tua, dan 50% dari atas ke bawah dari BillboardGui orang tua).
- Tetapkan Ukuran ke {1, 0},{1, 0} untuk memperluas label ke seluruh BillboardGui (100% secara horizontal dan 100% secara vertikal dari BillboardGui orangtua).
- Tetapkan Gambar ke untuk membuat gambar menjadi fade multi-arah.
- Tetapkan Warna Gambar ke 245, 46, 46 untuk mengecat label merah.
Untuk meningkatkan pelaksanaan, Anda dapat melewati aset gambar dan alih-alih menggunakan objek UIGradient dengan urutan nomor transparansi khusus.Untuk mempelajari lebih lanjut tentang teknik memudar ini, lihat Pengubah Penampilan UI - Gradien.
Masukkan objek Label Teks ke dalam Frame .
Pilih label baru, lalu di jendela Properti ,
Tetapkan Titik Anchor ke 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).
Tetapkan Transparansi Latar Belakang ke 1 untuk membuat latar belakang label benar-benar transparan.
Tetapkan Nama ke BodyTextLabel .
Tetapkan Posisi ke {0.5, 0},{0.5, 0} untuk menetapkan label ke tengah kontainer (50% dari kiri ke kanan label orang tua, dan 50% dari atas ke bawah label orang tua).
Tetapkan Ukuran ke sehingga teks dapat mengambil sebagian besar area fade (85% secara horizontal dan 70% secara vertikal dari label gambar orangtua).
Tetapkan FontFace ke Montserrat untuk sesuai dengan estetika futuristik.
Tetapkan Berat untuk Berani untuk mempertebal font.
Tetapkan Teks ke DIBERI TAG .
Atur TextColor3 ke 255, 255, 255 untuk membuat teks putih.
Aktifkan Skala Teks .
Pindahkan TaggedOutIndicatorGuiPrefab ke ReplicatedStorage .
Referensikan skrip berikut ServerScriptService berikut dalam file sampel Laser Tag 1A yang menampilkan indikator yang ditagih secara programatik saat pemain respawn kembali ke zona spawn tim mereka.
Skrip server berikut ServerScriptService.SetupHumanoid 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 pada Karakter Ditambahkan jika pemain sudah memiliki karakter
if player.Character then
onCharacterAdded(player, player.Character)
end
-- Memanggil pada Karakter Ditambahkan untuk semua pemunculan karakter masa depan untuk pemain ini
player.CharacterAdded:Connect(function(character: Model)
onCharacterAdded(player, character)
end)
end
-- Memanggil onPlayerAdded untuk pemain yang sudah ada di game
for _, player in Players:GetPlayers() do
onPlayerAdded(player)
end
-- Memanggil onPlayerAdded untuk semua pemain masa depan
Players.PlayerAdded:Connect(onPlayerAdded)
Sekarang, setiap kali kesehatan pemain mencapai nol, indikator yang ditandai ditampilkan di atas kepala mereka sampai mereka respawn.
Selamat menyelesaikan Kurikulum Desain Antarmuka Pengguna! Sekarang Anda memiliki pengalaman membuat gaya seni, merancang tata letak Anda, dan menerapkan desain Anda di Studio dari awal sampai akhir, Anda dapat memperluas proyek Anda dengan UI dan fungsi baru, atau ikuti kurikulum tutorial tambahan, seperti Gameplay Scripting Kurikulum yang mengajarkan Anda tentang organisasi umum dan rincian implementasi kunci dari pengalaman tag laser sampel.Selamat membuat!