Herkese merhaba, adım Dmitrii Ivashchenko ve MY.GAMES'te Yazılım Mühendisiyim. Bu yazımızda Unity'de elementlerin durumları ve işaretlemelerine dayalı bir kullanıcı arayüzü geliştirmekten bahsedeceğiz. Giriş Öncelikle şunu belirtelim ki, Runtime için hala tavsiye edilen (uGUI) teknolojisi bağlamında konuşacağız. Açıklanan yaklaşım , veya diğer UI oluşturma sistemleri için geçerli değildir. belgelere göre Unity UI UI Araç Seti IMGUI projelerinde çoğunlukla devralınan View sınıfları üzerine kurulu ve çok sayıda alanıyla süslenmiş kullanıcı arayüzü uygulamalarıyla karşılaşırsınız. Bu yaklaşım, kullanıcı arayüzünün davranışı üzerinde tam kontrol sağlar, ancak aynı zamanda Görünüm ve Sunucu düzeylerinde (kullanılan mimariye bağlı olarak) büyük miktarda kod yazmayı da gerekli kılar. Unity MonoBehaviour SerializeField Çoğu zaman, proje geliştirme devam ettikçe bu sınıflar inanılmaz boyutlara ulaşır ve GameObject'teki bileşenler dahili nesnelere giden çok sayıda bağlantıyla kaplanır: Bileşenleri bu şekilde değiştirmek de eğlenceli değil: Bir sınıftaki yeni bir öğeye referans almak için eklemeniz, kodu yeniden derlemeniz, prefabrik bileşende yeni alanı bulmanız ve gerekli nesneyi bu alana sürüklemeniz gerekir. Proje büyüdükçe derleme süresi, alan sayısı ve prefabrik yapıları düzenlemenin karmaşıklığı da artar. SerializeField Sonuç olarak, büyük ve aşırı yüklenmiş alt sınıflarıyla (veya tercihinize bağlı olarak çok sayıda küçük alt sınıfla) karşılaşırız. MonoBehaviour Böyle bir kullanıcı arayüzünün davranışında yapılacak herhangi bir değişikliğin programcıya ait bir görev olduğunu ve bu görevin ilgili tüm maliyetleri de beraberinde getirdiğini dikkate almak gerekir: kod incelemesi, birleştirme çatışmalarını çözme, testlerle kod kapsamı vb. Birden fazla duruma sahip pencerelerin uygulanmasını vurgulamak istiyorum. İki yaklaşıma ayrılabilecek birçok varyasyon gördüm: İlk olarak, pencere durumundaki herhangi bir değişiklik gerçekleşir. Metnin rengini değiştirmek, bir görüntüyü değiştirmek, bir animasyonu oynatmak, bir nesneyi ekranda taşımak için; ilgili tüm nesneler ve parametreler karşılık gelen bir gerektirir ve ardından gereksinimlere göre çalışmasını sağlamak için büyük miktarda kod yazılır. . Doğal olarak, yalnızca bir programcı bunun üstesinden gelebilir ve uygulamanın uzun, pahalı ve süper verimli (çoğunlukla herkesin fark edebileceğinden çok daha verimli) olduğu ortaya çıkar. code kullanılarak SerializeField Bir diğer yaklaşım ise “ ” olarak tanımlanabilir. View sınıfına ek olarak bir Animatör Denetleyicisi oluşturulur ve parametreler aracılığıyla kontrol edilir. Yeni pencerede yeni bir Animatör belirir ve pencereler görüntülenirken FPS düşmeye başlayana kadar bu şekilde devam eder. çok güçlü Animatör Artık uGUI ile çalışmanın bazı zorluklarını vurguladığımıza göre, bu sorunun çözümüne yönelik farklı bir yaklaşımdan bahsetmek istiyorum. Durum bilgisi olan kullanıcı arayüzü Evcil hayvan projelerimden biri üzerinde çalışırken, Unity'de yapılandırılmış kullanıcı arayüzü geliştirmeye yönelik bir kütüphane geliştirdim. Daha sonra ekibim ve ben bunu üretimde test ettik ve sonuçlardan memnun kaldık. . Kütüphanenin kaynak kodu GitHub'dan indirilebilir Durum Bilgili Bileşen Kütüphanenin temel öğesi bileşenidir. Bu bileşen, her ekranın kök GameObject'ine yerleştirilir ve sekmeler arasında dağıtılmış şekilde dahili öğelere ilişkin gerekli tüm referansları içerir: StatefulComponent Her bağlantı göre adlandırılır. Kod açısından bakıldığında roller kümesi düzenli bir . Her kullanıcı arayüzü öğesi türü (düğmeler, resimler, metinler vb.) için ayrı rol kümeleri hazırlanır: rolüne enum public enum ButtonRole { ... } public enum ImageRole { ... } public enum TextRole { ... } ... Roller doğrudan bileşenden oluşturulur ve manuel olarak düzenlenmesine gerek yoktur. Bir rol oluştururken yeniden derlemeyi beklemek de gerekli değildir, çünkü bu öğeleri oluşturulduktan hemen sonra kullanılabilir. enum enum Birleştirme çakışmalarını basitleştirmek için numaralandırma değerleri, öğelerin adlarına göre hesaplanır: [StatefulUI.Runtime.RoleAttributes.ButtonRoleAttribute] public enum ButtonRole { Unknown = 0, Start = -1436209294, // -1436209294 == "Start".GetHashCode() Settings = 681682073, Close = -1261564850, Quests = 1375430261, } Bu, siz ve iş arkadaşlarınızın farklı dallardaki düğmeler için aynı anda yeni roller oluşturmanız durumunda, prefabriklerdeki serileştirilmiş değerlerin bozulmasını önlemenize olanak tanır. Her kullanıcı arayüzü öğesi türü (düğmeler, metinler, resimler) kendi sekmesinde bulunur: Rolleri kullanarak prefabrik içindeki tüm öğelerin tam olarak işaretlenmesi sağlanır. Resimlere ve metinlere erişmek için artık kümelerine gerek yoktur ve örneğin hareketli grafiği değiştirmek için tek bir referansa sahip olmak ve istenen görüntünün rolünü bilmek yeterlidir. SerializeField StatefulComponent Şu anda erişilebilen öğe türleri şunlardır: Düğmeler, Görseller, Geçişler, Kaydırıcılar, Açılır Menüler, Video Oynatıcılar, Animatörler ve dahil metinler UnityEngine.UI.Text TextMeshProUGUI ve dahil TextInput'lar UnityEngine.UI.InputField TMP_InputField Nesneler — isteğe bağlı nesnelere yapılan başvurular için. Açıklamalı nesnelerle çalışmak için ilgili yöntemler vardır. Kodda referansını kullanabilir veya sınıfı devralabilirsiniz: StatefulComponent StatefulView public class ExamplePresenter { private StatefulComponent _view; public void OnOpen() { _view.GetButton(ButtonRole.Settings).onClick.AddListener(OnSettingsClicked); _view.GetButton(ButtonRole.Close).onClick.AddListener(OnCloseClicked); _view.GetSlider(SliderRole.Volume).onValueChanged.AddListener(OnVolumeChanged); } } public class ExampleScreen : StatefulView { private void Start() { SetText(TextRole.Title, "Hello World"); SetTextValues(TextRole.Timer, hours, minutes, seconds); SetImage(ImageRole.UserAvatar, avatarSprite); } } Metinler ve Yerelleştirme Metinlerin bulunduğu sekme, rol ve nesne bağlantısına ek olarak aşağıdaki sütunları içerir: Kod: yerelleştirme için bir metin anahtarı Yerelleştir onay kutusu: metin alanının yerelleştirmeye tabi olduğunu gösteren bir gösterge Değer: nesnenin geçerli metin içeriği Yerelleştirilmiş: Kod alanındaki anahtarla bulunan mevcut metin Kütüphane, çevirilerle çalışmak için yerleşik bir alt sistem içermez. Yerelleştirme sisteminizi bağlamak için arayüzünün bir uygulamasını oluşturmanız gerekir. Bu, örneğin Arka Uç, ScriptableObjects veya Google E-Tablolarınıza dayalı olarak oluşturulabilir. ILocalizationProvider public class HardcodeLocalizationProvider : ILocalizationProvider { private Dictionary<string, string> _dictionary = new Dictionary<string, string> { { "timer" , "{0}h {1}m {2}s" }, { "title" , "Título do Jogo" }, { "description" , "Descrição longa do jogo" }, }; public string GetPhrase(string key, string defaultValue) { return _dictionary.TryGetValue(key, out var value) ? value : defaultValue; } } Yerelleştirmeyi Kopyala butonuna tıkladığınızda Kod ve Değer sütunlarının içerikleri Google E-Tablolar'a yapıştırmaya uygun formatta panoya kopyalanacaktır. Dahili Bileşenler Çoğu zaman, yeniden kullanımı kolaylaştırmak için kullanıcı arayüzünün ayrı bölümleri ayrı prefabrik yapılara çıkarılır. ayrıca her bileşenin yalnızca kendi alt arayüz öğeleriyle çalıştığı bir bileşenler hiyerarşisi oluşturmamıza da olanak tanır. StatefulComponent İç Kompozisyonlar sekmesinde dahili bileşenlere roller atayabilirsiniz: Yapılandırılmış roller kodda diğer öğe türlerine benzer şekilde kullanılabilir: var header = GetInnerComponent(InnerComponentRole.Header); header.GetButton(ButtonRole.Close).onClick.AddListener(OnCloseClicked); header.SetText(TextRole.Title, "Header Title"); var footer = GetInnerComponent(InnerComponentRole.Footer); footer.GetButton(ButtonRole.Continue).onClick.AddListener(OnContinueClicked); footer.SetText(TextRole.Message, "Footer Message"); Konteynerler Benzer öğelerin bir listesini oluşturmak için bileşenini kullanabilirsiniz. Örnekleme için hazır yapıyı ve kök nesneyi (isteğe bağlı) belirtmeniz gerekir. Düzenleme modunda, kullanarak öğe ekleyebilir ve kaldırabilirsiniz: ContainerView StatefulComponent Örneklendirilmiş prefabrik yapıların içeriğini işaretlemek için kullanmak uygundur. Çalışma zamanında, kapsayıcıyı doldurmak için , veya yöntemlerini kullanabilirsiniz: StatefulComponent AddInstance<T> AddStatefulComponent FillWithItems var container = GetContainer(ContainerRole.Players); container.Clear(); container.FillWithItems(_player, (StatefulComponent view, PlayerData data) => { view.SetText(TextRole.Name, data.Name); view.SetText(TextRole.Level, data.Level); view.SetImage(ImageRole.Avatar, data.Avatar); }); Eğer standart nesne oluşturmak için size uygun değilse, bu davranışı örneğin Zenject kullanarak örnekleme için geçersiz kılabilirsiniz: Object.Instantiate() StatefulUiManager.Instance.CustomInstantiateMethod = prefab => { return _diContainer.InstantiatePrefab(prefab); }; Dahili Bileşenler ve Kapsayıcılar, için sırasıyla statik ve dinamik iç içe yerleştirme sağlar. StatefulComponent Prefabriklerin işaretlenmesini, yerelleştirilmesini ve örneklemeyi değerlendirdik. Şimdi en ilginç kısma geçmenin zamanı geldi; durumlara dayalı kullanıcı arayüzleri geliştirmeye. Devletler Devlet kavramını bir prefabrik yapıdaki adlandırılmış değişiklikler dizisi olarak ele alacağız. Bu durumda ad, numaralandırmasındaki bir roldür ve prefabrikteki değişiklik örnekleri şunlar olabilir: StateRole GameObject'i etkinleştirme ve devre dışı bırakma Görüntü nesneleri için spriteları veya malzemeleri değiştirme Ekrandaki nesneleri taşıma Metinleri ve görünümlerini değiştirme Animasyonları oynatma Ve benzeri — kendi nesne manipülasyonu türlerinizi ekleyebilirsiniz Durumlar sekmesinde bir dizi değişiklik (Durum Açıklaması) yapılandırılabilir. Yapılandırılmış bir durum doğrudan denetçiden uygulanabilir: Yapılandırılmış bir durum, yöntemi kullanılarak koddan uygulanabilir: SetState switch (colorScheme) { case ColorScheme.Orange: SetState(StateRole.Orange); break; case ColorScheme.Red: SetState(StateRole.Red); break; case ColorScheme.Purple: SetState(StateRole.Purple); break; } Araçlar sekmesinde, parametresi etkinleştirildiğinde, nesne örneği oluşturulduktan hemen sonra uygulanacak Durumu yapılandırabilirsiniz. Etkinleştirildiğinde Başlangıç Durumunu Uygula Durumların kullanılması, View sınıfı düzeyinde gereken kod miktarında önemli bir azalmaya olanak tanır. Ekranınızın her durumunu bir dizi değişiklik olarak tanımlayın ve oyunun durumuna bağlı olarak koddan gerekli Durumu uygulayın. StatefulComponent Devlet Ağacı Aslında durumlara dayalı bir kullanıcı arayüzü geliştirmek inanılmaz derecede kullanışlıdır. Öyle ki, zamanla başka bir soruna yol açar; proje geliştikçe, tek bir pencereye ilişkin durum listesi aşırı uzunluğa ulaşabilir ve bu nedenle gezinmek zorlaşır. Ayrıca, yalnızca diğer bazı durumların bağlamında anlamlı olan durumlar da vardır. Bu sorunu çözmek için Statful UI'nın başka bir aracı vardır: Durum Ağacı. Durumlar sekmesindeki Durum Ağacı Düzenleyicisi düğmesine tıklayarak buna erişebilirsiniz. Bir sandık için ödül penceresi oluşturmamız gerektiğini varsayalım. Pencerenin 3 aşaması vardır: Sandık animasyonlu tanıtımı ( durumu) Giriş Sandıktan üç farklı ödül türünün döngüsel görünümü ( durumuna bağlı olarak , ve belirtilir; bu, sandıktan görünen ödülün animasyonunu tetikler) Ödül Para Emoji Kartlar Verilen tüm ödüllerin tek bir listede görüntülenmesi ( belirtin) Sonuçları Ana durumlar (bu örnekte ), alt durumlar her çağrıldığında uygulanır: Reward Yapılandırılmış bir yönetmek, bileşenleri gerekli verilerle dolduran ve durumları doğru anda değiştiren minimum miktarda basit ve anlaşılır koddan oluşur: StatefulComponent public void ShowIntro() { SetState(StateRole.Intro); } public void ShowReward(IReward reward) { // Update the inner view with the reward reward.UpdateView(GetInnerComponent(InnerComponentRole.Reward)); // Switch on the type of reward switch (reward) { case ICardsReward cardsReward: SetState(StateRole.Cards); break; case IMoneyReward moneyReward: SetState(StateRole.Money); break; case IEmojiReward emojiReward: SetState(StateRole.Emoji); break; } } public void ShowResults(IEnumerable<IReward> rewards) { SetState(StateRole.Results); // Fill the container with the rewards GetContainer(ContainerRole.TotalReward) .FillWithItems(rewards, (view, reward) => reward.UpdateView(view)); } Durum Bilgili API ve Dokümantasyon Rollerin amacı, daha sonra kodda kullanılmak üzere bağlantıları ve durumları adlandırmak için kullanışlı ve net bir yol sağlamaktır. Bununla birlikte, bir durumu tanımlamanın çok uzun bir ad gerektirdiği durumlar vardır ve bu bağlantının neye işaret ettiği veya durumun hangi davranışı yansıttığı hakkında küçük bir yorum bırakmak daha uygun olacaktır. Bu gibi durumlarda, her bağlantı ve durum bir açıklama eklemenize olanak tanır: StatefulComponent Her sekmede API Kopyala ve Belgeleri Kopyala düğmelerini zaten fark etmiş olabilirsiniz; bunlar, seçilen bölüm için kopyalama bilgileridir. Bunlara ek olarak, Araçlar sekmesinde benzer düğmeler vardır; bunlar tüm bölümler için bilgileri aynı anda kopyalar. API'yi Kopyala düğmesini tıkladığınızda, bu nesnesini yönetmek için oluşturulan kod panoya kopyalanacaktır. Ödül penceremize bir örnek: StatfulComponent // Insert the name of the chest here SetText(TextRole.Title, "Lootbox"); // Button to proceed to the reward issuance phase GetButton(ButtonRole.Overlay); // Button to display information about the card GetButton(ButtonRole.Info); // Container for displaying the complete list of awarded rewards GetContainer(ContainerRole.TotalReward); // Insert the card image here SetImage(ImageRole.Avatar, null); // Animated appearance of a chest SetState(StateRole.Intro); Belgeleri Kopyala düğmesini tıkladığınızda, bu prefabrik yapının belgeleri Markdown formatında panoya kopyalanacaktır: ### RewardScreen Buttons: - Overlay - Button to proceed to the reward issuance phase - Info - Button to display information about the card Texts: - Title - Insert the name of the chest here Containers: - TotalReward - Container for displaying the complete list of awarded rewards Images: - Avatar - Insert the card image here States: - Intro - Animated appearance of a chest - Cards - Displaying rewards in the form of a card - Money - Displaying rewards in the form of game currency - Emoji - Displaying rewards in the form of an emoji - Results - Displaying a complete list of issued rewards Bu kadar detaylı talimatların yer aldığı bu ekranı uygularken hata yapmanın oldukça zor olduğu aşikar. Projenin bilgi tabanında UI organizasyonunuzla ilgili güncel bilgileri kolayca tutabilirsiniz. Aynı zamanda Durum Bilgili Kullanıcı Arayüzü, kullanıcı arayüzü prefabriklerinin oluşturulması için yetki verilmesine olanak tanır. Aslında durum tabanlı işaretleme, prefabrik yapının davranışını programcılara aktarmadan önce tamamen test etmeye olanak tanır. Bu, , teknik tasarımcıların ve hatta ayrı kullanıcı arayüzü geliştiricilerinin prefabrikler hazırlayabileceği anlamına gelir. Ayrıca, kod ile prefabrik arasında bir API oluşturulduğundan, prefabriklerin programlanması ve yapılandırılması paralel olarak yapılabilir! Gerekli olan tek şey API'yi önceden formüle etmektir. Ancak prefabrik yapıları yapılandırma görevi programcılara kalsa bile Durum Bilgili Kullanıcı Arayüzünün kullanılması bu işi önemli ölçüde hızlandırır. oyun tasarımcılarının Çözüm Gördüğümüz gibi Durum Bilgili Kullanıcı Arayüzü, kullanıcı arayüzü öğesi durumlarıyla çalışmayı önemli ölçüde basitleştirir. SerializeFields oluşturmak, kodu yeniden derlemek ve çok sayıda View sınıfı alanı arasında referans aramak için artık uzun döngülere gerek yok. View sınıflarının kendisinde, nesneleri açıp kapatmak veya metin rengini değiştirmek gibi tekrarlanan işlemler için artık büyük miktarda kod yazmaya gerek yok. Kitaplık, bir projedeki düzenleri organize etme, prefabrik yapılar içindeki nesneleri işaretleme, durumlar oluşturma, bunları kullanıcı arayüzü öğelerine bağlama ve kullanıcı arayüzü yönetimi için bir API ve dokümantasyon sağlama konusunda tutarlı bir yaklaşıma olanak tanır. Ayrıca kullanıcı arayüzü prefabriklerinin oluşturulmasının devredilmesine olanak tanır ve onlarla çalışmayı hızlandırır. İleriye dönük olarak proje yol haritası aşağıdaki öğeleri içermektedir: Durumların yeteneklerini genişletme, Açıklamada yeni animasyon türleri, durumlarda ses çalma vb. gibi yeni türdeki kullanıcı arayüzü değişikliklerini destekleme Metin ve resimleri renklendirmek için renk paletleri desteği ekleme GameObjects'in yeniden kullanımıyla öğe listeleri için destek ekleme Daha fazla sayıda Unity UI öğesinin desteklenmesi Yerelleştirme için eklenen metinlerin kaldırılmasının otomatikleştirilmesi Bir Test Çerçevesinin Uygulanması. Prefabriklerimizin kapsamlı işaretlemesine sahip olduğumuzdan, kurulumu kolay ScriptableObject tabanlı senaryoları aşağıdaki formatta oluşturabiliriz: düğmesini tıklayın ButtonRole.Settings metnin "bazı değerlere" eşit olup olmadığını kontrol edin TextRole.SomeText Belirli bir karaktere eşit olduğundan emin olmak için görüntüyü kontrol edin ImageRole.SomeImage Bir eğitim sistemi. Teste benzer şekilde, işaretli düzen, " düğmesinde işaretçiyi göster" gibi talimatlar biçiminde ScriptableObject tabanlı eğitim senaryoları oluşturmaya olanak tanır. ButtonRole.UpgradeHero . Sayılar oluşturabilir veya kütüphaneye katkıda bulunabilirsiniz! Proje kaynak kodu GitHub'da mevcuttur

The code in this story is for educational purposes. The readers are solely responsible for whatever they build with it.

Walkthroughs, tutorials, guides, and tips. This story will teach you how to do something new or how to do something better.

Invite me to speak

Add me on LinkedIn

Read My Stories

Lead Software Engineer @ MY.GAMES

Bu ses hikayenin orijinal dilinde üretilmiştir!

Çok uzun; Okumak

Discover Saakuru: Web3 Mass-Adoption with 0-FEES

StatefulUI: Durumlara ve İşaretlemeye Dayalı Bir Birlik Kullanıcı Arayüzü Kitaplığı

Çok uzun; Okumak

People Mentioned

Dmitrii Ivashchenko

STORY’S CREDIBILITY

Code License

Guide

About Author

ETİKETLERİ ASIN

Languages

BU YAZI...

StatefulUI: Durumlara ve İşaretlemeye Dayalı Bir Birlik Kullanıcı Arayüzü Kitaplığı

Çok uzun; Okumak

People Mentioned

Dmitrii Ivashchenko

STORY’S CREDIBILITY

Code License

Guide

About Author

ETİKETLERİ ASIN

Languages

BU YAZI...

İLGİLİ ÖYKÜLER