Hallo zusammen, mein Name ist Dmitrii Ivashchenko und ich bin Softwareentwickler bei MY.GAMES. In diesem Artikel sprechen wir über die Entwicklung einer Benutzeroberfläche in Unity basierend auf Zuständen und Markup von Elementen. Einführung Zunächst ist anzumerken, dass wir im Zusammenhang mit der (uGUI)-Technologie sprechen, die weiterhin für Runtime empfohlen wird. Der beschriebene Ansatz ist nicht auf , oder andere UI-Erstellungssysteme anwendbar. Unity UI laut Dokumentation UI Toolkit IMGUI Am häufigsten werden Sie in Projekten auf eine UI-Implementierung stoßen, die auf von geerbten View-Klassen basiert und mit einer großen Anzahl von Feldern gespickt ist. Dieser Ansatz ermöglicht die vollständige Kontrolle über das Verhalten der Benutzeroberfläche, erfordert jedoch auch das Schreiben einer großen Menge Code auf der View- und Presenter-Ebene (abhängig von der verwendeten Architektur). Unity- MonoBehaviour SerializeField Im Laufe der Projektentwicklung wachsen diese Klassen oft auf unglaubliche Größen an und die Komponenten auf GameObject selbst sind mit einer großen Anzahl von Links zu internen Objekten abgedeckt: Das Modifizieren solcher Komponenten macht auch keinen Spaß: Um einen Verweis auf ein neues Element in einer Klasse zu erhalten, müssen Sie hinzufügen, den Code neu kompilieren, das neue Feld in der vorgefertigten Komponente suchen und das erforderliche Objekt hineinziehen. Wenn das Projekt wächst, nehmen auch die Kompilierzeit, die Anzahl der Felder und die Komplexität der Organisation von Fertighäusern zu. SerializeField Infolgedessen erhalten wir umfangreiche und überlastete Unterklassen von (oder eine große Anzahl kleiner Unterklassen, je nach Wunsch). MonoBehaviour Es ist auch zu bedenken, dass alle Änderungen am Verhalten einer solchen Benutzeroberfläche eine Aufgabe des Programmierers sind und diese Aufgabe mit allen damit verbundenen Kosten verbunden ist: Codeüberprüfung, Lösung von Zusammenführungskonflikten, Codeabdeckung mit Tests usw. Ich möchte die Implementierung von Fenstern mit mehreren Zuständen hervorheben. Ich habe viele Variationen gesehen, die sich in zwei Ansätze unterteilen lassen: Zunächst erfolgt jede Änderung des Fensterstatus . Um die Farbe von Text zu ändern, ein Bild zu ändern, eine Animation abzuspielen, ein Objekt auf dem Bildschirm zu verschieben – alle beteiligten Objekte und Parameter erfordern ein entsprechendes , und dann wird eine große Menge Code geschrieben, damit es entsprechend den Anforderungen funktioniert . Natürlich kann damit nur ein Programmierer umgehen, und die Implementierung erweist sich als langwierig, teuer und äußerst effizient (oft viel effizienter, als irgendjemand bemerken kann). mithilfe von Code SerializeField Ein anderer Ansatz kann als „ “ bezeichnet werden. Zusätzlich zur View-Klasse wird ein Animator-Controller erstellt und über Parameter gesteuert. Im neuen Fenster erscheint ein neuer Animator usw., bis die FPS beim Anzeigen von Fenstern zu sinken beginnen. allmächtiger Animator Nachdem wir nun einige der Schwierigkeiten bei der Arbeit mit uGUI hervorgehoben haben, möchte ich über einen anderen Ansatz zur Lösung dieses Problems sprechen. Zustandsbehaftete Benutzeroberfläche Während meiner Arbeit an einem meiner Lieblingsprojekte habe ich eine Bibliothek für die strukturierte UI-Entwicklung in Unity entwickelt. Später testeten mein Team und ich es in der Produktion und waren mit den Ergebnissen zufrieden. . Der Quellcode der Bibliothek steht auf GitHub zum Download bereit Zustandsbehaftete Komponente Das Schlüsselelement der Bibliothek ist die Komponente. Diese Komponente wird im Stamm-GameObject jedes Bildschirms platziert und enthält alle notwendigen Verweise auf interne Elemente, verteilt auf Registerkarten: StatefulComponent Jeder Link wird nach seiner benannt. Aus Code-Sicht ist der Rollensatz eine reguläre . Für jeden Typ von UI-Element (Schaltflächen, Bilder, Texte usw.) werden separate Rollensätze vorbereitet: Rolle enum public enum ButtonRole { ... } public enum ImageRole { ... } public enum TextRole { ... } ... Rollen werden direkt aus der Komponente generiert und es ist nicht erforderlich, die manuell zu bearbeiten. Auch das Warten auf eine Neukompilierung beim Anlegen einer Rolle ist nicht notwendig, da diese Elemente direkt nach der Erstellung verwendet werden können. enum enum Um Zusammenführungskonflikte zu vereinfachen, werden Aufzählungswerte basierend auf den Namen der Elemente berechnet: [StatefulUI.Runtime.RoleAttributes.ButtonRoleAttribute] public enum ButtonRole { Unknown = 0, Start = -1436209294, // -1436209294 == "Start".GetHashCode() Settings = 681682073, Close = -1261564850, Quests = 1375430261, } Auf diese Weise können Sie vermeiden, dass serialisierte Werte in Fertighäusern beschädigt werden, wenn Sie und Ihre Kollegen zufällig gleichzeitig neue Rollen für Schaltflächen in verschiedenen Zweigen erstellen. Jede Art von UI-Element (Schaltflächen, Texte, Bilder) befindet sich auf einer eigenen Registerkarte: Durch die Verwendung von Rollen wird die vollständige Auszeichnung aller Elemente innerhalb des Fertighauses erreicht. Für den Zugriff auf Bilder und Texte sind keine Sätze mehr erforderlich. Es reicht aus, einen Verweis auf zu haben und die Rolle des gewünschten Bildes zu kennen, um beispielsweise dessen Sprite zu ersetzen. SerializeField StatefulComponent Die derzeit zugänglichen Elementtypen sind: Schaltflächen, Bilder, Umschalter, Schieberegler, Dropdowns, VideoPlayer, Animatoren Texte, einschließlich und UnityEngine.UI.Text TextMeshProUGUI TextInputs, einschließlich und UnityEngine.UI.InputField TMP_InputField Objekte – für Verweise auf beliebige Objekte. Für die Arbeit mit annotierten Objekten gibt es entsprechende Methoden. Im Code können Sie einen Verweis auf verwenden oder die Klasse von erben: 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); } } Texte und Lokalisierung Die Registerkarte mit Texten enthält neben der Rolle und dem Link zum Objekt folgende Spalten: Code: ein Textschlüssel zur Lokalisierung Kontrollkästchen Lokalisieren: ein Indikator dafür, dass das Textfeld einer Lokalisierung unterliegt Wert: der aktuelle Textinhalt des Objekts Lokalisiert: der aktuelle Text, der mit dem Schlüssel aus dem Feld „Code“ gefunden wurde Die Bibliothek enthält kein integriertes Subsystem für die Arbeit mit Übersetzungen. Um Ihr Lokalisierungssystem zu verbinden, müssen Sie eine Implementierung der Schnittstelle erstellen. Dies kann beispielsweise basierend auf Ihrem Back-End, ScriptableObjects oder Google Sheets erstellt werden. 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; } } Durch Klicken auf die Schaltfläche „Lokalisierung kopieren“ werden die Inhalte der Spalten „Code“ und „Wert“ in einem Format, das zum Einfügen in Google Sheets geeignet ist, in die Zwischenablage kopiert. Interne Komponenten Um die Wiederverwendung zu erleichtern, werden häufig einzelne Teile der Benutzeroberfläche in separate Fertighäuser extrahiert. können wir außerdem eine Komponentenhierarchie erstellen, bei der jede Komponente nur mit ihren eigenen untergeordneten Schnittstellenelementen funktioniert. StatefulComponent Auf der Registerkarte Inner Comps können Sie internen Komponenten Rollen zuweisen: Konfigurierte Rollen können im Code ähnlich wie andere Elementtypen verwendet werden: 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"); Behälter Um eine Liste ähnlicher Elemente zu erstellen, können Sie die Komponente verwenden. Sie müssen das Prefab für die Instanziierung und das Root-Objekt (optional) angeben. Im Bearbeitungsmodus können Sie Elemente mit hinzufügen und entfernen: ContainerView StatefulComponent Es ist praktisch, zum Markieren des Inhalts instanziierter Fertighäuser zu verwenden. Zur Laufzeit können Sie die Methoden , oder verwenden, um den Container zu füllen: 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); }); Wenn Ihnen der Standard zum Erstellen von Objekten nicht zusagt, können Sie dieses Verhalten beispielsweise für die Instanziierung mit Zenject überschreiben: Object.Instantiate() StatefulUiManager.Instance.CustomInstantiateMethod = prefab => { return _diContainer.InstantiatePrefab(prefab); }; Interne Komponenten und Container bieten jeweils eine statische und dynamische Verschachtelung für . StatefulComponent Wir haben über das Markup von Fertighäusern, die Lokalisierung und die Instanziierung nachgedacht. Jetzt ist es an der Zeit, zum interessantesten Teil überzugehen – der Entwicklung von Benutzeroberflächen basierend auf Zuständen. Zustände Wir betrachten das Konzept des Zustands als eine benannte Reihe von Änderungen an einem Fertighaus. Der Name ist in diesem Fall eine Rolle aus der Enumeration, und Beispiele für Änderungen am Fertighaus können sein: StateRole Aktivieren und Deaktivieren eines GameObjects Ersetzen von Sprites oder Materialien für Bildobjekte Objekte auf dem Bildschirm bewegen Texte und deren Aussehen verändern Animationen abspielen Und so weiter – Sie können Ihre eigenen Arten von Objektmanipulationen hinzufügen Auf der Registerkarte „Zustände“ kann eine Reihe von Änderungen (Zustandsbeschreibung) konfiguriert werden. Ein konfigurierter Status kann direkt aus dem Inspektor übernommen werden: Ein konfigurierter Status kann mithilfe der -Methode aus dem Code angewendet werden: SetState switch (colorScheme) { case ColorScheme.Orange: SetState(StateRole.Orange); break; case ColorScheme.Red: SetState(StateRole.Red); break; case ColorScheme.Purple: SetState(StateRole.Purple); break; } Wenn auf der Registerkarte „Extras“ der Parameter aktiviert ist, können Sie den Zustand konfigurieren, der sofort bei der Objektinstanziierung angewendet wird. „Anfangszustand bei Aktivierung anwenden“ Die Verwendung von Zuständen ermöglicht eine erhebliche Reduzierung der Codemenge, die auf der Ebene der View-Klasse erforderlich ist. Beschreiben Sie einfach jeden Status Ihres Bildschirms als eine Reihe von Änderungen in der und wenden Sie je nach Spielsituation den erforderlichen Status aus dem Code an. StatefulComponent Staatsbaum Tatsächlich ist die Entwicklung einer Benutzeroberfläche basierend auf Zuständen unglaublich praktisch. So sehr, dass es im Laufe der Zeit zu einem weiteren Problem führt: Mit der Weiterentwicklung des Projekts kann die Liste der Zustände für ein einzelnes Fenster eine unkontrollierbare Länge erreichen und daher schwierig zu navigieren sein. Darüber hinaus gibt es Staaten, die nur im Kontext einiger anderer Staaten sinnvoll sind. Um dieses Problem zu lösen, verfügt Statful UI über ein weiteres Tool: State Tree. Sie können darauf zugreifen, indem Sie auf der Registerkarte „Staaten“ auf die Schaltfläche „Statusbaum-Editor“ klicken. Nehmen wir an, wir müssen ein Belohnungsfenster für eine Truhe erstellen. Das Fenster hat 3 Phasen: Animierte Einführung der Truhe (State ) Intro Wiederholtes Erscheinen von drei verschiedenen Arten von Belohnungen aus der Truhe (je nach gibt es “, “ und „ “, was eine Animation der aus der Truhe erscheinenden Belohnung auslöst) Belohnungsstatus „Geld „Emoji Karten Anzeige aller vergebenen Prämien in einer einzigen Liste (Status ) Ergebnisse Übergeordnete Zustände (in diesem Beispiel ) werden jedes Mal angewendet, wenn untergeordnete Zustände aufgerufen werden: Reward Die Verwaltung einer konfigurierten erfordert eine minimale Menge an einfachem und verständlichem Code, der die Komponenten mit den erforderlichen Daten füllt und den Status im richtigen Moment wechselt: 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)); } Zustandsbehaftete API und Dokumentation Rollen sollen eine bequeme und eindeutige Möglichkeit bieten, Links und Zustände für die spätere Verwendung im Code zu benennen. Es gibt jedoch Situationen, in denen die Beschreibung eines Zustands einen zu langen Namen erfordern würde und es praktischer wäre, einen kleinen Kommentar dazu zu hinterlassen, worauf dieser Link verweist oder welches Verhalten der Staat widerspiegelt. In solchen Fällen können Sie für jeden Link und Zustand in einer eine Beschreibung hinzufügen: StatefulComponent Möglicherweise sind Ihnen bereits die Schaltflächen „API kopieren“ und „Dokumente kopieren“ auf jeder Registerkarte aufgefallen – diese kopieren Informationen für den ausgewählten Abschnitt. Darüber hinaus gibt es auf der Registerkarte „Extras“ ähnliche Schaltflächen – diese kopieren Informationen für alle Abschnitte gleichzeitig. Wenn Sie auf die Schaltfläche „API kopieren“ klicken, wird der generierte Code zur Verwaltung dieses Objekts in die Zwischenablage kopiert. Hier ist ein Beispiel für unser Belohnungsfenster: 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); Wenn Sie auf die Schaltfläche „Dokumente kopieren“ klicken, wird die Dokumentation für dieses Fertighaus im Markdown-Format in die Zwischenablage kopiert: ### 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 Es ist offensichtlich, dass es ziemlich schwierig ist, bei der Implementierung dieses Bildschirms mit solch detaillierten Anweisungen einen Fehler zu machen. In der Wissensdatenbank des Projekts können Sie problemlos aktuelle Informationen zu Ihrer UI-Organisation pflegen. Gleichzeitig ermöglicht Stateful UI die Delegation der Erstellung von UI-Prefabs. Tatsächlich ermöglicht das zustandsbasierte Markup, das Verhalten des Fertighauses vollständig zu testen, bevor es an Programmierer weitergegeben wird. Dies bedeutet, dass , technische Designer oder sogar separate UI-Entwickler Fertigteile vorbereiten können. Da außerdem eine API zwischen Code und Prefab erstellt wird, können Programmierung und Konfiguration von Prefabs parallel erfolgen! Es ist lediglich erforderlich, die API im Voraus zu formulieren. Aber auch wenn die Aufgabe der Konfiguration von Fertighäusern weiterhin bei den Programmierern liegt, beschleunigt der Einsatz von Stateful UI diese Arbeit erheblich. Spieledesigner Abschluss Wie wir gesehen haben, vereinfacht Stateful UI die Arbeit mit UI-Elementzuständen erheblich. Es sind keine langen Zyklen mehr erforderlich, um SerializeFields zu erstellen, Code neu zu kompilieren und nach Referenzen in einer großen Anzahl von View-Klassenfeldern zu suchen. In den View-Klassen selbst ist es nicht mehr notwendig, eine große Menge Code für sich wiederholende Vorgänge wie das Ein- und Ausschalten von Objekten oder das Ändern der Textfarbe zu schreiben. Die Bibliothek ermöglicht einen konsistenten Ansatz zum Organisieren von Layouts in einem Projekt, zum Markieren von Objekten in Fertighäusern, zum Erstellen von Zuständen, zum Verknüpfen mit UI-Elementen und zum Bereitstellen einer API und Dokumentation für die UI-Verwaltung. Es ermöglicht außerdem die Delegation der Erstellung von UI-Prefabs und beschleunigt die Arbeit damit. Für die Zukunft umfasst die Projekt-Roadmap die folgenden Elemente: Erweiterung der Fähigkeiten von Zuständen, Unterstützung neuer Arten von UI-Änderungen in der Beschreibung, wie z. B. neue Arten von Animationen, Abspielen von Sounds in Zuständen usw Unterstützung für Farbpaletten zum Einfärben von Text und Bildern hinzugefügt Unterstützung für Listen von Elementen mit GameObjects-Wiederverwendung hinzugefügt Unterstützung einer größeren Anzahl von Unity-UI-Elementen Automatisieren des Entladens hinzugefügter Texte zur Lokalisierung Implementierung eines Test-Frameworks. Da wir über ein umfassendes Markup unserer Fertighäuser verfügen, können wir einfach einzurichtende ScriptableObject-basierte Szenarien im folgenden Format erstellen: Klicken Sie auf die Schaltfläche ButtonRole.Settings Überprüfen Sie, ob der Text in mit „irgendeinem Wert“ übereinstimmt. TextRole.SomeText Überprüfen Sie das Bild in , um sicherzustellen, dass es einem bestimmten Sprite entspricht ImageRole.SomeImage Ein Tutorialsystem. Ähnlich wie beim Testen ermöglicht das markierte Layout das Erstellen von ScriptableObject-basierten Tutorialszenarien in Form von Anweisungen wie „Zeiger auf der Schaltfläche anzeigen“. ButtonRole.UpgradeHero . Sie sind herzlich eingeladen, Ausgaben zu erstellen oder zur Bibliothek beizutragen! Der Quellcode des Projekts ist auf GitHub verfügbar

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.

StatefulUI: Eine Unity-UI-Bibliothek basierend auf Zuständen und Markup

Zu lang; Lesen

People Mentioned

Dmitrii Ivashchenko

STORY’S CREDIBILITY

Code License

Guide

About Author

Hängeetiketten

Languages

DIESER ARTIKEL WURDE VORGESTELLT IN...