#Tutorials all about creating UI

1 messages · Page 1 of 1 (latest)

novel pebble
#

Hi there! I'm Christina from Christina Creates Games over on Youtube. I'm a designer and teacher and tutorials on creating and working with Unity's UI system is what my channel is all about. Hope you will enjoy what I have to offer!

#

My newest tutorial is all about the Unity Slider! This one covers all you need to know about the UI Slider - making it auto resize, customizing its graphics, accessing its value through a UnityEvent, how to get and set values by script, and how to play a sound once you let go!

https://www.youtube.com/watch?v=FMy5ixxBlYw

Learn how to create an auto resize slider based on the space around it! You will also learn how to get and set values either by script or through a UnityEvent. I also cover how to play a sound once you release the handle of the slider.

A slider has a different usecase than a health bar or resource bar. You would use an image for those, as they ...

▶ Play video
novel pebble
#

This tutorial is all about UI Buttons:

  • How to create a Button either with the right click menu entry or from scratch
  • Explaining the parts of the button component and how they interact
  • How to setup functionality, be it through the inspector or through code
  • How to use the transitioning options (color, sprite and animation) and influence them through code, too
  • What to do in case you can't click on buttons

Hope you'll enjoy it! I really enjoy going into detail on basics like this. Even if you already know most of this, maybe you'll still see something that's new to you!

https://www.youtube.com/watch?v=tFIFHSgYRxM

This tutorial teaches you: how to set up a button in Unity from scratch, assign functionality for On Click per script or the inspector, understand how to setup different transition modes for using Sprites and more and find out how to solve the issue of players not being able to click on buttons!

💬 Discord 💛
You are very welcome to join! https:...

▶ Play video
#

This guide will walk you through all three Canvas Modes with examples: Overlay, Camera, and World Canvas. We'll also look into Canvas Scaler modes, how to structure your canvases effectively and see why it matters. Plus, we'll cover Billboarding and checking if your mouse is over the UI!

We are going to cover:

  • Basics of how to structure UI into multiple Canvases and why
  • How to check if your cursor is over UI
  • Sorting Canvases
  • The three different Canvas Modes (Overlay, Camera, World Space)
  • Have a look at taking screenshots without the UI showing and why you probably want Camera Mode for that
  • Placing UI into the world with World Space canvas and understanding how its scaling works
  • Billboarding UI in World Space
  • The three Canvas Scaling modes: Constant Pixel Size, Scale with Screensize and Constant Physical size
  • Finding the base resolution to work with optimally

I hope you'll enjoy this and that it helps you when creating your UIs lovewink

https://www.youtube.com/watch?v=1OwQflHq5kg

Learn all you need about the differend canvas modes and the canvas scaler in this Unity UI deep dive tutorial. We are going to cover:

  • Basics of how to structure UI into multiple Canvases and why
  • How to check if your cursor is over UI
  • Sorting Canvases
  • Each of the three different Canvas Modes (Overlay mode, Camera mode, World Space mode)
    -...
▶ Play video
#

The Unity UI Anchors menu looks intimidating? I'll explain how to use it. We'll have a look at how anchors and pivot points determine where your game's UI elements sit on different screen resolutions, how those positions are calculated and how understanding them helps a lot in building a general UI layout as well as a modal window. Hope you'll enjoy it and learn something new!

https://www.youtube.com/watch?v=Lf8gbfEHgcI

The Unity UI Anchors menu looks intimidating? I'll explain how to use it. We'll have a look at how anchors and pivot points determine where your game's UI elements sit on different screen resolutions, how those positions are calculated and how understanding them helps a lot in building a general UI layout as well as a modal window.

💬 Discord ...

▶ Play video
#

You will learn how to set a Toggle up on the UI in Unity, how to get values from it by script, how to assign methods to it with code, how to work with toggle groups and how to add a bit of life and style to Toggle buttons with Squash and Stretch from a different tutorial :)

https://www.youtube.com/watch?v=DGh13-ljiOE

You will learn how to set a Toggle up on the UI in Unity, how to get values from it by script, how to assign methods to it with code, how to work with toggle groups and how to add a bit of life and style to Toggle buttons.

Squash and Stretch Effect tutorial: https://youtu.be/F_LtpgpTHA8
Looking for toggle switches instead? Find the tutorial her...

▶ Play video
#

Hi everybody lovewink
This tutorial teaches how to create a toggle Switch system for your game's UI consisting of the switch itself and a Toggle Group Manager. Next tutorial will be about styling! Hope you'll enjoy it.

https://www.youtube.com/watch?v=E9AWlbPGi_4

Easily create a Toggle Switch system for your UI, which also works with a Toggle Group! A Toggle Switch, also called a Toggle Button works like a checkbox, but has a range of nice visual effects we can work with. Usually, you would use a toggle switch for changes that come into effect immediately, while a normal checkbox would be clicked and the...

▶ Play video
#

Previous tutorial has been on how to create a Toggle Switch System, this one focuses on styling options. https://www.youtube.com/watch?v=673nETMP22Q Hope you will enjoy it!

Style your toggle switch with color and material transitions! We created the switch system for Unity in a previous tutorial.

Sometimes, the material transitioning versions might show red pixels at the outline. It happened on some iterations for me. Setting your Canvas to Screen Space - Camera gets rid of them. Unity 6 will implement UI shaders...

▶ Play video
#

This tutorial is all about the UI carousel! I explain how it will be setup and walk you through the inspector parts as well as the code. Its design can easily be customized and entries are done with Scriptable Objects.

I really hope you'll enjoy it!

Contents

  • The general structure of a carousel
  • Creating the parts in the inspector
  • Creating a template for the entries
  • Adding Text boxes for more infos
  • Adding dynamic functionality to a button depending on the chosen entry

https://www.youtube.com/watch?v=tdXe8Ba5YTU

You will learn how to create a UI carousel for your game over the course of this tutorial. The result can be customized in many ways and entries to the carousel will be created as Scriptable Objects so that you can create those separately and mix and match as needed.

💬 Discord 💛
You are very welcome to join! https://discord.gg/Gy7a9h3APK

🛍️ A...

▶ Play video
rain inlet
#

Thank you for all your videos, i love them and will recommend them to peeps asking about UI

novel pebble
#

Thank you, @rain inlet !

novel pebble
#

Hi everybody love

This tutorial is all about creating a functional UI your users can navigate by keyboard or controller. It covers:

  • The built-in Unity navigation system
  • Setting up an initial gameobject to highlight
  • Working with selectables
  • How to make a menu circle around
  • Working with explicit navigation vs automatic navigation
  • Pitfalls of automatic navigation
  • How to set an element to select by code
  • How to constrain a user to one menu/part of the UI
  • How to prevent de-selecting elements

Hope you'll enjoy it!

https://www.youtube.com/watch?v=sQpjgcX-jH8

In this tutorial, you will learn how to set up a UI Navigation by keyboard and gamepad in Unity. You'll see how to configure the Event System, adjust automatic versus explicit navigation and add simple code in case you want to constrain the user to certain menu parts or pick the next element to select when the player presses a button. Whether yo...

▶ Play video
novel pebble
#

Hi everybody lovewink

In my newest tutorial, I explain how to create buttons with three click modes, checking if the user clicked with the right, middle or left button. Might not sound terribly exciting, but have you ever worked with the selectable class before?

The selectable class can be used as an ideal base for customized UI elements that can be hooked up in our project's UI navigation and comes with transition modes, too. Working like that also means our right/middle/left click events show up in the inspector, too!

Hope you will enjoy this one lovewink

https://www.youtube.com/watch?v=RpfmzHWNp80

In this tutorial, you will learn how to create a button component that not only supports left click, middle click and right click events, but also displays them in the inspector.

This tutorial covers:

  • How to create a UI element that responds differently to left, middle, and right mouse clicks.
  • Explaning the Selectable base
  • How to implemen...
▶ Play video
novel pebble
#

Hi everyone lovewink
This tutorial shows you how to create a menu item (or multiple!) for the right click menu in Unity, with and without conditionals - and hotkeys. This is incredibly useful to speed up your game development time.

It covers:

  • Setting up UI prefabs
  • Creating an Editor script
  • Configuring the menu item with a name, icon, and hotkey
  • Instantiating a prefab with proper parenting
  • Validating the selection to show the menu only under certain conditions

Hope you'll enjoy it!

https://youtu.be/c6TegNPQZH4

This tutorial explains how to create a menu item (or multiple!) for the right click menu in Unity, with and without conditionals - and hotkeys. This is incredibly useful to speed up your game development time.

This tutorial is all about creating a menu item in the right click menu. It covers:

  • Setting up UI prefabs
  • Creating an Editor script
    ...
▶ Play video

This tutorial explains how to create a menu item (or multiple!) for the right click menu in Unity, with and without conditionals - and hotkeys. This is incredibly useful to speed up your game development time.

This tutorial is all about creating a menu item in the right click menu. It covers:

  • Setting up UI prefabs
  • Creating an Editor script
    ...
▶ Play video
novel pebble
#

Hi lovewink

You will learn how to create an inventory slot for an inventroy system in my newest tutorial. This does not cover a whole inventory system, however - just the button, as that is the element almost all systems have in common.

It is basically a button with three modes: An action to perform on click, one on hover, a third on double click. This can be used for a lot of different use cases, but you will most likely primarily use it in an inventory system. This system works with the new input system and on mouse input as well as controller input.

This tutorial covers:

  • Creating a new type of button especially suited for inventory systems
  • Handling three kinds of events: On left click, on double click and on hover (enter and exit)
    Hope you'll enjoy it!

https://www.youtube.com/watch?v=-fdG9sG2yk4

Learn how to create an inventory slot for an inventroy system in this tutorial. It is basically a button with three modes: An action to perform on click, one on hover, a third on double click. This can be used for a lot of different use cases, but you will most likely primarily use it in an inventory system. This works with the new input system ...

▶ Play video
night cairn
#

@novel pebble Just wanted to say thanks for your most-recent video on creating custom Hierarchy menus. Was perfectly timed as I had a use case for it immediately for the project I'm working on.

novel pebble
#

Good luck on your project smile

novel pebble
#

Hi lovewink

This tutorial teaches you how to create a button that uses and displays modifiers to change its behavior (with the new input system).
A typical use case would be a resource management system, where one click takes an item, shift click takes multiple, alt click chops the stacks in two and so on.

Contents:

  • OnClick events for no, one, two modifiers or both at the same time
  • Notifier events for UI feedback

Hope you will enjoy it!

https://www.youtube.com/watch?v=ZkcepKeVEsU

This tutorial teaches you how to create a button that uses modifiers to change its behaviour. This will use the new input system. A typical use case would be an inventory or resource management system, where one click takes an item, using the shift modifier with a click takes multiple, alt modifier with a click chops the stacks in two and so on....

▶ Play video
novel pebble
#

Hi everybody lovewink

My newest tutorial covers how to create Buttons you can assign Hotkeys to inside the Unity UI with the new input system.

This works for keyboard and controller.

This covers:

  • Creating a hotkey script that listens to button input for keyboard and controllers
  • Creating a Basic Button to still get visual feedback on button press
  • Setting up keybinds in the Input Manager

Hope you'll enjoy it!

https://youtu.be/UtXvximc3kY

Learn how to create Buttons you can assign Hotkeys to inside the Unity UI with the new input system.
This works for keyboard and controller.

This covers:

  • Creating a hotkey script that listens to button input for keyboard and controllers
  • Creating a Basic Button to still get visual feedback on button press
  • Setting up keybinds in the Input M...
▶ Play video
worthy dome
novel pebble
median sierra
#

Awesome!

novel pebble
#

Hi lovewink

Over the last few weeks, I started turning my Unity tutorial videos into written ebooks. They all center around one specific Unity UGUI element and explore how to use it with a few use cases, all the needed scripts, lots of explanations and images, as well as the project files.

I started with five ebooks: The Unity Canvas and Canvas Scaler, Dropdown, Input field, Anchors and Pivots, as well as the Scroll Rect component. I plan to release more over the next couple of months - let me know which would be interesting to you (or vote on them on my Discord!)

For more infos, I showcase them in this video: https://www.youtube.com/watch?v=sXMkGliHMbY

You can find the ebooks on my itch page here: https://christinacreatesgames.itch.io/

Use cases are, for example:

  • A scrollable text box
  • Jumping to specific positions inside a scroll rect
  • When/how to choose which Canvas Render Mode
  • Responsive UI through Anchors and Pivots
  • A map to zoom and scroll around in
  • Creating a content carousel system
  • Validated input fields for several input requirements
  • Showing/Hiding input in a password field
  • Multi-select Dropdown
  • Dropdowns with images

I hope, these will help you!
If you have questions, just ask, please :)

My Unity UI tutorials are now ebooks, too! They are available on itch, starting with guides on UGUI elements: Canvas and Canvas Scaler, Anchors and Pivot, Input Field, Dropdown and the Scroll Rect. Each comes with a PDF with in-depth explanations, scripts and project files.

Canvas & Canvas Scaler: https://christinacreatesgames.itch.io/canvas-an...

▶ Play video
novel pebble
#

Hi everybody lovewink

My newest tutorial shows you how to create a sound system to use for your UI in Unity. The system works with a central sound manager and a component to add to every element that should emit a sound when interacted with (and depending on the interaction mode you want to utilize).

It's simple to setup and maintain and can easily be used across projects.
Hope, you'll enjoy it!

https://www.youtube.com/watch?v=ZyY8QBWdmmk

Learn how to create a simple system that plays sounds when you interact with your UI in Unity. This tutorial explains how to create a system to tag elements that should emit sound with a central manager keeping track of every interaction type and sound to play.

✍️ GitHub Code
https://github.com/Maraakis/ChristinaCreatesGames/tree/main/Addin...

▶ Play video
novel pebble
#

It's a bit of a test balloon, but I made a short video explaining how to scale elements on the UI more easily: https://youtube.com/shorts/0i1_c8cTF4A?si=gnnRTeRFp1L-YII9

Using shortcuts to change the size of your Unity UI elements makes creating your UI so much more enjoyable and fast.

📁 Get my PDF guidebooks on Unity UI
Would you rather read a book? I have a collection of eBooks on the Unity UGUI System here:
📘 Itch: https://christinacreatesgames.itch.io/

💬 Join the Discord
You are very welcome to j...

▶ Play video