In this episode, you'll learn how to add images to your UI. You'll import an image, set it as a UI element and scale it, and add it to your UI. This episode will equip you with the skills to effectively integrate images into your Unity projects.

Part of Master Unity UI course on Coco Code Learn. Chapter 2: Get started - points counter

Add images

Learn Unity UI from basics to pro! Create polished interfaces with buttons, animations, responsive design & more. Perfect for building advanced game UIs.

Master Unity UI

Happy little scene (Get started)

In this episode, you'll add a button, customise its color and add the script to restart the level.
By the end, you'll know how to create interactive buttons!

Part of Master Unity UI course on Coco Code Learn. Chapter 2: Get started - points counter

What is Canvas?

In this episode, you'll learn how to use TextMeshPro, and understand how to customize text elements in your project. By the end of this episode, you'll be comfortable creating text in your UI.

Part of Master Unity UI course on Coco Code Learn. Chapter 2: Get started - points counter

Add text!

Setup button and connect to script

In this episode, you'll create and design your first visually appealing pause screen. By the end of this episode you will have the skills to start journey with more advanced features in your Unity projects.

Part of Master Unity UI course on Coco Code Learn. Chapter 2: Get started - points counter

Create pause screen

In this episode, you'll create and script a pause button that shows and closes the pause menu.
You’ll script functionality to buttons in pause menu creating advanced UI . By the end of this episode, you'll be able to control the visibility of UI elements in your games.

Part of Master Unity UI course on Coco Code Learn. Chapter 2: Get started - points counter

Show/hide UI elements

In this episode, you'll understand the Raycast Target feature and how it blocks interactions, such as blocking the restart level button in the main scene. This episode will deepen your understanding of interactive UI design in Unity, allowing you to create more immersive and intuitive user interfaces.

Part of Master Unity UI course on Coco Code Learn. Chapter 2: Get started - points counter

Full screen overlay

Unity Adventure Menu (Responsive UI)

In this episode, you'll learn how to use anchors to make your UI responsive and how to use Layout Groups to keep your Game Objects organized. You'll start by aligning our main menu buttons using the Vertical Layout Group. By the end of this episode, you will be able to align your buttons with ease.

Part of Master Unity UI course on Coco Code Learn. Chapter 3: Responsive UI - mobile main menu

Align menu options

In this episode, you'll add a currency display with coin icons. you'll use a Horizontal Layout Group to align the coin icon and the text next to it. You'll also learn how to properly space and align these elements within the group. By the end of this episode, you will be able to create displays of different statistics to your projects.

Part of Master Unity UI course on Coco Code Learn. Chapter 3: Responsive UI - mobile main menu

Virtual currencies

In this episode, you'll make our UI responsive to different screen sizes. you'll use anchor presets to position elements like the currency display, menu buttons and welcome text so that they adjust appropriately when the screen is resized. By the end of this episode, you will have responsive projects that resize no matter the size of the screen

Part of Master Unity UI course on Coco Code Learn. Chapter 3: Responsive UI - mobile main menu

Introduction to Anchors

In this episode, you'll add a background image that scales to fit the entire screen. you'll also add a black transparent background to the bottom text to make it more readable, ensuring these elements resize correctly with screen changes. By the end of this episode, you will be able to set the background that adjust itself to the size of the screen

Part of Master Unity UI course on Coco Code Learn. Chapter 3: Responsive UI - mobile main menu

Add background

In this episode, you'll explore the Canvas Scaler component to make our UI elements resize with the screen. you'll adjust the Canvas Scaler settings to maintain a desired resolution.
By the end of this episode, you will be able to make your UI resize its components to the size of the device.

Part of Master Unity UI course on Coco Code Learn. Chapter 3: Responsive UI - mobile main menu

Scaling types

In this episode, you'll create a credits screen using a Vertical Layout Group and layout elements to control spacing. You'll add logic to show and hide this credits screen using buttons, similar to how we created the pause menu in the previous chapter. By the end of this episode, you will be able to create functional buttons that show credits screen of awesome creator of the game!

Part of Master Unity UI course on Coco Code Learn. Chapter 3: Responsive UI - mobile main menu

Credits screen

In this episode, you'll design a level selection grid using the Grid Layout Group. You'll make the grid resize correctly and maintain proper spacing between buttons. You'll also implement logic to switch between the main menu and the level selection screen. By the end of this episode, you will be able to create basic fully functional main menu of your game.

Part of Master Unity UI course on Coco Code Learn. Chapter 3: Responsive UI - mobile main menu

Level selection grid

Sign In simulator (Form)

In this episode, you'll start creating a profile registration screen. You'll learn how to work with input fields and modify input settings. By the end of this episode, you'll know how to customize and control components that capture user input.

Part of Master Unity UI course on Coco Code Learn. Chapter 4: Form - Register your player

Introduction to Input Fields

In this episode, you'll link the input fields to your player profile card, enabling real-time updates as the player enters data. By the end of this episode, you'll be able to create interactive UI elements that respond dynamically to user actions.

Part of Master Unity UI course on Coco Code Learn. Chapter 4:  Form - Register your player

Read your Input Fields

In this episode, you'll learn how to populate a multiline text field, allowing for more detailed player descriptions. You'll explore different line types and understand how to customize input behaviour for better user experience. By the end of this episode, you'll be able to manage large text inputs in your projects.

Part of Master Unity UI course on Coco Code Learn. Chapter 4:  Form - Register your player

Create big text boxes

In this episode, you'll add an age slider to your player profile screen. You'll learn how to modify the slider's appearance and functionality, including setting limits. By the end of this episode, you'll know how to integrate and script sliders to fill your UI with interactive elements.

Part of Master Unity UI course on Coco Code Learn. Chapter 4:  Form - Register your player

Check player age with slider

In this episode, you'll make your project easier to use by automatically selecting the first input field when the form opens. Making the user experience smoother. By the end of this episode,
your user interface will be more user-friendly.

Part of Master Unity UI course on Coco Code Learn. Chapter 4:  Form - Register your player

Assign default field

In this episode, you'll set up keyboard navigation in your UI. You'll learn how to set up arrow keys to switch between buttons, making your UI more accessible. By the end of this episode, you'll have a fully navigable UI that can be controlled entirely with the keyboard or gamepad.

Part of Master Unity UI course on Coco Code Learn. Chapter 4:  Form - Register your player

Navigate UI using arrow keys

In this episode, you'll implement TAB key support for your input fields, allowing users to switch between them easily. You'll learn how to set it up making filling your forms much easier. By the end of this episode, you'll have a smooth tab navigation system.

Part of Master Unity UI course on Coco Code Learn. Chapter 4:  Form - Register your player

Switch fields using TAB key

In this bonus episode, We'll create scene from beginning of this chapter together to create the start scene for your project. You'll add a background, position your form, and finalize the player profile card. By the end of this episode, you'll have a polished start scene ready to integrate into your game.

Part of Master Unity UI course on Coco Code Learn. Chapter 4:  Form - Register your player

[BONUS] Create start scene

In this episode, I’ll show you how to let users add new lines in input fields with shift+return while still submitting with the return key. By the end, your input fields will work better and be more user-friendly.

Part of Master Unity UI course on Coco Code Learn. Chapter 4:  Form - Register your player

[Advanced] Better Input multiline support

Alien Factory (Character selection)

In this episode, you'll start building a character creation screen. You'll learn how to add buttons to character images and create scripts to make character selection. By the end of this episode, you'll have a system that can change the character's image based on the player's choice.

Part of Master Unity UI course on Coco Code Learn. Chapter 5: Character selection screen

Make characters selectable

In this episode, you'll learn how to convert your character options into Prefabs and where to spawn them. By the end of this episode, you'll be able to handle multiple character options in your character creation screen.

Part of Master Unity UI course on Coco Code Learn. Chapter 5: Character selection screen

Spawn UI elements via script

In this episode, you'll learn how to create a scrollable list to scroll through all character options. We'll cover the setup of the scrolling container and using a Content Size Fitter to manage resizing. By the end of this episode, you'll have a functional scrollable list for character selection.

Part of Master Unity UI course on Coco Code Learn. Chapter 5: Character selection screen

Add scrolling logic

In this episode, you'll learn how to make your scrolling experience much better. We'll use the Mask component to limit what is visible, adjust padding for better spacing.
By the end of this episode, your scrollable list will not only be functional but also visually appealing.

Part of Master Unity UI course on Coco Code Learn. Chapter 5: Character selection screen

Scrolling UX tweaks

In this episode, you'll add a scrollbar to your scrolling list to indicate the current scrolling position. You'll learn how to create and style a scrollbar, connect it to your ScrollRect component. By the end of this episode, your scrolling container will provide a more intuitive and user-friendly experience with a fully functional scrollbar.

Part of Master Unity UI course on Coco Code Learn. Chapter 5: Character selection screen

Create scrollbar

In this episode, you'll introduce color customization by using a dropdown menu. We'll add new images and create a script to change the character's color. By the end of this episode, you'll have a character editor that allows players to select both the shape and color of their character.

Part of Master Unity UI course on Coco Code Learn. Chapter 5: Character selection screen

Color selection dropdown

In this episode, you'll learn how to add the helmet as a separate image, align it correctly, and manage its size dynamically using scripts. By the end of this episode, your character editor will feature to add cosmetics to you characters.

Part of Master Unity UI course on Coco Code Learn. Chapter 5: Character selection screen

Place helmet correctly

In this episode you'll learn how to create and style a toggle, connect it to events, and use scripts to show or hide the helmet. By the end of this episode, your character editor will offer even more customization options, allowing players to switch the helmet on or off.

Part of Master Unity UI course on Coco Code Learn. Chapter 5: Character selection screen

Toggle helmet visibility

In this bonus episode, you'll walk through the process of creating the same user interface we used in this chapter  from scratch. You'll learn how to set up panels, add character images with masks, and organize elements with a Vertical Layout Group. By the end of this episode, you'll have a skill to build character selection screen from the basics.

Part of Master Unity UI course on Coco Code Learn. Chapter 5: Character selection screen

In this episode, you'll integrate a color picker tool. You'll learn how to install and configure the color picker, set preset colors, and use it to dynamically change the character's color. By the end of this episode, your character editor will offer a more interactive and fun customization options.

Part of Master Unity UI course on Coco Code Learn. Chapter 5: Character selection screen

[Advanced] Add color picker

In this episode, you’ll learn how to create a button that automatically scrolls up when the scroll bar is below a certain height. By the end of this chapter, your character selection screen will be fully equipped with everything necessary, and it will be ready to implement into your game.

Part of the *Master Unity UI* course on Coco Code Learn. Chapter 5: Character Selection Screen

[Advanced] Add scroll to top

Wiggle Widgets (Animations)

In this episode, you'll learn how to make your UI more dynamic with animations. We'll explore two types of animations first one using the LeanTween, and second is Unity's built-in Animation Clips. By the end of this episode, you'll get introduction of using both animations methods.

Part of the *Master Unity UI* course on Coco Code Learn. Chapter 6: Animation - Make your UI move!

Script vs animator

In this episode, we'll start with script-based animations using LeanTween.

First, We’ll download LeanTween from the Unity Asset Store and import it. Then, we'll test it by moving a simple image down when the game starts.

Part of the *Master Unity UI* course on Coco Code Learn. Chapter 6: Animation - Make your UI move!

Install LeanTween, first animation

In this episode, we'll create a simple game where the button moves to a random position whenever player clicks a button. We'll move the button by generating a random position, adjusting its speed, and experimenting with different easing options. By the end, you'll create fun minigame only using LeanTween.

Part of the *Master Unity UI* course on Coco Code Learn. Chapter 6: Animation - Make your UI move!

Annoying button

In this episode, we’ll create a popup that animates when triggered by a button click. We’ll build a popup, connect it to the button, and use LeanTween for a smooth appear and close animation. By the end, you will learn how to create a simple zoom animation.

Part of the *Master Unity UI* course on Coco Code Learn. Chapter 6: Animation - Make your UI move!

Animate simple popup

In this episode, we'll upgrade our popup with a black transparent background. We'll animate the background using a Canvas Group and LeanTween. By the end, your popup will have a professional animation, complete with background transparency.

Part of the *Master Unity UI* course on Coco Code Learn. Chapter 6: Animation - Make your UI move!

Animate screen overlay

In this episode, we'll animate a health bar using LeanTween. Instead of moving sliders instantly, we'll create smooth transition to a random value with easing effects.

By the end, you'll learn how to make animations more engaging using simple code.

Part of the *Master Unity UI* course on Coco Code Learn. Chapter 6: Animation - Make your UI move!

Animate HP bar changes

In this episode, we’ll switch from script-based animations to Animation Clips. We’ll create an animation to highlight a button. You will learn all basics like how to open Animator window, how to add keyframes and how to make objects on the scene move. By the end, you'll know how to use the Animator tool for more precise UI animations in Unity.

Part of the *Master Unity UI* course on Coco Code Learn. Chapter 6: Animation - Make your UI move!

Get started with animation clips

In this episode, we'll use the Animator to create a dropdown description animation. We’ll set up closed and opened states for a description, create transitions between these states, and add a trigger parameter to transition state of animation using button. By the end, you’ll be able to create multi-state animations that respond to user input.

Part of the *Master Unity UI* course on Coco Code Learn. Chapter 6: Animation - Make your UI move!

Animation clips transitions

In this episode, we’ll recreate an animated button inspired by Duolingo using Unity’s Animator. You’ll learn how to replace default button transitions with custom animations, add shadows, and fine-tune animation speed.

By the end, you’ll have a polished, clickable button, ready to enhance your UI.

Part of the *Master Unity UI* course on Coco Code Learn. Chapter 6: Animation - Make your UI move!

Animate buttons using animator

In this episode, you'll learn how to add rounded corners to your Unity UI elements. We’ll start with preparing the image in editor of choice (Photoshop, Figma). After images import, we are going to slice them and after that apply to the rectangle on your Unity scene!

By the end of this lesson, your UI will feel more modern and smooth!

Part of the *Master Unity UI* course on Coco Code Learn. Chapter 6: Animation - Make your UI move!

Create rounded corners

In this episode, we’ll take on a more complex animation challenge: We’ll animate fully functional end screen.

First, we’ll set up animations for the stars by adjusting their pivot points to simulate effect of coming from the center. Then, we’ll add a mask to the button and finally, we’ll animate the score by changing its position to make it feel more dynamic. By the end, you’ll create fully professional end screen ready to implement it in your own game!

Part of the *Master Unity UI* course on Coco Code Learn. Chapter 6: Animation - Make your UI move!

Complex animation sequence

In this bonus episode, we’ll learn about pivot points using a clock example. We’ll rotate a clock hand using LeanTween, adjust its pivot point to fix the rotation and add playful easing. We’ll also make the rotation repeat indefinitely. By the end, you’ll master pivot points and other handy features of LeanTween.

Part of the *Master Unity UI* course on Coco Code Learn. Chapter 6: Animation - Make your UI move!

[Bonus] Animate clock

In this final episode, we’ll create an animation sequence to create Intro of game creator. We’ll line up multiple animations one after another, making the process more readable and professional. By the end, you’ll know how to use animation sequences to create advanced animations.

Part of the *Master Unity UI* course on Coco Code Learn. Chapter 6: Animation - Make your UI move!

[Advanced] Animation scripted sequence

Cursed Cartography (Map interface)

In this episode, you'll create a custom map. We'll also explore a Google Fonts to find perfect  icons for your map like homes, shops and quest icons. By the end, you'll have your map and icons ready for Unity.

Part of the *Master Unity UI* course on Coco Code Learn. Chapter 7: Map user interface

---

**Graphic assets used in this video:** [https://cococode-web.b-cdn.net/courses/unity_ui_1/files/Chapter 7 - graphics.zip](https://cococode-web.b-cdn.net/courses/unity_ui_1/files/Chapter%207%20-%20graphics.zip)s

- Google Fonts: https://fonts.google.com/

Generate map, prepare graphics

In this episode, you'll start building the map interface in Unity. We'll add key elements like the map background, icons, and scroll view. We’ll add a few improvements like vignette and attachments like paper clips making our map look clean. By the end, you'll have a basic map interface set up and ready for further customization.

Part of the *Master Unity UI* course on Coco Code Learn. Chapter 7: Map user interface

---

**Graphic assets used in this video:** [https://cococode-web.b-cdn.net/courses/unity_ui_1/files/Chapter 7 - graphics.zip](https://cococode-web.b-cdn.net/courses/unity_ui_1/files/Chapter%207%20-%20graphics.zip)

Create map display UI

In this episode, you'll learn how to add custom fonts to your Unity project using TextMesh Pro. We'll download a font, generate a Font Asset, and fix issues with special characters. By the end, you'll have a font ready to  implement into your map interface.

Part of the *Master Unity UI* course on Coco Code Learn. Chapter 7: Map user interface

---

**Useful links:**

- Google Fonts: https://fonts.google.com/
- Unicode special character ranges: [https://cococode-web.b-cdn.net/courses/unity_ui_1/files/Chapter 7 - graphics.zip](https://cococode-web.b-cdn.net/courses/unity_ui_1/files/Chapter%207%20-%20graphics.zip)

**Polish characters** (in case you’d like to test 😉): `żźćńółęąśŻŹĆĄŚĘŁÓŃ`

Add custom fonts

In this episode, you'll customize the edges of your map to give it an old, worn out look. We'll import a textured image, create a mask, and use Sprite splitting to fix stretching issues. By the end, your map will have a vintage feel with non-pixelated borders.

Part of the *Master Unity UI* course on Coco Code Learn. Chapter 7: Map user interface

Better map display borders

In this episode, you'll add tooltips to your map icons, helping players understand what each icon represents. We’ll write a script to show and hide tooltips when hovering over landmarks. By the end, your map will include functional tooltips for better user experience.

Part of the *Master Unity UI* course on Coco Code Learn. Chapter 7: Map user interface

---

**Code used in this lesson:**

`TooltipInstance`

```csharp
using System.Collections;
using System.Collections.Generic;
using TMPro;
using UnityEngine;

public class TooltipInstance : MonoBehaviour
{
    public static TooltipInstance instance;

		CanvasGroup canvasGroup;
    [SerializeField] TMP_Text text;

    void Awake() {
        instance = this;
				canvasGroup = GetComponent<CanvasGroup>();
        canvasGroup.alpha = 0;
    }

    public void ShowTooltip(Transform sourceTransform, string landmarkName) {
        transform.position = sourceTransform.position;
        text.text = landmarkName;
        canvasGroup.alpha = 1;
    }

    public void HideTooltip() {
        canvasGroup.alpha = 0;
    }
}

```

`TooltipOpener`

```csharp
using System.Collections;
using System.Collections.Generic;
using UnityEngine;
using UnityEngine.EventSystems;

public class TooltipOpener : MonoBehaviour, IPointerEnterHandler, IPointerExitHandler
{
    [SerializeField] string landmarkName;

    public void OnPointerEnter(PointerEventData eventData)
    {
        TooltipInstance.instance.ShowTooltip(transform, landmarkName);
    }

    public void OnPointerExit(PointerEventData eventData)
    {
        TooltipInstance.instance.HideTooltip();
    }

}
```

Show tooltip on hover

In this episode, you'll improve your tooltip design by adjusting the color, adding an arrow. We’ll also add simple animations using LeanTween for a more polished look. By the end, your tooltips will be both visually appealing and functional.

Part of the *Master Unity UI* course on Coco Code Learn. Chapter 7: Map user interface

---

**DropShadow Script:** https://pastebin.com/YGeaZwG3

**DropShadow Script download:** https://cococode-web.b-cdn.net/courses/unity_ui_1/files/DropShadow.cs

**Code used in this lesson:**

```csharp
using System.Collections;
using System.Collections.Generic;
using TMPro;
using UnityEngine;

public class TooltipInstance : MonoBehaviour
{
    public static TooltipInstance instance;

    [SerializeField] TMP_Text text;
    
    int animationId = -1;

    void Awake() {
        instance = this;
        transform.localScale = Vector3.zero;
    }

    public void ShowTooltip(Transform sourceTransform, string landmarkName) {
        transform.position = sourceTransform.position;
        text.text = landmarkName;
        StopAnimation();
        animationId = transform.LeanScale(Vector3.one, 0.5f).setEaseOutExpo().id;
    }

    public void HideTooltip() {
        StopAnimation();
        animationId = transform.LeanScale(Vector3.zero, 0.25f).setEaseOutExpo().id;
    }

    void StopAnimation() {
        if (animationId != -1) {
            LeanTween.cancel(animationId);
            animationId = -1;
        }
    }
}

```

Make tooltip more visible

In this episode, you'll learn how to create a system that places a waypoint on the map when the player clicks. We’ll use the event system and add a fun animation with LeanTween to make the waypoint play animation when placed. By the end, your map will be interactive, allowing players to mark locations.

Part of the *Master Unity UI* course on Coco Code Learn. Chapter 7: Map user interface

---

**Code used in this lesson:**

```csharp
using System.Collections;
using System.Collections.Generic;
using UnityEngine;
using UnityEngine.EventSystems;
using UnityEngine.UI;

public class Map : MonoBehaviour, IPointerClickHandler
{
    [SerializeField] GameObject mapPointPrefab;
    [SerializeField] GameObject mapPointsContainer;

    public void OnPointerClick(PointerEventData eventData)
    {
        if (eventData.button == PointerEventData.InputButton.Left) {
            GameObject newMapPointer = Instantiate(mapPointPrefab, mapPointsContainer.transform);
            Image newMapPointerImage = newMapPointer.GetComponent<Image>();
            newMapPointerImage.raycastTarget = false;

            newMapPointer.transform.position = eventData.position + new Vector2(0, 400);
            newMapPointer.transform.LeanMoveY(eventData.position.y, 1.5f).setEaseOutBounce().setOnComplete(() => {
                newMapPointerImage.raycastTarget = true;
            });
        }
    }
}

```

Create your own pointers

In this episode, you’ll discover how to use the UILineRenderer to mark lines in your UI. We’ll add points on the map that will be connected with line. We’ll add custom sprite to the line and smooth it out with Bezier mode. By the end, you'll be able to draw smooth lines on your map.

Part of the *Master Unity UI* course on Coco Code Learn. Chapter 7: Map user interface

---

**Add this URL to your package manager:** https://github.com/Unity-UI-Extensions/com.unity.uiextensions.git

Line rendering

In this episode, you'll create a filters section to hide map elements based on player preferences. You’ll set up toggles that allow users to show or hide landmarks. By the end, your map will be more customizable and diverse.

Part of the *Master Unity UI* course on Coco Code Learn. Chapter 7: Map user interface

Map filters

In this episode, you'll create menu for users to select different map styles. You'll create small previews and display them. By the end, players can easily switch between map styles for a better experience.

Part of the *Master Unity UI* course on Coco Code Learn. Chapter 7: Map user interface

---

**Photopea:** https://www.photopea.com/

**Code used in this lesson:**

```csharp
[Header("Resources")]
[SerializeField] Sprite[] mapSprites;

[Header("Components")]
[SerializeField] Image mapImage;

public void ChangeMapImage(int index) {
    mapImage.sprite = mapSprites[index];
}
```

Map art styles

In this episode, you'll learn how to create an animated filters panel that moves aside when not in use. Using Unity's Animator, you’ll set up open and closed animations triggered by mouse events. By the end, your map interface will be clean and professional

Part of the *Master Unity UI* course on Coco Code Learn. Chapter 7: Map user interface

---

**Code used in this lesson:**

```csharp
using System.Collections;
using System.Collections.Generic;
using UnityEngine;
using UnityEngine.EventSystems;

public class FiltersPanel : MonoBehaviour, IPointerEnterHandler, IPointerExitHandler
{
    Animator animator;

    void Awake() {
        animator = GetComponent<Animator>();
    }

    public void OnPointerEnter(PointerEventData eventData)
    {
        animator.SetBool("isOpen", true);
    }

    public void OnPointerExit(PointerEventData eventData)
    {
        animator.SetBool("isOpen", false);
    }
}
```

[Bonus] Show/hide filters

Thank you for purchasing the early access of the course! This lesson will be available early November 2024