Stüdyoda tasarımlarınızı uygulayın | Dokümantasyon

Tasarımınızı uygulamak, hem yerleşik hem de özel UI öğeleri ile Stüdyo'da tel çerçevelerinizi oluşturma sürecidir ve bu öğeler, UI'nizi bağlamsal olarak tetikleyen betikler ile birlikte gelir. Bu eğitimin heyecan verici adımı, tüm tasarımlarınızı ve sıkı çalışmanızı bir araya getirerek, oyuncu etkileşimi için tamamlanmış ve hazır bir iş akışı seti görmenizi sağlar.

örnek lazer tag oyunu .rbxl dosyasını referans alarak, bu kullanıcı arayüzü tasarımı müfredatının bu bölümü, UI planlamanızı hayata geçirmenin yollarını gösterir; bu, aşağıdakileri içerir:

Örnek lazer tag oyununun UI bileşenlerini yeniden oluşturabilmeniz için UI varlık kütüphanesinden varlık kimliklerini alma.
Farklı ekranlar ve en boy oranlarında UI'nizin nasıl göründüğünü görmek için Stüdyo'da çeşitli cihazları taklit etme.
UI'nizi oyuncuların ekranlarında, parça yüzeylerinde ve 3D alan içinde görüntülemek için ScreenGui, SurfaceGui ve BillboardGui nesneleri oluşturma.

Bu bölümdeki teknikleri gözden geçirdikten sonra, bunları kendi projelerinize uygulayarak oyuncuların oyunlarınızda ne yapabileceklerini keşfetmelerine yardımcı olacak heyecan verici UI bileşenleri oluşturabilirsiniz.

Bu eğitimin bu bölümündeki talimatlar, UI Tasarım Varlık Kütüphanesini kullanarak UI bileşenlerini tam olarak nasıl yeniden oluşturacağınızı gösterir. Bu süreç, baştan sona yaklaşık 90 dakika veya daha az sürer. Sağlanan değerleri kullanmak istemiyorsanız, her UI öğesini kendi oyununuzun spesifikasyonlarına uyacak şekilde ayarlayabilir veya eğitimin geri kalanında örneği kullanabilirsiniz.

Varlık kütüphanesini alın

Varlık kütüphaneleri, envanterinize kolay erişim ve yeniden kullanım için ekleyebileceğiniz varlıkların koleksiyonlarıdır. Projeniz için kullanacağınız varlık kütüphanesi, Yaratıcı Mağaza içindeki dokuz adet 2D bireysel UI öğesi varlığı ve bu bölümde oluşturduğunuz hedef, blaster seçici ve oyuncu bilgisi bileşenlerinin son versiyonlarını içerir.

**MultiBlaster İkonu**
rbxassetid://14309094777

**SingleBlaster İkonu**
rbxassetid://14309094641

**Pembe Takım İkonu**
rbxassetid://14309678581

**Baş Aşağı Trapezoid**
rbxassetid://14304827304

**Yeşil Takım İkonu**
rbxassetid://14309678701

**Çok Yönlü Fade**
rbxassetid://14304827147

**Patlama Butonu İkonu - Varsayılan**
rbxassetid://18308375067

**Patlama Butonu İkonu - Basılı**
rbxassetid://18308372597

**Hedef İkonu**
rbxassetid://14400935532

Vuruş İşareti İkonu
rbxassetid://14401148777

**Seçim Ok İkonu**
rbxassetid://14309187282

Varlık kütüphanesini envanterinizden oyununuzda almak için:

Varlık kütüphanesini envanterinize ekleyin.
1. Varlık kütüphanesinin detaylar sayfasına gidin.
2. Sağ üst köşede, Modeli Al butonuna tıklayın. Varlık kütüphanesi artık envanterinizde ve bu varlıkları platformdaki herhangi bir projede yeniden kullanabilirsiniz.
Stüdyo'da, Ana Sayfa sekmesine gidin, ardından Araç Kutusu butonuna tıklayın. Araç Kutusu penceresi açılır.
Araç Kutusu penceresinde, Envanter sekmesine tıklayın. Benim Modellerim sıralaması görüntülenir.
Aşağı açılır menüsüne tıklayın, ardından Benim Paketlerim sıralamasını seçin.
Son Ekran UI Bileşenleri karosuna tıklayın, ardından Keşfedicisi penceresinde Tamamlanmış Bileşenler'i seçin, ardından bunları StarterGui hizmetine sürükleyin. Artık tasarımlarını referans almak için herhangi bir son bileşeni etkinleştirebilirsiniz.

Cihazları taklit etme

Stüdyo'nun Cihaz Emülatörü, oyuncuların UI'nizi çeşitli cihazlarda nasıl göreceklerini ve etkileşimde bulunacaklarını test etmenizi sağlar. Bu araç, uygulama sürecinin hayati bir parçasıdır çünkü Stüdyo'daki görünüm alanınızın en boy oranı, oyuncuların oyununuzu erişmek için kullandığı ekranların en boy oranını yansıtmayabilir ve UI'nizin her cihazda okunabilir ve erişilebilir olması önemlidir.

Örneğin, UI'nizi bir dizi ekran boyutunda test etmezseniz, büyük ekranlara sahip oyuncular metninizi okuyamayabilir veya simgelerinizi çözümleyemeyebilir ve küçük ekranlara sahip oyuncular, UI öğeleriniz ekranın çok fazla yer kaplaması nedeniyle 3D alanı göremeyebilir.

UI'nizi çeşitli ekran boyutlarında taklit etmek için:

Stüdyo'nun Test menüsünden, Cihaz Emülatörü'nü açın.
Çözünürlük açılır menüsünde, Gerçek Çözünürlük'ü seçin. Bu, taklit ettiğiniz cihazdaki UI öğelerinizin gerçek çözünürlüğünü görmenizi sağlar.
Cihaz açılır menüsünde, Telefon, Tablet, Masaüstü ve Konsol bölümlerinden en az bir cihaz seçin.

ScreenGui nesneleri oluşturma

Her oyuncunun ekranında UI öğelerini görüntülemek için, ScreenGui nesnesini StarterGui hizmetinde oluşturabilirsiniz. ScreenGui nesneleri, ekrandaki UI için birincil konteynerlerdir ve StarterGui hizmeti, içeriğini her oyuncunun PlayerGui konteynerine kopyalar.

Oyun sırasında UI öğelerinin gruplarını bağlamsal olarak düzenlemek ve görüntülemek için birden fazla ScreenGui nesnesi oluşturabilirsiniz. Örneğin, örnek lazer tag oyunu, oyuncuların oyunun ana kullanıcı akışı sırasında farklı koşulları yerine getirmesiyle başlangıçta devre dışı olan beş ayrı ScreenGui nesnesi içerir:

HUDGui - Oyuncular bir turda aktifken, hedef ve her takımın toplam puanları gibi oyunla ilgili önemli bilgileri görüntüler.
PickABlasterGui - Oyuncular bir tur başladığında veya yeniden katıldıklarında tüm blaster seçimlerini görüntüler.
ForceFieldGui - Oyuncular bir blaster seçerken ve geçici olarak dokunulmaz olduklarında altıgen bir ızgara görüntüler.
OutStateGui - Oyuncular dışlandığında ekranın etrafında koyu bir sınır görüntüler.
RoundResultsGui - Ekranın üstünde hangi takımın turu kazandığına dair bilgileri içeren koyu bir örtü görüntüler.

Bir ScreenGui nesnesi oluşturduktan sonra, her konteynerin amacına göre çocuk GuiObjects'ı oluşturabilir ve özelleştirebilirsiniz. Örnek olarak, hemen ardından gelen bölümlerde, oyuncuların örnek lazer tag oyununda başarılı olmaları için bilmesi gereken üç bilgi kategorisi için UI öğelerini nasıl uygulayacağınızı öğreneceksiniz. Sürecin herhangi bir kısmını kendi oyununuzun spesifikasyonlarına uyacak şekilde ayarlayabilirsiniz.

Bir ScreenGui nesnesi oluşturmak için:

Keşfedicisi penceresinde, StarterGui hizmetinin üzerine gelin, ardından ⊕ simgesine tıklayın. Bağlamsal bir menü görüntülenir.
Bir ScreenGui ekleyin.
ScreenGui'yi çocuk UI öğelerinin bağlamına göre yeniden adlandırın.
Her oyuncunun ekranında görüntülemek için ihtiyaç duyduğunuz her UI öğesi grubu için bu işlemi tekrarlayın.

Hedef UI

Wireframe Your Layouts görsel hiyerarşi en iyi uygulamalarını takip ederek, bu bölüm oyunun hedefiyle ilgili tüm ekran UI öğelerini uygulamayı öğretir. Bu UI öğeleri grubu, ekranın üst kısmına yakın bir konumda yer alır çünkü hedef ve her takımın puanları, oyunu kazanmak için en önemli bilgilere sahiptir.

Örneğin, örnek, oyuncuların bir turda başarılı olmak için ne yapmaları gerektiğini bilmesi için başvurdukları bir hedef UI bileşeni sağlar. Oyuncular düşman takım üyelerini dışladıkça ve puan kazandıkça, bu bileşen her takımın puanını başlığın istemi içinde genel hedefe karşı takip eder. Tüm istemleri takip eden istem ve sunucu betikleri hakkında yüksek seviyeli bir inceleme için, Puanları Takip Et bölümüne bakın.

Örnek Lazer Tag oyunundaki hedef UI'yi tam olarak yeniden oluşturmak için:

Tüm bileşen için bir konteyner oluşturun.
1. HUDGui ScreenGui nesnesine bir Frame ekleyin.
  1. Keşfedicisi penceresinde, StarterGui hizmetine gidin.
  2. Çocuk HUDGui nesnesinin üzerine gelin, ardından ⊕ simgesine tıklayın. Bağlamsal bir menü görüntülenir.
  3. Bağlamsal menüden bir Frame ekleyin.
2. Yeni Frame'i seçin, ardından Özellikler penceresinde,
  1. AnchorPoint'u 0.5, 0 olarak ayarlayın, böylece çerçevenin köken noktası kendisinin üst ortasında olur (çerçevenin solundan sağa %50, üstten aşağı %0).
  2. BackgroundTransparency'yi 1 olarak ayarlayın, böylece çerçevenin arka planı tamamen şeffaf olur.
  3. Position'u {0.5, 0},{0.03, 0} olarak ayarlayın, böylece çerçeve ekranın üst ortasına yakın bir konumda olur (ekranın solundan sağa %50, üstten aşağı %3).
  4. Size'ı {0.5, 0},{0.13, 0} olarak ayarlayın, böylece çerçevenin öğeleri ekranın üst kısmının büyük bir bölümünü kaplar (yatayda %50, dikeyde %13).
  5. Name'i Objective olarak ayarlayın.
3. İSTEĞE BAĞLI
  Objective'ye bir UIAspectRatioConstraint ekleyin, böylece etiketin en boy oranı oyuncunun ekran boyutuna göre aynı kalır. Örnek, UIAspectRatioConstraint.AspectRatio özelliğini 7 olarak ayarlar.
Hedefin istem nesneleri için bir konteyner oluşturun.
1. Objective'ye bir Frame ekleyin.
2. Yeni Frame'i seçin, ardından Özellikler penceresinde,
  1. AnchorPoint'u 0.5, 0 olarak ayarlayın, böylece çerçevenin köken noktası kendisinin üst ortasında olur (çerçevenin solundan sağa %50, üstten aşağı %0).
  2. BackgroundTransparency'yi 1 olarak ayarlayın, böylece çerçevenin arka planı tamamen şeffaf olur.
  3. Position'u {0.5, 0},{0, 0} olarak ayarlayın, böylece çerçeve konteynerin ortasında olur (ebeveyn çerçevenin solundan sağa %50, üstten aşağı %0).
  4. Size'ı {1, 0},{0.67, 0} olarak ayarlayın, böylece seçim UI bileşenleri konteynerin üstten alta yaklaşık yarısını kaplar (ebeveyn çerçevenin %100 yatay ve %67 dikey).
  5. Name'i ObjectiveDisplay olarak ayarlayın.
Başlık öğelerini oluşturun.
1. ObjectiveDisplay'ye bir ImageLabel ekleyin.
2. ImageLabel'i seçin, ardından Özellikler penceresinde,
  1. AnchorPoint'u 0.5, 1 olarak ayarlayın, böylece etiketin köken noktası kendisinin alt ortasında olur (etiketin solundan sağa %50, üstten aşağı %100).
  2. BackgroundTransparency'yi 1 olarak ayarlayın, böylece etiketin arka planı tamamen şeffaf olur.
  3. LayoutOrder'u -1 olarak ayarlayın.
  4. Position'u {0.5, 0},{0.34, 0} olarak ayarlayın, böylece etiket çerçevenin üst orta kısmına yakın bir konumda olur (ebeveyn çerçevenin solundan sağa %50, üstten aşağı %34).
  5. Size'ı {0.46, 0},{0.34, 0} olarak ayarlayın, böylece istem alanı çerçevenin neredeyse yarısını kaplar (ebeveyn çerçevenin %46 yatay ve %34 dikey).
  6. Name'i Header olarak ayarlayın.
  7. Image'i rbxassetid://14304828123 olarak ayarlayın, böylece bir trapezoid görüntülenir.
  8. ImageTransparency'yi 0.15 olarak ayarlayın, böylece başlık yarı şeffaf olur.
3. İSTEĞE BAĞLI
  ImageLabel'e bir UIAspectRatioConstraint ekleyin, böylece etiketin en boy oranı oyuncunun ekran boyutuna göre aynı kalır. Örnek, UIAspectRatioConstraint.AspectRatio özelliğini 13.781 olarak ayarlar.
4. Header'e bir TextLabel ekleyin, böylece bir başlık görüntülenir.
5. Yeni etiketi seçin, ardından Özellikler penceresinde,
  1. AnchorPoint'u 0.5, 0.5 olarak ayarlayın, böylece yeni etiketin köken noktası kendisinin ortasında olur (etiketin solundan sağa %50, üstten aşağı %50).
  2. BackgroundTransparency'yi 1 olarak ayarlayın, böylece etiketin arka planı tamamen şeffaf olur.
  3. Position'u {0.5, 0},{0.5, 0} olarak ayarlayın, böylece etiket ebeveyn etiketinin ortasına taşınır (ebeveyn etiketin solundan sağa %50, üstten aşağı %50).
  4. Size'ı {0.62, 0},{0.55, 0} olarak ayarlayın, böylece metin alanı ebeveyn etiketinin neredeyse yarısını kaplar (ebeveyn etiketin %62 yatay ve %55 dikey).
  5. Name'i HeaderTextLabel olarak ayarlayın.
  6. FontFace'i Montserrat olarak ayarlayın, böylece geleceğe yönelik estetiğe uyum sağlar.
  7. Weight'i Medium olarak ayarlayın, böylece yazı kalınlaşır.
  8. Text'i HEDEF olarak ayarlayın.
  9. TextScaled'i etkinleştirin.
İstem öğelerini oluşturun.
1. ObjectiveDisplay'ye bir ImageLabel ekleyin.
2. ImageLabel'i seçin, ardından Özellikler penceresinde,
  1. AnchorPoint'u 0.5, 1 olarak ayarlayın, böylece etiketin köken noktası kendisinin alt ortasında olur (etiketin solundan sağa %50, üstten aşağı %100).
  2. BackgroundTransparency'yi 1 olarak ayarlayın, böylece etiketin arka planı tamamen şeffaf olur.
  3. Position'u {0.5, 0},{1, 0} olarak ayarlayın, böylece etiket ebeveyn çerçevenin alt ortasında olur (ebeveyn çerçevenin solundan sağa %50, üstten aşağı %100).
  4. Size'ı {0.89, 0},{0.66, 0} olarak ayarlayın, böylece metin alanı ebeveyn çerçevenin neredeyse tam genişliğini kaplar (ebeveyn çerçevenin %89 yatay ve %66 dikey).
  5. Name'i Body olarak ayarlayın.
  6. Image'i rbxassetid://14304827265 olarak ayarlayın, böylece başa aşağı bir trapezoid görüntülenir.
  7. ImageColor3'ü 0, 0, 0 olarak ayarlayın, böylece görüntü siyah renkte olur.
  8. ImageTransparency'yi 0.3 olarak ayarlayın, böylece başlık yarı şeffaf olur.
3. İSTEĞE BAĞLI
  ImageLabel'e bir UIAspectRatioConstraint ekleyin, böylece etiketin en boy oranı oyuncunun ekran boyutuna göre aynı kalır. Örnek, UIAspectRatioConstraint.AspectRatio özelliğini 13.781 olarak ayarlar.
4. Body'ye bir TextLabel ekleyin, böylece bir istem görüntülenir.
5. Yeni etiketi seçin, ardından Özellikler penceresinde,
  1. AnchorPoint'u 0.5, 0.5 olarak ayarlayın, böylece yeni etiketin köken noktası kendisinin ortasında olur (etiketin solundan sağa %50, üstten aşağı %50).
  2. BackgroundTransparency'yi 1 olarak ayarlayın, böylece etiketin arka planı tamamen şeffaf olur.
  3. Position'u {0.5, 0},{0.5, 0} olarak ayarlayın, böylece etiket ebeveyn etiketinin ortasına taşınır (ebeveyn etiketin solundan sağa %50, üstten aşağı %50).
  4. Size'ı {0.85, 0},{0.39, 0} olarak ayarlayın, böylece metin alanı ebeveyn etiketinin neredeyse yarısını kaplar (ebeveyn etiketin %85 yatay ve %39 dikey).
  5. Name'i BodyTextLabel olarak ayarlayın.
  6. FontFace'i Montserrat olarak ayarlayın, böylece geleceğe yönelik estetiğe uyum sağlar.
  7. Weight'i Medium olarak ayarlayın, böylece yazı kalınlaşır.
  8. TextColor3'ü 255, 255, 255 olarak ayarlayın, böylece metin karanlık arka planda beyaz olur.
  9. Text'i Karşıt oyuncuları etiketleyerek puan kazanın! İlk %d puanı kazanan takım. olarak ayarlayın.
  10. TextScaled'i etkinleştirin.
Hedefin takım sayacı için bir konteyner oluşturun.
1. Objective'ye bir Frame ekleyin.
2. Yeni Frame'i seçin, ardından Özellikler penceresinde,
  1. AnchorPoint'u 0.5, 1 olarak ayarlayın, böylece çerçevenin köken noktası kendisinin alt ortasında olur (çerçevenin solundan sağa %50, üstten aşağı %100).
  2. BackgroundTransparency'yi 1 olarak ayarlayın, böylece çerçevenin arka planı tamamen şeffaf olur.
  3. Position'u {0.5, 0},{1, 0} olarak ayarlayın, böylece çerçeve konteynerin alt ortasında olur (ebeveyn çerçevenin solundan sağa %50, üstten aşağı %100).
  4. Size'ı {0.44, 0},{0.27, 0} olarak ayarlayın, böylece seçim UI bileşenleri konteynerin soldan sağa yaklaşık yarısını kaplar (ebeveyn çerçevenin %44 yatay ve %27 dikey).
  5. Name'i TeamPointCounter olarak ayarlayın.
Takım sayaçları için boşluk oluşturun.
1. Adım 5'teki çerçeveye bir UIListLayout nesnesi ekleyin.
2. UIListLayout nesnesini seçin, ardından Özellikler penceresinde,
  1. Padding'i 0.025, 0 olarak ayarlayın, böylece gelecekteki takım sayaçları arasında boşluk sağlanır.
  2. FillDirection'u Yatay olarak ayarlayın, böylece her takım sayacı yan yana görüntülenir.
  3. HorizontalAlignment'ı Merkez olarak ayarlayın, böylece her takım sayacı birbirinin ortasına hizalanır.
Yeşil takım sayacı öğelerini oluşturun.
1. TeamPointCounter'ye bir ImageLabel ekleyin.
2. Yeni ImageLabel'i seçin, ardından Özellikler penceresinde,
  1. BackgroundTransparency'yi 1 olarak ayarlayın, böylece etiketin arka planı tamamen şeffaf olur.
  2. Position'u {0.5, 0},{1, 0} olarak ayarlayın, böylece etiket ebeveyn çerçevenin alt ortasında olur (ebeveyn çerçevenin solundan sağa %50, üstten aşağı %100).
  3. Size'ı {0.5, 0},{1, 0} olarak ayarlayın, böylece etiket ebeveyn çerçevenin yarı genişliğine kadar uzanır (ebeveyn çerçevenin %50 yatay ve %100 dikey).
  4. Name'i TeamACounter olarak ayarlayın.
  5. Image'i rbxassetid://14304826831 olarak ayarlayın, böylece bir yönlendirme fade görüntülenir.
  6. ImageColor3'ü 88, 218, 171 olarak ayarlayın, böylece görüntü nane yeşili olur.
3. Bu etiketin yeşil takım için olduğunu takip etmek için özel bir özellik oluşturun.
  1. Özellikler penceresinde, Özellikler bölümüne gidin, ardından artı simgesine tıklayın. Bir açılır diyalog görüntülenir.
  2. Ad alanına teamColor yazın.
  3. Tür açılır menüsünden BrickColor'u seçin.
  4. Kaydet butonuna tıklayın.
  5. Yeni teamColor özelliğini Mint olarak ayarlayın.
4. TeamACounter'ye bir TextLabel ekleyin, böylece bir istem görüntülenir.
5. Yeni etiketi seçin, ardından Özellikler penceresinde,
  1. AnchorPoint'u 1, 0.5 olarak ayarlayın, böylece yeni etiketin köken noktası kendisinin sağ ortasında olur (etiketin solundan sağa %100, üstten aşağı %50).
  2. BackgroundTransparency'yi 1 olarak ayarlayın, böylece etiketin arka planı tamamen şeffaf olur.
  3. Position'u {0.95, 0},{0.5, 0} olarak ayarlayın, böylece etiket ebeveyn etiketinin sağında olur (ebeveyn etiketin solundan sağa %95, üstten aşağı %50).
  4. Size'ı {0.85, 0},{0.39, 0} olarak ayarlayın, böylece metin alanı ebeveyn etiketinin neredeyse yarısını kaplar (ebeveyn etiketin %85 yatay ve %39 dikey).
  5. FontFace'i Montserrat olarak ayarlayın, böylece geleceğe yönelik estetiğe uyum sağlar.
  6. Weight'i Kalın olarak ayarlayın, böylece yazı kalınlaşır.
  7. TextColor3'ü 255, 255, 255 olarak ayarlayın, böylece metin karanlık arka planda beyaz olur.
  8. Text'i - olarak ayarlayın.
  9. TextScaled'i etkinleştirin.
  10. TextXAlignment'ı Sağ olarak ayarlayın.
6. TextLabel'e bir UIStroke nesnesi ekleyin, ardından Özellikler penceresinde Color'u 8, 78, 52 olarak ayarlayın, böylece çizgiyi koyu yeşil bir çerçeve ile çerçevelersiniz.
Pembe takım sayacı öğelerini oluşturun.
1. TeamAICounter ve çocuklarını kopyalayın.
2. Kopyalanan TeamACounter'ı seçin, ardından Özellikler penceresinde,
  1. Name'i TeamBCounter olarak ayarlayın.
  2. Image'i rbxassetid://14305849451 olarak ayarlayın, böylece ters yönde bir yönlendirme fade görüntülenir.
  3. ImageColor3'ü 255, 170, 255 olarak ayarlayın, böylece görüntü karanfil pembesi olur.
  4. teamColor özelliğini Karanfil Pembesi olarak ayarlayın.
3. Kopyalanan TextLabel'ı TeamBCounter'ın çocuğu olarak seçin, ardından Özellikler penceresinde,
  1. AnchorPoint'u 0, 0.5 olarak ayarlayın, böylece yeni etiketin köken noktası kendisinin sol ortasında olur (etiketin solundan sağa %0, üstten aşağı %50).
  2. Position'u {0.05, 0},{0.5, 0} olarak ayarlayın, böylece etiket ebeveyn etiketinin solunda olur (ebeveyn etiketin solundan sağa %5, üstten aşağı %50).
  3. TextXAlignment'ı Sol olarak ayarlayın.
4. Kopyalanan UIStroke'ı TeamBCounter'ın çocuğu olarak seçin, ardından Özellikler penceresinde, Color'u 158, 18, 94 olarak ayarlayın, böylece çizgiyi koyu pembe bir çerçeve ile çerçevelersiniz.
Aşağıdaki ReplicatedStorage betiklerini örnek Lazer Tag yer dosyasında referans alın, böylece programatik olarak hedef istemini güncelleyebilir ve takım puanlarını takip edebilirsiniz.

Aşağıdaki betik, ana Heads Up Display (HUD) kurulumunu sağlamak için birlikte çalışan bir dizi modül betiği gerektirir; bunlar arasında setObjective ve startSyncingTeamPoints bulunmaktadır. Bir oyuncu bir tura katıldığında ve blaster'ını seçtiğinde, bu betik tüm HUD UI öğelerinin oyuncunun durumu, cihazı ve takım durumu için uygun şekilde görüntülenmesini sağlar.

local Players = game:GetService("Players")

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

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

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

Artık, bir oyuncu blaster'ını seçtiğinde, hedef UI ekranlarının üst kısmında görüntülenir ve her takımın puanlarını takip eder.

Blaster UI

Wireframe Your Layouts görsel hiyerarşi en iyi uygulamalarını takip ederek, bu bölüm oyuncunun blaster'ı ile ilgili tüm ekran UI öğelerini uygulamayı öğretir. Bu UI öğeleri grubu, ekranın ortasında büyük bir alan kaplar çünkü 3D alandaki eyleme oyuncuların dikkatini çekmek için odak noktası işlevi görür ve oyunu oynarken en önemli bileşendir.

Hedef

Hedef, oyunculara silahlarını ateşlediklerinde nerede etki yapacaklarını bildiren bir UI öğesidir. Bu UI öğesi, birinci şahıs nişancı oyunları için hayati bir oyun gereksinimidir çünkü oyuncuların blaster'larını doğru bir şekilde nişan alabilmeleri ve düşman takım üyelerini etiketleyebilmeleri gerekir.

Diğer birinci şahıs nişancı türündeki oyunlar gibi, örnek lazer tag oyunu da hedefi ekranın ortasında konumlandırır, böylece oyuncular avatarları 3D alan içinde hareket ederken sabit bir noktaya odaklanabilirler. Bu yerleşim, hareket hastalığını azaltmanın yanı sıra, hedefin algılanabilir olmasını sağlarken genel çevreye de uyum sağlar.

Örnek Lazer Tag oyunundaki hedefi tam olarak yeniden oluşturmak için:

HUDGui ScreenGui nesnesine bir ImageLabel ekleyin.
1. Keşfedicisi penceresinde, StarterGui hizmetine gidin.
2. Çocuk HUDGui nesnesinin üzerine gelin, ardından ⊕ simgesine tıklayın. Bağlamsal bir menü görüntülenir.
3. Bağlamsal menüden bir ImageLabel ekleyin.
Yeni ImageLabel'i seçin, ardından Özellikler penceresinde,
1. Image'i rbxassetid://14400935446 olarak ayarlayın.
2. AnchorPoint'u 0.5, 0.5 olarak ayarlayın, böylece etiketin köken noktası etiketin ortasında olur (etiketin solundan sağa %50, üstten aşağı %50).
3. BackgroundTransparency'yi 1 olarak ayarlayın, böylece etiketin arka planı tamamen şeffaf olur.
4. Name'i Crosshair olarak ayarlayın.
5. Position'u {0.5,0},{0.5,0} olarak ayarlayın, böylece etiket ekranın ortasında olur.
6. ScaleType'ı Fit olarak ayarlayın, böylece görüntü konteynerine sığar ve çeşitli ekran boyutlarında uzamaz.
İSTEĞE BAĞLI
Crosshair'e bir UIAspectRatioConstraint ekleyin, böylece etiketin en boy oranı oyuncunun ekran boyutuna göre aynı kalır. Örnek, UIAspectRatioConstraint.AspectRatio özelliğini 0.895 olarak ayarlar.

Vuruş işareti

Vuruş işareti, bir patlamanın düşman takımındaki başka bir oyuncuyla etkileşime geçtiğinde yalnızca görüntülenen bir UI öğesidir. Hedef gibi, bu UI öğesi de birinci şahıs nişancı oyunları için hayati bir oyun gereksinimidir çünkü oyuncuların rakiplerini etiketlediklerinde başarılı olduklarına dair görsel geri bildirim sağlar.

Örnek Lazer Tag oyunundaki vuruş işaretini tam olarak yeniden oluşturmak için:

Crosshair ImageLabel nesnesine bir ImageLabel ekleyin.
1. Keşfedicisi penceresinde, StarterGui hizmetine gidin.
2. Çocuk Crosshair nesnesinin üzerine gelin, ardından ⊕ simgesine tıklayın. Bağlamsal bir menü görüntülenir.
3. Bağlamsal menüden bir ImageLabel ekleyin.
Yeni ImageLabel'i seçin, ardından Özellikler penceresinde,
1. Image'i rbxassetid://14401148736 olarak ayarlayın, böylece dikdörtgen vuruş işareti simgesi görüntülenir.
2. AnchorPoint'u 0.5, 0.5 olarak ayarlayın, böylece etiketin köken noktası etiketin ortasında olur.
3. BackgroundTransparency'yi 1 olarak ayarlayın, böylece etiketin arka planı tamamen şeffaf olur.
4. Position'u {0.5,0},{0.5,0} olarak ayarlayın, böylece etiket ekranın ortasında olur.
5. Name'i Hitmarker olarak ayarlayın.
6. Size'ı {0.6, 0},{0.06, 0} olarak ayarlayın, böylece dikdörtgenlerin boyutunu hedefin ortasında azaltın.
7. ImageTransparency'yi 1 olarak ayarlayın, böylece vuruş işareti tamamen şeffaf olur. Aşağıdaki adımlardaki betikler, her oyuncunun patlaması başka bir oyuncuyla etkileşime geçtiğinde şeffaflığı tekrar 0'a döndürür.
Aşağıdaki ReplicatedStorage betiklerini örnek Lazer Tag yer dosyasında referans alın, böylece programatik olarak vuruş işaretini bir patlama başka bir oyuncuyla etkileşime geçtiğinde görüntüleyebilirsiniz.

Aşağıdaki betik, ana Heads Up Display (HUD) kurulumunu sağlamak için birlikte çalışan bir dizi modül betiği gerektirir; bunlar arasında setupHitmarker bulunmaktadır. Bir oyuncu bir tura katıldığında ve blaster'ını seçtiğinde, bu betik tüm HUD UI öğelerinin oyuncunun durumu, cihazı ve takım durumu için uygun şekilde görüntülenmesini sağlar.

local Players = game:GetService("Players")

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

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

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

Artık, bir oyuncu blaster'ını ateşlediğinde ve patlama başka bir oyuncuyla etkileşime geçtiğinde, vuruş işareti anlık olarak görüntülenir.

Blaster seçici

Blaster seçici, oyuncuların bir tura katılmadan veya yeniden katılmadan önce blaster türlerini seçmek için kullandıkları bir UI bileşenidir. Örnek lazer tag oyunu, geniş, yatay bir yayılma ile birkaç ışın üreten bir blaster ve tek bir ışın üreten başka bir blaster türü sunar. Oyuncuların seçtiği blaster türü, tur sırasında stratejilerini etkiler, bu nedenle bu UI bileşeni genel oyun için önemli bir iş akışıdır.

Aşağıdaki adımlar, farklı UI öğesi grupları için birkaç konteyner oluşturmayı, bir başlık ve istem, navigasyon ve seçme butonları ile bir blaster butonu prefab'ı oluşturmayı detaylandırır. Genel bileşenin betik mantığı, her blaster türünü temsil eden Configuration örneklerine göre blaster butonu prefab'ına farklı görsel özellikler yerleştirir.

Bu kurulum, daha fazla blaster türü için ek Configuration örnekleri oluşturmanıza olanak tanır; bu, blaster seçici içinde otomatik olarak doğru bir şekilde görüntülenir ve StarterGui.PickABlasterGui içinde bireysel butonlar oluşturmanıza gerek kalmaz.

Örnek Lazer Tag oyunundaki blaster seçiciyi tam olarak yeniden oluşturmak için:

Tüm bileşen için bir konteyner oluşturun.
1. PickABlaster ScreenGui nesnesine bir Frame ekleyin.
  1. Keşfedicisi penceresinde, StarterGui hizmetine gidin.
  2. Çocuk PickABlaster nesnesinin üzerine gelin, ardından ⊕ simgesine tıklayın. Bağlamsal bir menü görüntülenir.
  3. Bağlamsal menüden bir Frame ekleyin.
2. Yeni çerçeveyi seçin, ardından Özellikler penceresinde,
  1. AnchorPoint'u 0.5, 1 olarak ayarlayın, böylece çerçevenin köken noktası kendisinin alt ortasında olur (çerçevenin solundan sağa %50, üstten aşağı %100).
  2. BackgroundTransparency'yi 1 olarak ayarlayın, böylece çerçevenin arka planı tamamen şeffaf olur.
  3. Position'u {0.5, 0},{0.9, 0} olarak ayarlayın, böylece çerçeve ekranın alt ortasına yakın bir konumda olur (çerçevenin solundan sağa %50, üstten aşağı %92.4).
  4. Size'ı {0.8, 0},{0.25, 0} olarak ayarlayın, böylece blaster seçicinin UI bileşenleri ekranın büyük bir bölümünü kaplar (yatayda %80, dikeyde %25).
  5. Name'i Component olarak ayarlayın.
3. İSTEĞE BAĞLI
  Component'e bir UIAspectRatioConstraint ekleyin, böylece çerçevenin ve çocuk UI öğelerinin en boy oranı oyuncunun ekran boyutuna göre aynı kalır. Örnek, UIAspectRatioConstraint.AspectRatio özelliğini 5 olarak ayarlar.
UI öğesi gruplarını tutacak bir konteyner oluşturun.
1. Component'e bir Frame ekleyin.
2. Yeni çerçeveyi seçin, ardından Özellikler penceresinde,
  1. AnchorPoint'u 0.5, 0.5 olarak ayarlayın, böylece çerçevenin köken noktası kendisinin ortasında olur (çerçevenin solundan sağa %50, üstten aşağı %50).
  2. BackgroundTransparency'yi 1 olarak ayarlayın, böylece çerçevenin arka planı tamamen şeffaf olur.
  3. Position'u {0.5, 0},{0.375, 0} olarak ayarlayın, böylece çerçeve konteynerin üst ortasına yakın bir konumda olur (ebeveyn çerçevenin solundan sağa %50, üstten aşağı %37.5).
  4. Size'ı {1, 0},{0.75, 0} olarak ayarlayın, böylece seçim UI bileşenleri konteynerin 3/4'ünü kaplar (ebeveyn çerçevenin %100 yatay ve %75 dikey).
  5. Name'i SelectionFrame olarak ayarlayın.
Blaster seçici için bir istem oluşturun.
1. SelectionFrame'ye bir ImageLabel ekleyin.
2. Yeni etiketi seçin, ardından Özellikler penceresinde,
  1. AnchorPoint'u 0.5, 1 olarak ayarlayın, böylece etiketin köken noktası kendisinin alt ortasında olur (etiketin solundan sağa %50, üstten aşağı %100).
  2. BackgroundTransparency'yi 1 olarak ayarlayın, böylece etiketin arka planı tamamen şeffaf olur.
  3. LayoutOrder'u -1 olarak ayarlayın.
  4. Position'u {0.5, 0},{0.22, 0} olarak ayarlayın, böylece etiket çerçevenin üst orta kısmına yakın bir konumda olur (ebeveyn çerçevenin solundan sağa %50, üstten aşağı %22).
  5. Size'ı {0.45, 0},{0.22, 0} olarak ayarlayın, böylece istem alanı çerçevenin neredeyse yarısını kaplar (ebeveyn çerçevenin %45 yatay ve %22 dikey).
  6. Name'i Header olarak ayarlayın.
  7. Image'i rbxassetid://14304828123 olarak ayarlayın, böylece bir trapezoid görüntülenir.
  8. ImageTransparency'yi 0.15 olarak ayarlayın, böylece başlık yarı şeffaf olur.
3. İSTEĞE BAĞLI
  Header'e bir UIAspectRatioConstraint ekleyin, böylece etiketin en boy oranı oyuncunun ekran boyutuna göre aynı kalır. Örnek, UIAspectRatioConstraint.AspectRatio özelliğini 13.78 olarak ayarlar.
4. Header'e bir TextLabel ekleyin, böylece bir istem görüntülenir.
5. Yeni etiketi seçin, ardından Özellikler penceresinde,
  1. AnchorPoint'u 0.5, 0.5 olarak ayarlayın, böylece yeni etiketin köken noktası kendisinin ortasında olur (etiketin solundan sağa %50, üstten aşağı %50).
  2. BackgroundTransparency'yi 1 olarak ayarlayın, böylece etiketin arka planı tamamen şeffaf olur.
  3. Position'u {0.5, 0},{0.5, 0} olarak ayarlayın, böylece etiket ebeveyn etiketinin ortasına taşınır (ebeveyn etiketin solundan sağa %50, üstten aşağı %50).
  4. Size'ı {0.6, 0},{0.55, 0} olarak ayarlayın, böylece metin alanı ebeveyn etiketinin neredeyse yarısını kaplar (ebeveyn etiketin %60 yatay ve %55 dikey).
  5. Name'i HeaderTextLabel olarak ayarlayın.
  6. FontFace'i Montserrat olarak ayarlayın, böylece geleceğe yönelik estetiğe uyum sağlar.
  7. Weight'i Medium olarak ayarlayın, böylece yazı kalınlaşır.
  8. Text'i BİR BLASTER SEÇİN olarak ayarlayın.
  9. TextScaled'i etkinleştirin.
Blaster butonu konteyneri ve seçim okları için bir konteyner oluşturun.
1. SelectionFrame'ye bir ImageLabel ekleyin.
2. Yeni etiketi seçin, ardından Özellikler penceresinde,
  1. Varsayılan Image değerini kaldırın.
  2. AnchorPoint'u 0.5, 1 olarak ayarlayın, böylece etiketin köken noktası kendisinin alt ortasında olur (etiketin solundan sağa %50, üstten aşağı %100).
  3. BackgroundColor'u 0, 0, 0 olarak ayarlayın, böylece etiket siyah olur.
  4. BackgroundTransparency'yi 0.3 olarak ayarlayın, böylece etiketin opaklığını %30 azaltın ve oyundaki tüm siyah UI öğeleriyle eşleşsin.
  5. Position'u {0.5, 0},{1, 0} olarak ayarlayın, böylece etiket çerçevenin alt ortasında olur (ebeveyn çerçevenin solundan sağa %50, üstten aşağı %100).
  6. Size'ı {1, 0},{0.77, 0} olarak ayarlayın, böylece etiket alanı istemin altındaki alanı kaplar (ebeveyn çerçevenin %100 yatay ve %77 dikey).
3. Konteynerin köşelerini yuvarlayın.
  1. Etikete bir UICorner nesnesi ekleyin.
  2. Yeni köşe nesnesini seçin, ardından Özellikler penceresinde CornerRadius'ı 0.075, 0 olarak ayarlayın, böylece köşeleri yuvarlanır.
Blaster butonları için konteyner oluşturun.
1. Adım 4'teki etikete bir Frame ekleyin.
2. Yeni çerçeveyi seçin, ardından Özellikler penceresinde,1. AnchorPoint değerini 0.5, 0.5 olarak ayarlayın, böylece yeni çerçevenin köşe noktası kendisinin ortasında (çerçevenin solundan sağa %50, üstten alta %50) olur.
  1. BackgroundTransparency değerini 1 olarak ayarlayın, böylece çerçevenin arka planı tamamen şeffaf olur.
  2. Position değerini {0.5, 0},{0.5, 0} olarak ayarlayın, böylece çerçeve ebeveyn etiketinin ortasında (ebeveyn çerçevenin solundan sağa %50, üstten alta %50) olur.
  3. Size değerini {0.85, 0},{0.77, 0} olarak ayarlayın, böylece çerçeve alanı etiketin çoğunu kaplar (ebeveyn etiketinin yatayda %85 ve dikeyde %77'si).
  4. Name değerini Container olarak ayarlayın.
Tüm gelecekteki blaster butonları için boşluk oluşturun.
1. 1. adımdaki çerçeveye bir UIListLayout nesnesi ekleyin.
2. Yeni düzen nesnesini seçin, ardından Properties penceresinde,
  1. Padding değerini 0.035, 0 olarak ayarlayın, böylece tüm gelecekteki butonlar arasında boşluk sağlansın.
  2. FillDirection değerini Horizontal olarak ayarlayın, böylece her buton yan yana görüntülenir.
  3. Hem HorizontalAlignment hem de VerticalAlignment değerlerini Center olarak ayarlayın, böylece her buton birbirinin ortasına hizalanır.
Sol navigasyon butonunu oluşturun.
1. 1. adımdaki ImageLabel içine bir ImageButton nesnesi ekleyin.
2. Yeni butonu seçin, ardından Properties penceresinde,
  1. Varsayılan Image değerini kaldırın.
  2. AnchorPoint değerini 0, 0.5 olarak ayarlayın, böylece yeni butonun köşe noktası kendisinin sol-orta kısmında (butonun solundan sağa %0, üstten alta %50) olur.
  3. BackgroundTransparency değerini 0.15 olarak ayarlayın, böylece butonun seçilebilir olduğunu göstermek için fareyle üzerine gelindiğinde görsel geri bildirim sağlanır.
  4. Position değerini {0.02, 0},{0.5, 0} olarak ayarlayın, böylece butonun ebeveyn konteynerinin sol tarafında boşluk sağlanır (ebeveyn etiketinin solundan sağa %2, üstten alta %50).
  5. Size değerini {0.04, 0},{0.33, 0} olarak ayarlayın, böylece seçim butonu blaster butonlarından çok daha küçük olur (ebeveyn çerçevenin yatayda %4 ve dikeyde %33'ü).
  6. Name değerini NavigationButtonLeft olarak ayarlayın.
3. Butonun köşelerini yuvarlayın.
  1. Butona bir UICorner nesnesi ekleyin.
  2. Yeni köşe nesnesini seçin, ardından Properties penceresinde CornerRadius değerini 0.1, 0 olarak ayarlayın, böylece köşeler yuvarlanır.
4. Butona bir ImageLabel nesnesi ekleyin.
5. Yeni etiketi seçin, ardından Properties penceresinde,
  1. AnchorPoint değerini 0.5, 0.5 olarak ayarlayın, böylece yeni etiketin köşe noktası kendisinin ortasında (etiketin solundan sağa %50, üstten alta %50) olur.
  2. Position değerini {0.45, 0},{0.5, 0} olarak ayarlayın, böylece etiket ebeveyn butonunun ortasına yakın bir konumda olur (ebeveyn butonunun solundan sağa %45, üstten alta %50). Bu değer ortada değil çünkü bir ok, {0.5, 0},{0.5, 0} konumunda butonun ortasında görsel olarak görünmüyor.
  3. Size değerini {0.8, 0},{0.8, 0} olarak ayarlayın, böylece etiket alanı istemin altındaki boşluğu kaplar (ebeveyn çerçevenin yatayda %80 ve dikeyde %80'i).
  4. BackgroundTransparency değerini 1 olarak ayarlayın, böylece resmin arka planı tamamen şeffaf olur.
  5. Image değerini rbxassetid://14309187238 olarak ayarlayın.
  6. ScaleType değerini Fit olarak ayarlayın.
Sağ navigasyon butonunu oluşturun.
1. NavigationButtonLeft'ı kopyalayın.
2. Kopyalanan butonu seçin, ardından Properties penceresinde,
  1. AnchorPoint değerini 1, 0.5 olarak ayarlayın, böylece yeni butonun köşe noktası kendisinin sağ-orta kısmında (butonun solundan sağa %100, üstten alta %50) olur.
  2. Position değerini {0.98, 0},{0.5, 0} olarak ayarlayın, böylece butonun ebeveyn konteynerinin sağ tarafında boşluk sağlanır (ebeveyn etiketinin solundan sağa %98, üstten alta %50).
  3. Name değerini NavigationButtonRight olarak ayarlayın.
3. ImageLabel alt nesnesini seçin.
  1. Rotation değerini 180 olarak ayarlayın, böylece resmi ters çevirin.
  2. Position değerini {0.55, 0},{0.5, 0} olarak ayarlayın, böylece etiket ebeveyn butonunun ortasına yakın bir konumda olur (ebeveyn butonunun solundan sağa %55, üstten alta %50). Bu değer ortada değil çünkü bir ok, {0.5, 0},{0.5, 0} konumunda butonun ortasında görsel olarak görünmüyor.
SELECT butonunu oluşturun.
1. Component içine bir ImageButton ekleyin. Bu işlemin, seçme butonunu SelectionFrame'den ayrı tutarak, bileşenin ana kısmı ile seçme butonu arasında boşluk eklemenizi sağladığını unutmayın.
2. Yeni butonu seçin, ardından Properties penceresinde,
  1. Varsayılan Image değerini kaldırın.
  2. AnchorPoint değerini 0.5, 1 olarak ayarlayın, böylece yeni butonun köşe noktası kendisinin alt-orta kısmında (butonun solundan sağa %50, üstten alta %100) olur.
  3. BackgroundTransparency değerini 0.15 olarak ayarlayın, böylece butonun seçilebilir olduğunu göstermek için fareyle üzerine gelindiğinde görsel geri bildirim sağlanır.
  4. Position değerini {0.5, 0},{0.99, 0} olarak ayarlayın, böylece buton konteynerinin alt ortasına yakın bir konumda olur (ebeveyn çerçevenin solundan sağa %50, üstten alta %99).
  5. Size değerini {0.17, 0},{0.18, 0} olarak ayarlayın, böylece buton blaster butonlarının altında uzanır (ebeveyn çerçevenin yatayda %17 ve dikeyde %18'i).
  6. Name değerini SelectButton olarak ayarlayın.
3. Butonun köşelerini yuvarlayın.
  1. Butona bir UICorner nesnesi ekleyin.
  2. Yeni köşe nesnesini seçin, ardından Properties penceresinde CornerRadius değerini 0.2, 0 olarak ayarlayın, böylece köşeler yuvarlanır.
4. Butona bir TextLabel nesnesi ekleyin, böylece bir eylem çağrısını görüntüleyebilirsiniz.
5. Yeni etiketi seçin, ardından Properties penceresinde,
  1. AnchorPoint değerini 0.5, 0.5 olarak ayarlayın, böylece yeni etiketin köşe noktası kendisinin ortasında (etiketin solundan sağa %50, üstten alta %50) olur.
  2. BackgroundTransparency değerini 1 olarak ayarlayın, böylece etiketin arka planı tamamen şeffaf olur.
  3. Position değerini {0.5, 0},{0.5, 0} olarak ayarlayın, böylece etiket butonun ortasına taşınır (ebeveyn butonunun solundan sağa %50, üstten alta %50).
  4. Size değerini {0.9, 0},{0.55, 0} olarak ayarlayın, böylece metin alanı ebeveyn etiketinin neredeyse tüm genişliğini kaplar (ebeveyn etiketinin yatayda %90 ve dikeyde %55'i).
  5. Name değerini SelectTextLabel olarak ayarlayın.
  6. FontFace değerini Montserrat olarak ayarlayın, böylece geleceğe yönelik estetiğe uyum sağlar.
  7. Weight değerini Medium olarak ayarlayın, böylece yazı tipi kalınlaşır.
  8. Text değerini SELECT olarak ayarlayın.
  9. TextScaled özelliğini etkinleştirin.
Bir blaster buton prefab'ı oluşturun.
1. ReplicatedStorage hizmetinde, UI nesnelerinizi düzenlemek için bir klasör yapısı oluşturun. Örnek, bir Instances klasörü ve içinde bir Guis klasörü kullanır.
2. Guis klasörüne bir ImageButton nesnesi ekleyin.
3. Yeni butonu seçin, ardından Properties penceresinde,
  1. Varsayılan Image değerini kaldırın.
  2. AnchorPoint değerini 0.5, 0.5 olarak ayarlayın, böylece yeni butonun köşe noktası kendisinin ortasında (butonun solundan sağa %50, üstten alta %50) olur.
  3. BackgroundTransparency değerini 0.65 olarak ayarlayın, böylece butonun odaklanmadığını göstermek için görsel geri bildirim sağlanır. 12. adımda yer alan betikler, buton odaklandığında programatik görsel geri bildirim sağlar.
  4. LayoutOrder değerini 2 olarak ayarlayın.
  5. Name değerini BlasterButtonPrefab olarak ayarlayın.
  6. Size değerini {0.8, 0},{0.8, 0} olarak ayarlayın.
  7. ImageTransparency değerini 1 olarak ayarlayın, böylece resim tamamen şeffaf olur.
4. BlasterButtonPrefab içine bir UIAspectRatioConstraint ekleyin, böylece butonun en-boy oranı, oyuncunun ekran boyutuna göre aynı kalır.
5. Butonun köşelerini yuvarlayın.
  1. BlasterButtonPrefab içine bir UICorner nesnesi ekleyin.
  2. UICorner'ı seçin, ardından Properties penceresinde CornerRadius değerini 0.05, 0 olarak ayarlayın, böylece köşeler yuvarlanır.
6. BlasterButtonPrefab içine bir ImageLabel ekleyin.
7. Yeni etiketi seçin, ardından Properties penceresinde,
  1. Varsayılan Image değerini kaldırın.
  2. AnchorPoint değerini 0.5, 0.5 olarak ayarlayın, böylece yeni etiketin köşe noktası kendisinin ortasında (etiketin solundan sağa %50, üstten alta %50) olur.
  3. BackgroundTransparency değerini 1 olarak ayarlayın, böylece etiketin arka planı tamamen şeffaf olur.
  4. Position değerini {0.52, 0},{0.497, 0} olarak ayarlayın, böylece etiket ebeveyn butonunun ortasına yakın bir konumda olur (ebeveyn butonunun solundan sağa %52, üstten alta %49.7). Bu değer ortada değil çünkü blaster, {0.5, 0},{0.5, 0} konumunda butonun ortasında görsel olarak görünmüyor.
  5. Size değerini {1.20, 0},{0.9, 0} olarak ayarlayın, böylece etiket alanı butonun dışına genişler (ebeveyn butonunun yatayda %120 ve dikeyde %90'ı).
  6. ScaleType değerini Fit olarak ayarlayın.
Aşağıdaki ReplicatedStorage betiklerini örnek Laser Tag yer dosyasında referans alın, bu betikler her blaster için butonları programatik olarak görüntüler, bir oyuncu odaklanmamış bir butonu seçtiğinde butonları ölçeklendirir ve bir oyuncunun blaster seçimini avatarına bağlar.

Aşağıdaki betik, blaster seçici oluşturmak için birlikte çalışan bir dizi betik gerektirir. Bir oyuncu oyuna katıldığında veya sağlıkları sıfıra düştüğünde bir tura yeniden doğduğunda, bu betik blaster seçicinin tüm UI öğelerini etkinleştirir, ta ki oyuncu seçim yapana kadar.

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

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

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

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

Artık bir oyuncu oyuna katıldığında veya sağlıkları sıfıra düştüğünde bir tura yeniden doğduğunda, blaster seçici UI görüntülenir, seçim yapabilirler ve her buton beklenildiği gibi çalışır.

Blast butonu

Bir blast butonu, oyuncuların mobil veya tablet cihazları üzerinden oyuna erişirken blaster'larını ateşlemek için kullandıkları bir UI bileşenidir. Örnek lazer tag oyunu, butonun işlevini metin olmadan iletmek için hem bir nişangah hem de bir patlama simgesi içeren bir blaster butonu kullanır.

Örnek Laser Tag oyununda blast butonunu tam olarak yeniden oluşturmak için:

HUDGui ScreenGui nesnesine bir ImageButton ekleyin.
1. Explorer penceresinde, StarterGui hizmetine gidin.
2. HUDGui nesnesinin üzerine gelin, ardından ⊕ simgesine tıklayın. Bir bağlam menüsü görüntülenir.
3. Bağlam menüsünden bir ImageButton ekleyin.
Görüntüleme alanında, butonu bir oyuncunun parmağının doğal olarak dinlendiği yere taşıyın, böylece butonun bir oyuncunun cihazında nasıl görüneceğine dair görsel bir his elde edersiniz, ardından Properties penceresinde,
1. Image değerini rbxassetid://18308375035 olarak ayarlayın, böylece patlama butonu simgesi görüntülensin.
2. PressedImage değerini rbxassetid://18308372558 olarak ayarlayın, böylece bir oyuncu butona bastığında patlama butonu simgesinin ters bir versiyonu görüntülensin.
3. BackgroundTransparency değerini 1 olarak ayarlayın, böylece etiketin arka planı tamamen şeffaf olur.
4. Name değerini BlastButton olarak ayarlayın.
5. ScaleType değerini Fit olarak ayarlayın, böylece resim konteynerine sığar ve çeşitli ekran boyutlarında uzamaz.
6. ImageTransparency değerini 0.3 olarak ayarlayın, böylece etiketin opaklığını azaltarak oyundaki tüm siyah UI öğeleriyle eşleşir.
BlastButton içine bir UIAspectRatioConstraint ekleyin, böylece butonun en-boy oranı, oyuncunun ekran boyutuna göre aynı kalır.
Aşağıdaki ReplicatedStorage betiklerini örnek Laser Tag yer dosyasında referans alın, bu betikler, bir oyuncu dokunmatik girdi kullandığında blaster butonunu programatik olarak görüntüler.

Aşağıdaki betik, ana Heads Up Display (HUD) kurulumunu yapmak için birlikte çalışan bir dizi modül betiği gerektirir, bunlar arasında setupTouchButtonAsync bulunmaktadır. Bir oyuncu bir tura katıldığında ve blaster'ını seçtiğinde, bu betik tüm HUD UI öğelerinin oyuncunun durumu, cihazı ve takım durumu için uygun şekilde görüntülenmesini sağlar.

local Players = game:GetService("Players")

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

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

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

Artık bir oyuncu oyuna katıldığında ve dokunmatik girdi kullandığında, blaster butonu zıplama butonunun üst sağ tarafında görüntülenir.

Oyuncu UI

Wireframe Your Layouts bölümünden görsel hiyerarşi en iyi uygulamalarını takip ederek, bu bölüm, oyuncunun durumuyla ilgili tüm ekran üzerindeki UI öğelerini nasıl uygulayacağınızı öğretir. Bu UI öğeleri grubu, oyuncuların dikkatlerini oyun oynarken dağıtmadan bu çevresel bilgileri anlamalarını sağlamak için ekranın yan taraflarına yerleştirilmiştir.

Oyuncu göstergesi

Bir oyuncu göstergesi, oyuncuların takımlarına ait olduklarını hızlı bir şekilde anlamaları için başvurdukları bir UI bileşenidir, oyuncular takımlarının doğma alanına girdiğinde. Örnek lazer tag oyunu, oyuncunun yeşil veya pembe takımda olup olmadığına bağlı olarak iki versiyon sunar.

Select a Color Theme bölümünden alınan rehberliğe göre, her iki oyuncu göstergesi versiyonu, takım rengini, okunabilirliğini korumak için basit bir simge ile birleştirir. İki tür görsel geri bildirim sağlamak önemlidir çünkü bu, renk körlüğü olan oyuncular için tasarımı erişilebilir tutmaya yardımcı olur.

Örnek Laser Tag oyununda oyuncu göstergesi bileşenini tam olarak yeniden oluşturmak için:

HUDGui ScreenGui nesnesine bir Frame ekleyin.
1. Explorer penceresinde, StarterGui hizmetine gidin.
2. HUDGui nesnesinin üzerine gelin, ardından ⊕ simgesine tıklayın. Bir bağlam menüsü görüntülenir.
3. Bağlam menüsünden bir Frame ekleyin.
Yeni Frame'i seçin, ardından Properties penceresinde,
1. AnchorPoint değerini 0, 1 olarak ayarlayın, böylece çerçevenin köşe noktası kendisinin alt-orta kısmında (çerçevenin solundan sağa %0, üstten alta %100) olur.
2. BackgroundTransparency değerini 1 olarak ayarlayın, böylece etiketin arka planı tamamen şeffaf olur.
3. Name değerini PlayerDisplay olarak ayarlayın.
4. Position değerini {0.02, 0},{0.97, 0} olarak ayarlayın, böylece çerçeve ekranın alt-sol tarafına yakın bir konumda olur.
5. Size değerini {0.23, 0},{0.08, 0} olarak ayarlayın, böylece çerçeveyi hem kısaltıp hem de genişletin.
6. ClipsDescendants özelliğini etkinleştirin, böylece çerçevenin dışına taşan çocuk GuiObjects'ları keser.
Çokgen şekli oluşturun.
1. PlayerDisplay içine bir ImageLabel ekleyin.
2. Yeni etiketi seçin, ardından Properties penceresinde,
  1. Image değerini rbxassetid://14304828123 olarak ayarlayın, böylece trapezoid simgesi görüntülensin.
  2. AnchorPoint değerini 1, 1 olarak ayarlayın, böylece etiketin köşe noktası kendisinin alt-sağ kısmında (etiketin solundan sağa %100, üstten alta %100) olur.
  3. BackgroundTransparency değerini 1 olarak ayarlayın, böylece etiketin arka planı tamamen şeffaf olur.
  4. Name değerini Block olarak ayarlayın.
  5. Position değerini {1,0},{1,0} olarak ayarlayın, böylece etiket çerçevenin sağ tarafına yerleştirilir.
  6. Size değerini {1.858, 0},{0.581, 0} olarak ayarlayın, böylece etiket çerçevenin dışına genişler ve çerçevenin uzunluğunun biraz üzerinde kısalır.
  7. ImageTransparency değerini 0.15 olarak ayarlayın, böylece etiket biraz şeffaf olur.
  8. ScaleType değerini Fit olarak ayarlayın, böylece resim konteynerine sığar ve çeşitli ekran boyutlarında uzamaz.
  1. Block içine bir UIAspectRatioConstraint ekleyin, böylece etiketin ve çocuk UI öğelerinin en-boy oranı, oyuncunun ekran boyutuna göre aynı kalır.
  2. Yeni kısıtlamayı seçin, ardından Properties penceresinde AspectRatio değerini 13.78 olarak ayarlayın.
Oyuncunun portresi için kutu oluşturun.
1. PlayerDisplay içine bir ImageLabel ekleyin.
2. Yeni etiketi seçin, ardından Properties penceresinde,
  1. Image özelliğindeki yer tutucu varlık kimliğini kaldırın. 7. adımda yer alan betikler, oyuncunun portresini programatik olarak resim etiketine ekleyecektir.
  2. AnchorPoint değerini 0, 1 olarak ayarlayın, böylece etiketin köşe noktası kendisinin alt-sol kısmında (etiketin solundan sağa %0, üstten alta %100) olur.
  3. BackgroundColor3 değerini 0, 0, 0 olarak ayarlayın, böylece etiketin arka plan rengi siyah olur.
  4. BackgroundTransparency değerini 0.3 olarak ayarlayın, böylece etiketin opaklığını %30 azaltın ve oyundaki tüm siyah UI öğeleriyle eşleşir.
  5. Name değerini PlayerPortrait olarak ayarlayın.
  6. Position değerini {0.11, 0},{1, 0} olarak ayarlayın, böylece etiket çokgen şeklinin sol tarafına yerleştirilir.
  7. Size değerini {0.23, 0},{1, 0} olarak ayarlayın, böylece etiket küçülür.
  8. ImageTransparency değerini 0.15 olarak ayarlayın, böylece etiket biraz şeffaf olur.
  9. ScaleType değerini Fit olarak ayarlayın, böylece resim konteynerine sığar ve çeşitli ekran boyutlarında uzamaz.
  1. PlayerPortrait içine bir UIAspectRatioConstraint ekleyin, böylece etiketin ve çocuk UI öğelerinin en-boy oranı, oyuncunun ekran boyutuna göre aynı kalır.
  2. PlayerPortrait içine bir UICorner ekleyin, ardından Properties penceresinde CornerRadius değerini 0.05, 0 olarak ayarlayın, böylece köşeler hafifçe yuvarlanır.
Oyuncunun adı için metin etiketini oluşturun.
1. PlayerDisplay içine bir TextLabel nesnesi ekleyin.
2. Yeni etiketi seçin, ardından Properties penceresinde,
  1. AnchorPoint değerini 0, 0.5 olarak ayarlayın, böylece yeni butonun köşe noktası kendisinin sol-orta kısmında (butonun solundan sağa %0, üstten alta %50) olur.
  2. BackgroundTransparency değerini 1 olarak ayarlayın, böylece etiketin arka planı tamamen şeffaf olur.
  3. Name değerini PlayerNameTextLabel olarak ayarlayın.
  4. Position değerini {0.35, 0},{0.72, 0} olarak ayarlayın, böylece etiket konteynerinin sağ tarafına yerleştirilir (ebeveyn etiketinin solundan sağa %35, üstten alta %72).
  5. Size değerini {0.52, 0},{0.3, 0} olarak ayarlayın, böylece metin, çokgen şeklin alanının çoğunu kaplar (ebeveyn çerçevenin yatayda %52 ve dikeyde %30'u).
  6. FontFace değerini Montserrat olarak ayarlayın, böylece geleceğe yönelik estetiğe uyum sağlar.
  7. Weight değerini Bold olarak ayarlayın, böylece yazı tipi kalınlaşır.
  8. Text özelliğindeki yer tutucu metni kaldırın. 7. adımda yer alan betikler, oyuncunun adını programatik olarak metin etiketine ekleyecektir.
  9. TextScaled özelliğini etkinleştirin.
  10. TextXAlignment değerini Left olarak ayarlayın.
Oyuncunun portresinin sol tarafında görüntülenen takım simgelerini ve renklerini oluşturun.
1. PlayerDisplay içine bir Folder ekleyin, ardından adını TeamIcons olarak değiştirin.
2. Yeşil takım simgesini ve rengini oluşturun.
  1. TeamIcons içine bir ImageLabel ekleyin.
  2. Yeni etiketi seçin, ardından Properties penceresinde,
    
    AnchorPoint değerini 0, 1 olarak ayarlayın, böylece etiketin köşe noktası kendisinin alt-sol kısmında (etiketin solundan sağa %0, üstten alta %100) olur.
    
    BackgroundColor3 değerini 88, 218, 171 olarak ayarlayın, böylece etiketin arka plan rengi nane yeşili olur.
    
    Name değerini TeamAIcon olarak ayarlayın.
    
    Position değerini {0, 0},{1, 0} olarak ayarlayın, böylece etiket çerçevenin sol tarafına yerleştirilir.
    
    Size değerini {0.135, 0},{0.58, 0} olarak ayarlayın, böylece etiket oyuncu portresinin sol tarafında küçülür.
    
    ImageTransparency değerini 1 olarak ayarlayın, böylece etiket şeffaf olur.
  1. Bu etiketin yeşil takım için olduğunu takip etmek üzere özel bir niteliği yapılandırın. Bu adım, 7. adımda yer alan betikler için çok önemlidir.
    
    Properties penceresinde, Attributes bölümüne gidin, ardından artı simgesine tıklayın. Bir açılır diyalog görüntülenir.
    
    Name alanına teamColor yazın.
    
    Type açılır menüsünden BrickColor'u seçin.
    
    Save butonuna tıklayın.
    
    Yeni teamColor niteliğini Mint olarak ayarlayın.
  2. TeamAIcon içine bir UIAspectRatioConstraint ekleyin, böylece etiketin ve çocuk UI öğelerinin en-boy oranı, oyuncunun ekran boyutuna göre aynı kalır.
  3. İkonu oluşturun.
    
    TeamAIcon içine bir ImageLabel ekleyin.
    
    Yeni etiketi seçin, ardından Properties penceresinde,
    
    Image değerini rbxassetid://14309678670 olarak ayarlayın, böylece yeşil takım simgesi görüntülensin.
    
    AnchorPoint değerini 0.5, 0.5 olarak ayarlayın, böylece etiketin köşe noktası kendisinin ortasında (etiketin solundan sağa %50, üstten alta %50) olur.
    
    BackgroundTransparency değerini 1 olarak ayarlayın, böylece etiketin arka planı tamamen şeffaf olur.
    
    Name değerini Icon olarak ayarlayın.
    
    Position değerini {0.5, 0},{0.5, 0} olarak ayarlayın, böylece etiket kendisinin ebeveyn etiketinin ortasına yerleştirilir.
    
    Size değerini {0.7, 0},{0.6, 0} olarak ayarlayın, böylece etiket küçülür.
    
    ScaleType değerini Fit olarak ayarlayın, böylece resim konteynerine sığar ve çeşitli ekran boyutlarında uzamaz.
3. Pembe takım simgesini ve rengini oluşturun.
  1. TeamAIcon ve çocuklarını kopyalayın.
  2. Kopyalanan TeamAIcon'ı seçin, ardından Properties penceresinde,
    
    BackgroundColor3 değerini 255, 170, 255 olarak ayarlayın, böylece etiketin arka plan rengi karanfil pembesi olur.
    
    Name değerini TeamBIcon olarak ayarlayın.
    
    teamColor niteliğini Carnation Pink olarak ayarlayın.
    
    TeamBIcon'ın kopyalanan Icon alt nesnesini seçin, ardından Properties penceresinde Image değerini rbxassetid://14309678549 olarak ayarlayın, böylece pembe takım simgesi görüntülensin.
Aşağıdaki ReplicatedStorage betiklerini örnek Laser Tag yer dosyasında referans alın, bu betikler, bir oyuncu aktifken uygun takım rengi ve simgesi ile oyuncu göstergesini programatik olarak görüntüler.

Aşağıdaki betik, ana Heads Up Display (HUD) kurulumunu yapmak için birlikte çalışan bir dizi modül betiği gerektirir, bunlar arasında startSyncingTeamColor, setPlayerName ve setPlayerPortrait bulunmaktadır. Bir oyuncu bir tura katıldığında ve blaster'ını seçtiğinde, bu betik tüm HUD UI öğelerinin oyuncunun durumu, cihazı ve takım durumu için uygun şekilde görüntülenmesini sağlar.

local Players = game:GetService("Players")

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

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

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

Artık bir oyuncu tura katıldığında veya yeniden doğduğunda, oyuncu göstergesi ekranlarının alt-sol tarafında görüntülenir.

Kuvvet alanı ekranı

Kuvvet alanı ekranı, oyunculara bir tura katılırken veya yeniden katılırken düşman takım ateşinden güvende olduklarını bildiren bir UI öğesidir. Örnek lazer tag oyunu, kuvvet alanını simgelemek için yarı şeffaf bir altıgen desen kullanır. Bu tasarım kararı, oyundaki tüm UI için genel geleceğe yönelik sanat stilini pekiştirmenin yanı sıra, oyuncunun durumunu metin veya ek rehberlik olmadan iletmek için de kullanılır.

Örnek Laser Tag oyununda kuvvet alanı ekranını tam olarak yeniden oluşturmak için:

ForceFieldGui ScreenGui nesnesine bir ImageLabel ekleyin.
1. Explorer penceresinde, StarterGui hizmetine gidin.
2. ForceFieldGui nesnesinin üzerine gelin, ardından ⊕ simgesine tıklayın. Bir bağlam menüsü görüntülenir.
3. Bağlam menüsünden bir ImageLabel ekleyin.
Yeni etiketi seçin, ardından Properties penceresinde,
1. Image değerini rbxassetid://14462567888 olarak ayarlayın.
2. BackgroundTransparency değerini 0.8 olarak ayarlayın, böylece kuvvet alanı yarı saydam olur.
3. Size değerini {1, 0},{1, 0} olarak ayarlayın, böylece resim tüm ekranı doldurur (ebeveyn ScreenGui'nin %100'ü yatayda ve %100'ü dikeyde).
4. ScaleType değerini Tile olarak ayarlayın, böylece altıgen tüm ekran boyunca döşenir.
5. TileSize değerini {0, 104},{0, 180} olarak ayarlayın.
Etiketin içine bir UIGradient nesnesi ekleyin.
Yeni gradyan nesnesini seçin, ardından Properties penceresinde,
1. Color değerini, mavi ile başlayıp beyaza dönen ve sonra tekrar maviye dönen bir renk dizisi olarak ayarlayın.
  1. Color değerini 120, 192, 250 olarak ayarlayın, böylece tüm altıgenlere açık mavi tonu uygulanır.
  2. Color özelliğine tıklayın, ardından ⋯ butonuna tıklayın. Bir renk dizisi açılır penceresi görüntülenir.
    
    Renk dizisi içindeki alt eksendeki her üçgen, soldan sağa görüntüdeki o noktadaki özellik değerini belirleyen bir anahtar noktadır.
  3. Renk dizisini sürükleyerek Time değerini 0.05'e getirin, ardından Color özelliğinin yanındaki küçük kareye tıklayarak Colors açılır penceresini açın.
  4. Parlak beyazı seçin, ardından açılır pencereyi kapatın.
  5. Renk dizisini sürükleyerek Time değerini 0.95'e getirin, ardından Colors açılır penceresini tekrar açın ve daha önce seçtiğiniz aynı beyaz rengi seçin.
2. Rotation değerini 225 olarak ayarlayın, böylece renk dizinizin mavi kısmı sol üst ve sağ alt köşelerde görüntülenir.
3. Kuvvet alanının parıldıyormuş gibi görünmesi için Transparency değerini bir sayı dizisi olarak ayarlayın.
  1. Transparency özelliğine tıklayın, ardından ⋯ butonuna tıklayın. Bir sayı dizisi açılır penceresi görüntülenir. Sayı dizisi içindeki her kare, soldan sağa görüntüdeki o noktadaki özellik değerini belirleyen bir anahtar noktadır.
  2. Aşağıdaki zaman ve değer özelliklerini sayı dizisi boyunca ayarlayın:
  - Time = 0, Value = 0.25
  - Time = .101, Value = 0.875
  - Time = .183, Value = 0
  - Time = .3, Value = 1
  - Time = .7, Value = 1
  - Time = 1, Value = 0.9
  1. ImageLabel'i 2. adımdan kopyalayın.
Kopyalanan etiketin içindeki UIGradient nesnesini seçin, ardından Properties penceresinde,
1. Rotation'u -45 olarak ayarlayın, böylece görüntü Y ekseni boyunca neredeyse birbirini yansıtır.
2. Parıltının daha organik görünmesi için Transparency'yi değiştirin.
  1. Transparency özelliğine tıklayın, ardından ⋯ butonuna tıklayın. Bir sayı dizisi açılır.
  2. Üçüncü anahtar çerçeveyi seçin, ardından Delete butonuna tıklayın.
Aşağıdaki ReplicatedStorage betiklerini örnek Laser Tag yer dosyasında referans alın; bu betikler, bir oyuncu bir tura katıldığında veya yeniden katıldığında kuvvet alanı ekranını programlı olarak görüntüler.

Aşağıdaki ReplicatedStorage.ForceFieldClientVisuals istemci betiği, varsayılan ForceField görselini StarterGui.ForceFieldGui ile değiştirir. Oyuncular bir oyuna yüklendiğinde ve Duration özelliği 0'dan büyük olan bir SpawnLocation üzerinde doğduğunda, her oyundaki varsayılan davranış, avatarlarına sağlık kaybetmelerini geçici olarak engelleyen koruyucu mavi bir orb sağlamaktır.

Bu betik, ForceField bir karaktere eklendiğinde dinlemeye başlar, varsayılan birinci şahıs kuvvet alanı görsellerini devre dışı bırakır ve ardından ForceFieldGui ScreenGui nesnesini etkinleştirir. Bu durum, oyuncuların diğer oyuncuların oyuna yeniden doğmasını izlerken üçüncü şahıs görsellerini etkilemez.

Birinci şahıs kuvvet alanı görselleri ekranın çevresinde geleceğe ait altıgen bir ızgara içerir. — Birinci şahıs kuvvet alanı görselleri

Üçüncü şahıs kuvvet alanı görselleri, oyuna doğan oyuncunun etrafında mavi parlayan bir orb içerir. — Üçüncü şahıs kuvvet alanı görselleri

local Players = game:GetService("Players")

local localPlayer = Players.LocalPlayer

local function onCharacterAddedAsync(character: Model)
	local forceField = character:WaitForChild("ForceField", 3)
	if not forceField then
		-- Eğer oyuncu kuvvet alanı devre dışı olan bir doğma noktasında doğarsa
		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)

Artık, bir oyuncunun sağlığı sıfıra ulaştığında, yeniden doğma ekranı görüntülenir ve oyuncu yeniden doğana kadar bu ekran görünür kalır.

Artık GuiObjects için yaygın olanları bildiğinize göre, oyuncular bir maçı kazandığında veya kaybettiğinde ekranda görüntülemek için RoundResultsGui ScreenGui nesnesini ve tüm çocuklarını yeniden oluşturmayı deneyin. Örnek laser tag oyunu .rbxl dosyasını referans olarak kullanabilir veya kendi oyununuzun oyun gereksinimlerini karşılayacak şekilde değerleri ayarlayabilirsiniz.

SurfaceGui nesneleri oluşturun

3D alanda bir parçanın yüzeyinde UI görüntülemek için ve her bir oyuncu için betik mantığına yanıt vermek üzere, SurfaceGui nesnesini, UI'nizi görüntülemek istediğiniz parçaya ReplicatedStorage hizmetinde bağlayabilirsiniz. Bu teknik, UI'nızın ve betik mantığınızın hem sunucuya hem de her oyuncunun istemcisine erişilebilir olmasını sağlar.

SurfaceGui nesneleri, 3D alanda bir parçanın yüzeyinde görüntülenen tüm GuiObjects'i içerir. Örnek laser tag oyunu yalnızca bir SurfaceGui nesnesi içerir: her oyuncunun blaster'ının üzerinde görüntülenen bekleme süresi. Bu nesne, her oyuncunun girdiğine aktif olarak yanıt verdiği için her oyuncu için betik mantığına ihtiyaç duyar ve ne zaman tekrar blaster'ını ateşleyebileceğine dair görsel geri bildirim sağlar.

Bir SurfaceGui nesnesi oluşturmak için:

Explorer penceresinde, ReplicatedStorage hizmetinin üzerine gelin, ardından ⊕ simgesine tıklayın. Bir bağlam menüsü görüntülenir.
Bağlam menüsünden bir Part nesnesi ekleyin.
Parçanın içine bir ScreenGui nesnesi ekleyin.
SurfaceGui'yi çocuk UI öğelerinin bağlamına göre yeniden adlandırın.
3D alanda bir parçanın yüzeyinde görüntülemek istediğiniz her UI öğesi için bu işlemi tekrarlayın.

Bekleme süresi göstergesi

Bekleme süresi göstergesi, oyunculara blaster'larını tekrar ateşleyebilmeleri için ne kadar beklemeleri gerektiğini bildiren bir UI bileşenidir. Bu küçük duraklama, oyuncuların tıkladıkları veya bir düğmeye bastıkları kadar hızlı bir şekilde ateş etmelerini önler; bu, lazer tag oyununda gerçekçi değildir.

Örnek Laser Tag oyununda bekleme süresi göstergesini tam olarak yeniden oluşturmak için:

SurfaceGui nesnenizi tutacak bir parça oluşturun.
1. Explorer penceresinde, Workspace'ın üzerine gelin, ardından ⊕ simgesine tıklayın. Bir bağlam menüsü görüntülenir.
2. Bağlam menüsünden bir blok parçası ekleyin. Bu, sürecin her adımında değişiklikleri görselleştirebilmeniz için parçanın geçici bir konumudur.
Parçayı, bir oyuncunun karakterinin blaster'ını tutacağı konumun etrafında konumlandırın ve yönlendirin, ardından Properties penceresinde,
1. Transparency'yi 1 olarak ayarlayın, böylece parça tamamen şeffaf olur.
2. Name'i CooldownBarPrefab olarak ayarlayın.
3. Size'yi 0.169, 0.027, 2.537 olarak ayarlayın, böylece parçayı blaster'ın uzunluğuna yakın bir boyuta ölçeklendirin.
4. CanCollide ve CanQuery'yi devre dışı bırakın.
CooldownBarPrefab'e bir SurfaceGui ekleyin.
Yeni SurfaceGui'yi seçin, ardından Properties penceresinde,
1. Face'i Top olarak ayarlayın, böylece UI yukarıya bakacak şekilde görüntülenir.
2. LightInfluence ve MaxDistance'ı 0 olarak ayarlayın.
3. PixelsPerStud'ı 200 olarak ayarlayın.
Siyah çubuğu oluşturun.
1. SurfaceGui'ye bir ImageLabel ekleyin.
2. Yeni etiketi seçin, ardından Properties penceresinde,
  1. Varsayılan Image değerini kaldırın.
  2. AnchorPoint'u 0.5, 0.5 olarak ayarlayın, böylece etiketin köken noktası kendisinin ortasında olur (etiketin solundan sağa ve üstünden aşağıya %50).
  3. BackgroundColor3'ü 0,0,0 olarak ayarlayın, böylece etiketin arka plan rengi siyah olur.
  4. BackgroundTransparency'yi 0.4 olarak ayarlayın, böylece etiketin arka planı yarı şeffaf olur.
  5. Position'u {0.5, 0},{0.5, 0} olarak ayarlayın, böylece etiket konteynerinin ortasında olur (ana SurfaceGui'nin solundan sağa ve üstünden aşağıya %50).
  6. Size'ı {1, 0},{1, 0} olarak ayarlayın, böylece etiket parçanın tamamına yayılır (ana SurfaceGui'nin %100'ü).
  7. Name'i Container olarak ayarlayın.
Konteynerin köşelerini yuvarlayın.
1. Container'a bir UICorner nesnesi ekleyin.
2. UICorner'ı seçin, ardından Properties penceresinde CornerRadius'ı 0.15, 0 olarak ayarlayın, böylece köşeleri hafifçe yuvarlanır.
Kırmızı çubuğu oluşturun.
1. Container'a bir ImageLabel ekleyin.
2. Yeni etiketi seçin, ardından Properties penceresinde,
  1. Varsayılan Image değerini kaldırın.
  2. AnchorPoint'u 1, 0.5 olarak ayarlayın, böylece etiketin köken noktası kendisinin sağ ortasında olur (etiketin solundan sağa %100 ve üstünden aşağıya %50).
  3. BackgroundColor3'ü 172, 13, 13 olarak ayarlayın, böylece etiketin arka plan rengi koyu kırmızı olur.
  4. BackgroundTransparency'yi 0.2 olarak ayarlayın, böylece etiketin arka planı hafifçe şeffaf olur.
  5. Name'i Bar olarak ayarlayın.
  6. Position'u {1, 0},{0.5, 0} olarak ayarlayın, böylece etiket konteynerinin sağ ortasında olur (etiketin solundan sağa %100 ve üstünden aşağıya %50).
  7. Size'ı {0, 0},{1, 0} olarak ayarlayın, böylece etiketin boyutunu ana etiketin üstüne uzatır (ana etiketin %0'ı yatayda ve %100'ü dikeyde). Bu adım, 8. adımda bulunan betiklerde gerçekleşen tweening davranışı için de faydalıdır.
Etiketin köşelerini yuvarlayın.
1. Bar'a bir UICorner nesnesi ekleyin.
2. UICorner'ı seçin, ardından Properties penceresinde CornerRadius'ı 0.15, 0 olarak ayarlayın, böylece köşeleri hafifçe yuvarlanır.
CooldownBarPrefab'i ReplicatedStorage'e taşıyın.
1. UI nesnelerinizi düzenlemek için bir klasör yapısı oluşturun. Örnek, bir Instances klasörü ve içinde bir Guis klasörü kullanır.
2. CooldownBarPrefab'i Guis'e taşıyın.
Aşağıdaki ReplicatedStorage betiklerini örnek Laser Tag yer dosyasında referans alın; bu betikler, bekleme süresi göstergesini oyuncunun blaster'ına programlı olarak bağlar ve ardından bir oyuncu blaster'ını ateşlediğinde kırmızı çubuğu animasyonla hareket ettirir.

Aşağıdaki ReplicatedStorage.FirstPersonBlasterVisuals istemci betiği, oyuncunun birinci şahıs blaster'ı için tüm görsel mantığı yönetir. Lazer tag oyununda daha gerçekçi hissettiren blaster görsellerini ayarlamak için birlikte çalışan bir dizi modül betiğine ihtiyaç duyar; bunlar arasında FirstPersonBlasterVisuals.addCooldownBar ve FirstPersonBlasterVisuals.runCooldownBarEffect bulunmaktadır.

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()

	-- Birinci şahıs rig'ini ekleyin
	rigModel = blasterConfig.RigModel:Clone()
	rigModel.Parent = Workspace

	-- Bekleme süresi çubuğunu ekleyin
	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
		-- Bu, bekleme süresi çubuğunu da yok eder çünkü rig'e bağlıdır
		rigModel:Destroy()
		rigModel = nil
	end
end

-- Bir ateşleme gerçekleştiğinde birinci şahıs görsel efektlerini çalıştır
laserBlastedBindableEvent.Event:Connect(function(blastData: BlastData.Type)
	runBlastVisuals(rigModel.PrimaryPart.TipAttachment, blastData, animations.blastAnimation)
	runCooldownBarEffect(cooldownBar)
end)

-- Rig'i kameraya bağlayın, eğer varsa
RunService.RenderStepped:Connect(function()
	if rigModel then
		-- Rig'in CFrame'ini kameranın konumuna ve RIG_OFFSET_FROM_CAMERA'ya göre güncelleyin
		rigModel:PivotTo(currentCamera.CFrame * RIG_OFFSET_FROM_CAMERA)
	end
end)

-- Oyun sırasında blaster türü değiştiğinde görselleri değiştirir
localPlayer:GetAttributeChangedSignal(PlayerAttribute.blasterType):Connect(function()
	local playerState = localPlayer:GetAttribute(PlayerAttribute.playerState)
	if playerState == PlayerState.Playing then
		removeFirstPersonVisuals()
		addFirstPersonVisuals()
	end
end)

-- Oyuncu durumu değiştiğinde görselleri değiştirir
localPlayer:GetAttributeChangedSignal(PlayerAttribute.playerState):Connect(function()
	local newPlayerState = localPlayer:GetAttribute(PlayerAttribute.playerState)
	-- Oyuncu bir blaster seçerken veya lobideyken görselleri kaldır
	if newPlayerState == PlayerState.SelectingBlaster or newPlayerState == PlayerState.InLobby then
		removeFirstPersonVisuals()
	-- Oyuncu blaster'ı seçmeyi bitirdiğinde görselleri geri ekle.
	elseif newPlayerState == PlayerState.Playing then
		addFirstPersonVisuals()
	end
end)

Artık, bir oyuncu blaster'ını ateşlediğinde, bekleme süresi çubuğu animasyonla hareket eder ve oyuncunun tekrar ne zaman ateş edebileceğini iletir.

BillboardGui nesneleri oluşturun

3D alanda UI öğelerini görüntülemek ve her oyuncunun kameralarına her zaman bakan, izleme açılarından bağımsız olarak, oyuncu isimleri veya harita işaretçileri gibi öğeleri görüntülemek için, BasePart veya Attachment nesnesinin çocuğu olarak bir BillboardGui nesnesi oluşturabilirsiniz.

Örnek laser tag oyunu, ReplicatedStorage hizmetinde iki ayrı BillboardGui nesnesi içerir:

OtherPlayerIndicatorGuiPrefab - Her oyuncunun başının üzerinde aktif olduklarında pembe veya yeşil bir daire görüntüler.
TaggedOutIndicatorGuiPrefab - Bir oyuncunun turdan çıkıp yeniden doğma sürecinde olduğunu başının üzerinde görüntüler.

Bir BillboardGui nesnesi oluşturduktan sonra, her konteynerin amacına göre çocuk GuiObjects'ini oluşturabilir ve özelleştirebilirsiniz. Örnek olarak, hemen ardından gelen bölümlerde, örnek laser tag oyununda her iki gösterge türü için UI öğelerini nasıl uygulayacağınızı öğreneceksiniz. Kendi oyununuzun gereksinimlerine göre sürecin herhangi bir kısmını ayarlayabilirsiniz.

Bir BillboardGui nesnesi oluşturmak için:

Explorer penceresinde, bir BasePart veya Attachment üzerine gelin, ardından ⊕ simgesine tıklayın. Bir bağlam menüsü görüntülenir.
Bağlam menüsünden bir BillboardGui nesnesi ekleyin.
BillboardGui'yi çocuk UI öğelerinin bağlamına göre yeniden adlandırın.
Oyuncuların başlarının üzerinde bağlamsal olarak görüntülemek istediğiniz her UI öğesi için bu işlemi tekrarlayın.

Takım göstergesi

Takım göstergesi, oyunculara turda diğer oyuncuların hangi takıma ait olduğunu bildiren bir UI öğesidir, böylece müttefiklerini ve düşman takım üyelerini kolayca ayırt edebilirler. Bu bilgi önemlidir çünkü birinci şahıs nişancı oyunlarının oyun yapısı, oyuncuların savaş alanlarında hızlı stratejik kararlar vermelerini gerektirir, böylece bir oyuncu etiketlenip maçı kaybetmeden önce hedeflerine geçebilirler.

Örnek Laser Tag oyununda takım göstergesini tam olarak yeniden oluşturmak için:

Geçici bir rig'e bir BillboardGui nesnesi ekleyin.
1. Araç çubuğunun Home veya Avatar sekmesinden Character'a tıklayın.
2. Mevcut seçeneklerden birini seçin. Örnek, bir R15 rig türü, bir dişi vücut şekli ve bir Rthro avatarı kullanır. Rig, hem 3D görünümde hem de Explorer penceresinde Rig adı altında görüntülenir.
3. Explorer penceresinde, rig'in çocuk Head ağacına gidin, ardından ⊕ simgesine tıklayın. Bir bağlam menüsü görüntülenir.
4. Bağlam menüsünden bir BillboardGui ekleyin.
Yeni BillboardGui'yi seçin, ardından Properties penceresinde,
1. LightInfluence'u 0 olarak ayarlayın, böylece çevresel ışık göstergenin rengini etkilemez.
2. Name'i OtherPlayerIndicatorPrefab olarak ayarlayın.
3. Size'ı {0, 10},{0, 10} olarak ayarlayın, böylece etiket önemli ölçüde daha küçük olur.
4. StudsOffsetWorldSpace'i 0, 4, 0 olarak ayarlayın, böylece rig'in başının üzerinde konumlanır.
OtherPlayerIndicatorPrefab'e bir Frame nesnesi ekleyin.
Yeni çerçeveyi seçin, ardından Properties penceresinde,
1. AnchorPoint'u 0.5, 0.5 olarak ayarlayın, böylece çerçevenin köken noktası kendisinin ortasında olur (çerçevenin solundan sağa ve üstünden aşağıya %50).
2. BackgroundColor3'ü 255, 3, 0 olarak ayarlayın, böylece çerçevenin arka plan rengi kırmızı olur.
3. Position'u {0.5, 0},{0.5, 0} olarak ayarlayın, böylece çerçeve konteynerinin ortasında olur (ana BillboardGui'nin solundan sağa ve üstünden aşağıya %50).
4. Size'ı {1, -2},{1, -2} olarak ayarlayın, böylece çerçeve BillboardGui'nin yüzey alanına kısılır.
Frame'e bir UICorner nesnesi ekleyin, böylece köşeleri tamamen yuvarlanır.
Frame'e bir UIStroke nesnesi ekleyin, böylece göstergenin dairesini çerçeveler.
OtherPlayerIndicatorPrefab'i ReplicatedStorage'e taşıyın.
Aşağıdaki ReplicatedStorage betiğini örnek Laser Tag 1A yer dosyasında referans alın; bu betik, aktif bir turda her oyuncu için takım göstergesini programlı olarak görüntüler, eğer düşman takımda değillerse ve engellenmemişlerse.

Aşağıdaki ReplicatedStorage.OtherPlayerIndicatorGuiSetup betiği, oyuncular aktif bir tura katıldıklarında çalışır. addIndicatorToCharacter() fonksiyonunu çağırarak takım göstergesini ekler; bu fonksiyon, turda yer alan her oyuncu karakterinin Head nesnesini bulur. Eğer zaten bir takım göstergesi yoksa, betik otherPlayerIndicatorPrefab UI'sini karakterin Head'ine kopyalar ve takım göstergesi rengini takım rengini ayarlar.

Diğer oyuncular aynı takımda ise, takım göstergesi her zaman görüntülenir, 3D alanda bir nesne onları engellese bile; diğer oyuncular düşman takımda ise, takım göstergesi yalnızca 3D alanda onları engelleyen bir nesne yoksa görüntülenir.

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

		-- Yalnızca tura katılan oyunculara göstergeler ekleyin
		if not otherPlayer.Team then
			return
		end

		-- Tekrar eden göstergeleri önleyin, yalnızca yoksa yeni bir tane oluşturun
		local gui = otherHead:FindFirstChild(otherPlayerIndicatorPrefab.Name)
		if not gui then
			gui = otherPlayerIndicatorPrefab:Clone()
			gui.Frame.BackgroundColor3 = otherPlayer.TeamColor.Color
			gui.Parent = otherHead
		end

		-- Göstergenin her zaman üstte olması yalnızca oyuncu dostsa

		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()

Artık, bir oyuncu aktif bir turda olduğunda, takım göstergeleri diğer oyuncuların başlarının üzerinde görüntülenir; eğer düşman takımda değillerse ve bir nesne arkasında değillerse.

Etiketlenmiş gösterge

Etiketlenmiş gösterge, diğer oyuncuların artık aktif olmadığını ve yeniden doğma sürecinde olduklarını bildiren bir UI öğesidir. Bu bilgi önemlidir çünkü birinci şahıs nişancı oyunlarının oyun yapısı, oyuncuların bir oyuncuyu etiketlediklerinde hemen bir sonraki hedeflerine geçmelerini gerektirir; böylece arenada çok uzun süre aynı konumda kalarak savunmasız hale gelmezler.

Örnek Laser Tag oyununda etiketlenmiş göstergeleri tam olarak yeniden oluşturmak için:

Geçici bir rig'e bir BillboardGui nesnesi ekleyin, böylece sürecin her adımında değişiklikleri görselleştirebilirsiniz.
1. Araç çubuğunun Home veya Avatar sekmesinden Character'a tıklayın.
2. Mevcut seçeneklerden birini seçin. Örnek, bir R15 rig türü, bir erkek vücut şekli ve bir Rthro avatarı kullanır. Rig, hem 3D görünümde hem de Explorer penceresinde Rig adı altında görüntülenir.
3. Explorer penceresinde, rig'in çocuk Head ağacına gidin, ardından ⊕ simgesine tıklayın. Bir bağlam menüsü görüntülenir.
4. Bağlam menüsünden bir BillboardGui ekleyin.
Yeni BillboardGui'yi seçin, ardından Properties penceresinde,
1. LightInfluence'u 0 olarak ayarlayın, böylece çevresel ışık göstergenin rengini etkilemez.
2. Name'i TaggedOutIndicatorGuiPrefab olarak ayarlayın.
3. Size'ı {3, 0},{0.5, 0} olarak ayarlayın, böylece etiket için alanı genişletin.
4. StudsOffset'i 0, 3.25, 0 olarak ayarlayın, böylece bir oyuncunun başının üzerinde konumlanır.
TaggedOutIndicatorGuiPrefab'e bir ImageLabel nesnesi ekleyin.
Yeni etiketi seçin, ardından Properties penceresinde,
1. AnchorPoint'u 0.5, 0.5 olarak ayarlayın, böylece etiketin köken noktası kendisinin ortasında olur (etiketin solundan sağa ve üstünden aşağıya %50).
2. BackgroundTransparency'yi 1 olarak ayarlayın, böylece etiketin arka planı tamamen şeffaf olur.
3. Name'i Frame olarak ayarlayın.
4. Position'u {0.5, 0},{0.5, 0} olarak ayarlayın, böylece etiket konteynerinin ortasında olur (50% soldan sağa ve 50% üstten aşağıya).
5. Size'ı {1, 0},{1, 0} olarak ayarlayın, böylece etiket BillboardGui'nin tamamına yayılır (100% yatayda ve 100% dikeyde).
6. Image'i rbxassetid://14304826985 olarak ayarlayın, böylece görüntü çok yönlü bir solma olur.
7. ImageColor'u 245, 46, 46 olarak ayarlayın, böylece etiketin rengi kırmızı olur.
Performansı artırmak için, görüntü varlığını atlayabilir ve bunun yerine özel bir şeffaflık sayı dizisi ile bir UIGradient nesnesi kullanabilirsiniz. Bu solma tekniği hakkında daha fazla bilgi için UI Görünüm Modifikatörleri - Gradient bölümüne bakın.
Frame'e bir TextLabel nesnesi ekleyin.
Yeni etiketi seçin, ardından Properties penceresinde,
1. AnchorPoint'u 0.5, 0.5 olarak ayarlayın, böylece etiketin köken noktası kendisinin ortasında olur (etiketin solundan sağa ve üstünden aşağıya %50).
2. BackgroundTransparency'yi 1 olarak ayarlayın, böylece etiketin arka planı tamamen şeffaf olur.
3. Name'i BodyTextLabel olarak ayarlayın.
4. Position'u {0.5, 0},{0.5, 0} olarak ayarlayın, böylece etiket konteynerinin ortasında olur (50% soldan sağa ve 50% üstten aşağıya).
5. Size'ı {0.85, 0},{0.7, 0} olarak ayarlayın, böylece metin solma alanının çoğunu kaplayabilir (etiketin %85'i yatayda ve %70'i dikeyde).
6. FontFace'i Montserrat olarak ayarlayın, böylece geleceğe uygun bir estetik sağlar.
7. Weight'i Bold olarak ayarlayın, böylece yazı kalınlaşır.
8. Text'i TAGGED olarak ayarlayın.
9. TextColor3'ü 255, 255, 255 olarak ayarlayın, böylece metin beyaz olur.
10. TextScaled'i etkinleştirin.
TaggedOutIndicatorGuiPrefab'i ReplicatedStorage'e taşıyın.
Aşağıdaki ServerScriptService betiklerini örnek Laser Tag 1A yer dosyasında referans alın; bu betikler, bir oyuncu yeniden doğarken etiketlenmiş göstergenin görünmesini programlı olarak sağlar.

Aşağıdaki ServerScriptService.SetupHumanoid sunucu betiği, bir oyuncu oyunu yüklediği anda çalışır. Bu, bir oyuncunun karakteri veri modeline eklendiğinde, setupHumanoidAsync'in Humanoid ile çağrılmasını sağlar.

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)
	-- Eğer oyuncunun zaten bir karakteri varsa onCharacterAdded'i çağır
	if player.Character then
		onCharacterAdded(player, player.Character)
	end
	-- Bu oyuncu için tüm gelecekteki karakter doğumları için onCharacterAdded'i çağır
	player.CharacterAdded:Connect(function(character: Model)
		onCharacterAdded(player, character)
	end)
end

-- Oyunda zaten bulunan herhangi bir oyuncu için onPlayerAdded'i çağır
for _, player in Players:GetPlayers() do
	onPlayerAdded(player)
end
-- Tüm gelecekteki oyuncular için onPlayerAdded'i çağır
Players.PlayerAdded:Connect(onPlayerAdded)

Artık, bir oyuncunun sağlığı sıfıra ulaştığında, dışarı alındı göstergesi başlarının üzerinde görünür hale gelir ve yeniden doğana kadar orada kalır.

Kullanıcı Arayüzü Tasarım Müfredatını tamamladığınız için tebrikler! Artık bir sanat tarzı oluşturma, düzenlerinizi tel kafesleme ve tasarımlarınızı Stüdyo'da baştan sona uygulama deneyiminiz var, projenizi yeni UI ve işlevsellik ile genişletebilir veya örnek lazer tag oyununun genel organizasyonu ve ana uygulama detayları hakkında bilgi veren Oyun Oynama Betikleme Müfredatı gibi ek öğretici müfredatları takip edebilirsiniz. İyi yaratmalar!