UI Toolkit sample: QuizU walkthrough | Tutorial

okay Pop Quiz ready for a UI challenge today let's jump into the quiz you project and see UI toolkit in action quu is a learning sample for developers who want to explore UI toolkit unity's newest framework for both editor and runtime user interfaces inspired by web Technologies UI toolkit supports a markup language for defining UI structure CSS like styling and a flexbox layout engine build large complex user interfaces that can scale while maintaining a high level of performance the quiz you sample shows how to set up a basic multiscreen UI its minimalistic design is a blank slate ready to be reskinned and transformed into your own visual style the Project's small Standalone demo scenes also showcase parts of UI toolkit to help you get started play the included quiz game to test your knowledge of unity or replace the mini game game entirely and use the menu system as a game Jam template let's take a quick look at some of the architecture which uses some design patterns and techniques often found in much larger applications because the game is split into multiple scenes a bootstrapper ensures that we force one point of entry into the project when enabled no matter what scene you're in entering play mode loads the default boot scene a sequence manager then preloads any dependencies and required prefabs during this initialization the application starts up with any essential services or assets needed to run the game the sequence manager also tracks our main game Loop using a state machine in this pattern we simplify a complex system like our application's game Flow to reduced set of States each state is just a condition or mode of the system at a given time are we starting up playing the game pausing we can Define our game Flow like so what's important here is that each state is self-contained with its own exit conditions and executable logic in keeping with solid principles adding new States in this design pattern doesn't impact the existing ones this allows our application to grow as it naturally will over the course of its development for the user interface of the quiz game we use stack navigation or the screen stack pattern here we manage uis as if stacking a set of plates last one in first one out every time you show a UI screen you place it on top of the stack and then new screens get added on Top This generates a history of UI screens pop off the current screen and you reveal the previous one this is useful for making a back button if you need to Nest a lot of menus and connecting everything in our game are events you'll notice that each object minimizes external references instead they communicate through a syst system of event messages having these centralized classes in between Publishers and subscribers facilitates loose coupling objects don't need to reference other objects directly to speak to one another they notify each other through an intermediary by sending delegates UI toolkit promotes a clear separation of concerns to make your code more manageable and maintainable and though the quiz game is a very small application we've leaned into this idea using the model view presenter architecture here the apps components are distinctly organized the model holds data like the quiz information and game progress the view is focused on UI toolkit and the user interface and the presenter connects these other two parts with game logic and you'll note that many of the application systems follow this three-part structure the setting screen for example doesn't directly alter the data rather it sends a message to the settings presenter which then changes the user stored value in the model this design promotes modularity working on part of the application can make a change without affecting the other parts in a team environment that allows developers and designers to work side by side with fewer merge conflicts updates to the art design or content then won't necessarily impact the underlying game logic the quiz you project also includes several demo scenes to help you get started if you're still new to UI toolkit each scene explores a separate topic here you can learn how uxl and visual trees can Define the UI structure and hierarchy USS stylesheets can apply visual styling and themes U query can find specific elements in a visual tree and USS Transitions and pseudo classes can quickly add interactivity if you're migrating from yugui or other UI systems these demos can help you mystify some of the more nuanced parts of UI toolkit for example we show how to use UI toolkit specific events and manipulators and how to build custom controls here you can create unique reusable UI elements the game sample showcases how to put everything together into a small but complete application select a quiz topic the application loads the onscreen data from scriptable objects tally your correct answers and then Master the sample questions customize the game by adding your own quiz data or adjust the visual styling using USS stylesheets we hope that you enjoy exploring the quiz you sample as much as we've enjoyed creating it to help guide you through this project we've compiled a series of detailed articles that break down its key components and features we encourage you to join the new discussion Pages for further insights and support here you can find technical articles about this project and others or if you're diving straight in the sample code is Thoroughly documented for your convenience and learning to find out more about UI toolkit download Quiz you today from the asset store or if you're more of a UI designer or artist be sure to check out the dragon Crashers UI toolkit sample with the supporting ebook and of course you can find out more about solid programming and design patterns in our other best practices guides building fast responsive and elegant uis has never been easier whether you're devel veler designer or artist let UI toolkit give your user interfaces a modern makeover thanks for watching

Channel: Unity

Views: 8,744

Keywords: Unity3d, Unity, Unity Technologies, Game Development, Game Dev, Game Engine

Id: XlDdBUyI8fE

Length: 6min 42sec (402 seconds)

Published: Wed Jan 31 2024