Menerapkan desain Anda adalah proses pembuatan wireframe Anda di Studio menggunakan kombinasi elemen UI bawaan dan khusus dengan skrip yang mengaktifkan UI Anda secara kontekstual. Langkah menarik ini dari tutorial adalah di mana Anda melihat semua desain Anda dan hard work berkumpul menjadi satu set kinerja yang lengkap dan siap untuk interaksi pemain.
Menggunakan file sample laser tag experience.rbxl sebagai referensi, bagian ini dari kurikulum desain UI menunjukkan cara membawa rencana UI Anda ke hidup, termasuk panduan tentang:
- Mengambil ID aset dari perpustakaan aset UI sehingga Anda dapat mereplikasi komponen UI samplar laser.
- Mengemulasi berbagai perangkat langsung di Studio untuk melihat bagaimana UI Anda ditampilkan di berbagai layar dan aspek ratios.
- Menggunakan ScreenGui , SurfaceGui , dan BillboardGui objek untuk menampilkan UI Anda di layar pemain, permukaan bagian, dan dalam ruang 3D, masing-masing.
Setelah Anda meninjau teknik-teknik ini, Anda dapat menerapkannya ke proyek Anda sendiri untuk membuat komponen UI yang menarik yang membantu pemain menavigasi apa yang mereka lakukan dalam pengalaman Anda.
Instruksi dalam bagian ini dari tutorial menunjukkan cara membuat ulang UI komponen dengan menggunakan UI Design Asset Library. Proses ini memakan waktu sekitar 90 menit atau kurang dari mulai sampai selesai. Jika Anda tidak ingin menggunakan nilai yang disediakan, Anda dapat menyesuaikan setiap elemen UI untuk memenuhi spesifikasi pengalaman Anda sendiri, atau menggunakan sampel itu sendiri untuk sisa
Dapatkan Perpustakaan Aset
Perpustakaan aset adalah koleksi aset yang dapat Anda tambahkan ke inventaris Anda untuk akses mudah dan ulang penggunaan. Perpustakaan aset yang akan Anda gunakan untuk proyek Anda dari Toko Pencipta mencakup sembilan item UI individual 2D, dan versi terakhir dari target, blaster selector, dan komponen pemain yang Anda ciptakan di bagian ini tutorial.
Anda dapat menambahkan sebagian besar perpustakaan ke inventaris Anda dalam Studio dengan mengklik tautan Tambahkan ke Inventori di komponen berikut. Setelah aset berada dalam inventaris Anda, Anda dapat menggunakannya kembali dalam proyek apa pun di platform.
Untuk mendapatkan perpustakaan aset dari inventaris Anda ke pengalaman Anda:
Di bilah menu, pilih tab Lihat .
Di bagian Tampilkan , klik Kotak Alat . Jendela Kotak Alat ditampilkan.
Di jendela Toolbox , klik tab Inventori . Tampilan sortiran Model Saya .
Klik menu dropdown, lalu pilih urutkan Paket Saya .
Klik tombol Komponen UI Terakhir Layar , lalu di jendela Explorer , pilih Komponen yang Diselesaikan , lalu seret ke layanan 1>StarterGui1>. Anda sekarang dapat mengaktifkan salah satu komponen terakhir untuk mengacu pada desain mereka.
Mengemulasi Perangkat
Studio's Emulator Perangkat 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 aspek rasio dari viewport Anda di Studio tidak selalu mencerminkan rasio aspek pada pengguna yang mengakses pengalaman Anda, dan penting bahwa UI Anda menjadi legible dan aksesibel
Misalnya, jika Anda tidak menguji UI Anda di berbagai ukuran layar, pemain dengan layar besar mungkin tidak dapat membaca teks Anda atau mem독读 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 menu, pilih tab Pengujian .
Di bagian Emulasi , klik Perangkat . Jendela tampilan berubah untuk mencerminkan aspek rasio rata-rata laptop.
Dalam menu suspensi resolusi, pilih Resolusi Aktual . Ini memungkinkan Anda untuk melihat resolusi sebenarnya dari elemen UI Anda di perangkat yang Anda emulasi.
Dalam menu dropdown perangkat, pilih perangkat dengan ukuran layar terkecil yang pemain dapat menggunakan untuk mengakses pengalaman Anda. Sementara opsi terbaik bervariasi tergantung pada perangkat yang pengalaman Anda dukung, pengalaman laser contoh menghasilkan tes dengan iPhone 4S untuk memeriksa tampilan UI dengan ruang layar terbatas.
Buat Objek ScreenGUI
Untuk menampilkan elemen UI di setiap layar pemain, Anda dapat menciptakan objek ScreenGui di layanan StarterGui. Objek ScreenGui adalah kontainer utama untuk UI on-screen, dan layanan 1> Class.StarterGui1>
Anda dapat menciptakan banyak ScreenGui objek untuk mengatur dan menampilkan kumpulan elemen UI secara konsisten di seluruh gameplay. Misalnya, pengalaman laser tag contoh mencakup lima objek ScreenGui yang pada dasarnya dinonaktifkan sampai pemain memenuhi berbagai kondisi selama main game:
- HUDGui - Menampilkan informasi kunci tentang permainan pengalaman saat pemain aktif dalam putaran, seperti total poin setiap tim dan total poin.
- PickABlasterGui - Menunjukkan semua pilihan blaster saat pemain memulai atau bergabung kembali di sebuah putaran.
- ForceFieldGui - Menunjukkan grid hexagonal saat pemain memilih blaster dan saat mereka sementara tidak kebal.
- OutStateGui - Menunjukkan batas gelap di sekitar layar saat pemain ditandai keluar.
- RoundResultsGui - Menampilkan overlay gelap di atas layar dengan informasi tentang tim mana yang memenangkan putaran.
Setelah Anda menciptakan objek ScreenGui, Anda dapat menciptakan dan menyesuaikan anaknya GuiObjects sesuai tujuan masing-masing wadah. Untuk menunjukkan, dalam bagian langsung berikutnya yang mengikuti, Anda akan
Untuk membuat objek ScreenGui
Di jendela Explorer , geser atas layanan StarterGui , lalu klik ikon ⊕ . Menu konteks ditampilkan.
Sisipkan ScreenGUI .
Ganti nama ScreenGUI menurut konteks elemen UI anaknya.
Ulangi proses ini untuk setiap grup elemen UI yang Anda perlukan untuk ditampilkan di setiap layar pemain.
Antarmuka Tujuan
Mengikuti praktik terbaik hierarki visual dari Wireframe Your Layouts, bagian ini mengajari Anda cara menerapkan semua elemen UI on-screen yang terkait dengan tujuan pengalaman. Grup ini dari elemen UI dekat bagian atas layar karena tujuan dan poin setiap tim memiliki signifikansi terbesar dalam cara memenangkan game.
Misalnya, sampel memberikan komponen UI objektif yang pemain referensikan untuk mengetahui apa yang mereka butuhkan untuk berhasil dalam putaran. Saat pemain menangkap anggota tim musuh dan mendapatkan poin, komponen ini menyimpan catatan setiap skor tim terhadap tujuan umum dalam prompt game. Untuk tinjauan tingkat tinggi dari semua skrip klien dan server yang
Untuk mengekspresikan UI target tepat dalam pengalaman Laser Tag :
Buat wadah untuk seluruh komponen.
Sisipkan Frame ke objek HUDGui ScreenGui
- Di jendela Explorer , navigasikan ke layanan StarterGui .
- Hover over its child HUDGui object, then click the ⊕ ikon. A menu context display.
- Dari menu konteks, sisipkan Frame .
Pilih Frame baru , lalu di jendela Properti ,
- Tetapkan AnchorPoint ke 0.5, 0 untuk menetapkan titik asal frame di bagian atas tengah (50% dari kiri ke kanan frame, dan 0% dari atas ke bawah frame).
- Tetapkan Transparansi Latar Belakang untuk 1 untuk membuat latar belakang frame sepenuhnya transparan.
- Tetapkan Posisi untuk {0.5, 0},{0.03, 0} untuk menetapkan frame di dekat bagian atas tengah layar (50% dari kiri ke kanan layar, dan 3% dari atas ke bawah layar sehingga ada sedikit buffer).
- Tetapkan Ukuran ke {0.5, 0},{0.13, 0} sehingga elemen-elemen frame mengambil bagian besar dari atas layar untuk menarik perhatian pemain (50% secara horisontal, dan 13% secara vertikal).
- Tetapkan Nama untuk Tujuan .
(Opsional) Sisipkan UIAspectRatioConstraint ke Objektif untuk menjamin proporsi aspek label tetap sama tidak peduli ukuran layar pemain. Samples menetapkan proporsi 0> Class.UIAspectRatioLimit0> nya ke 3> 7 3> .
Buat wadah untuk objek tujuan.
Sisipkan Frame ke Objektif .
Pilih Frame baru , lalu di jendela Properti ,
- Tetapkan AnchorPoint ke 0.5, 0 untuk menetapkan titik asal frame di bagian atas tengah (50% dari kiri ke kanan frame, dan 0% dari atas ke bawah frame).
- Tetapkan Transparansi Latar Belakang untuk 1 untuk membuat latar belakang frame sepenuhnya transparan.
- Tetapkan Posisi untuk {0.5, 0},{0, 0} untuk menetapkan frame di tengah wadah (50% dari kiri ke kanan dari frame orang tua, dan 0% dari atas ke bawah dari frame orang tua).
- Set Ukuran ke {1, 0},{0.67, 0} sehingga komponen UI pemilihan mengambil lebih dari setengah dari konten wadah dari atas ke bawah (100% secara horizontal dan 67% secara vertikal dari frame tertinggi).
- Tetapkan Nama ke ObjectiveDisplay .
Buat elemen judul.
Sisipkan Label Gambar ke dalam Tampilan Target .
Pilih Label Gambar , lalu di jendela Propinsi ,
- Tetapkan AnchorPoint ke 0.5, 1 untuk menetapkan titik asal label di bagian bawah tengah dirinya (50% dari kiri ke kanan label, dan 100% dari atas ke bawah label).
- Tetapkan Transparansi Latar Belakang untuk 1 untuk membuat latar belakang label sepenuhnya transparan.
- Set LayoutOrder ke -1 .
- Tetapkan Posisi untuk {0.5, 0},{0.34, 0} untuk menetapkan label di dekat bagian atas atas tengah frame (50% dari kiri ke kanan frame orang tua, dan 34% dari bagian atas atas frame orang tua).
- Tetapkan Ukuran ke {0.46, 0},{0.34, 0} untuk menyebar area prompt ke hampir setengah dari area frame (46% secara horizontal dan 34% secara vertikal dari frame tertinggi).
- Tetapkan Nama ke Kepala.
- Tetapkan Gambar ke rbxassetid://14304828123 untuk menampilkan trapezoid.
- Tetapkan Transparansi Gambar ke 0.15 untuk membuat header semi-transparan.
(Opsional) Sisipkan UIAspectRatioConstraint ke dalam Label untuk memastikan bahwa proporsi aspek label tetap sama tidak peduli ukuran layar pemain. Samples menetapkan proporsi 0> Class.UIAspectRatioConstraint.AspectRatio0> ke 3>13.781 3> .
Sisipkan Label Teks ke Judul Headings untuk menampilkan judul.
Pilih label baru, lalu di jendela Properti ,
- Tetapkan AnchorPoint ke 0.5, 0.5 untuk menetapkan titik asal label di tengah dirinya (50% dari kiri ke kanan label, dan 50% dari atas ke bawah label).
- Tetapkan Transparansi Latar Belakang untuk 1 untuk membuat latar belakang label sepenuhnya transparan.
- Tetapkan Posisi untuk {0.5, 0},{0.5, 0} untuk pindahkan label ke tengah label parent (50% dari kiri ke kanan label parent, dan 50% dari atas ke bawah label parent).
- Tetapkan Ukuran ke {0.62, 0},{0.55, 0} untuk menyebar ruang teks lebih dari setengah dari label orang tua (62% secara horizontal dan 55% secara vertikal dari label orang tua).
- Tetapkan Nama ke Label Kepala .
- Tetapkan FontFace ke Montserrat untuk menyesuaikan estetika masa depan.
- Tetapkan Berat ke Sedang untuk menyuburkan huruf.
- Tetapkan Teks ke OBJECTIVE .
- Aktifkan TextScaled .
Buat elemen prompt.
Sisipkan Label Gambar ke dalam Tampilan Target .
Pilih Label Gambar , lalu di jendela Propinsi ,
- Tetapkan AnchorPoint ke 0.5, 1 untuk menetapkan titik asal label di bagian bawah tengah dirinya (50% dari kiri ke kanan label, dan 100% dari atas ke bawah label).
- Tetapkan Transparansi Latar Belakang untuk 1 untuk membuat latar belakang label sepenuhnya transparan.
- Tetapkan Posisi untuk {0.5, 0},{1, 0} untuk pindahkan label ke bagian bawah tengah dari frame parent (50% dari kiri ke kanan frame parent, dan 100% dari atas ke bawah frame parent).
- Tetapkan Ukuran ke {0.89, 0},{0.66, 0} untuk menyebar ruang teks hampir sepenuhnya ke kedua sisi rahang utama (89% secara horizontal dan 66% secara vertikal dari rahang utama).
- Tetapkan Nama ke Tubuh .
- Tetapkan Gambar ke rbxassetid://14304827265 untuk menampilkan trapezoid ke atas-bawah.
- Tetapkan WarnaGambar3 ke 0, 0, 0 untuk menyamarkan gambar hitam.
- Tetapkan Transparansi Gambar ke 0.3 untuk membuat header semi-transparan.
(Opsional) Sisipkan UIAspectRatioConstraint ke dalam Label untuk memastikan bahwa proporsi aspek label tetap sama tidak peduli ukuran layar pemain. Samples menetapkan proporsi 0> Class.UIAspectRatioConstraint.AspectRatio0> ke 3> 13.781 3> .
Sisipkan Label Teks ke dalam Tubuh untuk menampilkan prompt.
Pilih label baru, lalu di jendela Properti ,
- Tetapkan AnchorPoint ke 0.5, 0.5 untuk menetapkan titik asal label di tengah dirinya (50% dari kiri ke kanan label, dan 50% dari atas ke bawah label).
- Tetapkan Transparansi Latar Belakang untuk 1 untuk membuat latar belakang label sepenuhnya transparan.
- Tetapkan Posisi untuk {0.5, 0},{0.5, 0} untuk pindahkan label ke tengah label parent (50% dari kiri ke kanan label parent, dan 50% dari atas ke bawah label parent).
- Tetapkan Ukuran ke {0.85, 0},{0.39, 0} untuk menyebar ruang teks lebih dari setengah dari label orang tua (85% secara horizontal dan 39% secara vertikal dari label orang tua).
- Tetapkan Nama ke BodyTextLabel .
- Tetapkan FontFace ke Montserrat untuk menyesuaikan estetika masa depan.
- Tetapkan Berat ke Sedang untuk menyuburkan huruf.
- Tetapkan TextColor3 ke 255, 255, 255 untuk membuat teks putih melawan latar belakang gelap.
- Tetapkan Teks untuk Tag lawan pemain untuk mencetak poin! Tim pertama yang mencapai %d poin menang. .
- Aktifkan TextScaled .
Buat wadah untuk tim tujuan.
Sisipkan Frame ke Objektif .
Pilih Frame baru , lalu di jendela Properti ,
- Tetapkan AnchorPoint ke 0.5, 1 untuk menetapkan titik asal label di bagian bawah tengah dari dirinya sendiri (50% dari kiri ke kanan frame, dan 100% dari atas ke bawah frame).
- Tetapkan Transparansi Latar Belakang untuk 1 untuk membuat latar belakang frame sepenuhnya transparan.
- Tetapkan Posisi untuk {0.5, 0},{1, 0} untuk menetapkan frame di bagian bawah tengah dari kontainer (50% dari kiri ke kanan dari frame orang tua, dan 100% dari bagian atas tahun dari frame orang tua).
- Set Ukuran ke {0.44, 0},{0.27, 0} sehingga komponen UI pemilihan mengambil sekitar kurang dari setengah dari wadah dari kiri ke kanan (44% secara horizontal dan 27% secara vertikal dari frame parent).
- Tetapkan Nama ke TeamPointCounter .
Buat pengurangan untuk counter tim.
- Sisipkan objek UIListLayout ke dalam frame dari langkah 5.
- Pilih objek UIListLayout , lalu di jendela Properti ,
- Tetapkan Padding ke 0.025, 0 untuk menyediakan ruang antara counter tim masa depan.
- Tetapkan IsiArah menjadi Horizontal sehingga setiap counter tim berada di samping satu sama lain.
- Tetapkan HorizontalAlignment ke Center sehingga setiap tim counter berada di tengah satu sama lain.
Buat elemen counter tim hijau.
Sisipkan Label Gambar ke dalam TeamPointCounter .
Pilih Label Gambar , lalu di jendela Propinsi ,
- Tetapkan Transparansi Latar Belakang untuk 1 untuk membuat latar belakang label sepenuhnya transparan.
- Tetapkan Posisi untuk {0.5, 0},{1, 0} untuk pindahkan label ke bagian bawah tengah dari frame parent (50% dari kiri ke kanan frame parent, dan 100% dari atas ke bawah frame parent).
- Tetapkan Ukuran ke {0.5, 0},{1, 0} untuk menyempitkan label sebesar setengah lebar dari frame orang tua (50% secara horizontal dan 100% secara vertikal dari frame orang tua).
- Tetapkan Nama ke TeamACount .
- Tetapkan Gambar ke rbxassetid://14304826831 untuk menunjukkan fase arah.
- Tetapkan WarnaGambar3 ke 88, 218, 171 untuk menyatukan gambar mint green.
Konfigurasikan attribute khusus untuk melacak bahwa label ini untuk tim hijau.
- Di jendela Propinsi , navigasikan ke bagian Attributs lalu klik ikon plus. Jendela pop-up muncul.
- Di Nama lapangan, masukkan warna tim .
- Dalam menu Type menu dropdown, pilih BrickColor .
- Klik tombol Simpan .
- Tetapkan nilai timColor baru ke Mint .
Sisipkan Label Teks ke dalam TeamACountar untuk menampilkan prompt.
Pilih label baru, lalu di jendela Properti ,
- Tetapkan AnchorPoint ke 1, 0.5 untuk menetapkan titik asal label baru di tengah kanan (100% dari kiri ke kanan label, dan 50% dari atas ke bawah label).
- Tetapkan Transparansi Latar Belakang untuk 1 untuk membuat latar belakang label sepenuhnya transparan.
- Tetapkan Posisi untuk {0.95, 0},{0.5, 0} untuk pindahkan label ke kanan label utama (95% dari kiri ke kanan label utama, dan 50% dari atas ke bawah label utama).
- Tetapkan Ukuran ke {0.85, 0},{0.39, 0} untuk menyebar ruang teks lebih dari setengah dari label orang tua (85% secara horizontal dan 39% secara vertikal dari label orang tua).
- Tetapkan FontFace ke Montserrat untuk menyesuaikan estetika masa depan.
- Tetapkan Berat ke Bold untuk menyuburkan huruf.
- Tetapkan TextColor3 ke 255, 255, 255 untuk membuat teks putih melawan latar belakang gelap.
- Set Teks ke - .
- Aktifkan TextScaled .
- Tetapkan TextXAlignment ke Kanan .
Sisipkan objek UIStroke ke dalam TextLabel , lalu di jendela Properties , atur 1> Warna1> menjadi 4> 8, 78, 524> untuk menggambarkan dasar dengan garis hitam.
Buat elemen counter tim merah muda.
Duplikasi TeamAICounter dan anak-anaknya.
Pilih duplikat TeamACount , lalu di jendela Properties ,
- Tetapkan Nama ke TeamBCounter .
- Tetapkan Gambar ke rbxassetid://14305849451 untuk menunjukkan fase kearahan dalam arah yang berlawanan.
- Tetapkan WarnaGambar3 ke 255, 170, 255 untuk menyuntik warna gambar karnasi merah muda.
- Tetapkan nilai teamColor ke Carnation Pink .
Pilih anak TextLabel duplikasi dari TeamBCounter , lalu di jendela Properties ,
- Tetapkan AnchorPoint ke 0, 0.5 untuk menetapkan titik asal label di tengah kiri dari dirinya sendiri (0% dari kiri ke kanan label, dan 50% dari atas ke bawah label).
- Tetapkan Posisi untuk {0.05, 0},{0.5, 0} untuk pindahkan label ke kiri labelnya (5% dari kiri ke kanan label, dan 50% dari atas ke bawah label).
- Tetapkan TextXAlignment ke Kiri .
Pilih anak UIStroke dari TeamBCounter , lalu di jendela Properties , atur 1> Warna1> menjadi 4> 158, 18, 944> untuk menghubungkan dasar dengan garis hitam pink.
참조 다음 ReplicatedStorage 스크립트 dalam Laser Tag tempat file yang program secara otomatis update prompt tujuan dan mengikuti poin tim.
Skrip berikut mengharuskan beberapa script modul yang bekerja bersama untuk menyiapkan utama Heads Up Display (HUD), termasuk setObjective dan startSyncingTeamPoints . Setelah seorang pemain bergabung dengan putaran dan memilih blaster mereka, script ini memastikan semua elemen UI HUD ditampilkan dengan benar untuk status pemain, perangkat, dan status tim.
Sekarang, setelah seorang pemain memilih blaster mereka, UI target tampilan di atas layar mereka, dan melacak poin setiap tim.
Antarmuka Blaster
Mengikuti praktik terbaik hierarki visual dari Wireframe Your Layouts, bagian ini mengajari Anda cara menerapkan semua elemen UI di layar yang terkait dengan blaster pemain. Grup ini UI elemen mengambil ruang sebesar besar di dekat pusat layar karena bertindak sebagai titik fokus untuk menarik perhatian gameke tindakan di ruang 3D, dan itu memiliki
Teropong
Sebuah crosshair adalah elemen UI yang memberi tahu pemain di mana mereka akan membuat dampak saat mereka meledakkan senjata mereka. Elemen UI ini sangat penting dalam gameplay pertama orang pertama karena pemain harus dapat dengan akurat menarik senjata mereka dan menandai anggota tim musuh.
Seperti kebanyakan pengalaman lain dalam genre penembak orang pertama, pengalaman laser tag sampel memposisikan crosshair di tengah layar sehingga pemain memiliki sesuatu yang statis untuk fokuskan sementara avatar mereka bergerak melalui ruang 3D. Selain mengurangi kelelahan gerakan, posisi ini memungkinkan crosshair untuk dapat dilihat saat bergabung dengan lingkungan.
Untuk mengekspresikan crosshair dalam Laser Tag pengalaman:
Sisipkan Label Gambar ke dalam objek HUDGui ScreenGui .
Di jendela Explorer , navigasikan ke layanan StarterGui .
Hover over its child HUDGui object, then click the ⊕ ikon. A contextual menu displays.
Dari menu konteks, sisipkan Label Gambar .
Pilih Label Gambar baru, lalu di jendela Propinsi ,
- Set Gambar ke rbxassetid://14400935446 .
- Tetapkan AnchorPoint ke 0.5, 0.5 untuk menetapkan titik asal label di tengah label (50% dari kiri ke kanan label, dan 50% dari atas ke bawah label).
- Tetapkan Transparansi Latar Belakang untuk 1 untuk membuat latar belakang label sepenuhnya transparan.
- Tetapkan Nama ke Crosshair .
- Tetapkan Posisi ke {0.5,0},{0.5,0} untuk menetapkan label di tengah layar.
- Tetapkan ScaleType ke Fit sehingga gambar dapat masuk ke dalam kontainer dan tidak mengepan di berbagai ukuran layar.
(Opsional) Sisipkan UIAspectRatioConstraint ke Crosshair untuk memastikan proporsi aspek label tetap sama tidak peduli ukuran layar pemain. Samples menetapkan proporsi 0> Class.UIAspectRatioConstraint.AspectRatio0> nya ke 3>0.895 3> .
Pelatuk Hit
Para pemukul adalah elemen UI yang hanya ditampilkan ketika ledakan membuat dampak pada pemain lain di tim musuh. Seperti papan crosshair, elemen UI ini adalah persyaratan gameplay penting bagi pengalaman penembak orang pertama karena memberikan umpan balik visual tentang ketika pemain berhasil menanding lawan mereka.
Untuk mengekspresikan tanda pukulan dengan tepat dalam pengalaman Tag Laser :
Sisipkan Label Gambar ke dalam objek Crosshair ImageLabel .
Di jendela Explorer , navigasikan ke layanan StarterGui .
Hover over its child Crosshair object, then click the ⊕ ikon. A context menu displays.
Dari menu konteks, sisipkan Label Gambar .
Pilih Label Gambar baru, lalu di jendela Propinsi ,
- Tetapkan Gambar ke rbxassetid://14401148736 untuk menampilkan ikon hit markas persegi.
- Tetapkan AnchorPoint ke 0.5, 0.5 untuk menetapkan poin asal label di tengah label.
- Tetapkan Transparansi Latar Belakang untuk 1 untuk membuat latar belakang label sepenuhnya transparan.
- Tetapkan Posisi ke {0.5,0},{0.5,0} untuk menetapkan label di tengah layar.
- Tetapkan Nama untuk Hitmarker .
- Tetapkan Ukuran ke {0.6, 0},{0.06, 0} untuk mengurangi ukuran persegi-persegi di sekitar tengah crosshair.
- Tetapkan Transparansi Gambar ke 1 untuk membuat hitmarker benar-benar transparan. Skrip dalam langkah berikutnya mengembalikan transparansi kembali ke 0 setiap kali pemain melakukan ledakan pada tim musuh.
참조 ReplicatedStorage 스크립트 dalam Laser Tag tempat file yang secara programatis menunjukkan hitmarker saat ledakan mempengaruhi tim musuh.
Skrip berikut mengharuskan set script modul yang bekerja bersama untuk menyiapkan tampilan utama Heads Up Display (HUD), termasuk setupHitmarker. Setelah seorang pemain bergabung dengan putaran dan memilih blaster mereka, skrip ini memastikan semua elemen tampilan HUD UI ditampilkan dengan benar untuk status pemain, perangkat, dan status tim.
Sekarang, setiap kali seorang pemain menyalakan blaster mereka dan ledakan menimbulkan dampak dengan pemain lain, hitmarker tampilan sementara.
Pemilih Blaster
Pemilih blaster adalah komponen UI yang digunakan pemain untuk memilih jenis blaster mereka sebelum bergabung atau bergabung kembali ke putaran. Pengalaman tanda laser sampel memberikan dua jenis blaster: satu yang menghasilkan beberapa balok dengan rentang horizontal yang lebar, dan yang lain menghasilkan satu balok. Jenis blaster yang dipilih oleh pemain memengaruhi strategi mereka selama putaran, men
Langkah-langkah berikut menjelaskan cara membuat beberapa kontainer untuk berbagai grup elemen UI, sebuah header dengan prompt, navigasi dan tombol pilihan, dan prasetel tombol blaster. Logika skrip untuk komponen utama populated berbagai karakteristik visual ke blaster button prefab sesuai dengan Configuration instans yang mewakili setiap ketikblaster.
Pengaturan ini memungkinkan Anda untuk membuat tambahan Configuration instans untuk lebih banyak jenis blaster yang secara otomatis menampilkan dengan benar dalam pemilih blaster tanpa perlu menciptakan tombol individual dalam StarterGui.PickABlasterGui .
Untuk mengekspresikan selektor blaster dalam pengalaman Laser Tag sampel:
Buat wadah untuk seluruh komponen.
Sisipkan Frame ke objek PickABlaster ScreenGui
- Di jendela Explorer , navigasikan ke layanan StarterGui .
- Hover over its child PickABlaster object, then click the ⊕ ikon. A contextual menu displays.
- Dari menu konteks, sisipkan Frame .
Pilih frame baru, lalu di jendela Properti ,
- Tetapkan AnchorPoint ke 0.5, 1 untuk menetapkan titik asal frame di bagian bawah tengah dari dirinya sendiri (50% dari kiri ke kanan frame, dan 100% dari atas ke bawah frame).
- Tetapkan Transparansi Latar Belakang untuk 1 untuk membuat latar belakang frame sepenuhnya transparan.
- Tetapkan Posisi untuk {0.5, 0},{0.9, 0} untuk menetapkan frame di dekat bagian bawah tengah layar (50% dari kiri ke kanan layar, dan 92.4% dari atas ke bawah layar).
- Set Ukuran menjadi {0.8, 0},{0.25, 0} sehingga komponen UI pemilih senjata mengambil sebagian besar layar untuk menarik perhatian pemain (80% secara horizontal dan 25% secara vertikal).
- Tetapkan Nama untuk Komponen .
(Opsional) Sisipkan UIAspectRatioConstraint ke dalam Komponen untuk memastikan bahwa skala dan anak-anak UI elemennya tetap sama tidak peduli ukuran layar pemain. Samples menetapkan propietas 0> Class.UIAspectRatioConstraint.AspectRatio0> nya ke 3>5 3> .
Buat wadah untuk menampung grup item UI.
Sisipkan Frame ke dalam Komponen .
Pilih frame baru, lalu di jendela Properti ,
- Tetapkan AnchorPoint ke 0.5, 0.5 untuk menetapkan titik asal frame di tengah dirinya (50% dari kiri ke kanan frame, dan 50% dari atas ke bawah frame).
- Tetapkan Transparansi Latar Belakang untuk 1 untuk membuat latar belakang frame sepenuhnya transparan.
- Tetapkan Posisi untuk {0.5, 0},{0.375, 0} untuk menetapkan frame di dekat bagian atas tengah wadah (50% dari kiri ke kanan frame orang tua, dan 37,5% dari bagian atas wadah orang tua).
- Set Ukuran ke {1, 0},{0.75, 0} sehingga komponen UI pemilihan mengambil 3/4 dari kontainer (100% secara horizontal dan 75% secara vertikal dari frame tertinggi).
- Tetapkan Nama ke SelectionFrame .
Buat prompt untuk pemilih blaster.
Sisipkan Label Gambar ke dalam Papan Pemilihan .
Pilih label baru, lalu di jendela Properti ,
- Tetapkan AnchorPoint ke 0.5, 1 untuk menetapkan titik asal label di bagian bawah tengah dirinya (50% dari kiri ke kanan label, dan 100% dari atas ke bawah label).
- Tetapkan Transparansi Latar Belakang untuk 1 untuk membuat latar belakang label sepenuhnya transparan.
- Set LayoutOrder ke -1 .
- Tetapkan Posisi untuk {0.5, 0},{0.22, 0} untuk menetapkan label di dekat bagian atas 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 menyebar area prompt sebesar hampir setengah dari frame (45% secara horizontal dan 22% secara vertikal dari frame tertinggi).
- Tetapkan Nama ke Judul .
- Tetapkan Gambar ke rbxassetid://14304828123 untuk menampilkan trapezoid.
- Tetapkan Transparansi Gambar ke 0.15 untuk membuat header semi-transparan.
(Opsional) Sisipkan UIAspectRatioConstraint ke label untuk menjamin bahwa rasio aspek label tetap sama tidak peduli ukuran layar pemain. Samples menetapkan propietas UIAspectRatioConstraint.AspectRatio nya menjadi 0> 13.780> .
Sisipkan Label Teks ke Kepala untuk menampilkan prompt.
Pilih label baru, lalu di jendela Properti ,
- Tetapkan AnchorPoint ke 0.5, 0.5 untuk menetapkan titik asal label di tengah dirinya (50% dari kiri ke kanan label, dan 50% dari atas ke bawah label).
- Tetapkan Transparansi Latar Belakang untuk 1 untuk membuat latar belakang label sepenuhnya transparan.
- Tetapkan Posisi untuk {0.5, 0},{0.5, 0} untuk pindahkan label ke tengah label parent (50% dari kiri ke kanan label parent, dan 50% dari atas ke bawah label parent).
- Tetapkan Ukuran ke {0.6, 0},{0.55, 0} untuk menyebar ruang teks lebih dari setengah dari label orang tua (60% secara horizontal dan 55% secara vertikal dari label orang tua).
- Tetapkan Nama ke Label Kepala .
- Tetapkan FontFace ke Montserrat untuk menyesuaikan estetika masa depan.
- Tetapkan Berat ke Sedang untuk menyuburkan huruf.
- Set Teks ke PILIH BLASTER .
- Aktifkan TextScaled .
Buat kontainer untuk botol blaster Anda dan panah pemilihan.
Sisipkan Label Gambar ke dalam Papan Pemilihan .
Pilih label baru, lalu di jendela Properti ,
- Hapus nilai Gambar default.
- Tetapkan AnchorPoint ke 0.5, 1 untuk menetapkan titik asal label di bagian bawah tengah dirinya (50% dari kiri ke kanan label, dan 100% dari atas ke bawah label).
- Tetapkan Warna Latar Belakang ke 0, 0, 0 untuk membuat label hitam.
- Tetapkan Transparansi Latar Belakang untuk 0.3 untuk mengurangi opakeitas label 30%, dan cocokkan semua elemen UI hitam di pengalaman.
- Tetapkan Posisi untuk {0.5, 0},{1, 0} untuk menetapkan label ke bagian bawah tengah dari frame (50% dari kiri ke kanan dari frame orang tua, dan 100% dari kiri ke kanan dari frame orang tua).
- Tetapkan Ukuran ke 1, 0,0.77, 0 untuk menyebar area label ke ruang bawah tombol (100% secara horizontal dan 77% secara vertikal dari frame orang tua).
Putar sudut-sudut kontainer.
- Sisipkan objek UICorner ke label.
- Pilih objek sudut baru, lalu di jendela Properti , tetapkan CornerRadius ke 0.075, 0 untuk menyelidiki sudut.
Buat wadah untuk tombol blaster Anda.
Sisipkan Frame ke label dari langkah 4.
Pilih frame baru, lalu di jendela Properti ,
- Tetapkan AnchorPoint ke 0.5, 0.5 untuk menetapkan titik asal frame baru di tengah dirinya (50% dari kiri ke kanan frame, dan 50% dari atas ke bawah frame).
- Tetapkan Transparansi Latar Belakang untuk 1 untuk membuat latar belakang frame sepenuhnya transparan.
- Tetapkan Posisi untuk {0.5, 0},{0.5, 0} untuk menetapkan frame di tengah label orang tua (50% dari kiri ke kanan orang tua, dan 50% dari atas ke bawah orang tua).
- Tetapkan Ukuran ke {0.85, 0},{0.77, 0} untuk menyebar area frame ke sebagian besar label (85% secara horizontal dan 77% secara vertikal dari label utama).
- Tetapkan Nama ke Wadah .
Buat cadangan untuk semua tombol blaster masa depan.
- Sisipkan objek UIListLayout ke dalam frame dari langkah 5.
- Pilih objek layout baru, lalu di jendela Properti ,
- Tetapkan Padding ke 0.035, 0 untuk menyediakan ruang antara semua tombol masa depan.
- Tetapkan IsiArah ke Horizontal sehingga setiap tombol ditampilkan di samping satu sama lain.
- Tetapkan kedua HorizontalAlignment dan VerticalAlignment ke Tengah sehingga setiap tombol berada di tengah satu sama lain.
Buat tombol navigasi kiri.
Sisipkan objek ImageButton ke dalam ImageLabel dari langkah 4.
Pilih tombol baru, lalu di jendela Properti ,
- Hapus nilai Gambar default.
- Tetapkan AnchorPoint ke 0, 0.5 untuk menetapkan titik asal tombol baru di tengah tengah kiri (0% dari kiri ke kanan tombol, dan 50% dari atas ke bawah tombol).
- Tetapkan Transparansi Latar Belakang untuk 0.15 untuk memberikan umpan balik visual tentang hover bahwa tombol dapat dipilih.
- Tetapkan Posisi untuk {0.02, 0},{0.5, 0} untuk memberikan pemadam tingkat pada kiri tombol dari konten container tertinggi (2% dari kiri ke kanan label tertinggi, dan 50% dari atas ke bawah label tertinggi).
- Tetapkan Ukuran ke 0.04, 0,0.33, 0 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.
- Sisipkan objek UICorner ke dalam tombol.
- Pilih objek sudut baru, lalu di jendela Properti , tetapkan CornerRadius ke 0.1, 0 untuk menyelesaikan sudut.
Sisipkan ImageLabel objek ke dalam tombol.
Pilih label baru, lalu di jendela Properti ,
- Tetapkan AnchorPoint ke 0.5, 0.5 untuk menetapkan titik asal label di tengah dirinya (50% dari kiri ke kanan label, dan 50% dari atas ke bawah label).
- Tetapkan Posisi ke 0.45, 0,0.5, 0 5> untuk menetapkan label di dekat tengah tombol utama (45% dari kiri ke kanan tombol utama, dan 50% dari atas ke bawah tombol utama). Angg值 tidak ber
- Tetapkan Ukuran ke {0.8, 0},{0.8, 0} untuk menyempitkan area label ke bawah prompt (80% secara horizontal dan 80% secara vertikal dari frame orang tua).
- Tetapkan Transparansi Latar Belakang untuk 1 untuk membuat latar belakang gambar sepenuhnya transparan.
- Set Gambar ke rbxassetid://14309187238 .
- Set SkalaJenis ke Cocok .
Buat tombol navigasi yang benar.
Duplikasi Tombol NavigasiKiri .
Pilih tombol duplikasi, lalu di jendela Properti ,
- Tetapkan AnchorPoint ke 1, 0.5 untuk menetapkan titik asal tombol baru di tengah kanan (100% dari kiri ke kanan tombol, dan 50% dari atas ke bawah tombol).
- Tetapkan Posisi untuk {0.98, 0},{0.5, 0} untuk memberikan pemadatan di sebelah kanan tombol dari kontainer orang tua (98% dari sebelah kiri ke kanan label orang tua, dan 50% dari atas ke bawah label orang tua).
- Tetapkan Nama ke Tombol Navigasi Kanan .
Pilih objek anak Label Gambar nya.
- Tetapkan Rotasi ke 180 untuk menggulir gambar.
- Tetapkan Posisi ke 0.55, 0,0.5, 0 5> untuk menetapkan label di dekat tengah tombol utama (55% dari kiri ke kanan tombol utama, dan 50% dari atas ke bawah tombol utama). Angg值 tidak ber
Buat tombol PILIH .
Sisipkan Tombol Gambar ke dalam Komponen . Perhatikan bagaimana proses ini menjaga tombol pemilihan terpisah dari Papan Pemilihan sehingga Anda dapat menambahkan pemadatan antara bagian utama komponen dari tombol pemilihan.
Pilih tombol baru, lalu di jendela Properti ,
- Hapus nilai Gambar default.
- Tetapkan AnchorPoint ke 0.5, 1 untuk menetapkan titik asal tombol baru di bagian bawah tengah dari dirinya sendiri (50% dari kiri ke kanan tombol, dan 100% dari atas ke bawah tombol).
- Tetapkan Transparansi Latar Belakang untuk 0.15 untuk memberikan umpan balik visual tentang hover bahwa tombol dapat dipilih.
- Tetapkan Posisi untuk {0.5, 0},{0.99, 0} untuk menetapkan tombol di dekat tengah bawah dari wadahnya (50% dari kiri ke kanan dari wadah tertua, dan 99% dari atas ke bawah dari wadah tertua).
- Tetapkan Ukuran ke 0.17, 0,0.18, 0 5> untuk panjang tombol di bawah tombol blaster (17% secara horizontal dan 18% secara vertikal dari frame orang tua).
- Tetapkan Nama ke Tombol Pilihan .
Putar sudut tombol.
- Sisipkan objek UICorner ke dalam tombol.
- Pilih objek sudut baru, lalu di jendela Properti , tetapkan CornerRadius ke 0.2, 0 untuk menyelesaikan sudut.
Sisipkan objek TextLabel ke dalam tombol sehingga Anda dapat menampilkan panggilan action.
Pilih label baru, lalu di jendela Properti ,
- Tetapkan AnchorPoint ke 0.5, 0.5 untuk menetapkan titik asal label di tengah dirinya (50% dari kiri ke kanan label, dan 50% dari atas ke bawah label).
- Tetapkan Transparansi Latar Belakang untuk 1 untuk membuat latar belakang label sepenuhnya transparan.
- Tetapkan Posisi untuk {0.5, 0},{0.5, 0} untuk menindakkan label ke tengah tombol (50% dari kiri ke kanan button, dan 50% dari atas ke bawah button).
- Tetapkan Ukuran ke {0.9, 0},{0.55, 0} untuk menyebar ruang teks ke hampir semua lebar label utama (90% secara horizontal dan 55% secara vertikal dari label utama).
- Tetapkan Nama ke SelectTextLabel .
- Tetapkan FontFace ke Montserrat untuk menyesuaikan estetika masa depan.
- Tetapkan Berat ke Sedang untuk menyuburkan huruf.
- Set Teks ke PILIH .
- Aktifkan TextScaled .
Buat praf buton blaster.
- Dalam layanan ReplicatedStorage , buat struktur folder untuk mengatur objek UI Anda. Samplenya menggunakan Instances folder dengan anak Guis folder.
- Sisipkan objek ImageButton ke dalam Guis folder.
- Pilih tombol baru, lalu di jendela Properti ,
- Hapus nilai Gambar default.
- Tetapkan AnchorPoint ke 0.5, 0.5 untuk menetapkan titik asal tombol baru di tengah dirinya (50% dari kiri ke kanan tombol, dan 50% dari atas ke bawah tombol).
- Tetapkan Transparansi Latar Belakang untuk 0.65 untuk memberikan umpan balik visual bahwa tombol tidak dalam fokus. Skrip dalam langkah 12 memberikan umpan balik visual programatis saat tombol berada dalam fokus.
- Set LayoutOrder ke 2 .
- Tetapkan Nama ke BlasterButtonPrefab .
- Tetapkan Ukuran ke {0.8, 0},{0.8, 0} .
- Tetapkan Transparansi Gambar ke 1 untuk membuat gambar benar-benar transparan.
- Sisipkan UIAspectRatioConstraint ke dalam BlasterButtonPrefab untuk memastikan bahwa tingkat aspek tombol tetap sama di komponen tanpa pedoman ukuran layar pemain.
- Putar sudut tombol.
- Sisipkan objek UICorner ke dalam BlasterButtonPrefab .
- Pilih UICorner , lalu di jendela Properties , tetapkan CornerRadius ke 1> 0.05, 01> untuk menyelidiki sudut-sudut.
- Sisipkan Label Gambar ke dalam BlasterButtonPrefab .
- Pilih label baru, lalu di jendela Properti ,
- Hapus nilai Gambar default.
- Tetapkan AnchorPoint ke 0.5, 0.5 untuk menetapkan titik asal label di tengah dirinya (50% dari kiri ke kanan label, dan 50% dari atas ke bawah label).
- Tetapkan Transparansi Latar Belakang untuk 1 untuk membuat latar belakang label sepenuhnya transparan.
- Tetapkan Posisi ke {0.52, 0},{0.497, 0} untuk menetapkan label di dekat tengah tombolnya (52% dari kiri ke kanan tombolnya, dan 49.7% dari atas ke bawah tomb
- Tetapkan Ukuran ke {1.20, 0},{0.9, 0} untuk menyebar area label di luar tombol (120% secara horizontal dan 90% secara vertikal dari tombol orang tua).
- Set SkalaJenis ke Cocok .
참조 다음 ReplicatedStorage 스크립트 내 Laser Tag 장소 파일에 프로그래밍 방식으로 버튼을 표시하는 버튼 대신 버튼을 확대하고, 플레이어가 포커스가 아닌 버튼을 선택할 때 버튼을 확대하고, pemain블래스터 선택을 avatar연결하십시오.
Skrip berikut mengharuskan set script yang bekerja bersama untuk menciptakan pemilih blaster. Saat seorang pemain bergabung dengan pengalaman atau respawn kembali ke putaran setelah kesehatan mereka mencapai nol, script ini mengaktifkan semua elemen UI pemilih blaster sampai pemain membuat pilihan mereka.
Sekarang, setiap kali seorang pemain bergabung dengan pengalaman atau respawn kembali ke putaran 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 blaster mereka jika mereka mengakses pengalaman melalui perangkat mobile atau tablet. Pengalaman laser sentuh sampel menggunakan tombol ledakan dengan ikon yang menunjukkan kedua panah dan ledakan untuk mengkomunikasikan fungsi tombol tanpa teks.
Untuk mengekspresikan tombol ledakan di dalam pengalaman Laser Tag :
Sisipkan Tombol Gambar ke dalam objek HUDGui ScreenGui .
Di jendela Explorer , navigasikan ke layanan StarterGui .
Hover over its child HUDGui object, then click the ⊕ ikon. A contextual menu displays.
Dari menu konteks, sisipkan Tombol Gambar .
Di viewport, move the button to where a pemain's thumb naturally rests so you can get a visual sense of what the button will look like on a pemain's perangkat, then in the Properties window,
- Tetapkan Gambar ke rbxassetid://18308375035 untuk menampilkan ikon tombol ledakan.
- Tetapkan Tekan gambar tekanan ke rbxassetid://18308372558 untuk menampilkan versi terbalik dari ikon tombol ledakan saat seorang pemain menekan tombol.
- Tetapkan Transparansi Latar Belakang untuk 1 untuk membuat latar belakang label sepenuhnya transparan.
- Tetapkan Nama ke Tombol Meledakkan .
- Tetapkan ScaleType ke Fit sehingga gambar dapat masuk ke dalam kontainer dan tidak mengepan di berbagai ukuran layar.
- Tetapkan Transparansi Gambar ke 0.3 untuk mengurangi opake label sehingga cocok dengan semua elemen UI hitam dalam pengalaman.
Sisipkan UIAspectRatioConstraint ke dalam BlastButton untuk memastikan rasio aspek tombol tetap sama tidak peduli ukuran layar pemain.
참조 스크립트 ReplicatedStorage 내에 있는 샘플 Laser Tag 장소 파일이 프로그래밍 방식으로 블래스터 버튼을 표시하는 장치에 플레이어가 터치 kendali사용할 때 표시하는 장소 파일입니다.
Skrip berikut mengharuskan satu set script modul yang bekerja bersama untuk menyiapkan utama Heads Up Display (HUD), termasuk setupTouchButtonAsync . Setelah seorang pemain bergabung dengan putaran dan memilih blaster mereka, script ini memastikan semua elemen UI HUD ditampilkan dengan benar untuk status pemain, perangkat, dan status tim.
Sekarang, ketika seorang pemain bergabung dengan pengalaman dan menggunakan tombol sentuh di perangkat yang menerima tombol kendali, tombol blaster ditampilkan di bagian atas kanan tombol lompat.
UI Pemain
Mengikuti praktik terbaik hierarki visual dari Wireframe Your Layouts, bagian ini mengajarkan Anda cara menerapkan semua elemen UI on-screen yang terkait dengan status pemain. Grup ini dari elemen UI di dekat sisi layar karena pemain dapat memahami informasi periferal ini tanpa mengalihkan perhatian mereka dari gameplay.
Indikator Pemain
Indikator pemain adalah komponen UI yang pemain referensikan untuk dengan cepat mem解釋 tim mana mereka berasal segera setelah mereka muncul di zona bertelur tim mereka. Pengalaman samudra laser tag menyediakan dua versi dari pemain indicator tergantung pada apakah pemain berada di tim hijau atau merah team.
Mengikuti panduan dari Pilih Tema Warna, kedua versi indikator pemain menggabungkan warna tim dengan icon unik, sederhana dengan detail minimal sehingga mereka tetap terbaca di layar kecil. Memberikan dua bentuk umpan balik visual penting karena itu membantu menjaga desain aksesibel bagi pemain dengan kesulitan melihat.
Untuk mengekskeseraikan komponen indikator pemain dalam pengalaman Laser Tag :
Sisipkan Frame ke objek HUDGui ScreenGui
- Di jendela Explorer , navigasikan ke layanan StarterGui .
- Hover over its child HUDGui object, then click the ⊕ ikon. A menu context display.
- Dari menu konteks, sisipkan Frame .
Pilih Frame baru , lalu di jendela Properti ,
Tetapkan AnchorPoint ke 0, 1 untuk menetapkan poin asal frame di bagian bawah tengah dari dirinya sendiri (0% dari kiri ke kanan frame, dan 100% dari atas ke bawah frame).
Tetapkan Transparansi Latar Belakang untuk 1 untuk membuat latar belakang label sepenuhnya transparan.
Tetapkan Nama ke PlayerDisplay .
Tetapkan Posisi ke {0.02, 0},{0.97, 0} untuk menetapkan frame di dekat bagian bawah kiri layar.
Tetapkan Ukuran ke {0.23, 0},{0.08, 0} untuk mengurangi dan menambahkan panjang lini.
Aktifkan ClipsDescendants untuk memotong GuiObjek anak yang meluas di luar frame.
Buat bentuk poligonal.
Sisipkan Label Gambar ke dalam PlayerDisplay .
Pilih label baru, lalu di jendela Properti ,
- Tetapkan Gambar ke rbxassetid://14304828123 untuk menampilkan ikon trapesium.
- Tetapkan AnchorPoint ke 1, 1 untuk menetapkan titik asal label di bagian bawah kanan dirinya (100% dari kiri ke kanan label, dan 100% dari atas ke bawah label).
- Tetapkan Transparansi Latar Belakang untuk 1 untuk membuat latar belakang label sepenuhnya 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 menyempitkan label di luar frame, dan memperpendeknya sedikit lebih dari setengah panjangnya frame.
- Tetapkan Transparansi Gambar ke 0.15 untuk membuat label sedikit transparan.
- Tetapkan ScaleType ke Fit sehingga gambar dapat masuk ke dalam kontainer dan tidak mengepan di berbagai ukuran layar.
- Sisipkan UIAspectRatioConstraint ke dalam Blok untuk memastikan bahwa label dan anak-anak elemen UI tetap sama tidak peduli ukuran layar pemain.
- Pilih batas baru, lalu di jendela Properti , tetapkan AspekRatio ke 13.78.
Buat kotak untuk portret pemain.
Sisipkan Label Gambar ke dalam PlayerDisplay .
Pilih label baru, lalu di jendela Properti ,
- Hapus aset pengganti dengan ID asetID dalam Image property. The scripts in step 7 secara programatis menyisipkan portret pemain ke label gambar.
- Tetapkan AnchorPoint ke 0, 1 untuk menetapkan poin asal label di bagian bawah kiri dari dirinya sendiri (0% dari kiri ke kanan label, dan 100% dari atas ke bawah label).
- Tetapkan Warna Latar Belakang3 untuk 0, 0, 0 untuk menetapkan warna latar belakang label ke hitam.
- Tetapkan Transparansi Latar Belakang untuk 0.3 untuk mengurangi opakeitas label 30%, dan cocokkan semua elemen UI hitam di pengalaman.
- Tetapkan Nama ke Portrait Pemain .
- Tetapkan Posisi untuk {0.11, 0},{1, 0} untuk menetapkan label ke sisi kiri dari bentuk poligonal.
- Tetapkan Ukuran ke {0.23, 0},{1, 0} untuk mengurangi label.
- Tetapkan Transparansi Gambar ke 0.15 untuk membuat label sedikit transparan.
- Tetapkan ScaleType ke Fit sehingga gambar dapat masuk ke dalam kontainer dan tidak mengepan di berbagai ukuran layar.
- Sisipkan UIAspectRatioConstraint ke dalam PlayerPortrait untuk memastikan bahwa label dan anak-anak elemen UI tetap sama tidak peduli ukuran layar pemain.
- Sisipkan UICorner ke dalam PlayerPortrait , lalu di jendela Properties , atur 1> CornerRadius1> menjadi 4> 0.05, 04> untuk sedikit menggulung sudut.
Buat label teks untuk nama pemain.
Sisipkan objek TextLabel ke dalam PlayerDisplay.
Pilih label baru, lalu di jendela Properti ,
- Tetapkan AnchorPoint ke 0, 0.5 untuk menetapkan titik asal tombol baru di tengah tengah kiri (0% dari kiri ke kanan tombol, dan 50% dari atas ke bawah tombol).
- Tetapkan Transparansi Latar Belakang untuk 1 untuk membuat latar belakang label sepenuhnya transparan.
- Tetapkan Nama ke PlayerNameTextLabel .
- Tetapkan Posisi ke {0.35, 0},{0.72, 0} untuk menetapkan label ke sisi kanan kontainer (35% dari kiri ke kanan label tingkat, dan 72% dari atas ke bawah label tingkat).
- Tetapkan Ukuran ke {0.52, 0},{0.3, 0} sehingga teks dapat mengambil sebagian besar area bentuk poligonal (52% secara horisontal dan 30% secara vertikal dari frame utama).
- Tetapkan FontFace ke Montserrat untuk menyesuaikan estetika masa depan.
- Tetapkan Berat ke Bold untuk menyuburkan huruf.
- Hapus teks pengganti di dalam Text property. Skrip dalam langkah 7 secara programatis menyisipkan nama pemain ke label teks.
- Aktifkan TextScaled .
- Tetapkan TextXAlignment ke Kiri .
Buat ikon dan warna tim yang ditunjukkan di sebelah portret pemain.
Sisipkan Folder ke dalam PlayerDisplay , lalu ganti nama itu TeamIcons .
Buat ikon tim hijau dan warna.
- Sisipkan Label Gambar ke dalam Ikon Tim .
- Pilih label baru, lalu di jendela Properti ,
- Tetapkan AnchorPoint ke 0, 1 untuk menetapkan poin asal label di bagian bawah kiri dari dirinya sendiri (0% dari kiri ke kanan label, dan 100% dari atas ke bawah label).
- Tetapkan Warna Latar Belakang3 untuk 88, 218, 171 untuk menetapkan warna latar belakang label menjadi hijau mentimun.
- Tetapkan Nama ke TeamAIcon .
- Tetapkan Posisi ke {0, 0},{1, 0} untuk menetapkan label ke sisi kiri frame.
- Tetapkan Ukuran ke {0.135, 0},{0.58, 0} untuk mengurangi label di sebelah portret pemain.
- Tetapkan Transparansi Gambar ke 1 untuk membuat label transparan.
- Konfigurasikan attribute khusus untuk melacak bahwa label ini untuk tim hijau. Langkah ini sangat penting untuk skrip di langkah 7.
- Di jendela Propinsi , navigasikan ke bagian Attributs lalu klik ikon plus. Jendela pop-up muncul.
- Di Nama lapangan, masukkan warna tim .
- Dalam menu Type menu dropdown, pilih BrickColor .
- Klik tombol Simpan .
- Tetapkan nilai timColor baru ke Mint .
- Sisipkan UIAspectRatioConstraint ke dalam TeamAIcon untuk memastikan bahwa label dan anak-anak elemen UI tetap sama tidak peduli ukuran layar pemain.
- Buat ikon.
- Sisipkan Label Gambar ke dalam TeamAIcon .
- Pilih label baru, lalu di jendela Properti ,
- Tetapkan Gambar ke rbxassetid://14309678670 untuk menampilkan ikon tim hijau.
- Tetapkan AnchorPoint ke 0.5, 0.5 untuk menetapkan titik asal label di tengah dirinya (50% dari kiri ke kanan label, dan 50% dari atas ke bawah label).
- Tetapkan Transparansi Latar Belakang untuk 1 untuk membuat latar belakang label sepenuhnya transparan.
- Tetapkan Nama untuk Ikon .
- Tetapkan Posisi untuk {0.5, 0},{0.5, 0} untuk menetapkan label ke tengah label utama.
- Tetapkan Ukuran ke {0.7, 0},{0.6, 0} untuk mengurangi label.
- Tetapkan ScaleType ke Fit sehingga gambar dapat masuk ke dalam kontainer dan tidak mengepan di berbagai ukuran layar.
Buat ikon tim merah muda dan warna.
- Duplikasi TeamAIcon dan anak-anaknya.
- Pilih duplikat TeamAIcon , lalu di jendela Properties ,
- Tetapkan Warna Latar Belakang3 untuk 255, 170, 255 untuk menetapkan warna latar belakang label menjadi carnation pink.
- Tetapkan Nama ke TeamBIcon .
- Tetapkan nilai teamColor ke Carnation Pink .
- Pilih anak Icon duplikasi dari TeamBIcon , lalu di jendela Properties , tetapkan 1> Gambar1> ke 4> rbxassetid://143096785494> untuk menampilkan ikon tim merah muda.
참조 스크립트 ReplicatedStorage 내에 있는 샘플 Laser Tag 장소 파일이 플레이어 인디케이터를 프로グ래밍 색상 및 아이콘으로 표시하면서 플레이어 활동 중에 적절한 팀 색 및 아이콘을 표시하는 동안 플레이어 활동 중에 적절한 팀 색 및 아이콘을 표시합니다.
Skrip berikut mengharuskan beberapa script modul yang bekerja bersama untuk menyiapkan HUD utama, termasuk startSyncingTeamColor, setPlayerName, dan setPlayerPortrait. Setelah seorang pemain bergabung dengan putaran dan memilih blaster mereka, script ini memastikan semua elemen HUD UI ditampilkan dengan benar untuk status p
Sekarang, setiap kali seorang pemain bergabung atau bergabung kembali dengan putaran setelah respawn, pemain indicator ditampilkan di bagian bawah kiri layar mereka.
Layar Force Field
Layar force field adalah elemen UI yang menggesepkan jendela tampilan untuk memberi tahu pemain bahwa mereka aman dari tim musuh saat bergabung atau bergabung kembali dengan putaran. Setelah rekomendasi estetika untuk icon dari Pilih gaya seni, pengalaman laser tag contoh menggunakan pola hexagonal semi
Untuk menggandakan layar forcefield dalam pengalaman Laser Tag :
Sisipkan Label Gambar ke dalam objek ForceFieldGui ScreenGui .
Di jendela Explorer , navigasikan ke layanan StarterGui .
Hover over its child ForceFieldGui object, then click the ⊕ ikon. A context menu displays.
Dari menu konteks, sisipkan Label Gambar .
Pilih label baru, lalu di jendela Properti ,
Set Gambar ke rbxassetid://14462567888 .
Tetapkan Transparansi Latar Belakang ke 0.8 untuk membuat lapangan kekuatan transparan.
Tetapkan Ukuran ke {1, 0},{1, 0} untuk membuat gambar mengisi seluruh layar (100% secara horizontal dan 100% secara vertikal dari ScreenGUI orang tua).
Tetapkan ScaleType untuk Tile untuk menyoroti ubin hexagon di seluruh layar.
Tetapkan Ukuran Ketelka menjadi {0, 104},{0, 180} .
Sisipkan objek UIGradient ke label.
Pilih objek gradasi baru, lalu di jendela Properti ,
Tetapkan Warna ke urutan warna yang dimulai dengan biru, berubah putih, dan kemudian berubah biru lagi.
Tetapkan Warna ke 120, 192, 250 untuk menerapkan nuansa biru muda ke semuaHexagon.
Klik properti Warna , lalu klik tombol ⋯ . Sebuah pop-up urutan warna ditampilkan.
Setiap segi tiga di sumbu bawah warna secara seri adalah titik kunci yang menentukan nilai warna properti pada saat itu dari kiri ke kanan gambar dari kiri ke kanan.
Klik dan seret urutan warna sampai Anda mencapai nilai waktu 0.05 , lalu klik tombol kecil di sebelah 0.05 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 yang bernilai 0.95, lalu buka jendela pop-up Warna lagi, dan pilih warna putih seperti sebelumnya.
Tetapkan Rotasi untuk 225 untuk menampilkan bagian biru dari urutan warna Anda di sudut atas kiri dan kanan.
Tetapkan Transparansi ke urutan angka yang membuat lapangan kekuatan terlihat seperti berkedip.
Klik property Transparency , lalu klik tombol ⋯ . Pop-up nomor urutan muncul. Setiap nomor di awal dan akhir urutan angka adalah keypoin yang menentukan nilai transparansi property pada saat itu dari tengah gambar dari kiri ke kanan.
Tetapkan waktu dan nilai berikut di seluruh urutan nomor:
- Waktu = 0 , Nilai = 0> 0.250>
- Waktu = .101 , Nilai = 0> 0.8750>
- Waktu = .183 , Nilai = 0> 00>
- Waktu = .3 , Nilai = 0> 10>
- Waktu = .7 , Nilai = 0> 10>
- Waktu = 1 , Nilai = 0> 0.90>
Duplikasi Label Gambar dari langkah 2.
Pilih objek UIGradient dalam label duplikasi, lalu dalam jendela Properti ,
Tetapkan Rotasi ke -45 untuk menggandakan gambar sehingga hampir menyerupai satu sama lain di sumbu Y.
Modifikasi Transparansi untuk membuat shimmer terlihat lebih organik.
- Klik properti Transparency , lalu klik tombol ⋯ . Pop-up urutan angka muncul.
- Pilih keyframe ketiga, lalu klik tombol Hapus .
참조 ReplicatedStorage 스크립트 dalam Laser Tag 위치 file yang secara programal menunjukkan layar force field saat seorang pemain bergabung atau bergabung kembali dalam putaran.
Skrip klien berikut ReplicatedStorage.ForceFieldClientVisuals mengganti visual Class.ForceField default dengan ForceField . Saat pemain memuat ke dalam pengalaman dan bertelur di pengalaman dengan StarterGui.ForceFieldGui propert
Skrip ini dimulai dengan mendengarkan ketika ForceField ditambahkan ke karakter, menonaktifkan visual force field pertama orang, dan kemudian mengaktifkan objek Class.ScreenGui . Catat bahwa ini tidak mempengaruhi visual pemain ketika pemain melihat orang lain respawning kembali ke 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 bertelur 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 dengan putaran setelah respawn, UI layar force field baru akan ditampilkan alih-alih visual Class.ForceField pertama-tama.
Tampilkan Respawn
Layar respawn adalah elemen UI yang menyoroti layar untuk memberi tahu pemain bahwa mereka telah ditandai keluar, dan bahwa server sedang dalam proses respawning mereka kembali ke zona respawn mereka. Elemen UI ini penting karena memberi pemain waktu untuk memproses bahwa mereka telah ditandai keluar, dan strategize langkah mereka berikutnya sebelum mereka bergabung kembali dengan putaran aktif.
Untuk informasi lebih lanjut tentang perilaku respawning khusus dalam pengalaman tag laser sampel, lihat Respawn Karakter dari kurikulum Gameplay Scripting.
Untuk mengekspresikan layar respawn dalam pengalaman Laser Tag :
Buat spanduk informasi pusat.
Sisipkan Label Gambar ke dalam objek OutStateGui ScreenGui .
Di jendela Explorer , navigasikan ke layanan StarterGui .
Hover over its child OutStateGui object, then click the ⊕ ikon. A context menu displays.
Dari menu konteks, sisipkan Label Gambar .
Pilih label baru, lalu di jendela Properti ,
Tetapkan AnchorPoint ke 0.5, 0.5 untuk menetapkan titik asal tombol baru di tengah dirinya (50% dari kiri ke kanan label, dan 50% dari atas ke bawah label).
Tetapkan Transparansi Latar Belakang untuk 1 untuk membuat latar belakang label sepenuhnya transparan.
Tetapkan Posisi untuk {0.5, 0},{0.5, 0} untuk menetapkan label di tengah kontainer (50% dari kiri ke kanan dari ScreenGUI orang tua, dan 50% dari atas ke bawah dari ScreenGUI orang tua).
Tetapkan Ukuran ke {0.48, 0},{0.06, 0} untuk menyempitkan label (48% secara horizontal dan 6% secara vertikal dari ScreenGUI orang tua).
Tetapkan Nama ke Blok .
Tetapkan Gambar ke rbxassetid://14304827265 untuk membuat gambar menjadi trapezoid.
Tetapkan Warna Gambar ke 0,0,0 untuk membuat trapezoid hitam.
Tetapkan Transparansi Gambar ke 0.3 untuk mengurangi opake label 30%, dan cocokkan semua elemen UI hitam di pengalaman.
Sisipkan UIAspectRatioConstraint ke dalam Blok untuk memastikan bahwa label dan anak-anak elemen UI tetap sama tidak peduli ukuran layar pemain.
Pilih batas baru, lalu di jendela Properti , tetapkan AspekRatio ke 13.78.
Sisipkan Label Teks ke dalam Blok untuk teks informasi.
Pilih label baru, lalu di jendela Properti ,
Tetapkan AnchorPoint ke 0.5, 0.5 untuk menetapkan titik asal label di tengah dirinya (50% dari kiri ke kanan label, dan 50% dari atas ke bawah label).
Tetapkan Transparansi Latar Belakang untuk 1 untuk membuat latar belakang label sepenuhnya transparan.
Tetapkan Posisi untuk {0.5, 0},{0.5, 0} untuk menetapkan label di tengah label utama (50% dari kiri ke kanan label utama, dan 50% dari atas ke bawah label utama).
Tetapkan Ukuran ke {.85, 0},{0.55, 0} sehingga teks dapat mengambil sebagian besar area trapeoid (85% secara horizontal dan 55% secara vertikal dari label utama).
Tetapkan Nama ke BodyTextLabel .
Tetapkan FontFace ke Montserrat untuk menyesuaikan estetika masa depan.
Tetapkan Berat ke Bold untuk menyuburkan huruf.
Set Teks ke Respawning… .
Tetapkan Warna Teks3 ke 255, 255, 255 untuk membuat teks putih.
Aktifkan TextScaled .
Buat judul.
Sisipkan Label Gambar ke dalam Blok .
Pilih label baru, lalu di jendela Properti ,
Tetapkan AnchorPoint ke 0.5, 1 untuk menetapkan titik asal label di bagian bawah tengah dirinya (50% dari kiri ke kanan label, dan 100% dari atas ke bawah label).
Tetapkan Transparansi Latar Belakang untuk 1 untuk membuat latar belakang label sepenuhnya transparan.
Tetapkan Posisi untuk {0.5, 0},{0, 0} untuk menetapkan label di bagian atas tengah label parent (50% dari kiri ke kanan label parent, dan 0% dari atas ke bawah label parent).
Tetapkan Ukuran ke {0.46, 0},{0.56, 0} untuk menyempitkan label (46% secara horizontal dan 56% secara vertikal dari label utama).
Tetapkan Nama ke Judul .
Tetapkan Gambar ke rbxassetid://14304826985 untuk membuat gambar menjadi pudar multi-arah.
Tetapkan Warna Gambar ke 245, 46, 46 untuk menyetel merah pudar untuk menandai bahwa pemain sedang tidak aktif sementara mereka ditandai keluar dari putaran.
Sisipkan Label Teks ke Judul untuk teks informasi.
Pilih label baru, lalu di jendela Properti ,
Tetapkan AnchorPoint ke 0.5, 0.5 untuk menetapkan titik asal label di tengah dirinya (50% dari kiri ke kanan label, dan 50% dari atas ke bawah label).
Tetapkan Transparansi Latar Belakang untuk 1 untuk membuat latar belakang label sepenuhnya transparan.
Tetapkan Posisi untuk {0.5, 0},{0.5, 0} untuk menetapkan label di tengah label utama (50% dari kiri ke kanan label utama, dan 50% dari atas ke bawah label utama).
Tetapkan Ukuran ke {.85, 0},{0.55, 0} sehingga teks dapat mengambil sebagian besar area pudar (85% secara horizontal dan 55% secara vertikal dari label parent).
Tetapkan Nama ke Label Kepala .
Tetapkan FontFace ke Montserrat untuk menyesuaikan estetika masa depan.
Tetapkan Berat ke Hitam untuk menyuburkan huruf.
Tetapkan Teks ke TAGGED - KAMU KELUAR! 9. Tetapkan Warna Teks3 ke 255, 255, 255 untuk membuat teks putih.
Aktifkan TextScaled .
Buat bayangan di sekitar batas layar.
- Sisipkan Label Gambar ke dalam OutStateGui .
- Pilih label baru, lalu di jendela Properti ,
- Tetapkan AnchorPoint ke 0.5, 0.5 untuk menetapkan titik asal label di tengah dirinya (50% dari kiri ke kanan label, dan 50% dari atas ke bawah label).
- Tetapkan Warna Latar Belakang3 untuk 0,0,0 untuk menetapkan warna latar belakang label ke hitam.
- Tetapkan Transparansi Latar Belakang untuk 0.5 untuk membuat latar belakang label setengah transparan.
- Tetapkan Posisi untuk {0.5, 0},{0.5, 0} untuk menetapkan label di tengah kontainer (50% dari kiri ke kanan dari ScreenGUI orang tua, dan 50% dari atas ke bawah dari ScreenGUI orang tua).
- Tetapkan Ukuran ke {1, 0},{1, 0} untuk menyebar label ke seluruh layar (100% secara horizontal dan 100% secara vertikal dari ScreenGUI orang tua).
- Tetapkan ZIndex ke -1 untuk menampilkan adegan di belakang elemen UI lainnya.
- Tetapkan Nama ke Judul .
- Tetapkan Gambar ke rbxassetid://14309518613 untuk menjadikan gambar menghilang.
- Tetapkan Transparansi Gambar ke 0.1 untuk membuat transisi sedikit transparan.
Untuk meningkatkan pelaksanaan, Anda dapat menyimpan aset gambar dan menggunakan objek UIGradient dengan nomor urutan transparansi khusus. Untuk belajar lebih lanjut tentang teknik fading ini, lihat UI Penampilan Modifier - Gradient .
참조 스크립트 ReplicatedStorage 내 Laser Tag 위치 파일에 있는 샘플 내 스크립트 참조 스크립트 Class.ReplicatedStorage 내 1>Laser Tag1> 위치 파일에 있는 샘플 참조 스크립트 내 4>Class.ReplicatedStorage4> 내 7>Laser Tag7> 위치 파일에 있는 샘플
Skrip klien ReplicatedStorage.PlayerStateHandler berikut mengandung fungsi yang mengaktifkan berbagai jenis perilaku berdasarkan属性 playerState . Semua tanggapan acara di skrip ini dianggap logis berkumpul bersama-sama dalam script karena mereka memerlukan perilaku serupa untuk mengaktifkan atau menonaktifkan kendalipemain, gerakan kamera, dan UI mana yang terlihat.
Ketika kesehatan pemain mencapai nol, playerState mereka menjadi TaggedOut, yang mengaktifkan fungsi onTaggedOut(). 2>onTaggedOut()2> menyebabkan perilaku berikut:
- Pemain tidak dapat bergerak di arena.
- Pemain tidak dapat menggerakkan kamera mereka.
- Pemain tidak dapat menggunakan pistol mereka.
- The StarterGui.OutStateGui menjadi eksklusif.
Ketika pemain respawns, their playerState menjadi SelectingBlaster, yang mengaktifkan fungsi onSelectingBlaster() . 1> onSelectingBlaster1> kemudian secara eksklusif mengaktifkan fungsi <
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 guis 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 forcefield saat pemain mulai bermain
scheduleDestroyForceField()
end
local function onTaggedOut()
-- Nonaktifkan kontrol saat ditandai
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 berada di lobi
togglePlayerMovement(true)
togglePlayerCamera(true)
-- Sembunyikan semua HUD saat berada di lobi
setGuiExclusivelyEnabled(nil)
-- Nonaktifkan blaster 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
-- Penangani status pemain awal jika diatur
local initialPlayerState = localPlayer:GetAttribute(PlayerAttribute.playerState)
onPlayerStateChanged(initialPlayerState)
local function updateFromPlayerState()
onPlayerStateChanged(localPlayer:GetAttribute(PlayerAttribute.playerState))
end
-- Mengelola 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 menunjukkan sampai pemain respawn kembali ke zona bertelur mereka.
Sekarang Anda familiar dengan komum GuiObjects untuk UI on-screen, coba recreate objek RoundResultsGui ScreenGui dan semua anaknya untuk tampilan on-screen saat pemain menang atau kalah dalam mencocokkan. Anda dap
Membuat Objek SurfaceGui
Untuk menampilkan UI di permukaan bagian dalam ruang 3D yang merespon logika script untuk setiap pemain individual , Anda dapat menyertakan objek SurfaceGui ke bagian yang ingin Anda tampilkan UI-nya dalam layanan ReplicatedStorage. Teknik ini menjamin UI dan logika script Anda tersedia untuk server dan k
SurfaceGui objek mengandung semua GuiObjects yang ditampilkan di permukaan bagian dalam ruang 3D. Pengalaman laser tag sampel hanya meng包含 satu instans dari objek SurfaceGui : cooldown meter yang ditampilkan di at
Untuk membuat objek SurfaceGui
Di jendela Explorer , geser atas layanan ReplicatedStorage , lalu klik ikon ⊕ . Menu konteks ditampilkan.
Dari menu konteks, sisipkan objek Bagian .
Sisipkan objek ScreenGUI ke bagian.
Ganti nama SurfaceGui menurut konteks elemen UI anaknya.
Ulangi proses ini untuk setiap elemen UI yang Anda perlukan untuk ditampilkan di permukaan bagian dalam ruang 3D.
Meter Cooldown
Sebuah meter cooldown adalah komponen UI yang memberi tahu pemain berapa lama mereka harus menunggu sebelum mereka dapat meledakkan blaster mereka lagi. Pause sedikit ini mencegah pemain dapat meledak secepat mereka dapat mengklik atau menekan tombol, yang tidak realistis untuk gameplay laser tag.
Untuk mengekskes matras peristirahatan dalam Samudra Tag Laser pengalaman:
Buat bagian untuk menahan objek SurfaceGui Anda.
- Di jendela Explorer , geser over the Workspace , lalu klik ikon⊕. A menu konteks ditampilkan.
- Dari menu konteks, sisipkan bagian blok . Ini adalah lokasi sementara bagian sehingga Anda dapat melihat perubahan di setiap langkah proses.
Posisi dan orientasi bagian di sekitar posisi di mana karakter pemain akan menahan blaster mereka, lalu di jendela Properti ,
Tetapkan Transparansi ke 1 untuk membuat bagian benar-benar transparan.
Tetapkan Nama ke CooldownBarPrefab .
Tetapkan Ukuran ke 0.169, 0.027, 2.537 untuk menyesuaikan bagian ke ukuran tentang panjang blaster.
Nonaktifkan BisaSalinanKekuatan dan BisaMengambilPolaFlash .
Sisipkan SurfaceGui ke dalam CooldownBarPrefab .
Pilih SurfaceGui baru, lalu di jendela Properti ,
Tetapkan Wajah ke Atas sehingga UI ditampilkan menghadap ke atas.
Tetapkan LightInfluence dan MaxDistance ke 0.
Tetapkan PixelPerStud ke 200 .
Buat bilah hitam.
Sisipkan Label Gambar ke dalam SurfaceGui .
Pilih label baru, lalu di jendela Properti ,
- Hapus nilai Gambar default.
- Tetapkan AnchorPoint ke 0.5, 0.5 untuk menetapkan titik asal label di tengah dirinya (50% dari kiri ke kanan label, dan 50% dari atas ke bawah label).
- Tetapkan Warna Latar Belakang3 untuk 0,0,0 untuk menetapkan warna latar belakang label ke hitam.
- Tetapkan Transparansi Latar Belakang untuk 0.4 untuk membuat latar belakang label semi-透明.
- Tetapkan Posisi untuk {0.5, 0},{0.5, 0} untuk menetapkan label di tengah kontainer (50% dari kiri ke kanan Navigasi Aib, dan 50% dari atas ke bawah Navigasi Aib).
- Tetapkan Ukuran ke {1, 0},{1, 0} untuk menyebar label ke seluruh bagian (100% secara horizontal dan 100% secara vertikal dari SurfaceGui orang tua).
- Tetapkan Nama ke Wadah .
Putar sudut-sudut kontainer.
Sisipkan objek UICorner ke dalam Container.
Pilih UICorner , lalu di jendela Properties , tetapkan CornerRadius ke 1> 0.15, 01> untuk sedikit menyekitar sudut.
Buat garis merah.
- Sisipkan Label Gambar ke dalam Container .
- Pilih label baru, lalu di jendela Properti ,
- Hapus nilai Gambar default.
- Tetapkan AnchorPoint ke 1, 0.5 untuk menetapkan titik asal label di tengah kanan (100% dari kiri ke kanan label, dan 50% dari atas ke bawah label).
- Tetapkan Warna Latar Belakang3 untuk 172, 13, 13 untuk menetapkan warna latar belakang label menjadi merah gelap.
- Tetapkan Transparansi Latar Belakang untuk 0.2 untuk membuat latar belakang label sedikit transparan.
- Tetapkan Nama ke Bar .
- Tetapkan Posisi untuk {1, 0},{0.5, 0} untuk menetapkan label di tengah kanan kontainer (100% dari kiri ke kanan label tuan, dan 50% dari atas ke bawah label tuan).
- Tetapkan Ukuran ke {0, 0},{1, 0} untuk memperpanjang label ke bagian atas label parent (0% secara horizontal dan 100% secara vertikal dari label parent). Langkah ini juga berguna untuk perilaku tweening yang terjadi dalam skrip di langkah 8.
Putar sudut label.
- Sisipkan objek UICorner ke dalam Bar.
- Pilih UICorner , lalu di jendela Properties , tetapkan CornerRadius ke 1> 0.15, 01> untuk sedikit menyekitar sudut.
Pindahkan CooldownBarPrefab ke ReplicatedStorage .
Buat struktur folder untuk mengatur objek UI Anda. Sampel menggunakan Instances folder dengan anak Guis folder.
Pindahkan CooldownBarPrefab ke Guis .
참조 Class.ReplicatedStorage 스크립트 dalam sampel Laser Tag tempat file yang secara programatik menghubungkan cooldown meter ke pemutar, lalu animasi red bar setelah pemutar mengekstraksi pemutar mereka.
Skrip klien ReplicatedStorage.FirstPersonBlasterVisuals berisi semua logika visual untuk pemain's first-person blaster. Itu memerlukan set script modul yang bekerja bersama-sama untuk menyetel visual blaster yang merasa lebih realistis untuk gameplaytag laser, termasuk FirstPersonBlasterVisuals.addCooldownBar dan First
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 pertama
rigModel = blasterConfig.RigModel:Clone()
rigModel.Parent = Workspace
-- Tambahkan cooldownBar
cooldownBar = addCooldownBar(rigModel.PrimaryPart.CooldownBarAttachment)
animations = setupAnimations(blasterConfig, rigModel)
end
local function removeFirstPersonVisuals()
for _, animation in animations do
animation:Stop()
animation:Destroy()
animation = nil
end
if rigModel then
-- Ini juga menghancurkan bar cooldown karena bersifat orangtua pada rig
rigModel:Destroy()
rigModel = nil
end
end
-- Lari efek visual orang pertama saat ledakan terjadi
laserBlastedBindableEvent.Event:Connect(function(blastData: BlastData.Type)
runBlastVisuals(rigModel.PrimaryPart.TipAttachment, blastData, animations.blastAnimation)
runCooldownBarEffect(cooldownBar)
end)
-- Ikatkan rig ke kamera jika ada
RunService.RenderStepped:Connect(function()
if rigModel then
-- Perbarui CFrame relatif ke posisi kamera dan RIG_OFFSET_FROM_CAMERA
rigModel:PivotTo(currentCamera.CFrame * RIG_OFFSET_FROM_CAMERA)
end
end)
-- Penanganan mengubah 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)
-- Mengelola penanganan visual saat pemain 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 seorang pemain menyalakan pistol mereka, bar cooldown akan berkedut untuk berkomunikasi ketika pemain dapat menyalakan pistol lagi.
Buat Objek BillboardGui
Untuk menampilkan elemen UI dalam ruang 3D yang merespon logika scripting dan selalu menghadapi kamera setiap pemain, terlepas dari sudut pandang mereka, seperti nama pemain atau pemasaran peta, Anda dapat menciptakan objek BillboardGui sebagai anak dari Class.BasePart atau Class.Configuration yang ada di ruang 3D.
Pengalaman laser tag sampel termasuk dua objek BillboardGui yang berpisah dalam layanan ReplicatedStorage :
- OtherPlayerIndicatorGuiPrefab - Menunjukkan lingkaran merah muda atau hijau di atas kepala setiap pemain saat mereka aktif dalam putaran.
- TaggedOutIndicatorGuiPrefab - Menunjukkan di atas kepala pemain saat mereka ditag keluar dari putaran.
Setelah Anda membuat objek BillboardGui, Anda dapat menciptakan dan menyesuaikan anaknya GuiObjects sesuai tujuan masing-masing kontainer. Untuk menunjukkan, dalam bagian langsung berikutnya yang mengikuti, Anda akan belajar cara mengimplemenasi elemen UI untuk kedua jenis kont
Untuk membuat objek BillboardGui
- Di jendela Explorer , geser atas BasePart atau Attachment, lalu klik ikon 1> ⊕1>. Menu konteks ditampilkan.
- Dari menu konteks, sisipkan objek BillboardGui .
- Ganti nama BillboardGui menurut konteks elemen UI anaknya.
- Ulangi proses ini untuk setiap elemen UI yang perlu Anda tampilkan secara konteksual di atas kepala pemain.
Indikator Tim
Indikator tim adalah elemen UI yang memberi tahu pemain mana tim lainnya di putaran bergabung dengan sehingga mereka dapat dengan mudah membedakan antara anggota tim mereka dan anggota tim musuh. Informasi ini penting karena gameplay shooter orang pertama mengharuskan pemain membuat keputusan strategis cepat saat mereka berada di zona pertempuran sehingga mereka tidak terpikir dan kalah dalam mencocokkan.
Untuk mengekskesiarakan tanda tim dalam pengalaman Laser Tag :
Sisipkan objek BillboardGui ke dalam perahu sementara.
Di menu bar, navigasikan ke tab Avatar dan kemudian klik Pembuat Rig .
Pilih dari pilihan yang tersedia. Samplen menggunakan jenis R15 rig, bentuk feminin tubuh, dan avatar Rthro. Rig menampilkan kedua dalam jendela 3D dan jendela 2> Explorer2> di bawah nama 5> Rig5>.
Di jendela Explorer , navigasikan ke anak Kepala mesin, lalu klik ikon ⊕ . Menu konteks ditampilkan.
Dari menu konteks, sisipkan BillboardGui .
Pilih BillboardGui baru, lalu di jendela Properties ,
Tetapkan LightInfluence ke 0 untuk mencegah cahaya lingkungan dapat mempengaruhi warna indikator.
Tetapkan Nama ke OtherPlayerIndicatorPrefab .
Tetapkan Ukuran ke {0, 10},{0, 10} untuk membuat label secara signifikan lebih kecil.
Tetapkan StudsOffsetWorldSpace ke 0, 4, 0 untuk menempatkannya di atas kepala rig.
Sisipkan objek Frame ke dalam OtherPlayerIndicatorPrefab .
Pilih frame baru, lalu di jendela Properti ,
Tetapkan AnchorPoint ke 0.5, 0.5 untuk menetapkan titik asal frame di tengah dirinya (50% dari kiri ke kanan label, dan 50% dari atas ke bawah label).
Tetapkan Warna Latar Belakang3 untuk 255, 3, 0 untuk menetapkan warna latar belakang frame sebagai warna pengganti.
Tetapkan Posisi untuk {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 ke {1, -2},{1, -2} untuk mengurangi frame ke area permukaan BillboardGui.
Sisipkan objek UICorner ke dalam Frame untuk menyelesaikan sudut-sudut.
Sisipkan objek UIStroke ke dalam Frame untuk menggambarkan lingkaran indikator.
Pindahkan OtherPlayerIndicatorPrefab ke ReplicatedStorage .
참조 스크립트 ReplicatedStorage 내에서 샘플 Laser Tag 1A 장소 파일이 프로그래밍된 팀 표시 팀 표시기를 위해 모든 플레이어 있는 활성 라운드 안에 있지 않은 경우 죽음.
Skrip berikut ReplicatedStorage.OtherPlayerIndicatorGuiSetup dijalankan ketika pemain muncul di arena untuk putaran aktif. Ini menghubungkan tombol tim dengan menelepon fungsi addIndicatorToCharacter() , yang menempatkan
Jika pemain lain berada di tim yang sama, tanda tim selalu ditampilkan, bahkan jika mereka bersembunyi di belakang objek di ruang 3D; jika pemain lain berada di tim musuh, tanda tim hanya ditampilkan jika tidak ada objek di ruang 3D untuk mengocult 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 putaran
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 ada 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 seorang pemain berada dalam putaran aktif, tanda tim tampak di atas kepala pemain lain kecuali mereka berada di tim musuh dan di belakang objek.
Indikator Tanda Keluar
Indikator tanda keluar adalah elemen UI yang memberi tahu pemain ketika pemain lain tidak lagi aktif di putaran dan berada dalam proses respawning kembali ke zona pemain mereka. Info ini penting karena gameplay dari pengalaman menembak orang pertama yang meminta pemain untuk pindah ke pemain berikutnya setelah mereka tag out pemain sehingga mereka tidak menjadi rentan di arena dengan bermain di lokasi
Untuk mengekspresikan tanda-tanda yang ditandai dengan benar dalam pengalaman Laser Tag :
Sisipkan objek BillboardGui ke dalam rig sementara sehingga Anda dapat melihat perubahan di setiap langkah proses.
Di menu bar, navigasikan ke tab Avatar dan kemudian klik Pembuat Rig .
Pilih dari pilihan yang tersedia. Samplen menggunakan jenis R15 rig, bentuk pria tubuh, dan avatar Rthro. Rig menampilkan kedua dalam jendela 3D dan jendela 2> Explorer2> di bawah nama 5> Rig5>.
Di jendela Explorer , navigasikan ke anak Kepala mesin, lalu klik ikon ⊕ . Menu konteks ditampilkan.
Dari menu konteks, sisipkan BillboardGui .
Pilih BillboardGui baru, lalu di jendela Properties ,
Tetapkan LightInfluence ke 0 untuk mencegah cahaya lingkungan dapat mempengaruhi warna indikator.
Tetapkan Nama ke TaggedOutIndicatorGuiPrefab .
Tetapkan Ukuran ke {3, 0},{0.5, 0} untuk menyempitkan 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 AnchorPoint ke 0.5, 0.5 untuk menetapkan titik asal label di tengah dirinya (50% dari kiri ke kanan label, dan 50% dari atas ke bawah label).
- Tetapkan Transparansi Latar Belakang untuk 1 untuk membuat latar belakang label sepenuhnya transparan.
- Tetapkan Nama ke Kotak Pengguna .
- Tetapkan Posisi untuk {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 menyebar label ke seluruh BillboardGui (100% secara horizontal dan 100% secara vertikal dari BillboardGui orang tua).
- Tetapkan Gambar ke rbxassetid://14304826985 untuk membuat gambar menjadi pudar multi-arah.
- Tetapkan Warna Gambar ke 245, 46, 46 untuk menyamarkan label merah.
Untuk meningkatkan pelaksanaan, Anda dapat menyimpan aset gambar dan menggunakan objek UIGradient dengan nomor urutan transparansi khusus. Untuk belajar lebih lanjut tentang teknik fading ini, lihat UI Penampilan Modifier - Gradient .
Sisipkan objek TextLabel ke dalam Frame.
Pilih label baru, lalu di jendela Properti ,
Tetapkan AnchorPoint ke 0.5, 0.5 untuk menetapkan titik asal label di tengah dirinya (50% dari kiri ke kanan label, dan 50% dari atas ke bawah label).
Tetapkan Transparansi Latar Belakang untuk 1 untuk membuat latar belakang label sepenuhnya transparan.
Tetapkan Nama ke BodyTextLabel .
Tetapkan Posisi untuk {0.5, 0},{0.5, 0} untuk menetapkan label ke tengah kontainer (50% dari kiri ke kanan label utama, dan 50% dari atas ke bawah label utama).
Tetapkan Ukuran ke {0.85, 0},{0.7, 0} sehingga teks dapat mengambil sebagian besar area memudar (85% secara horizontal dan 70% secara vertikal dari label gambar utama).
Tetapkan FontFace ke Montserrat untuk menyesuaikan estetika masa depan.
Tetapkan Berat ke Bold untuk menyuburkan huruf.
Set Teks ke TAGGED .
Tetapkan Warna Teks3 ke 255, 255, 255 untuk membuat teks putih.
Aktifkan TextScaled .
Pindahkan TaggedOutIndicatorGuiPrefab ke ReplicatedStorage .
참조 ServerScriptService 스크립트 dalam Laser Tag 1A file yang menunjukkan indikator yang ditandai saat seorang pemain respawning back ke zona respawn tim mereka.
Skrip server berikut ServerScriptService.SetupHumanoid dijalankan setelah seorang pemain memuat pengalaman. Ini menjamin bahwa setiap kali karakter pemain ditambahkan ke model data, setupHumanoidAsync dianggil dengan nama mereka Humanoid.
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 pengganda karakter 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 masa depan
Players.PlayerAdded:Connect(onPlayerAdded)
Sekarang, setiap kali kesehatan pemain mencapai nol, tanda-tanda yang ditandai muncul di atas kepala mereka sampai mereka respawn.
Selamat atas menyelesaikan Kursus Penggunaan Antarmuka Pengguna! Sekarang setelah Anda memiliki pengalaman menciptakan gaya seni, menyetel layar Anda, dan menerapkan desain Anda di Studio dari awal hingga akhir, Anda dapat mengekstensi proyek Anda dengan UI dan fungsionalitas baru, atau mengikuti kurikulum tambahan, seperti Gameplay