Створення інтерфейсу гри в Unity

Прокрутити вниз

Створення інтерфейсу гри в Unity курси програмування

Створення інтерфейсу гри в Unity за допомогою C# 🎮🖥️

Сьогодні ти навчишся:
✅ Додавати елементи інтерфейсу (UI) в Unity
✅ Відображати текст, кнопки, лічильники очок та здоров’я
✅ Писати C#-код для оновлення інтерфейсу в реальному часі

Створення інтерфейсу гри в Unity курси програмування
Створення інтерфейсу гри в Unity курси програмування

Створення інтерфейсу гри в Unity курси програмування

1. Що таке UI (інтерфейс користувача) в Unity?

UI (User Interface) – це графічний інтерфейс, який дозволяє взаємодіяти з грою.
Приклади UI:
🔹 Лічильник очок 🏆
🔹 Полоса здоров’я ❤️
🔹 Кнопка «Пауза» ⏸️
🔹 Меню гри 📜

2. Додаємо UI в Unity

Крок 1: Створюємо Canvas (полотно)

1️⃣ У Hierarchy натисни Create → UI → Canvas.
2️⃣ Це буде головний контейнер для всіх елементів інтерфейсу.

⚙️ Налаштування Canvas:

  • Виділи Canvas.
  • У Inspector знайди Canvas Scaler.
  • У полі UI Scale Mode вибери Scale With Screen Size.

Тепер UI буде правильно масштабуватися під різні екрани.

Крок 2: Додаємо текст (лічильник очок)

1️⃣ У Canvas натисни Create → UI → Text – TextMeshPro.
2️⃣ У вікні вибери Import TMP Essentials (це обов’язково для тексту).
3️⃣ Назви об’єкт ScoreText.
4️⃣ У Inspector зміні Text на Score: 0.
5️⃣ Зміни Font Size на 40 та розмісти у верхньому куті екрану.

Крок 3: Додаємо полосу здоров’я

1️⃣ У Canvas натисни Create → UI → Slider.
2️⃣ Назви об’єкт HealthBar.
3️⃣ Виділи його Fill Area → Fill.
4️⃣ Зміни колір Fill на червоний (❤️).
5️⃣ Перемісти HealthBar у верхній лівий кут.

3. Програмуємо оновлення інтерфейсу на C#

Крок 1: Створюємо скрипт для очок

1️⃣ У Assets створи C# Script.
2️⃣ Назви його GameUI.
3️⃣ Відкрий у Visual Studio та заміни код:

using UnityEngine;
using TMPro;

public class GameUI : MonoBehaviour
{
    public TextMeshProUGUI scoreText; // Текст для очок
    private int score = 0;

    public void AddScore(int points)
    {
        score += points; // Додаємо очки
        scoreText.text = "Score: " + score; // Оновлюємо текст
    }
}

4️⃣ Збережи скрипт.
5️⃣ Перетягни GameUI на Canvas.
6️⃣ У Inspector перетягни ScoreText у поле scoreText.

Тепер можна викликати AddScore(10);, і очки будуть додаватися!

Крок 2: Створюємо скрипт для здоров’я

1️⃣ У Assets створи ще один C# Script.
2️⃣ Назви його PlayerHealth.
3️⃣ Відкрий і встав цей код:

using UnityEngine;
using UnityEngine.UI;

public class PlayerHealth : MonoBehaviour
{
    public Slider healthBar;
    private int health = 100;

    public void TakeDamage(int damage)
    {
        health -= damage; // Віднімаємо здоров'я
        healthBar.value = health / 100f; // Оновлюємо полосу здоров'я

        if (health <= 0)
        {
            Debug.Log("Гравець загинув!");
        }
    }
}

4️⃣ Збережи скрипт.
5️⃣ Перетягни PlayerHealth на гравця.
6️⃣ У Inspector перетягни HealthBar у поле healthBar.

Тепер якщо викликати TakeDamage(20);, здоров’я зменшиться!

4. Додаємо кнопку “Пауза”

1️⃣ У Canvas натисни Create → UI → Button – TextMeshPro.
2️⃣ Назви об’єкт PauseButton.
3️⃣ Зміни Text на Пауза.
4️⃣ Перемісти кнопку у верхній правий кут.

Крок 1: Програмуємо паузу

1️⃣ Створи новий C# ScriptPauseMenu.
2️⃣ Відкрий його та додай код:

using UnityEngine;

public class PauseMenu : MonoBehaviour
{
    private bool isPaused = false;

    public void TogglePause()
    {
        isPaused = !isPaused;
        Time.timeScale = isPaused ? 0 : 1; // Зупиняємо або відновлюємо гру
    }
}

3️⃣ Перетягни PauseMenu на Canvas.
4️⃣ В PauseButton знайди OnClick().
5️⃣ Натисни +, перетягни туди Canvas та вибери PauseMenu → TogglePause.

Готово! Тепер кнопка ставить гру на паузу! ⏸️

5. Практичне завдання 🎯

🔹 Додай екран “Game Over” (коли здоров’я = 0).
🔹 Додай ефект підсвічування кнопки при наведенні.
🔹 Додай звуковий ефект при натисканні кнопки.

🚀 Вітаю! Ти навчився створювати інтерфейс в Unity! 🎮