Використання кнопок в інтерфейсі Unity UI

Сторінка оновлюється : вівторок, 28 листопада 2023 р.

Дата створення сторінки : четвер, 24 березня 2022 р.

Середовище верифікації

Вікна

Вікна 11

Редактор Unity

2020.3.25f1

Передумови для цієї поради

Наступні налаштування були зроблені заздалегідь як обов'язкова умова для пояснення цих порад.

Спочатку

Кнопка може використовуватися як об'єкт, який користувач натискає самостійно, або вона може бути використана для вибору, наприклад, «так» або «ні». Якщо ви хочете бути трохи складнішими, ви можете використовувати кнопку як об'єкт для вибору елемента списку, наприклад меню.

На додаток до цього, його також можна використовувати для налагоджувальних цілей і при натисканні кнопки для довільної зміни стану.

Натисніть кнопку, щоб змінити текст

Якщо ви просто натиснете кнопку, ви зробите певну обробку. Цього разу при кожному натисканні кнопки номер тексту буде збільшуватися на 1.

Розміщення та налаштування інтерфейсу користувача

Додайте текст і кнопки з ієрархії до подання.

Ви можете розмістити його в будь-якому місці, якщо ви покладете його в місце, де ви можете його бачити. Так як його складно побачити в початковому стані, встановлюються такі налаштування, як «білий колір тексту», «зміна розміру», «збільшення розміру шрифту» і т.д. Пізніше вміст тексту буде змінено автоматично, тому ви можете залишити його як «Новий текст».

Налаштування символів кнопки розділене на «Кнопка» та «Текст», тому виберіть «Текст» і встановіть його.

Додавання скриптів

Виберіть папку «Сцени» у своєму проекті, клацніть правою кнопкою миші на порожньому місці та виберіть C# Script, щоб додати його. Спочатку скрипт краще створювати в окремій папці, але я його опустив з метою перевірки операції.

Ім'я файлу має бути зрозумілим. Введіть якомога більше буквено-цифрових символів. ButtonClick У цьому випадку встановлено значення .

Після створення двічі клацніть сценарій C#, щоб відкрити редактор сценаріїв. Якщо ваш редактор сценаріїв Visual Studio, ви повинні побачити щось на кшталт цього:

Start, Цього разу метод не потрібен, тому видаліть його, Update перепишіть і збережіть наступним чином.

using System.Collections;
using System.Collections.Generic;
using UnityEngine;
using UnityEngine.UI;    // 追加

public class ButtonClick : MonoBehaviour
{
  /// <summary>カウントアップするテキストオブジェクト。</summary>
  [SerializeField] Text CountText;

  public void OnClick()
  {
  }
}

Синтаксис C# не є головною темою цієї поради, тому я не буду його пояснювати. Будь ласка, навчайтеся самостійно. Обговорюються лише описи, специфічні для Unity.

MonoBehaviour Поля, написані в класах, які успадковуються від, можна буде задати в редакторі Unity Editor. CountText Тут ми визначаємо текстовий об'єкт під назвою Для того, щоб він відображався, його public потрібно опублікувати з . SerializeField Однак, якщо ви додасте атрибут, ви public зможете відобразити його в редакторі зі спеціальними можливостями, відмінними від . Це кращий опис, якщо ви не хочете отримувати доступ до нього з інших класів, наскільки це можливо, окрім як з метою налаштування його в редакторі.

OnClick Наведено методи, що описують, що робити при натисканні кнопки. public Це має бути визначено в .

Прикріплення з редактора Unity

Поверніться до редактора Unity і виберіть з ієрархії EventSystem .

EventSystem з'явиться інспектор, тому перетягніть щойно створений скрипт C# в область «Додати компонент» нижче. Тепер сценарій готовий до роботи.

По суті, цей скрипт можна прикріпити до будь-якого об'єкту, і Button він повинен бути прикріплений до об'єкта. У цій підказці ми додамо, щоб зробити її рівномірно легкою для розуміння EventSystem . Button Звичайно, немає проблем з тим, щоб прикріпити його до . Однак краще не прив'язувати його до абсолютно не пов'язаного з ним об'єкта, так як це викличе плутанину.

Якщо ви подивитеся на доданий вами скрипт, то побачите, що відображається пункт «Count Text». Після того, як ви опублікуєте поле таким чином, ви зможете встановити значення з редактора Unity. Ми хочемо отримати доступ до текстового об'єкта, коли натискаємо кнопку, тому перетягніть його з ієрархії Text та Count Text скиньте його на . Це дозволить вам отримати доступ до нього зі свого скрипта в будь-який час.

Далі виберіть з ієрархії Button та натисніть + у розділі «При клацанні» в інспекторі Button .

Потім додасться один елемент.

У нижньому правому пункті я викинув скрипт, прикріплений з EventSystem ієрархії. Так як нам потрібно помістити сюди об'єкт, до якого прикріплений скрипт, Якщо ви прикріплюєте скрипт до кнопки, вам потрібно включити кнопку.

Якщо ви натиснете «Немає функції», відобразиться прикріплений скрипт, тому ButtonClick виберіть пункт . Виберіть спосіб, який ви в ньому створили OnClick . Тепер при натисканні кнопки OnClick викликається метод.

Виведення журналу одним натисканням кнопки

Я виведу лог, щоб підтвердити, що він працює. Перевірити, що він працює, можна, просто написавши один рядок, і він буде дуже корисний для майбутнього налагодження, тому краще його запам'ятати.

ButtonClick Відкрийте скрипт і OnClick додайте наступне до .

public void OnClick()
{
  // コンソール ログを出力
  Debug.Log("ボタンが押されました！");
}

Після того, як ви ввели та зберегли, запустіть гру та натисніть кнопку.

Кожен раз, коли ви натискаєте на неї, у вкладці консолі з'являється повідомлення. Тепер ви можете побачити, що він працює.

Змінення тексту одним натисканням кнопки

Тепер, коли ви можете переміщати кнопки, мета цієї підказки досягнута. Тепер, коли я розмістив текстовий об'єкт, я хочу змінювати текст кожного разу, коли натискаю кнопку.

Перепишіть сценарій наступним чином.

// 省略

public class ButtonClick : MonoBehaviour
{
  /// <summary>カウントアップするテキストオブジェクト。</summary>
  [SerializeField] Text CountText;

  /// <summary>クリックカウント。</summary>
  private int _counter = 0;

  public void OnClick()
  {
    // コンソール ログを出力
    Debug.Log("ボタンが押されました！");

    // カウントを増やす
    _counter++;

    // カウントした数を表示する
    CountText.text = _counter.ToString();
  }
}

Зміст полягає в тому, щоб збільшувати кількість на 1 щоразу, коли ви клацаєте та встановлюєте число для текстового об'єкта.

Запустіть гру і стежте за тим, щоб число збільшувалося з кожним клацанням.

Вирівняйте камеру (2D) з полотном

Використання розкривного меню інтерфейсу Unity UI