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

Tasarımlarınızı uygulamak, hem yerleşik hem de özel UI öğeleri ile stüdyoda tel çerçevenizi oluşturma sürecidir ve bu, UI'nizi bağlamsal olarak tetikleyen betikler ile yapılmaktadır. Bu eğitimin heyecan verici adımı, tüm tasarımlarınızı ve sıkı çalışmanızı bir araya getirdiğiniz, tamamlanmış ve oyuncu etkileşimine hazır bütünleşik bir iş akışını gördüğünüz yerdir.

örnek lazer tag deneyimi .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 ve şunları içeren rehberlik sağlar:

Örnek lazer tag deneyiminin UI bileşenlerini yeniden oluşturmak için UI varlık kütüphanesinden varlık kimliklerini alma.
UI'nizin farklı ekranlarda ve en boy oranlarında nasıl göründüğünü görmek için Studio'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, kendi projelerinize uygulayarak oyuncuların deneyimleriniz içinde neler yapabileceğini yönlendiren heyecan verici UI bileşenleri oluşturabilirsiniz.

Bu bölümdeki eğitimin 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 sürer veya daha kısa sürer. Sağlanan değerleri kullanmak istemiyorsanız, her UI öğesini kendi deneyiminizin spesifikasyonlarına uyduracak şekilde ayarlayabilirsiniz veya eğitimin geri kalanında örneği kullanabilirsiniz.

Varlık kütüphanesini al

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

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

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

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

**Tersten Trapez**
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

**Hedefleme İkonu**
rbxassetid://14400935532

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

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

Varlık kütüphanesini envanterinizden deneyiminize 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 düğmesine 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 düğmesine 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çılır menüye tıklayın, ardından Benim Paketlerim sıralamasını seçin.
Nihai Ekran UI Bileşenleri karosuna tıklayın, ardından Gezgin penceresinde Tamamlanmış Bileşenler'i seçin ve bunları StarterGui hizmetine sürükleyin. Artık herhangi bir nihai bileşeni tasarımına atıfta bulunmak için etkinleştirebilirsiniz.

Cihazları taklit et

Stüdyonun Cihaz Emülatörü, oyuncuların UI'nizi çeşitli cihazlarda nasıl göreceğini ve etkileşimde bulunacağı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 deneyiminize erişmek için kullandığı ekranların en boy oranını yansıtmaz ve UI'nizin her cihazda hem okunabilir hem de erişilebilir olması önemlidir.

Örneğin, UI'nizi farklı ekran boyutlarında test etmezseniz, büyük ekranlara sahip oyuncular metninizi okuyamayabilir veya simgelerinizi anlayamayabilir ve küçük ekranlara sahip oyuncular, UI bileşenlerinizin ekranda çok fazla alan 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ü etkinleştirin.
Çözünürlük açılır menüsünden Gerçek Çözünürlük'ü seçin. Bu, taklit ettiğiniz cihazda UI bileşenlerinizin 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 nesnesi oluşturabilirsiniz StarterGui hizmetinde. ScreenGui nesneleri, ekrandaki UI için ana konteynerlerdir ve StarterGui hizmeti, içeriklerini bir oyuncu bir deneyime girdiğinde her oyuncunun PlayerGui konteynerine kopyalar.

Oyun süresi boyunca bağlamsal olarak UI öğelerinin gruplarını düzenlemek ve görüntülemek için birden fazla ScreenGui nesnesi oluşturabilirsiniz. Örneğin, örnek lazer tag deneyimi, başlangıçta devre dışı olan beş ayrı ScreenGui nesnesi içerir; oyuncuların deneyiminin ana kullanıcı akışı sırasında farklı koşulları karşıladıklarında etkinleşir:

HUDGui - Oyuncular bir turda aktifken, deneyimin oyununa dair ana bilgileri gösterir, örneğin hedef ve her takımın toplam puanları.
PickABlasterGui - Oyuncular bir tura başladığında veya yeniden katıldığında tüm blaster seçimlerini gösterir.
ForceFieldGui - Oyuncular bir blaster seçerken ve geçici olarak dokunulmazken altıgen bir ızgara gösterir.
OutStateGui - Oyuncular etiketlendiğinde ekranın etrafında koyu bir çerçeve gösterir.
RoundResultsGui - Ekranın üzerinde bir karartma gösterir ve hangi takımın turu kazandığını gösterir.

ScreenGui nesnesi oluşturduktan sonra, her konteynerin amacına göre çocuk GuiObjects'ini oluşturabilir ve özelleştirebilirsiniz. Demonstrasyon amaçlı olarak, takip eden bölümlerde, oyuncuların örnek lazer tag deneyiminde başarılı olmak için bilmesi gereken üç bilgi kategorisini uygulamayı öğreneceksiniz. Sürecin herhangi bir bölümünü kendi deneyiminizin spesifikasyonlarına uygun hale getirmek için ayarlayabilirsiniz.

ScreenGui nesnesi oluşturmak için:

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

Hedef UI

Görsel hiyerarşi en iyi uygulamalarını takip ederek, bu bölüm deneyimin hedefine ilişkin tüm ekrandaki UI öğelerini nasıl uygulayacağınızı öğretmektedir. Bu UI öğelerinin grubu ekranın üst kısmında yer alır çünkü hedef ve her takımın puanları oyunu kazanma açısından en fazla öneme sahiptir.

Örneğin, örnek, oyuncuların bir turda başarılı olmak için ne yapmaları gerektiğini bilmek için referans aldıkları bir hedef UI bileşeni sağlar. Oyuncular düşman takım üyelerini etiketleyip puan kazanırken, bu bileşen her takımın puanını üstteki ipucunun içinde toplamda karşı genel hedefe karşı takip eder. Tüm istemci ve sunucu betiklerinin puanları takip etmeye nasıl birlikte çalıştığını yüksek düzeyde incelemek için Gameplay Scripting Curriculum'daki Puanları Takip Et kısmına bakın.

Örnek Lazer Tag deneyiminde 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. Explorer penceresinde, StarterGui hizmetine gidin.
  2. Çocuk HUDGui nesnesinin üzerine gelin, ardından ⊕ simgesine tıklayın. Bir bağlamsal menü açılır.
  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ök noktası kendisinin üst orta kısmında (çerçevenin solundan sağa %50 ve çerçevenin üstünden aşağı %0) olur.
  2. BackgroundTransparency'yi 1 olarak ayarlayın, böylece çerçevenin arka planı tamamen saydam olur.
  3. Position'u {0.5, 0},{0.03, 0} olarak ayarlayın, böylece çerçeve ekranın üst ortasına (ekranın solundan sağa %50 ve ekranın üstünden aşağı %3) yerleştirilir; böylece biraz tampon alan olur.
  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 kısmını kaplar ve oyuncuların dikkatini çeker (yatayda %50 ve dikeyde %13).
  5. Name'i Objective olarak ayarlayın.
3. (İsteğe Bağlı) Objective içine bir UIAspectRatioConstraint ekleyin, böylece etiketin en boy oranı oyuncunun ekran boyutuna göre aynı kalır. Örnek, UIAspectRatioConstraint.AspectRatio özelliğini 7 olarak ayarlamıştır.
Hedefin ipucu öğeleri için bir konteyner oluşturun.
1. Objective içine 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ök noktası kendisinin üst orta kısmında (çerçevenin solundan sağa %50 ve çerçevenin üstünden aşağı %0) olur.
  2. BackgroundTransparency'yi 1 olarak ayarlayın, böylece çerçevenin arka planı tamamen saydam olur.
  3. Position'u {0.5, 0},{0, 0} olarak ayarlayın, böylece çerçeve konteynerin ortasında (parent çerçevenin solundan sağa %50 ve parent çerçevenin üstünden aşağı %0) yerleştirilir.
  4. Size'ı {1, 0},{0.67, 0} olarak ayarlayın, böylece seçim UI bileşenleri toplamda konteynerin daha fazlasını kaplar (parent çerçevenin tamamının %100'ü ve %67'si).
  5. Name'i ObjectiveDisplay olarak ayarlayın.
Başlık öğelerini oluşturun.
1. ObjectiveDisplay içine 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ök noktası kendisinin alt orta kısmında (etiketin solundan sağa %50 ve etiketin üstünden aşağı %100) olur.
  2. BackgroundTransparency'yi 1 olarak ayarlayın, böylece etiketin arka planı tamamen saydam olur.
  3. LayoutOrder'u -1 olarak ayarlayın.
  4. Position'u {0.5, 0},{0.34, 0} olarak ayarlayın, böylece etiketin üst üst orta kısmında yer alır (parent çerçevenin solundan sağa %50 ve parent çerçevenin üstünden aşağı %34).
  5. Size'ı {0.46, 0},{0.34, 0} olarak ayarlayın, böylece ipucu alanı neredeyse çerçevenin yarısına kadar genişlesin (parent çerçevenin %46'sı ve %34'sü).
  6. Name'i Header olarak ayarlayın.
  7. Image'yi rbxassetid://14304828123 olarak ayarlayarak bir trapez göstermesini sağlayın.
  8. ImageTransparency'yi 0.15 olarak ayarlayarak başlığı yarı saydam hale getirin.
3. (İsteğe Bağlı) ImageLabel içine 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 ayarlamıştır.
4. Header içine bir TextLabel ekleyin, böylece bir başlık gösterir.
5. Yeni etiketi seçin, ardından Özellikler penceresinde,
  1. AnchorPoint'u 0.5, 0.5 olarak ayarlayın, böylece yeni etiketin kök noktası kendisinin ortasında (etiketin solundan sağa %50 ve etiketin üstünden aşağı %50) olur.
  2. BackgroundTransparency'yi 1 olarak ayarlayın, böylece etiketin arka planı tamamen saydam olur.
  3. Position'u {0.5, 0},{0.5, 0} olarak ayarlayın, böylece etiketin ana etiketinin ortasına taşınır (parent etiketinin solundan sağa %50 ve parent etiketinin üstünden aşağı %50).
  4. Size'ı {0.62, 0},{0.55, 0} olarak ayarlayın, böylece metin alanı parent etiketin neredeyse yarısına genişlesin (parent etiketinin %62'si ve %55'i).
  5. Name'i HeaderTextLabel olarak ayarlayın.
  6. FontFace'yi Montserrat olarak ayarlayın, böylece geleceğe dönük estetiğe uygun olur.
  7. Weight'i Medium olarak ayarlayın, böylece fontu kalınlaştırın.
  8. Text'i HEDEF olarak ayarlayın.
  9. TextScaled'i etkinleştirin.
İpucu öğelerini oluşturun.
1. ObjectiveDisplay içine 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ök noktası kendisinin alt orta kısmında (etiketin solundan sağa %50 ve etiketin üstünden aşağı %100) olur.
  2. BackgroundTransparency'yi 1 olarak ayarlayın, böylece etiketin arka planı tamamen saydam olur.
  3. Position'u {0.5, 0},{1, 0} olarak ayarlayın, böylece etiket parent çerçevenin alt ortasında yer alır (parent çerçevenin solundan sağa %50 ve parent çerçevenin üstünden aşağı %100).
  4. Size'ı {0.89, 0},{0.66, 0} olarak ayarlayın, böylece metin alanı neredeyse parent çerçevenin tam genişliğini kaplar (parent çerçevenin %89'u ve %66'sı).
  5. Name'i Body olarak ayarlayın.
  6. Image'yi rbxassetid://14304827265 olarak ayarlayarak tersten trapez göstermesini sağlayın.
  7. ImageColor3'ü 0, 0, 0 olarak ayarlayarak görüntüyü siyah tintleyin.
  8. ImageTransparency'yi 0.3 olarak ayarlayarak başlığı yarı saydam hale getirin.
3. (İsteğe Bağlı) ImageLabel içine 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 ayarlamıştır.
4. Body içine bir TextLabel ekleyin, böylece bir ipucu gösterir.
5. Yeni etiketi seçin, ardından Özellikler penceresinde,
  1. AnchorPoint'u 0.5, 0.5 olarak ayarlayın, böylece yeni etiketin kök noktası kendisinin ortasında (etiketin solundan sağa %50 ve etiketin üstünden aşağı %50) olur.
  2. BackgroundTransparency'yi 1 olarak ayarlayın, böylece etiketin arka planı tamamen saydam olur.
  3. Position'u {0.5, 0},{0.5, 0} olarak ayarlayın, böylece etiketin ana etiketinin ortasına taşınır (parent etiketinin solundan sağa %50 ve parent etiketinin üstünden aşağı %50).
  4. Size'ı {0.85, 0},{0.39, 0} olarak ayarlayın, böylece metin alanı parent etiketin yarısından fazlasına genişlesin (parent etiketinin %85'i ve %39'u).
  5. Name'i BodyTextLabel olarak ayarlayın.
  6. FontFace'yi Montserrat olarak ayarlayın, böylece geleceğe dönük estetiğe uygun olur.
  7. Weight'i Medium olarak ayarlayın, böylece fontu kalınlaştırın.
  8. TextColor3'ü 255, 255, 255 olarak ayarlayarak metni karanlık arka plana karşı beyaz hale getirin.
  9. Text'i Rakip oyuncuları etiketleyerek puan kazan! İlk %d puana ulaşan takım kazanır. olarak ayarlayın.
  10. TextScaled'i etkinleştirin.
Hedefin takım sayıcıları için bir konteyner oluşturun.
1. Objective içine 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ök noktası kendisinin alt orta kısmında (çerçevenin solundan sağa %50 ve çerçevenin üstünden aşağı %100) olur.
  2. BackgroundTransparency'yi 1 olarak ayarlayın, böylece çerçevenin arka planı tamamen saydam olur.
  3. Position'u {0.5, 0},{1, 0} olarak ayarlayın, böylece çerçeve konteynerin alt ortasında yer alır (parent çerçevenin solundan sağa %50 ve parent çerçevenin üstünden aşağı %100).
  4. Size'ı {0.44, 0},{0.27, 0} olarak ayarlayın; böylece seçim UI bileşenleri konteynerin neredeyse yarısından daha azını kaplar (parent çerçevenin %44'ü ve %27'si).
  5. Name'i TeamPointCounter olarak ayarlayın.
Takım sayaçları için boşluk oluşturun.
1. Yukarıdaki 5. adımda çerçeve içine bir UIListLayout nesnesi ekleyin.
2. UIListLayout nesnesini seçin, ardından Özellikler penceresinde,
  1. Padding'i 0.025, 0 olarak ayarlayarak gelecekteki takım sayaçları arasında boşluk sağlayın.
  2. FillDirection'i Yatay olarak ayarlayarak her takım sayacının yan yana görüntülenmesini sağlayın.
  3. HorizontalAlignment'i Merkez olarak ayarlayarak her takım sayacını birbirinin ortasına hizalayın.
Yeşil takım sayaç öğelerini oluşturun.
1. TeamPointCounter içine bir ImageLabel ekleyin.
2. Yeni ImageLabel'i seçin, ardından Özellikler penceresinde,
  1. BackgroundTransparency'yi 1 olarak ayarlayarak etiketin arka planını tamamen saydam yapın.
  2. Position'u {0.5, 0},{1, 0} olarak ayarlayarak etiketin parent çerçevenin alt ortasında yer almasını sağlayın (parent çerçevenin solundan sağa %50 ve parent çerçevenin üstünden aşağı %100).
  3. Size'ı {0.5, 0},{1, 0} olarak ayarlayarak etiketin parent çerçevenin yarı genişliğini kaplamasını sağlayın (parent çerçevenin %50'si ve %100'ü).
  4. Name'yi TeamACounter olarak ayarlayın.
  5. Image'yi rbxassetid://14304826831 olarak ayarlayarak yönlendirilmiş bir fade gösterecek şekilde ayarlayın.
  6. ImageColor3'ü 88, 218, 171 olarak ayarlayarak görüntüyü nane yeşili yapın.
3. Bu etiketin yeşil takım için olduğunu izlemek için özel bir öznitelik oluşturun.
  1. Özellikler penceresinde, Öznitelikler bölümüne gidin, ardından artı simgesine tıklayın. Bir açılır diyalog gözükecektir.
  2. Ad alanına teamColor yazın.
  3. Tür açılır menüsünde BrickColor'u seçin.
  4. Kaydet düğmesine tıklayın.
  5. Yeni teamColor özniteliğini Mint olarak ayarlayın.
4. TeamACounter içine bir TextLabel ekleyin, böylece bir ipucu gösterir.
5. Yeni etiketi seçin, ardından Özellikler penceresinde,
  1. AnchorPoint'u 1, 0.5 olarak ayarlayın; böylece yeni etiketin kök noktası, kendisinin sağ ortasında olur (etiketin solundan sağa %100 ve etiketin üstünden aşağı %50).
  2. BackgroundTransparency'yi 1 olarak ayarlayın, böylece etiketin arka planı tamamen saydam olur.
  3. Position'u {0.95, 0},{0.5, 0} olarak ayarlayın, böylece etiketi parent etiketinin sağına taşırım (parent etiketinin solundan sağa %95 ve parent etiketinin üstünden aşağı %50).
  4. Size'ı {0.85, 0},{0.39, 0} olarak ayarlayın, böylece metin alanı, parent etiketin yarısından fazlasına genişlesin (parent etiketinin %85'i ve %39'u).
  5. FontFace'yi Montserrat olarak ayarlayın, böylece geleceğe dönük estetiğe uygun olur.
  6. Weight'i Kalın olarak ayarlayarak fontu kalınlaştırın.
  7. TextColor3'ü 255, 255, 255 olarak ayarlayarak metni karanlık arka plana karşı beyaz yapın.
  8. Text'i - olarak ayarlayın.
  9. TextScaled'i etkinleştirin.
  10. TextXAlignment'i Sağ olarak ayarlayın.
6. TextLabel içine bir UIStroke nesnesi ekleyin; ardından Özellikler penceresinde Color'u 8, 78, 52 olarak ayarlayıp, dash'i koyu yeşil bir kontur ile dış çizin.
Pembe takım sayaç öğelerini oluşturun.
1. TeamAICounter ve çocuklarını kopyalayın.
2. Kopyalanan TeamACounter'ı seçin, ardından Özellikler penceresinde,
  1. Name'yi TeamBCounter olarak ayarlayın.
  2. Image'yi rbxassetid://14305849451 olarak ayarlayarak yönlendirilmiş bir fade'yi ters yönde görüntüleyecek şekilde ayarlayın.
  3. ImageColor3'ü 255, 170, 255 olarak ayarlayarak görüntüyü karanlık pembe yapın.
  4. teamColor özniteliğini Carnation Pink olarak ayarlayın.
3. Kopyalanan TextLabel'in TeamBCounter içindeki çocukunu seçin; ardından Özellikler penceresinde,
  1. AnchorPoint'u 0, 0.5 olarak ayarlayın; böylece yeni etiket her zaman etiketin sol ortasında olacak şekilde ayarlanır (etiketin solundan sağa %0 ve etiketin üstünden aşağı %50).
  2. Position'u {0.05, 0},{0.5, 0} olarak ayarlayın, böylece etiketi parent etiketinin soluna taşır (parent etiketinin solundan sağa %5 ve parent etiketinin üstünden aşağı %50).
  3. TextXAlignment'i Sol olarak ayarlayın.
4. Kopyalanan UIStroke içindeki TeamBCounter çocuğunu seçin, ardından Özellikler penceresinde, Color'u 158, 18, 94 olarak ayarlayıp, dash'i koyu pembe bir kontur ile dış çizin.
Aşağıdaki ReplicatedStorage betiklerini örnek Lazer Tag yer dosyasına atıfta bulunarak, programlı olarak hedef ipucunu güncelleyip takım puanlarını takip edebilir.

Aşağıdaki betik, ana Heads Up Display (HUD) kurulumunu yapmak için birlikte çalışan bir dizi modül betiği gerektirir; setObjective ve startSyncingTeamPoints dahil. 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ülendiğinden emin olur.


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çtikten sonra, hedef UI, ekranlarının üst kısmında görüntülenir ve her takımın puanlarını takip eder.

Blaster UI

Görsel hiyerarşi en iyi uygulamalarını takip ederek, bu bölüm size oyuncunun blaster'ına ilişkin ekran üzerindeki tüm UI öğelerini nasıl uygulayacağınızı öğretmektedir. Bu UI öğeleri grubu ekranın merkezinde geniş bir alan kaplar, çünkü 3D alandaki eyleme oyuncuların dikkatini çekmek için odak noktası işlevi görür ve oyunu oynamada en fazla öneme sahiptir.

Hedefleme

Bir hedefleme, oyunculara silahlarını ateşlediklerinde hangi noktaya etki edeceklerini bildiren bir UI öğesidir. Bu UI öğesi, ilk şahıs nişancı deneyimleri için hayati bir oyun gerekliliğidir çünkü oyuncuların blaster'larını doğru bir şekilde nişan almalarını ve düşman takım üyelerini etiketlemelerini gerektirir.

Diğer birçok ilk şahıs nişancı türündeki deneyimlerde olduğu gibi, örnek lazer tag deneyimi hedeflemeyi ekranın merkezinde konumlandırır, böylece oyuncular avatarları 3D alanda hareket ederken odaklanacakları sabit bir noktaya sahip olurlar. Duygu bozukluğunu azaltma yanı sıra, bu yerleştirme hedeflemenin algılanmasını sağlar ama aynı zamanda genel çevreyle de harmanlanır.

Örnek Lazer Tag deneyimindeki hedeflemeyi tam olarak yeniden oluşturmak için:

HUDGui ScreenGui nesnesine bir ImageLabel ekleyin.
1. Explorer penceresinde, StarterGui hizmetine gidin.
2. Çocuk HUDGui nesnesinin üzerine gelin, ardından ⊕ simgesine tıklayın. Bir bağlamsal menü açılır.
3. Bağlamsal menüden bir ImageLabel ekleyin.
Yeni ImageLabel'i seçin, ardından Özellikler penceresinde,
1. Image'yi rbxassetid://14400935446 olarak ayarlayın.
2. AnchorPoint'u 0.5, 0.5 olarak ayarlayın, böylece etiketin kök noktası etiketin ortasında (etiketin solundan sağa %50, etiketin üstünden aşağı %50).
3. BackgroundTransparency'yi 1 olarak ayarlayın, böylece etiketin arka planı tamamen saydam olur.
4. Name'yi Crosshair olarak ayarlayın.
5. Position'u {0.5,0},{0.5,0} olarak ayarlayın, böylece etiket ekranın ortasında olsun.
6. ScaleType'ı Fit olarak ayarlayarak, görüntünün içinde uygun boyutta olmasını ve farklı ekran boyutlarında gerilmesini sağlamayın.
(İsteğe Bağlı) Crosshair içine 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 ayarlamıştır.

Vuruş işareti

Vuruş işareti sadece bir merminin başka bir oyuncuyla etkileşime geçtiğinde görünen bir UI öğesidir. Hedeflemeyle birlikte, bu UI öğesi, oyuncuların rakiplerini etiketlemede başarılı olduğuna dair görsel geri bildirim sağladığı için ilk şahıs nişancı deneyimleri için hayati bir oyun gerekliliğidir.

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

Crosshair ImageLabel nesnesine bir ImageLabel ekleyin.
1. Explorer penceresinde, StarterGui hizmetine gidin.
2. Çocuk Crosshair nesnesinin üzerine gelin, ardından ⊕ simgesine tıklayın. Bir bağlamsal menü açılır.
3. Bağlamsal menüden bir ImageLabel ekleyin.
Yeni ImageLabel'i seçin, ardından Özellikler penceresinde,
1. Image'yi rbxassetid://14401148736 olarak ayarlayarak dikdörtgen vuruş işareti simgesini gösterin.
2. AnchorPoint'u 0.5, 0.5 olarak ayarlayın, böylece etiketin kök noktası, etiketin ortasında olur.
3. BackgroundTransparency'yi 1 olarak ayarlayın, böylece etiketin arka planı tamamen saydam olur.
4. Position'u {0.5,0},{0.5,0} olarak ayarlayın, böylece etiket ekranın ortasında olsun.
5. Name'yi Hitmarker olarak ayarlayın.
6. Size'ı {0.6, 0},{0.06, 0} olarak ayarlayarak dikdörtgenlerin boyutunu azaltın ve hedeflemenin ortasında olsun.
7. ImageTransparency'yi 1 olarak ayarlayın, böylece vurma işareti tamamen saydam olur. Aşağıdaki adımlardaki betikler, oyuncunun mermisi, rakip bir oyuncuyla çarptığında transparanslığı 0'a döndürür.
Aşağıdaki ReplicatedStorage betiklerini örnek Lazer Tag yer dosyasına atıfta bulunarak, programlı olarak vurma işaretini gösteren betikler, bir merminin başka bir oyuncuyla etkileşime geçtiğini takip eder.

Aşağıdaki betik, ana Heads Up Display (HUD) kurulumunu yapmak için birlikte çalışan bir dizi modül betiği gerektirir; setupHitmarker dahil. 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ülendiğinden emin olur.


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 mermi başka bir oyuncuyla çarptığında, vurma işareti geçici olarak görüntülenir.

Blaster seçici

Bir blaster seçici, oyuncuların bir tura katılmadan veya tura yeniden katılmadan önce blaster türlerini seçmek için kullandığı bir UI bileşenidir. Örnek lazer tag deneyimi iki tür blaster sunmaktadır: biri geniş, yatay bir yay ile birçok ışın üreten, diğeri ise tek bir ışın üreten. Oyuncuların seçtiği blaster türü, turun stratejisini etkiler, bu da bu UI bileşenini genel deneyim için temel bir iş akışı haline getirir.

Aşağıdaki adımlar, farklı UI öğesi grupları için birkaç konteyner oluşturmayı, bir başlık ve ipucu, navigasyon ve seçme düğmeleri ile bir blaster butonu prefabı oluşturmayı detaylandırmaktadır. Genel bileşenin betik mantığı, her blaster türünü temsil eden Configuration örneklerine göre blaster butonu prefabında farklı görsel özellikler doldurmayı sağlar.

Bu kurulum, yeni blaster türleri için ek Configuration örnekleri oluşturmanıza ve bunların blaster seçici içinde doğru bir şekilde görüntülenmesini sağlamanıza olanak tanır; böylece StarterGui.PickABlasterGui içinde bireysel butonlar oluşturmanız gerekmez.

Örnek Lazer Tag deneyimindeki 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. Explorer penceresinde, StarterGui hizmetine gidin.
  2. Çocuk PickABlaster nesnesinin üzerine gelin, ardından ⊕ simgesine tıklayın. Bir bağlamsal menü açılır.
  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 ayarlayarak çerçevenin kök noktasını kendisinin alt orta kısmında (çerçevenin solundan sağa %50 ve çerçevenin üstünden aşağı %100) yerleştirin.
  2. BackgroundTransparency'yi 1 olarak ayarlayarak çerçevenin arka planını tamamen saydam yapın.
  3. Position'u {0.5, 0},{0.9, 0} olarak ayarlayarak çerçeveyi ekranın alt ortasına yerleştirin (çerçevenin solundan sağa %50 ve ekranın üstünden aşağı %92.4).
  4. Size'ı {0.8, 0},{0.25, 0} olarak ayarlayarak blaster seçicinin UI bileşenlerinin dikkat çekici şekilde büyük olmasını sağlayın (yatayda %80 ve dikeyde %25).
  5. Name'yi Component olarak ayarlayın.
3. (İsteğe Bağlı) Component içine bir UIAspectRatioConstraint ekleyin, böylece çerçeve ve çocuk UI öğelerinin en boy oranı oyuncunun ekran boyutuna göre aynı kalır. Örnek, UIAspectRatioConstraint.AspectRatio özelliğini 5 olarak ayarlamıştır.
UI öğesi gruplarını tutacak bir konteyner oluşturun.
1. Component içine bir Frame ekleyin.
2. Yeni çerçeveyi seçin, ardından Özellikler penceresinde,
  1. AnchorPoint'u 0.5, 0.5 olarak ayarlayarak çerçevenin kök noktasını kendisinin ortasında (çerçevenin solundan sağa %50 ve çerçevenin üstünden aşağı %50) yerleştirir.
  2. BackgroundTransparency'yi 1 olarak ayarlayarak çerçevenin arka planını tamamen saydam yapın.
  3. Position'u {0.5, 0},{0.375, 0} olarak ayarlayarak çerçeveyi konteynerin üst ortasında konumlandırır (parent çerçevenin solundan sağa %50 ve parent çerçevenin üstünden aşağı %37.5).
  4. Size'ı {1, 0},{0.75, 0} olarak ayarlayarak seçim UI bileşenlerinin konteynerin 3/4'ünü kaplamasını sağlar (parent çerçevenin %100'ü ve %75'i).
  5. Name'yi SelectionFrame olarak ayarlayın.
Blaster seçici için bir ipucu oluşturun.
1. SelectionFrame içine bir ImageLabel ekleyin.
2. Yeni etiketi seçin, ardından Özellikler penceresinde,
  1. AnchorPoint'u 0.5, 1 olarak ayarlayarak etiketin kök noktasını kendisinin alt orta kısmında (etiketin solundan sağa %50 ve etiketin üstünden aşağı %100) yerleştirin.
  2. BackgroundTransparency'yi 1 olarak ayarlayarak etiketin arka planını tamamen saydam yapın.
  3. LayoutOrder'u -1 olarak ayarlayın.
  4. Position'u {0.5, 0},{0.22, 0} olarak ayarlayın, böylece etiketin üst üst orta kısmında yer alır (etiketin solundan sağa %50 ve parent çerçevenin üstünden aşağı %22).
  5. Size'ı {0.45, 0},{0.22, 0} olarak ayarlayarak ipucu alanını çerçevenin neredeyse yarısına kadar genişlesin (parent çerçevenin %45'i ve %22'si).
  6. Name'yi Header olarak ayarlayın.
  7. Image'yi rbxassetid://14304828123 olarak ayarlayarak bir trapez göstermesini sağlayın.
  8. ImageTransparency'yi 0.15 olarak ayarlayarak başlığı yarı saydam hale getirin.
3. (İsteğe Bağlı) Etikete 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 ayarlamıştır.
4. Header içine bir TextLabel ekleyin, böylece bir ipucu gösterir.
5. Yeni etiketi seçin, ardından Özellikler penceresinde,
  1. AnchorPoint'u 0.5, 0.5 olarak ayarlayın, böylece yeni etiketin kök noktası kendisinin ortasında (etiketin solundan sağa %50 ve etiketin üstünden aşağı %50) olur.
  2. BackgroundTransparency'yi 1 olarak ayarlayın, böylece etiketin arka planı tamamen saydam olur.
  3. Position'u {0.5, 0},{0.5, 0} olarak ayarlayın, böylece etiketin ana etiketinin ortasına taşınır (parent etiketinin solundan sağa %50 ve parent etiketinin üstünden aşağı %50).
  4. Size'ı {0.6, 0},{0.55, 0} olarak ayarlayın, böylece metin alanı parent etiketin neredeyse yarısına kadar genişlesin (parent etiketinin %60'ı ve %55'i).
  5. Name'yi HeaderTextLabel olarak ayarlayın.
  6. FontFace'yi Montserrat olarak ayarlayın, böylece geleceğe dönük estetiğe uygun olur.
  7. Weight'i Medium olarak ayarlayın, böylece fontu kalınlaştırın.
  8. Text'i BİR BLASTER SEÇİN olarak ayarlayın.
  9. TextScaled'i etkinleştirin.
Blaster butonları konteyneri ve seçim oklarının konteynerini oluşturun.
1. SelectionFrame içine 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ök noktası, kendisinin alt orta kısmında olacak şekilde ayarlanır (etiketin solundan sağa %50 ve etiketin üstünden aşağı %100).
  3. BackgroundColor'yu 0, 0, 0 yaparak kendisini siyah hale getirin.
  4. BackgroundTransparency'yi 0.3 olarak ayarlayarak etiketin saydamlığını %30 azaltın ve deneyimdeki tüm siyah UI öğeleriyle eşleşsin.
  5. Position'u {0.5, 0},{1, 0} olarak ayarlayın, böylece etiket, parent çerçevenin alt ortasında yer alır (parent çerçevenin solundan sağa %50 ve parent çerçevenin üstünden aşağı %100).
  6. Size'ı {1, 0},{0.77, 0} olarak ayarlayarak etiket alanını, başlık altındaki alanı genişletin (parent çerçevenin %100'ü ve %77'si).
3. Konteynerin köşelerini yuvarlayın.
  1. Etiketin içine bir UICorner nesnesi ekleyin.
  2. Yeni köşe nesnesini seçin, ardından Özellikler penceresinde CornerRadius'i 0.075, 0 olarak ayarlayarak köşeleri yuvarlayın.
Blaster butonları için bir konteyner oluşturun.
1. Üzerinde 5. adımda etiketin içine bir Frame ekleyin.
2. Yeni çerçeveyi seçin, ardından Özellikler penceresinde,
  1. AnchorPoint'u 0.5, 0.5 olarak ayarlayarak çerçevenin kök noktasını kendisinin ortasında (çerçevenin solundan sağa %50 ve çerçevenin üstünden aşağı %50) yerleştirirsiniz.
  2. BackgroundTransparency'yi 1 olarak ayarlayarak çerçevenin arka planını tamamen saydam yapın.1. Pozisyon değerini {0.5, 0},{0.5, 0} olarak ayarlayın, böylece çerçeve ana label'ın ortasında konumlandırılmış olur (ana çerçevenin solundan sağa %50, yukarısından aşağıya %50).
Boyut değerini {0.85, 0},{0.77, 0} olarak ayarlayın, böylece çerçeve alanı label'ın çoğunu kaplar (ana label'ın yatay olarak %85'i ve dikey olarak %77'si).
İsim değerini Kap olarak ayarlayın.
Tüm gelecekteki blaster butonları için iç boşluk oluşturun.
1. 1. adımda oluşturduğunuz çerçeveye bir UIListLayout nesnesi ekleyin.
2. Yeni düzen nesnesini seçin, ardından Özellikler penceresinde,
  1. İç Boşluk değerini 0.035, 0 olarak ayarlayın, böylece tüm gelecekteki butonlar arasında alan sağlansın.
  2. Doldurma Yönü değerini Yatay olarak ayarlayın, böylece her buton yan yana görüntülensin.
  3. Hem Yatay Hizalama hem de Dikey Hizalama değerlerini Merkez olarak ayarlayın, böylece her buton birbirine ortalanır.
Sol gezinme butonunu oluşturun.
1. 1. adımda ImageLabel içine bir ImageButton nesnesi ekleyin.
2. Yeni butonu seçin, ardından Özellikler penceresinde,
  1. Varsayılan Görüntü değerini kaldırın.
  2. Köşe Noktası değerini 0, 0.5 olarak ayarlayın, böylece yeni butonun köken noktası kendisinin sol ortasında konumlandırılır (butonun solundaki %0'dan sağa %100'e, yukarısından aşağıya %50).
  3. Arka Plan Şeffaflığı değerini 0.15 olarak ayarlayın, böylece butonun seçilebilir olduğu üzerine görsel bir geri bildirim sağlanır.
  4. Pozisyon değerini {0.02, 0},{0.5, 0} olarak ayarlayın, böylece butonun ana konteynerden sola bir iç boşluk sağlanır (ana label'ın solundan sağa %2, yukarısından aşağıya %50).
  5. Boyut değerini {0.04, 0},{0.33, 0} olarak ayarlayın, böylece seçim butonu blaster butonlarından çok daha küçük olur (ana çerçevenin %4'ü yatay ve %33'ü dikey).
  6. İsim 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 Özellikler penceresinde Köşe Yarıçapı değerini 0.1, 0 olarak ayarlayın, böylece köşeler yuvarlanır.
4. Butona bir ImageLabel nesnesi ekleyin.
5. Yeni label'ı seçin, ardından Özellikler penceresinde,
  1. Köşe Noktası değerini 0.5, 0.5 olarak ayarlayın, böylece yeni label'ın köken noktası kendisinin ortasında konumlandırılır (label'ın solundan sağa %50, yukarısından aşağıya %50).
  2. Pozisyon değerini {0.45, 0},{0.5, 0} olarak ayarlayın ki label, ana butonun ortasına yakın konumlansın (butonun solundan sağa %45, yukarısından aşağıya %50). Bu değer ortada değil çünkü bir ok, {0.5, 0},{0.5, 0}'de butonda ortada gibi görünmüyor.
  3. Boyut değerini {0.8, 0},{0.8, 0} olarak ayarlayın, böylece label alanı promptun altına genişlesin (ana çerçevenin %80'i yatay ve %80'i dikey).
  4. Arka Plan Şeffaflığı değerini 1 olarak ayarlayın, böylece resmin arka planı tamamen şeffaf olur.
  5. Görüntü değerini rbxassetid://14309187238 olarak ayarlayın.
  6. Ölçek Türü değerini Sığdır olarak ayarlayın.
Sağ gezinme butonunu oluşturun.
1. NavigationButtonLeft'i kopyalayın.
2. Kopyanan butonu seçin, ardından Özellikler penceresinde,
  1. Köşe Noktası değerini 1, 0.5 olarak ayarlayın, böylece yeni butonun köken noktası kendisinin sağ ortasında konumlandırılır (butonun solundan sağa %100, yukarısından aşağıya %50).
  2. Pozisyon değerini {0.98, 0},{0.5, 0} olarak ayarlayın, böylece butonun ana konteynerden sağda bir iç boşluk sağlansın (ana label'ın solundan sağa %98, yukarısından aşağıya %50).
  3. İsim değerini NavigationButtonRight olarak ayarlayın.
3. ImageLabel alt nesnesini seçin.
  1. Dönme değerini 180 olarak ayarlayın, böylece resmi ters çevirin.
  2. Pozisyon değerini {0.55, 0},{0.5, 0} olarak ayarlayın ki label, ana butonun ortasına yakın konumlandırsın (butonun solundan sağa %55, yukarısından aşağıya %50). Bu değer ortada değil çünkü bir ok, {0.5, 0},{0.5, 0}'de butonda ortada gibi görünmüyor.
SEÇ butonunu oluşturun.
1. Bileşen'e bir ImageButton ekleyin. Bu işlemin nasıl, Select Button ile ana bileşen arasında boşluk bırakacak şekilde yapılandırdığını gösterir.
2. Yeni butonu seçin, ardından Özellikler penceresinde,
  1. Varsayılan Görüntü değerini kaldırın.
  2. Köşe Noktası değerini 0.5, 1 olarak ayarlayın, böylece yeni butonun köken noktası kendisinin alt ortasında konumlandırılır (butonun solundan sağa %50, yukarısından aşağıya %100).
  3. Arka Plan Şeffaflığı değerini 0.15 olarak ayarlayın, böylece butonun seçilebilir olduğu üzerine görsel bir geri bildirim sağlanır.
  4. Pozisyon değerini {0.5, 0},{0.99, 0} olarak ayarlayın, böylece butonun ana çerçevenin alt ortasında konumlandırılır (ana çerçevenin solundan sağa %50, yukarısından aşağıya %99).
  5. Boyut değerini {0.17, 0},{0.18, 0} olarak ayarlayın, böylece buton blaster butonlarının altına uzansın (ana çerçevenin %17'si yatay ve %18'i dikey).
  6. İsim 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 Özellikler penceresinde Köşe Yarıçapı 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 label'ı seçin, ardından Özellikler penceresinde,
  1. Köşe Noktası değerini 0.5, 0.5 olarak ayarlayın, böylece yeni label'ın köken noktası kendisinin ortasında konumlandırılır (label'ın solundan sağa %50, yukarısından aşağıya %50).
  2. Arka Plan Şeffaflığı değerini 1 olarak ayarlayın, böylece label'ın arka planı tamamen şeffaf olur.
  3. Pozisyon değerini {0.5, 0},{0.5, 0} olarak ayarlayın ki label, butonun ortasına taşınsın (butonun solundan sağa %50, yukarısından aşağıya %50).
  4. Boyut değerini {0.9, 0},{0.55, 0} olarak ayarlayın, böylece metin alanı ana label'ın neredeyse tüm genişliğini kaplasın (ana label'ın %90'ı yatay ve %55'i dikey).
  5. İsim 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. Ağırlık değerini Orta olarak ayarlayın, böylece yazı tipinin kalınlaşmasını sağlar.
  8. Metin değerini SEÇ olarak ayarlayın.
  9. Metin Ölçekli seçeneğini etkinleştirin.
Bir blaster buton prefab'ı oluşturun.
1. ReplicatedStorage servisine, UI nesnelerinizi organize etmek için bir klasör yapısı oluşturun. Örnek, bir Instances klasörü ve onun altındaki bir Guis klasörünü kullanmaktadır.
2. Guis klasörüne bir ImageButton nesnesi ekleyin.
3. Yeni butonu seçin, ardından Özellikler penceresinde,
  1. Varsayılan Görüntü değerini kaldırın.
  2. Köşe Noktası değerini 0.5, 0.5 olarak ayarlayın, böylece yeni butonun köken noktası kendisinin ortasında konumlandırılır (butonun solundan sağa %50, yukarısından aşağıya %50).
  3. Arka Plan Şeffaflığı değerini 0.65 olarak ayarlayın, böylece butonun dikkatin dağılmadığı üzerine görsel bir geri bildirim sağlanır. 12. adımda bulunan komut dosyaları butonun odaklandığında programatik görsel geri bildirim sağlayacaktır.
  4. Düzen Sırası değerini 2 olarak ayarlayın.
  5. İsim değerini BlasterButtonPrefab olarak ayarlayın.
  6. Boyut değerini {0.8, 0},{0.8, 0} olarak ayarlayın.
  7. Görüntü Şeffaflığı değerini 1 olarak ayarlayın, böylece görüntü tamamen şeffaf olur.
4. BlasterButtonPrefab içine bir UIAspectRatioConstraint ekleyin, böylece butonun en-boy oranı, oyuncunun ekran boyutuna bakılmaksızın aynı kalır.
5. Butonun köşelerini yuvarlayın.
  1. BlasterButtonPrefab içine bir UICorner nesnesi ekleyin.
  2. UICorner'ı seçin, ardından Özellikler penceresinde Köşe Yarıçapı değerini 0.05, 0 olarak ayarlayın, böylece köşeler yuvarlanır.
6. BlasterButtonPrefab içine bir ImageLabel ekleyin.
7. Yeni label'ı seçin, ardından Özellikler penceresinde,
  1. Varsayılan Görüntü değerini kaldırın.
  2. Köşe Noktası değerini 0.5, 0.5 olarak ayarlayın, böylece yeni label'ın köken noktası kendisinin ortasında konumlandırılır (label'ın solundan sağa %50, yukarısından aşağıya %50).
  3. Arka Plan Şeffaflığı değerini 1 olarak ayarlayın, böylece label'ın arka planı tamamen şeffaf olur.
  4. Pozisyon değerini {0.52, 0},{0.497, 0} olarak ayarlayın, böylece label ana butonun ortasına yakın konumlansın (butonun solundan sağa %52, yukarısından aşağıya %49.7). Bu değer ortada değil çünkü blaster, {0.5, 0},{0.5, 0}'de butonda ortada gibi görünmüyor.
  5. Boyut değerini {1.20, 0},{0.9, 0} olarak ayarlayın, böylece label alanı butondan dışarı çıkmış olsun (ana butonun %120'si yatay ve %90'ı dikey).
  6. Ölçek Türü değerini Sığdır olarak ayarlayın.
Aşağıdaki ReplicatedStorage komut dosyalarını örnek Laser Tag yer dosyası içinde referans alın, bu komut dosyaları programatik olarak her blaster için butonları gösterir, bir oyuncunun odakta olmayan bir butona seçerek butonların ölçeklenmesini sağlar, ve bir oyuncunun blaster seçimini avatarlarına bağlar.

Aşağıdaki komut dosyası, blaster seçimini oluşturmak için birlikte çalışan bir dizi komut dosyasına ihtiyaç duyar. Bir oyuncu deneyime katıldığında veya sağlıkları sıfıra düştüğünde yeniden doğduğunda, bu komut dosyası blaster seçicinin tüm UI öğelerini etkinleştirir, 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 deneyime katıldığında veya sağlıkları sıfıra düştüğünde tekrar doğduğunda, blaster seçici UI görüntülenir, seçim yapabilirler ve her buton beklendiği gibi çalışır.

Blaster butonu

Blaster butonu, oyuncuların bir mobil veya tablet cihazla deneyimi kullanıyorsa blaster'larını ateşlemek için kullandığı bir UI bileşenidir. Örnek lazer tag deneyimi, butonun işlevini metin olmadan iletmek için hem bir nişangah hem de bir patlama simgeleyen bir blaster butonu kullanır.

Örnek Laser Tag deneyimi içinde blaster butonunu tam olarak yeniden oluşturmak için:

HUDGui ScreenGui nesnesine bir ImageButton ekleyin.
1. Explorer penceresinde StarterGui servisine gidin.
2. HUDGui nesnesinin üstüne gelin, ardından ⊕ simgesine tıklayın. Bir bağlam menüsü görüntülenecektir.
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 ki butonun, oyuncunun cihazında nasıl görüneceği hakkında görsel bir his elde edebilirsiniz, ardından Özellikler penceresinde,
1. Görüntü değerini rbxassetid://18308375035 olarak ayarlayın, böylece patlama butonu simgesi görüntülensin.
2. Basıldı Görüntüsü 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. Arka Plan Şeffaflığı değerini 1 olarak ayarlayın, böylece label'ın arka planı tamamen şeffaf olur.
4. İsim değerini BlastButton olarak ayarlayın.
5. Ölçek Türü değerini Sığdır olarak ayarlayın, böylece resim konteynerine sığacak şekilde ayarlanır ve çeşitli ekran boyutlarında gerilmez.
6. Görüntü Şeffaflığı değerini 0.3 olarak ayarlayın, böylece label'ın opaklığı azaltılır ve deneyimdeki tüm siyah UI elemanları ile eşleşir.
BlastButton içine bir UIAspectRatioConstraint ekleyin, böylece butonun en-boy oranı, oyuncunun ekran boyutuna bakılmaksızın aynı kalır.
Aşağıdaki ReplicatedStorage komut dosyalarını örnek Laser Tag yer dosyası içinde referans alın, bu komut dosyaları bir oyuncu dokunmatik girdi kullanıyorsa blaster butonunu programatik olarak görüntüler.

Aşağıdaki komut dosyası, setupTouchButtonAsync dahil olmak üzere ana HUD'u kurmak için birlikte çalışan bir dizi modül komut dosyasına ihtiyaç duyar. Bir oyuncu bir tura katıldığında ve blaster'ını seçtiğinde, bu komut dosyası tüm HUD UI öğelerinin oyuncunun durumu, cihazı ve takım durumu için uygun şekilde görüntülendiğinden emin olur.


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 deneyime katıldığında ve dokunmatik girdi kullandığında, blaster butonu zıplama butonunun üst sağ kısmında görüntülenir.

Oyuncu UI

Wireframe Your Layouts içindeki görsel hiyerarşi en iyi uygulamalarını izleyerek, bu bölüm size oyuncunun durumu ile ilgili tüm ekran üzerindeki UI öğelerini nasıl uygulayacağınızı öğretir. Bu UI öğeleri grubu ekranın kenarlarına yakın konumlandırılır, çünkü oyuncular bu çevresel bilgileri oyun sırasında dikkatlerini dağıtmadan anlamlandırabilirler.

Oyuncu göstergesi

Bir oyuncu göstergesi, oyuncuların takımlarına ait olduklarını hızla anlamaları için referans aldıkları bir UI bileşenidir. Örnek lazer tag deneyimi, oyuncunun yeşil veya pembe takımda olup olmadığını belirlemek için iki versiyon sunar.

Select a Color Theme ile gelen rehberliği takip ederek, oyuncu göstergesinin her iki versiyonu da takım rengine benzeyen, sadeliği ve az detayı koruyan bir simge ile birleşir, böylece küçük ekranlarda okunaklı kalır. İki biçim görsel geri bildirim sunmak önemlidir çünkü tasarımın renk körlüğü olan oyuncular için erişilebilir olmasına yardımcı olur.

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

HUDGui ScreenGui nesnesine bir Frame ekleyin.
1. Explorer penceresinde StarterGui servisine gidin.
2. HUDGui nesnesinin üstüne gelin, ardından ⊕ simgesine tıklayın. Bir bağlam menüsü görüntülenecektir.
3. Bağlam menüsünden bir Frame ekleyin.
Yeni Frame'i seçin, ardından Özellikler penceresinde,
1. Köşe Noktası değerini 0, 1 olarak ayarlayın, böylece çerçevenin köken noktası kendisinin altında ortasında konumlandırılmış olur (0% soldan sağa, 100% yukarıdan aşağıya).
2. Arka Plan Şeffaflığı değerini 1 olarak ayarlayın, böylece label'ın arka planı tamamen şeffaf olur.
3. İsim değerini PlayerDisplay olarak ayarlayın.
4. Pozisyon değerini {0.02, 0},{0.97, 0} olarak ayarlayın, böylece çerçeve ekranın alt-soluna yakın konumlanır.
5. Boyut değerini {0.23, 0},{0.08, 0} olarak ayarlayın, böylece çerçeveyi kısaltarak genişletin.
6. ClipsDescendants'ı etkinleştirerek, çerçeveden taşan alt UI nesnelerini kesin.
Çokgen şekli oluşturun.
1. PlayerDisplay içine bir ImageLabel ekleyin.
2. Yeni label'ı seçin, ardından Özellikler penceresinde,
  1. Görüntü değerini rbxassetid://14304828123 olarak ayarlayın, böylece trapez simgesi görüntülensin.
  2. Köşe Noktası değerini 1, 1 olarak ayarlayın, böylece label'ın köken noktası kendisinin alt-sol kısmında konumlandırılır (100% soldan sağa, 100% yukarıdan aşağıya).
  3. Arka Plan Şeffaflığı değerini 1 olarak ayarlayın, böylece label'ın arka planı tamamen şeffaf olur.
  4. İsim değerini Block olarak ayarlayın.
  5. Pozisyon değerini {1,0},{1,0} olarak ayarlayın ki label, çerçevenin sağ tarafına konumlandırsın.
  6. Boyut değerini {1.858, 0},{0.581, 0} olarak ayarlayın, çerçeveden dışarıya çıkacak şekilde label'ı genişletin ve çerçevenin boyunun yarısından biraz fazlasını kısaltın.
  7. Görüntü Şeffaflığı değerini 0.15 olarak ayarlayın, böylece label biraz şeffaf olur.
  8. Ölçek Türü değerini Sığdır olarak ayarlayın, böylece resim konteynerine sığacak şekilde ayarlanır ve çeşitli ekran boyutlarında gerilmez.
  1. Block içine bir UIAspectRatioConstraint ekleyerek, label'ın ve alt UI nesnelerinin en-boy oranının, oyuncunun ekran boyutuna bakılmaksızın aynı kalmasını sağlayın.
  2. Yeni kısıtlamayı seçin, ardından Özellikler penceresinde AspectRatio değerini 13.78 olarak ayarlayın.
Oyuncunun portresi için bir kutu oluşturun.
1. PlayerDisplay içine bir ImageLabel ekleyin.
2. Yeni label'ı seçin, ardından Özellikler penceresinde,
  1. Görüntü özelliğindeki yer tutucu varlık ID'sini kaldırın. 7. adımda bulunan komut dosyaları, oyuncunun portresini programatik olarak görüntülemek için resim label'ına ekler.
  2. Köşe Noktası değerini 0, 1 olarak ayarlayın, böylece label'ın köken noktası kendisinin alt-sol kısmında konumlandırılır (0% soldan sağa, 100% yukarıdan aşağıya).
  3. Arka Plan Renk3 değerini 0, 0, 0 olarak ayarlayın, böylece label'ın arka plan rengi siyah olur.
  4. Arka Plan Şeffaflığı değerini 0.3 olarak ayarlayın, böylece label'ın opaklığını %30 azaltın ve deneyimdeki tüm siyah UI elemanları ile eşleşin.
  5. İsim değerini PlayerPortrait olarak ayarlayın.
  6. Pozisyon değerini {0.11, 0},{1, 0} olarak ayarlayın, bu şekilde label çoğunlukla çokgenin sol kısmına konumlanır.
  7. Boyut değerini {0.23, 0},{1, 0} olarak ayarlayın, böylece label kısalsın.
  8. Görüntü Şeffaflığı değerini 0.15 olarak ayarlayın, böylece label biraz şeffaf olur.
  9. Ölçek Türü değerini Sığdır olarak ayarlayın, böylece resim konteynerine sığacak şekilde ayarlanır ve çeşitli ekran boyutlarında gerilmez.
  1. PlayerPortrait içine bir UIAspectRatioConstraint ekleyerek, label'ın ve alt UI nesnelerinin en-boy oranının, oyuncunun ekran boyutuna bakılmaksızın aynı kalmasını sağlayın.
  2. PlayerPortrait içine bir UICorner ekleyin, ardından Özellikler penceresinde Köşe Yarıçapı değerini 0.05, 0 olarak ayarlayın, böylece köşeleri hafif yuvarlayın.
Oyuncunun adı için bir metin label'ı oluşturun.
1. PlayerDisplay içine bir TextLabel nesnesi ekleyin.
2. Yeni label'ı seçin, ardından Özellikler penceresinde,
  1. Köşe Noktası değerini 0, 0.5 olarak ayarlayın, böylece yeni düğmenin köken noktası kendisinin sol ortasında konumlandırılır (0% soldan sağa, 50% yukarıdan aşağıya).
  2. Arka Plan Şeffaflığı değerini 1 olarak ayarlayın, böylece label'ın arka planı tamamen şeffaf olur.
  3. İsim değerini PlayerNameTextLabel olarak ayarlayın.
  4. Pozisyon değerini {0.35, 0},{0.72, 0} olarak ayarlayın, böylece label, kendi konteynerinin sağ tarafına konumlandırsın (ana label'ın solundan sağa %35, yukarısından aşağıya %72).
  5. Boyut değerini {0.52, 0},{0.3, 0} olarak ayarlayın, böylece metin, çokgen şeklin alanının çoğunu kaplasın (ana çerçevenin %52'si yatay ve %30'u dikey).
  6. FontFace değerini Montserrat olarak ayarlayın, böylece geleceğe yönelik estetiğe uyum sağlar.
  7. Ağırlık değerini Kalın olarak ayarlayın, böylece yazı tipinin kalınlaşmasını sağlar.
  8. Metin özelliği içindeki yer tutucu metni kaldırın. 7. adımda bulunan komut dosyaları, oyuncunun adını programatik olarak bu metin label'ına ekleyebilir.
  9. Metin Ölçekli seçeneğini etkinleştirin.
  10. Metin X Hizalaması değerini Sol olarak ayarlayın.
Oyuncunun portresinin sol tarafında görüntülenecek takım simgeleri ve renklerini oluşturun.
1. PlayerDisplay içine bir Klasör ekleyin, ardından adını TeamIcons olarak değiştirin.
2. Yeşil takım simgesi ve rengini oluşturun.
  1. TeamIcons içine bir ImageLabel ekleyin.
  2. Yeni label'ı seçin, ardından Özellikler penceresinde,
    
    Köşe Noktası değerini 0, 1 olarak ayarlayın, böylece label'ın köken noktası kendisinin alt-sol kısmında konumlandırılır (0% soldan sağa, 100% yukarıdan aşağıya).
    
    Arka Plan Renk3 değerini 88, 218, 171 olarak ayarlayın, böylece label'ın arka plan rengi nane yeşili olur.
    
    İsim değerini TeamAIcon olarak ayarlayın.
    
    Pozisyon değerini {0, 0},{1, 0} olarak ayarlayın, böylece label çerçevenin sol tarafına konumlandırsın.
    
    Boyut değerini {0.135, 0},{0.58, 0} olarak ayarlayın, böylece label, oyuncu portresinin sol tarafında küçülsün.
    
    Görüntü Şeffaflığı değerini 1 olarak ayarlayın, böylece label'ın görünmez olmasını sağlar.
  1. Bu etiketin yeşil takım için olduğunu takip etmek üzere özel bir nitelik tanımlayın. Bu adım, 7. adımda bulunan komut dosyaları için çok önemlidir.
    
    Özellikler penceresinde Nitelikler bölümüne gidin, ardından artı simgesine tıklayın. Bir pop-up diyalog görüntülenir.
    
    İsim alanına teamColor yazın.
    
    Tür açılır menüsünde BrickColor seçin.
    
    Kaydet butonuna tıklayın.
    
    Yeni teamColor niteliğini Mint olarak ayarlayın.
  2. TeamAIcon içine bir UIAspectRatioConstraint ekleyerek, label'ın ve alt UI nesnelerinin en-boy oranının, oyuncunun ekran boyutuna bakılmaksızın aynı kalmasını sağlayın.
  3. İkonu oluşturun.
    
    TeamAIcon içine bir ImageLabel ekleyin.
    
    Yeni label'ı seçin, ardından Özellikler penceresinde,
    
    Görüntü değerini rbxassetid://14309678670 olarak ayarlayın, böylece yeşil takım simgesi görüntülensin.
    
    Köşe Noktası değerini 0.5, 0.5 olarak ayarlayın, böylece label'ın köken noktası kendisinin ortasında konumlandırılır (50% soldan sağa, 50% yukarıdan aşağıya).
    
    Arka Plan Şeffaflığı değerini 1 olarak ayarlayın, böylece label'ın arka planı tamamen şeffaf olur.
    
    İsim değerini Icon olarak ayarlayın.
    
    Pozisyon değerini {0.5, 0},{0.5, 0} olarak ayarlayın, böylece label kendisinin ana label'ın ortasında konumlanır.
    
    Boyut değerini {0.7, 0},{0.6, 0} olarak ayarlayın, böylece label küçülsün.
    
    Ölçek Türü değerini Sığdır olarak ayarlayın, böylece resim konteynerine sığacak şekilde ayarlanır ve çeşitli ekran boyutlarında gerilmez.
3. Pembe takım simgesi ve rengini oluşturun.
  1. TeamAIcon ve çocuklarını çoğaltın.
  2. Çoğaltılan TeamAIcon'ı seçin, ardından Özellikler penceresinde,
    
    Arka Plan Renk3 değerini 255, 170, 255 olarak ayarlayın, böylece label'ın arka plan rengi karnaşın pembesi olur.
    
    İsim değerini TeamBIcon olarak ayarlayın.
    
    teamColor niteliğini Carnation Pink olarak ayarlayın.
    
    TeamBIcon içindeki Icon alt nesnesini seçin, ardından Özellikler penceresinde Görüntü değerini rbxassetid://14309678549 olarak ayarlayın, böylece pembe takım simgesi görüntülensin.
Aşağıdaki ReplicatedStorage komut dosyalarını örnek Laser Tag yer dosyası içinde referans alın, bu komut dosyaları oyuncunun aktif olduğu bir tur sırasında uygun takım rengi ve simgesi ile oyuncu göstergesini programatik olarak görüntüler.

Aşağıdaki komut dosyası, startSyncingTeamColor, setPlayerName ve setPlayerPortrait dahil olmak üzere ana HUD'u kurmak için birlikte çalışan bir dizi modül komut dosyasına ihtiyaç duyar. Bir oyuncu bir tura katıldığında ve blaster'ını seçtiğinde, bu komut dosyası, tüm HUD UI öğelerinin oyuncunun durumu, cihazı ve takım durumu için uygun şekilde görüntülendiğinden emin olur.


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 ekranın sol alt köşesinde görüntülenir.

Güç alanı ekranı

Güç alanı ekranı, oyunculara bir tura katıldıklarında veya yeniden katıldıklarında düşman takım ateşinden güvende olduklarını bildiren bir UI elemanıdır. Choose an Art Style içindeki simgelerin estetik kurallarını takip ederek, örnek lazer tag deneyimi, bir güç alanını sembolize etmek için yarı saydam altıgen bir desen kullanır. Bu tasarım kararı, deneyimdeki tüm UI'lar için genel geleceğe yönelik sanat stilini güçlendirir ve ayrıca oyuncunun durumunu herhangi bir metin veya ek rehberlik olmadan iletir.

Örnek Laser Tag deneyimi içindeki güç alanı ekranını tam olarak yeniden oluşturmak için:

ForceFieldGui ScreenGui nesnesine bir ImageLabel ekleyin.
1. Explorer penceresinde StarterGui servisine gidin.
2. ForceFieldGui nesnesinin üstüne gelin, ardından ⊕ simgesine tıklayın. Bir bağlam menüsü görüntülenecektir.
3. Bağlam menüsünden bir ImageLabel ekleyin.
Yeni label'ı seçin, ardından Özellikler penceresinde,
1. Görüntü değerini rbxassetid://14462567888 olarak ayarlayın.
2. Arka Plan Şeffaflığı değerini 0.8 olarak ayarlayın, böylece güç alanı saydam hale gelir.
3. Boyut değerini {1, 0},{1, 0} olarak ayarlayın, böylece görüntü tüm ekranı kaplar (ana ScreenGui'nin %100'ü yatay ve %100'ü dikey).
4. Ölçek Türü değerini Mozaik olarak ayarlayın, böylece altıgen tüm ekran boyunca döşenir.
5. Mozaik Boyutu değerini {0, 104},{0, 180} olarak ayarlayın.
Label'a bir UIGradient nesnesi ekleyin.
Yeni gradyanı seçin, ardından Özellikler penceresinde,
1. Bir renk dizisi olan başlangıçta mavi, beyaz ve tekrar mavi bir renk dizisi ayarlayın.
  1. Renk değerini 120, 192, 250 olarak ayarlayın, böylece tüm altıgenlere açık mavi bir ton uygulanır.
  2. Renk özelliğine tıklayın, ardından ⋯ butonuna tıklayın. Renk dizisi pop-up'ı görüntülenecektir.
    
    Renk dizisinin alt eksenindeki her üçgen, sağdan sola doğru görselin o noktadaki renk değerini belirleyen bir anahtar noktadır.
  3. Renk dizisinde Zaman değerine 0.05 kadar sürükleyin, ardından Renk özelliğinin yanındaki küçük kareye tıklayarak Renkler pop-up penceresini açın.
  4. Parlak beyazı seçin, ardından açılır pencereyi kapatın.
  5. Renk dizisinde Zaman değerine 0.95 kadar sürükleyin, ardından Renkler pop-up penceresini açın ve daha önce seçtiğiniz aynı beyaz rengi seçin.
2. Dönüş değerini 225 olarak ayarlayın, böylece renk dizisinin mavi kısmı sol üst ve sağ alt köşelerde görüntülensin.
3. Güç alanının parıldıyor gibi görünmesi için Şeffaflık değerini belirli bir sayı dizisi yapın.
  1. Şeffaflık özelliğine tıklayın, ardından ⋯ butonuna tıklayın. Bir sayı dizisi pop-up'ı görüntülenecektir. Her kare sayı dizisindeki başlangıç ve son anahtar noktasıdır ve sağdan sola doğru nesnenin o noktadaki şeffaflık değerini belirler.
  2. Aşağıdaki zaman ve değer özelliklerini sayı dizisi boyunca ayarlayın:
  - Zaman = 0, Değer = 0.25
  - Zaman = .101, Değer = 0.875
  - Zaman = .183, Değer = 0
  - Zaman = .3, Değer = 1
  - Zaman = .7, Değer = 1
  - Zaman = 1, Değer = 0.9
1. adımda bulunan ImageLabel'ı çoğaltın.
Çoğaltılan label içindeki UIGradient nesnesini seçin, ardından Özellikler penceresinde,
1. Dönüş değerini -45 olarak ayarlayın, böylece görüntü, Y ekseni boyunca neredeyse birbirinin aynısı olacak şekilde ters dönsün.
2. Şeffaflığı değiştirerek parlamanın daha organik görünmesini sağlayın.
  1. Şeffaflık ö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 Sil butonuna tıklayın.
Bir oyuncunun bir tura katılırken veya yeniden katılırken kuvvet alanı ekranını programlı olarak görüntülemek için aşağıdaki ReplicatedStorage betiklerini örnek Laser Tag yer dosyasında referans alın.

Aşağıdaki ReplicatedStorage.ForceFieldClientVisuals istemci betiği, varsayılan ForceField görünümünü StarterGui.ForceFieldGui ile değiştirir. Oyuncular bir deneyime yüklendiğinde ve 0'dan büyük bir Süre özelliğine sahip bir SpawnLocation üzerinde doğduğunda, her deneyimde varsayılan davranış, avatarlarına sağlık kaybetmelerini geçici olarak önleyen koruyucu mavi bir orb vermektir.

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

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

Üçüncü şahıs kuvvet alanı görselleri, deneyime doğan oyuncunun etrafında mavi parlayan bir orb içeriyor. — Üçü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ışı bırakılmış bir doğuş 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 oyuncu yeniden doğduğunda veya tura yeniden katıldığında, varsayılan birinci şahıs ForceField görselleri yerine yeni kuvvet alanı ekranı UI görüntüleniyor.

Yeniden doğma ekranı

Yeniden doğma ekranı, oyuncuların dışlandıklarını bildirmek için görüntüyü karartan bir UI elemanıdır ve sunucunun onları doğuş alanlarına geri getirme süreci gerçekleşmektedir. Bu UI elemanı önemlidir çünkü oyuncuların dışlandıklarını işlemeleri için zaman tanır ve aktif tura yeniden katılmadan önce bir sonraki hamlelerini stratejileştirmelerine olanak tanır.

Örnek lazer tag deneyiminde özelleştirilmiş yeniden doğma davranışı hakkında daha fazla bilgi için Karakterleri Yeniden Doğurma başlığına bakın.

Örnek Laser Tag deneyiminde yeniden doğma ekranını tam olarak yeniden oluşturmak için:

Orta bilgi pankartı oluşturun.
1. OutStateGui ScreenGui nesnesine bir ImageLabel ekleyin.
  1. Explorer penceresinde StarterGui hizmetine gidin.
  2. OutStateGui nesnesine gelin, ardından ⊕ simgesine tıklayın. Bir bağlam menüsü açılır.
  3. Bağlam menüsünden bir ImageLabel ekleyin.
2. Yeni etiketi seçin, ardından Özellikler penceresinde,
  1. AnchorPoint değerini 0.5, 0.5 olarak ayarlayın.
  2. BackgroundTransparency değerini 1 olarak ayarlayın.
  3. Position değerini {0.5, 0},{0.5, 0} olarak ayarlayın.
  4. Size değerini {0.48, 0},{0.06, 0} olarak ayarlayın.
  5. Name değerini Block olarak ayarlayın.
  6. Image değerini rbxassetid://14304827265 olarak ayarlayın.
  7. ImageColor değerini 0,0,0 olarak ayarlayın.
  8. ImageTransparency değerini 0.3 olarak ayarlayın.
3. Block nesnesine bir UIAspectRatioConstraint ekleyin.
4. Yeni kısıtlamayı seçin, ardından Properties penceresinde AspectRatio değerini 13.78 olarak ayarlayın.
5. Bilgilendirme metni için Block elemanına bir TextLabel ekleyin.
6. Yeni etiketi seçin, ardından Özellikler penceresinde,
  1. AnchorPoint değerini 0.5, 0.5 olarak ayarlayın.
  2. BackgroundTransparency değerini 1 olarak ayarlayın.
  3. Position değerini {0.5, 0},{0.5, 0} olarak ayarlayın.
  4. Size değerini {.85, 0},{0.55, 0} olarak ayarlayın.
  5. Name değerini BodyTextLabel olarak ayarlayın.
  6. FontFace değerini Montserrat olarak ayarlayın.
  7. Weight değerini Bold olarak ayarlayın.
  8. Text değerini Yeniden Doğuyor… olarak ayarlayın.
  9. TextColor3 değerini 255, 255, 255 olarak ayarlayın.
  10. TextScaled değerini etkinleştirin.
Başlığı oluşturun.
1. Block nesnesine bir ImageLabel ekleyin.
2. Yeni etiketi seçin, ardından Özellikler penceresinde,
  1. AnchorPoint değerini 0.5, 1 olarak ayarlayın.
  2. BackgroundTransparency değerini 1 olarak ayarlayın.
  3. Position değerini {0.5, 0},{0, 0} olarak ayarlayın.
  4. Size değerini {0.46, 0},{0.56, 0} olarak ayarlayın.
  5. Name değerini Header olarak ayarlayın.
  6. Image değerini rbxassetid://14304826985 olarak ayarlayın.
  7. ImageColor değerini 245, 46, 46 olarak ayarlayın.
3. Header elemanına bir TextLabel ekleyin.
4. Yeni etiketi seçin, ardından Özellikler penceresinde,
  1. AnchorPoint değerini 0.5, 0.5 olarak ayarlayın.
  2. BackgroundTransparency değerini 1 olarak ayarlayın.
  3. Position değerini {0.5, 0},{0.5, 0} olarak ayarlayın.
  4. Size değerini {.85, 0},{0.55, 0} olarak ayarlayın.
  5. Name değerini HeaderTextLabel olarak ayarlayın.
  6. FontFace değerini Montserrat olarak ayarlayın.
  7. Weight değerini Black olarak ayarlayın.
  8. Text değerini TAGLANDI - DIŞARIDASINIZ! olarak ayarlayın.
  9. TextColor3 değerini 255, 255, 255 olarak ayarlayın.
  10. TextScaled değerini etkinleştirin.
Ekranın kenarlarında bir solgunluk oluşturun.
1. OutStateGui nesnesine bir ImageLabel ekleyin.
2. Yeni etiketi seçin, ardından Özellikler penceresinde,
  1. AnchorPoint değerini 0.5, 0.5 olarak ayarlayın.
  2. BackgroundColor3 değerini 0,0,0 olarak ayarlayın.
  3. BackgroundTransparency değerini 0.5 olarak ayarlayın.
  4. Position değerini {0.5, 0},{0.5, 0} olarak ayarlayın.
  5. Size değerini {1, 0},{1, 0} olarak ayarlayın.
  6. ZIndex değerini -1 olarak ayarlayın.
  7. Name değerini Header olarak ayarlayın.
  8. Image değerini rbxassetid://14309518613 olarak ayarlayın.
  9. ImageTransparency değerini 0.1 olarak ayarlayın.
Performansı artırmak için, resim varlığını atlayabilir ve yerine özel bir şeffaflık sayı dizisi ile bir UIGradient nesnesi kullanabilirsiniz. Bu solgunluk tekniği hakkında daha fazla bilgi için, UI Görünüm Modifikatörleri - Gradient başlığına bakın.
Aşağıdaki ReplicatedStorage betiklerini, oyuncunun sağlık durumu sıfıra ulaşırken ve takımın doğuş bölgesine geri dönerken yeniden doğma ekranını programlı olarak görüntülemek için örnek Laser Tag yer dosyasında referans alın.

Aşağıdaki ReplicatedStorage.PlayerStateHandler istemci betiği, playerState niteliğine göre farklı davranış türlerini tetikleyen işlevler içerir. Tüm olay tepkileri, oyuncu kontrollerini, kamera hareketini etkinleştirmek veya devre dışı bırakmak ve hangi UI katmanının görünür olduğunu sağlamak için benzer davranışlar gerektirdiğinden bu betikte mantıksal olarak gruplanmıştır.

Bir oyuncunun sağlık durumu sıfıra düştüğünde, playerState değeri TaggedOut olur ve onTaggedOut() işlevini tetikler. onTaggedOut() hemen aşağıdaki davranışları tetikler:

Oyuncu arenada hareket edemez.
Oyuncu kamerasını hareket ettiremez.
Oyuncu blasterını kullanamaz.
StarterGui.OutStateGui yalnızca etkinleşir.

Oyuncu yeniden doğduğunda, playerState değeri SelectingBlaster olur ve onSelectingBlaster() işlevini tetikler. onSelectingBlaster() ardından yalnızca StarterGui.PickABlasterGui'yi etkinleştirir ve yeniden doğma ekranını otomatik olarak devre dışı bırakır. Bu koşullar hakkında daha fazla bilgi için, Müşteri Durumunu Yönet başlığına bakın.


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"),
}

-- Verilen durum dışında tüm UI katmanlarını devre dışı bırak
local function setGuiExclusivelyEnabled(enabledGui: ScreenGui?)
	-- guiLayers, özel olarak ayarlanacak guilerin bir listesini içerir.
	for _, screenGui in guiLayers do
		screenGui.Enabled = screenGui == enabledGui
	end
end

local function onSelectingBlaster()
	-- Oyuncuların blaster seçerken etrafta bakabilmesi için kamerayı etkinleştir
	togglePlayerCamera(true)
	togglePlayerMovement(false)
	setGuiExclusivelyEnabled(playerGui.PickABlasterGui)

	-- Blaster seçerken blasterı devre dışı bırak
	localPlayer:SetAttribute(PlayerAttribute.blasterStateClient, BlasterState.Disabled)
end

local function onPlaying()
	-- Blaster seçildikten sonra oyuncu hareketini etkinleştir
	togglePlayerMovement(true)
	setGuiExclusivelyEnabled(playerGui.HUDGui)

	-- Oynarken blasteri etkinleştir
	localPlayer:SetAttribute(PlayerAttribute.blasterStateClient, BlasterState.Ready)

	-- Oyuncu oyun oynamaya başladığında kuvvet alanını yok etme lojiğini planlayın
	scheduleDestroyForceField()
end

local function onTaggedOut()
	-- Dışlandığında kontrolleri devre dışı bırak
	togglePlayerMovement(false)
	togglePlayerCamera(false)
	setGuiExclusivelyEnabled(playerGui.OutStateGui)

	-- Dışlandığında blasterı devre dışı bırak
	localPlayer:SetAttribute(PlayerAttribute.blasterStateClient, BlasterState.Disabled)
end

local function onInLobby()
	-- Lobi içinde kontrolleri etkinleştir
	togglePlayerMovement(true)
	togglePlayerCamera(true)

	-- Lobideyken tüm HUD'ları gizle
	setGuiExclusivelyEnabled(nil)

	-- Lobideyken blasterı devre dışı bırak
	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(`Geçersiz oyuncu durumu ({newPlayerState})`)
	end
end

-- Başlangıç oyuncu durumunu kontrol et
local initialPlayerState = localPlayer:GetAttribute(PlayerAttribute.playerState)
onPlayerStateChanged(initialPlayerState)

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

-- Gelecekteki oyuncu durumu güncellemelerini takip et
localPlayer:GetAttributeChangedSignal(PlayerAttribute.playerState):Connect(updateFromPlayerState)

-- Yeniden doğduktan sonra değişikliklerin uygulandığından emin olun
localPlayer.CharacterAdded:Connect(updateFromPlayerState)

Artık bir oyuncunun sağlık durumu sıfıra ulaştığında, yeniden doğma ekranı görüntülenir ve oyuncu, doğuş bölgesine tekrar doğuncaya kadar bu ekran açık kalır.

Artık mevcut GuiObjects öğelerine aşina olduğunuz için, oyuncuların bir maç kazandığında veya kaybettiğinde ekran üzerinde görüntülenecek RoundResultsGui ScreenGui nesnesini ve tüm çocuklarını yeniden oluşturmaya çalışın. Kendi deneyiminizin oyun gereksinimlerine uyacak şekilde değerleri ayarlayabileceğiniz gibi, örnek lazer tag deneyimi .rbxl dosyasını referans olarak kullanabilirsiniz.

SurfaceGui nesneleri oluşturun

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

SurfaceGui nesneleri, 3D alanda bir parçanın yüzeyinde görüntüleyen tüm GuiObjects içerir. Örnek lazer tag deneyimi yalnızca bir adet SurfaceGui örneği içerir: her oyuncunun blasterının üzerine görüntülenen soğuma ölçer. Bu nesne, her bir oyuncunun girişine aktif olarak yanıt verdiğinden ve yeniden blasterlarına ateş edebilecekleri zamanın görsel geri bildirimini sağladığından, her oyuncu için betik mantığına ihtiyaç duyar.

Bir SurfaceGui nesnesi oluşturmak için:

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

Soğuma ölçeri

Soğuma ölçeri, oyunculara tekrar blasterlarını ateşlemek için ne kadar beklemeleri gerektiğini bildiren bir UI bileşenidir. Bu hafif duraklama, oyuncuların tıkladıkları kadar hızlı bir şekilde ateş etmesini önler ki bu lazer tag oyun oynama deneyimi için gerçekçi değildir.

Örnek Laser Tag deneyiminde soğuma ölçerini tam olarak yeniden oluşturmak için:

SurfaceGui nesnenizi tutacak bir parça oluşturun.
1. Explorer penceresinde Workspace üzerine gelin, ardından ⊕ simgesine tıklayın. Bir bağlam menüsü açılır.
2. Bağlam menüsünden bir block parçası ekleyin. Bu, değişiklikleri sürecin her adımında görselleştirebilmeniz için parçayı geçici bir konumda tutar.
Parçayı, bir oyuncunun karakterinin blasterını tutacağı konuma yerleştirin ve yönlendirin, ardından Özellikler penceresinde,
1. Transparency değerini 1 olarak ayarlayın.
2. Name değerini CooldownBarPrefab olarak ayarlayın.
3. Size değerini 0.169, 0.027, 2.537 olarak ayarlayın.
4. CanCollide ve CanQuery değerlerini devre dışı bırakın.
CooldownBarPrefab'e bir SurfaceGui ekleyin.
Yeni SurfaceGui'yı seçin ve ardından Özellikler penceresinde,
1. Face değerini Top olarak ayarlayın.
2. LightInfluence ve MaxDistance değerlerini 0 olarak ayarlayın.
3. PixelsPerStud değerini 200 olarak ayarlayın.
Siyah çubuğu oluşturun.
1. SurfaceGui'ye bir ImageLabel ekleyin.
2. Yeni etiketi seçin ve ardından Özellikler penceresinde,
  1. Varsayılan Image değerini kaldırın.
  2. AnchorPoint değerini 0.5, 0.5 olarak ayarlayın.
  3. BackgroundColor3 değerini 0,0,0 olarak ayarlayın.
  4. BackgroundTransparency değerini 0.4 olarak ayarlayın.
  5. Position değerini {0.5, 0},{0.5, 0} olarak ayarlayın.
  6. Size değerini {1, 0},{1, 0} olarak ayarlayın.
  7. Name değerini Container olarak ayarlayın.
Konteynerin köşelerini yuvarlayın.
1. Container'a bir UICorner nesnesi ekleyin.
2. UICorner'ı seçin ve ardından Özellikler penceresinde CornerRadius değerini 0.15, 0 olarak ayarlayın.
Kırmızı çubuğu oluşturun.
1. Container'a bir ImageLabel ekleyin.
2. Yeni etiketi seçin ve ardından Özellikler penceresinde,
  1. Varsayılan Image değerini kaldırın.
  2. AnchorPoint değerini 1, 0.5 olarak ayarlayın.
  3. BackgroundColor3 değerini 172, 13, 13 olarak ayarlayın.
  4. BackgroundTransparency değerini 0.2 olarak ayarlayın.
  5. Name değerini Bar olarak ayarlayın.
  6. Position değerini {1, 0},{0.5, 0} olarak ayarlayın.
  7. Size değerini {0, 0},{1, 0} olarak ayarlayın. Bu adım, aynı zamanda, adım 8'deki betikler içindeki tweening davranışı için de yararlıdır.
Çubuğun köşelerini yuvarlayın.
1. Bar'a bir UICorner nesnesi ekleyin.
2. UICorner'ı seçin ve ardından Özellikler penceresinde CornerRadius değerini 0.15, 0 olarak ayarlayın.
CooldownBarPrefab'i ReplicatedStorage altına taşıyın.
1. UI nesnelerinizi düzenlemek için bir klasör yapısı oluşturun. Örnek, Instances adında bir klasör kullanır ve içinde Guis klasörü barındırır.
2. CooldownBarPrefab'i Guis klasörüne taşıyın.
Aşağıdaki ReplicatedStorage betiklerini, oyuncunun blasterına soğuma ölçerini programlı olarak eklemek ve ardından oyuncu blasterını ateşladığında kırmızı çubuğu animasyona geçirmek için örnek Laser Tag yer dosyasında referans alın.

Aşağıdaki ReplicatedStorage.FirstPersonBlasterVisuals istemci betiği, oyuncunun birinci şahıs blasterı için tüm görsel mantığı yönetir. Lazer tag oyunu için daha gerçekçi blaster görselleri oluşturacak şekilde birlikte çalışan modül betiklere ihtiyaç duyar; bunlar arasında FirstPersonBlasterVisuals.addCooldownBar ve FirstPersonBlasterVisuals.runCooldownBarEffect yer alı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 rigini ekle
	rigModel = blasterConfig.RigModel:Clone()
	rigModel.Parent = Workspace

	-- Soğuma çubuğunu ekle
	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 aynı zamanda soğuma çubuğunu yok eder çünkü o rig'e bağlıdır
		rigModel:Destroy()
		rigModel = nil
	end
end

-- Bir patlama meydana geldiğ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ğlar
RunService.RenderStepped:Connect(function()
	if rigModel then
		-- Rig'in CFrame'ini kameranın pozisyonuna ve RIG_OFFSET_FROM_CAMERA'ya göre güncelle
		rigModel:PivotTo(currentCamera.CFrame * RIG_OFFSET_FROM_CAMERA)
	end
end)

-- Oynarken blaster türü değiştiğinde görsellerin değiştirilmesini yönetir
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örsellerin değiştirilmesini yönetir
localPlayer:GetAttributeChangedSignal(PlayerAttribute.playerState):Connect(function()
	local newPlayerState = localPlayer:GetAttribute(PlayerAttribute.playerState)
	-- Oyuncu blaster seçerken veya lobideyken görselleri kaldırın
	if newPlayerState == PlayerState.SelectingBlaster or newPlayerState == PlayerState.InLobby then
		removeFirstPersonVisuals()
	-- Oyuncu blasterı seçimini tamamladıktan sonra görselleri ekleyin
	elseif newPlayerState == PlayerState.Playing then
		addFirstPersonVisuals()
	end
end)

Artık bir oyuncu blasterını ateşladığında, soğuma çubuğu, oyuncunun bir daha ne zaman ateş edebileceğini belirtmek için animasyonlu bir şekilde görüntüleniyor.

BillboardGui nesneleri oluşturun

3D alanda oyuncu isimleri veya harita işaretçeleri gibi her oyuncunun kamerasına daima bakan UI öğelerini görüntülemek için, BasePart veya 3D alanda var olan bir Attachment nesnesinin çocuğu olarak bir BillboardGui nesnesi oluşturabilirsiniz.

Örnek lazer tag deneyimi, ReplicatedStorage hizmetinde iki ayrı BillboardGui nesnesi içerir:

OtherPlayerIndicatorGuiPrefab - Her oyuncunun kafasının üzerinde aktif olduklarında pembe veya yeşil bir daire görüntüler.
TaggedOutIndicatorGuiPrefab - Bir oyuncu tura katılmadığında kafalarının üzerinde görüntülenir.

Bir BillboardGui nesnesi oluşturduktan sonra, konteynerinin amacına göre çocuk GuiObjects nesnelerini oluşturup özelleştirebilirsiniz. Demonstrasyon olarak, hemen sonraki bölümlerde her iki gösterge türü için UI öğelerinin nasıl uygulanacağını öğreneceksiniz. Kendi deneyiminizin spesifikasyonlarına 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ü açılır.
Bağlam menüsünden bir BillboardGui nesnesi ekleyin.
BillboardGui'yı çocuk UI öğelerinin bağlamına göre yeniden adlandırın.
Her oyuncunun başı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

Bir takım göstergesi, oyunculara diğer oyuncuların hangi takıma ait olduklarını bildiren bir UI elemanıdır, böylece müttefiklerini ve düşman takım üyelerini kolaylıkla ayırt edebilirler. Bu bilgi önemlidir çünkü birinci şahıs nişancı deneyimi, oyuncuların savaş alanında hızlı stratejik kararlar almalarını gerektirir, böylece dışarı çıkıp maçı kaybetmezler.

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

Geçici bir rig içine bir BillboardGui nesnesi ekleyin.
1. Araç çubuğunun Home veya Avatar sekmesinden Karakter'e tıklayın.
2. Mevcut seçeneklerden birini seçin. Örnek, bir R15 rig türü, dişi bir vücut şekli ve bir Rthro avatarı kullanır. Rig, 3D görüntüleme penceresinde ve Explorer penceresinde Rig adı altında görüntülenir.
3. Explorer penceresinde rig'in Head altındaki mesh'e gidin ve ardından ⊕ simgesine tıklayın. Bir bağlam menüsü açılır.
4. Bağlam menüsünden bir BillboardGui ekleyin.
Yeni BillboardGui'yı seçin, ardından Özellikler penceresinde,
1. LightInfluence değerini 0 olarak ayarlayın.
2. Name değerini OtherPlayerIndicatorPrefab olarak ayarlayın.
3. Size değerini {0, 10},{0, 10} olarak ayarlayın.
4. StudsOffsetWorldSpace değerini 0, 4, 0 olarak ayarlayın.
OtherPlayerIndicatorPrefab'e bir Frame nesnesi ekleyin.
Yeni frame'i seçin, ardından Özellikler penceresinde,
1. AnchorPoint değerini 0.5, 0.5 olarak ayarlayın.
2. BackgroundColor3 değerini 255, 3, 0 olarak ayarlayın.
3. Position değerini {0.5, 0},{0.5, 0} olarak ayarlayın.
4. Size değerini {1, -2},{1, -2} olarak ayarlayın.
Frame'e bir UICorner nesnesi ekleyin.
Frame'e bir UIStroke nesnesi ekleyin.
OtherPlayerIndicatorPrefab'i ReplicatedStorage'e taşıyın.
Aşağıdaki ReplicatedStorage betiğini, aktif bir turda bulunan her oyuncu için otomatik olarak takım göstergesini görüntülemek üzere örnek Laser Tag 1A yer dosyasında referans alın.

Aşağıdaki ReplicatedStorage.OtherPlayerIndicatorGuiSetup betiği, oyuncular arenaya aktif bir tura katıldıklarında çalışır. addIndicatorToCharacter() işlevini çağırarak takım göstergesini ekler ve bu işlev, tura katılan her oyuncunun karakterinin Head nesnesini bulur. Eğer zaten bir takım göstergesi yoksa, betik otherPlayerIndicatorPrefab UI'sini karakterin Head'ine klonlayıp ekler ve takım göstergesi rengini kendi takım rengini ayarlar.

Eğer diğer oyuncular aynı takımda ise, takım göstergesi her zaman görüntülenir, nesnelerin bazen görülemediği 3D alanda gizlidir. Eğer diğer oyuncular düşman takımdaysa, yalnızca eğer onları engelleyecek bir nesne yoksa takım göstergesi 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 oyuncular için göstergeler ekleyin
		if not otherPlayer.Team then
			return
		end

		-- Tekrar eden göstergeleri önlemek için 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ını yalnızca oyuncu dostuysa ayarlayın.

		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 bulunduğunda, takım göstergeleri diğer oyuncuların kafalarının üzerinde görüntüleniyor; düşman takımdayken ve bir nesne arkasında gizlenmedikçe.

Dışlanma göstergesi

Bir dışlanma göstergesi, oyunculara diğer oyuncuların artık aktif olmadıklarını ve yeniden doğmak üzere takımlarının doğuş bölgesine geri döndüklerini bildiren bir UI elemanıdır. Bu bilgi önemlidir çünkü birinci şahıs nişancı deneyimi, oyuncuların bir oyuncuyu dışladıktan sonra hızlı bir şekilde bir sonraki hedeflerine hareket etmelerini gerektirir; böylece arenada çok uzun süre aynı konumda kalarak zayıf duruma düşmezler.

Örnek Laser Tag deneyiminde dışlanma göstergesini tam olarak yeniden oluşturmak için:

Geçici bir rig içine bir BillboardGui nesnesi ekleyin.
1. Araç çubuğunun Home veya Avatar sekmesinden Karakter'e tıklayın.
2. Seçeneklerden birini seçin. Örnek, bir R15 rig türü, erkek bir vücut şekli ve bir Rthro avatarı kullanır. Rig, 3D görüntüleme penceresinde ve Explorer penceresinde Rig adı altında görüntülenir.
3. Explorer penceresinde rig'in Head altındaki mesh'e gidin ve ardından ⊕ simgesine tıklayın. Bir bağlam menüsü açılır.
4. Bağlam menüsünden bir BillboardGui ekleyin.
Yeni BillboardGui'yı seçin, ardından Özellikler penceresinde,
1. LightInfluence değerini 0 olarak ayarlayın.
2. Name değerini TaggedOutIndicatorGuiPrefab olarak ayarlayın.
3. Size değerini {3, 0},{0.5, 0} olarak ayarlayın.
4. StudsOffset değerini 0, 3.25, 0 olarak ayarlayın.
TaggedOutIndicatorGuiPrefab'e bir ImageLabel nesnesi ekleyin.
Yeni etiketi seçin ve ardından Özellikler penceresinde,
1. AnchorPoint değerini 0.5, 0.5 olarak ayarlayın.
2. BackgroundTransparency değerini 1 olarak ayarlayın.
3. Name değerini Frame olarak ayarlayın.
4. Position değerini {0.5, 0},{0.5, 0} olarak ayarlayın.
5. Size değerini {1, 0},{1, 0} olarak ayarlayın.
6. Image değerini rbxassetid://14304826985 olarak ayarlayın.
7. ImageColor değerini 245, 46, 46 olarak ayarlayın.
Performansı artırmak için, resim varlığını atlayabilir ve yerine özel bir şeffaflık sayı dizisi ile bir UIGradient nesnesi kullanabilirsiniz. Bu solgunluk tekniği hakkında daha fazla bilgi için, UI Görünüm Modifikatörleri - Gradient başlığına bakın.
Frame'e bir TextLabel nesnesi ekleyin.
Yeni etiketi seçin ve ardından Özellikler penceresinde,
1. AnchorPoint değerini 0.5, 0.5 olarak ayarlayın.
2. BackgroundTransparency değerini 1 olarak ayarlayın.
3. Name değerini BodyTextLabel olarak ayarlayın.
4. Position değerini {0.5, 0},{0.5, 0} olarak ayarlayın.
5. Size değerini {0.85, 0},{0.7, 0} olarak ayarlayın.
6. FontFace değerini Montserrat olarak ayarlayın.
7. Weight değerini Bold olarak ayarlayın.
8. Text değerini DIŞLANDI olarak ayarlayın.
9. TextColor3 değerini 255, 255, 255 olarak ayarlayın.
10. TextScaled değerini etkinleştirin.
TaggedOutIndicatorGuiPrefab'i ReplicatedStorage'e taşıyın.
Aşağıdaki ServerScriptService betiklerini, oyuncu kendi takımının doğuş bölgesine geri dönerken dışlanma göstergesini programlı olarak görüntülemek için örnek Laser Tag 1A yer dosyasında referans alın.

Aşağıdaki ServerScriptService.SetupHumanoid sunucu scripti bir oyuncu deneyimi yüklediğinde hemen çalışır. Bir oyuncunun karakteri veri modeline eklendiğinde, setupHumanoidAsync'ın 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)
	-- Oyuncunun zaten bir karakteri varsa onCharacterAdded'ı çağır
	if player.Character then
		onCharacterAdded(player, player.Character)
	end
	-- Bu oyuncu için tüm gelecekteki karakter doğumları için onCharacterAdded'ı çağır
	player.CharacterAdded:Connect(function(character: Model)
		onCharacterAdded(player, character)
	end)
end

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

Artık bir oyuncunun sağlığı sıfıra ulaştığında, çıkarma göstergesi başlarının üzerinde yeniden doğana kadar görüntülenir.

Kullanıcı Arayüzü Tasarımı Müfredatını tamamladığınız için tebrikler! Bir sanat tarzı oluşturma, tasarımlarınızı wireframe ile oluşturmada ve Stüdyoda baştan sona uygulamada deneyiminiz olduğuna göre, projenizi yeni UI ve işlevsellikle genişletebilir veya Oyun Scripting Müfredatı gibi ek eğitim müfredatlarını takip edebilirsiniz; bu, size örnek lazer tag deneyiminin genel organizasyonu ve ana uygulama detayları hakkında bilgi verir. Mutlu yaratmalar!