Unity создание красивого меню. Изменения громкости звука в игре. Кастомный попап без фокуса
На просторах интернета уроков по созданию игр в Unity3D очень много, но на верхнем слое и направленных новичкам очень мало.
В данном серии уроков, я буду расписывать о создании меню игры при помощи стандартного GUI, не использую нестандартные компоненты.
Урок направлен для новичков, которые желают научится создавать свое меню в игре.
По окончанию первого урока у вас получится меню игры с работающими кнопками:
В уроке будут использоваться функции:
1) public int
- назначение переменной числовым значением
2) GUI.BeginGroup
- создание GUI группы
3) GUI.Button
- Создание GUI кнопки
4) Debug.Log
- вывод сообщения в консоли
5) Application.LoadLevel
- загрузка уровня
6) Application.Quit
- закрытие игры
Итак, начнем:
Шаг 1:
Создаем в окне Project C# скрипт и называем его по своему.
Шаг 2:
Создаем игровую камеру:
* На верхнем меню программы нажимаем пункт GameObject
* После нажатия появляется выпадающее меню, в нем нажимаем пункт Create Other
* В появившемся списке нажимаем на строку с названием Camera и после этого действия в окне Hierarchy появляется объект Camera
Шаг 3:
Назначаем объекту Camera скрипт, который создали в первом шаге. Для этого в окне Project находим ваш скрипт, у меня он называется Menu, и перетягиваем его в окно Hierarchy на объект Camera.
Чтобы удостовериться в правильности хода нужно: нажать на объект Camera в окне Hierarchy. В окне Inspector вы у объекта увидите такое одержимое:
Если же у вас появилась выделенная на изображении строка с названием вашего скрипта, то сделали вы все правильно.
Шаг 4:
Откроем скрипт в редакторе. Для этого нажмите на ваш скрипт двойным нажатием левой кнопки мыши в окне Project. У вас откроется редактор скриптов, в моем случае это MonoDevelop. Открыв редактор, перед вами появится вас скрипт, который будет абсолютно пустой, но с базовым содержанием:
200?"200px":""+(this.scrollHeight+5)+"px");">
using UnityEngine;
using System.Collections;
public class Menu1: MonoBehaviour {
// Use this for initialization
void Start () {
}
void Update () {
}
}
Строка
200?"200px":""+(this.scrollHeight+5)+"px");">public class [u]Menu : MonoBehaviour {
В замен слова Menu будет содержать название вашего скрипта. Строку трогать и изменять не нужно. По крайней мере в данном уроке.
Шаг 5:
Отредактируем скрипт под меню, для этого можно удалить некоторые строки, которые вам не понадобятся в этом уроке:
200?"200px":""+(this.scrollHeight+5)+"px");">
// Use this for initialization - этот комментарий нам не нужен
// Update is called once per frame
void Update () {
} - метод Void нам тоже не понадобится
Шаг 6:
Наш скрипт подготовлен для создания на нем меню игры.
Перед методом void Start
создадим переменную для нумерации окон в меню игры.
Содержании строки такое:
200?"200px":""+(this.scrollHeight+5)+"px");">public int window;
public int - задаем числовое значение переменной
window - название переменной, которая будет использоваться в скрипте с числовым значением
Шаг 6:
Для правильной работы меню, при старте работы скрипта у нас должно отображаться одно содержимое, для этого в метод void Start
добавим стартовое значением переменной window
. Весь метод будет выглядеть так:
200?"200px":""+(this.scrollHeight+5)+"px");">
void Start () {
window = 1;
}
Метод при старте исполнения скрипта будет назначать переменной window значение 1
[b]Шаг 7:
Начнем саму работу с GUI выводом меню, для этого создадим ниже метода void Start, метод в выводом GUI. Выглядеть он будет так:
200?"200px":""+(this.scrollHeight+5)+"px");">
void OnGUI () {
}
Данный метод в программе Unity3D и в вашем создаваемом приложении вызовет вывод графических элементов.
Шаг 8:
Чтобы меню отображалось по центру экрана и не приходилось для каждой кнопки рассчитывать местоположение, создадим группу, которая будет выводить свое содержимое по центру экрана:
200?"200px":""+(this.scrollHeight+5)+"px");">
GUI.EndGroup ();
GUI.BeginGroup
- создаем группу
(new Rect
- задаем значение, что дальше будут даны данные о расположении самой группы
(Screen.width / 2 - 100,
- задаем расположение группы относительно ширины экрана
Screen.height / 2 - 100,
- задаем расположение группы относительно высоты экрана
200
- задаем ширину группы
200
- задаем высоту группы
Значения ширины и высоты можно свои ставить, но чтобы все было по центру аккуратно в Screen.width / 2 - 100, Screen.height / 2 - 100 значение 100 заменяем на свое значение. То есть если же ваша группа будет иметь ширину и высоту 300, то в замен 100 вы должны ввести половину от ширины 300. Вводимое значение будет 150.
Шаг 9:
Создаем вывод меню, если переменная window = 1. Для этого, между началом и концом группы, созданной в шаге №8, то есть
200?"200px":""+(this.scrollHeight+5)+"px");">
GUI.BeginGroup (new Rect (Screen.width / 2 - 100, Screen.height / 2 - 100, 200, 200));
Сюда!!!
GUI.EndGroup ();
Напишем выдаваемое значение при window = 1:
200?"200px":""+(this.scrollHeight+5)+"px");">
if(window == 1)
{
if(GUI.Button (new Rect (10,30,180,30), "Играть"))
{
window = 2;
}
if(GUI.Button (new Rect (10,70,180,30), "Настройки"))
{
window = 3;
}
if(GUI.Button (new Rect (10,110,180,30), "Об Игре"))
{
window = 4;
}
if(GUI.Button (new Rect (10,150,180,30), "Выход"))
{
window = 5;
}
}
if(window == 1)
- если windows равно значению 1, то создадим вывод
if(GUI.Button (new Rect (10,30,180,30), "Играть"))
- создаем кнопку "Играть"
{window = 2;}
- если нажата кнопка "Играть", то window получит значение 2
С остальными кнопка так же.
Шаг 10:
Создадим вывод, если переменная window равно 2
200?"200px":""+(this.scrollHeight+5)+"px");">
if(window == 2)
{
{
Application.LoadLevel(1);
}
{
Application.LoadLevel(2);
}
{
Application.LoadLevel(3);
}
{
window = 1;
}
}
Выводим кнопки, которые доступны при нажатии на кнопку "Играть". Вывод ни чем не отличается о предыдущих кнопок, расшифрую только новые функции:
Debug.Log("Уровень 1 загружен");
-
Application.LoadLevel(1);
- вызываем функцию, которая загружает уровень игры. 1 - можно менять на нужный вам уровень. Числовое значение можно брать, если нажать на сочетании клавиш Ctrl + Shift + B.
Шаг 11:
Создаем вывод, если window имеет значение 3:
200?"200px":""+(this.scrollHeight+5)+"px");">
if(window == 3)
{
{
}
{
}
{
}
if(GUI.Button (new Rect (10,160,180,30), "Назад"))
{
window = 1;
}
}
В данном шаге новых функций не используется, поэтому просто добавляем. В следующих уроках будет расписано о создании функциональности, для настройки игры.
Шаг 12:
Выводим содержимое, если значение у window 4
200?"200px":""+(this.scrollHeight+5)+"px");">
if(window == 4)
{
{
window = 1;
}
}
Шаг 13:
Выводим содержимое, если переменная window имеет значение 5 и нажата кнопка "Выход"
200?"200px":""+(this.scrollHeight+5)+"px");">
if(window == 5)
{
{
Application.Quit();
}
{
window = 1;
}
}
В данном выводе из новых функций, только она:
Application.Quit(); - данная функция выключает приложении при нажатии кнопки "Да".
P.S. Функция не работает в редакторе Unity3D, она работает только в скомпилированном проекте.
Скрипт готов, если же вы делали все по шагам, то у вас появится меню, которое было показано на изображении вначале.
If(window == 2)
{
GUI.Label(new Rect(50, 10, 180, 30), "Выберите уровень");
if(GUI.Button (new Rect (10,40,180,30), "Уровень 1"))
{
Debug.Log("Уровень 1 загружен");
Application.LoadLevel(1);
}
if(GUI.Button (new Rect (10,80,180,30), "Уровень 2"))
{
Debug.Log("Уровень 2 загружен");
Application.LoadLevel(2);
}
if(GUI.Button (new Rect (10,120,180,30), "Уровень 3"))
{
Debug.Log("Уровень 3 загружен");
Application.LoadLevel(3);
}
if(GUI.Button (new Rect (10,160,180,30), "Назад"))
{
window = 1;
}
}
If(window == 3)
{
GUI.Label(new Rect(50, 10, 180, 30), "Настройки Игры");
if(GUI.Button (new Rect (10,40,180,30), "Игра"))
{
}
if(GUI.Button (new Rect (10,80,180,30), "Аудио"))
{
}
if(GUI.Button (new Rect (10,120,180,30), "Видео"))
{
}
if(GUI.Button (new Rect (10,160,180,30), "Назад"))
{
window = 1;
}
}
If(window == 4)
{
GUI.Label(new Rect(50, 10, 180, 30), "Об Игре");
GUI.Label(new Rect(10, 40, 180, 40), "Информация об разработчике и об игре");
if(GUI.Button (new Rect (10,90,180,30), "Назад"))
{
window = 1;
}
}
If(window == 5)
{
GUI.Label(new Rect(50, 10, 180, 30), "Вы уже выходите?");
if(GUI.Button (new Rect (10,40,180,30), "Да"))
{
Application.Quit();
}
if(GUI.Button (new Rect (10,80,180,30), "Нет"))
{
window = 1;
}
}
GUI.EndGroup ();
}
}
На данный момент это первый урок, в будущем появятся еще пару, которые научат делать полностью функциональное меню
Пауза, при создании любой игры, является неотъемлемой частью интерфейса. Через меню паузы можно реализовать такие функции игры как:
В этом скрипте мы реализуем остановку игры и выход в главное меню. Для этого нам понадобится в проекте создать две сцены и С# скрипт, в котором пишем вот такие строки:
Using UnityEngine; using System.Collections; public class puse: MonoBehaviour { public float timer; public bool ispuse; public bool guipuse; void Update() { Time.timeScale = timer; if (Input.GetKeyDown(KeyCode.Escape) && ispuse == false) { ispuse = true; } else if (Input.GetKeyDown(KeyCode.Escape) && ispuse == true) { ispuse = false; } if (ispuse == true) { timer = 0; guipuse = true; } else if (ispuse == false) { timer = 1f; guipuse = false; } } public void OnGUI() { if (guipuse == true) { Cursor.visible = true;// включаем отображение курсора if (GUI.Button(new Rect((float)(Screen.width / 2), (float)(Screen.height / 2) - 150f, 150f, 45f), "Продолжить")) { ispuse = false; timer = 0; Cursor.visible = false; } if (GUI.Button(new Rect((float)(Screen.width / 2), (float)(Screen.height / 2) - 100f, 150f, 45f), "Сохранить")) { } if (GUI.Button(new Rect((float)(Screen.width / 2), (float)(Screen.height / 2) - 50f, 150f, 45f), "Загрузить")) { } if (GUI.Button(new Rect((float)(Screen.width / 2), (float)(Screen.height / 2), 150f, 45f), "В Меню")) { ispuse = false; timer = 0; Application.LoadLevel("Menu"); // здесь при нажатии на кнопку загружается другая сцена, вы можете изменить название сцены на свое } } } }
Здесь все просто. Две переменные, одна из которых будет при нажатии на ESC останавливать время, а вторая, при остановке времени будет выводить на экран кнопки меню.
Весь скрипт построен, по сути, на одной функции:
Time.timeScale = timer
TimerScale является, как бы, своеобразными часами которые при значении 1 работают в нормальном режиме и время проходит как обычно, при значении 0,5 время замедляется в 2 раза, а при значении 0 время вообще останавливается. Этим и воспользуемся для создания паузы.
В один прекрасный момент вам приспичило создать меню. Контекстное или слитое c общим меню Unity. И тут вы поняли что ничего о том как это делается и не знаете. Или знаете не всё. Данная статья - обзор по способам построить меню в Unity. Этих способов благо достаточно - и каждый из них специфичен.
В чем сабж статьи?
Если вдруг вам приходится заниматься редакторами профессионально, как мне на день насущный,
то данные знания для вас просто обязательны - меню применяются повсеместно. Когда я начинал только изучать это мне приходилось пилить велосипедные комбобоксы из юнити-вики, потому что я не знал как делать это правильно. Способ тот кривой и вам на такие вещи я натыкаться не советую - почему бы не начать сразу делать их правильно?
Итак, способы
ContextMenu
Самый первый способ, с которым, вы вероятно даже сталкивались - это ContextMenu
.
Следующий пример демонстрирует принцип работы данного атрибута:
Using UnityEngine; public class MyClass: MonoBehaviour { void SayMessage() { Debug.Log ("I love you, DevTribe"); } }
В результате мы получим пункт меню в следующем месте:
При нажатии на данный пункт выполнится наш метод SayMessage() .
Однако, данный способ применяется в очень узком месте:
- только в скриптах, наследуемых от класса Behaviour (всех сценариях и компонентах)
Способ применения: когда нужно быстренько вызвать какой-нибудь метод из компонента. В таких случаях переписывать инспектор объекта с целью добавить пару кнопок - нецелесообразно. Да и некоторые пунктики лучше иметь именно там.
Этот способ используется в игровом билде (что логично, так как все компоненты лежат там).
ContextMenuItem
Данный способ похож на предыдущий - это тоже атрибут. Но пишется он не туда и не так.
Пример написания:
Using UnityEngine; public class MyClass: MonoBehaviour { public string ff; void SayMessage() { Debug.Log("I love you, DevTribe"); } }
Данный способ добавляет контекстное меню для нашего поля(в примере - поле ff). При щелчке правой кнопкой мыши мы увидим меню с данным пунктом:
Первым параметром мы указываем название поля, вторым - название метода, который будет вызван.
В остальном требования те же:
- используется только в скриптах, наследуемых от класса Behaviour (всех сценариях и компонентах)
- только для методов экземпляра (никакого "static"!)
- метод не должен иметь параметров
Способ применения: аналогично первому способу, но с учетом того, что выполнение метода относится к определенному полю, а не компоненту в целом.
Этот способ всё так же лепится в игровую сборку.
Для данного способа чуть ниже (в разделе "Параметры строки меню") будет расписано чуть подробней.
Внимание
Все последующие способы являются расширением редактора и относятся только к сборке редактора. Это говорит о том, что скрипты, исполняющие данный код должны лежать в папке /Assets/Editor/
вашего проекта
.
MenuItem
С атрибутами, однако, мы еще не закончили. Остался у нас в запасе один, о котором я умолчал. Это атрибут MenuItem , добавляющие пункты в основное меню редактора.
Пример кода:
Using UnityEditor; using UnityEngine; public static class MyClass { static void SayMessage() { Debug.Log("I love you, DevTribe"); } }
Данный способ приведет к следующему результату:
Естественно, у данного способа есть свои ограничения, но они отличаются от тех, что вы прочли ранее:
- функция, которой принадлежит атрибут, обязательно должна быть статичной
- функция не должна иметь параметров
Способ применения: используется повсеместно - для открытия окон, для исполнения последовательности действий.
Кроме того данный способ имеет немного "читерства" и гибкой настройки, о которой я напишу чуть ниже в разделе "Параметры строки меню".
Данный способ всегда должен указывать на раздел, то есть нельзя просто добавить пункт в меню, он обязательно должен находиться в каком-то месте. Помимо этого данный способ позволяет встраивать меню в существующие уже места. Это создает подобный пункт не только в основном меню, но и в контекстном меню в иерархии или проекте, если вы определили элемент туда.
Помимо этого данный атрибут может по желанию реализовывать несколько параметров:
isValidateFunction
- помечает функцию как функцию-валидатор. Это значит, что данная функция не показывает пункт меню, а проверяет его доступность. Такая функция должна возвращать bool
, говорящий, задисейблена данная кнопка или активна. Используется в паре с обычным пунктом меню (не валидатором с точно таким же путем, включая дополнительные параметры).
Пример:
Static bool CanBeShow() { return "ILove".Length == 5; } static void ShowMessage() { Debug.Log("I love you, DevTribe"); }
Опять же, про это почему то в документации особо-то и не расписывали.priority - порядок пункта меню. Обычно стандартные элементы отсчитывают порядок от 0 и выше и, следовательно, указав "-1" мы установим наш пункт в самом верху списка.
Если вы укажете больше одного идентичного пути, то будет задействован только последний указанный. Таким образом вы можете подменять стандартные пункты меню Unity на свои.
Так же в рамках данного способа вы можете изменять контекстные меню инспектора, с таким же результатом как у способа ContextMenu
. Однако, тут есть свой сахар - вы можете изменять пункты уже написанных компонентов, таких как Transform, Rigidbody и так далее.
Для этого способа зарезервировано меню CONTEXT, после которого вы вводите название нужного вам компонента:
Using UnityEditor; using UnityEngine; public static class MyClass { static void ShowMessage(MenuCommand command) { Debug.Log("I love you, DevTribe"); } }
Как вы могли заметить, я применил в функции параметр - он не обязателен, но возможен при таком раскладе. Данный параметр содержит в себе поле "context", содержащее ссылку на компонент.
У данного способа так же нет ограничений в виде конкретного типа - например в качестве пути вы можете указать CONTEXT/MonoBehaviour/ и прикрепить пункт сразу ко всем наследникам данного класса. Указывать можно любой тип, наследуемый от Component
(включая сам тип Component
).
Помимо "CONTEXT/" вы так же можете использовать следующие "специальные пути":
- "Assets/" - для добавления пункта в контекстное меню в окне ассетов
- "Assets/Create/" - для добавления пункта в меню кнопки "Create" в окне с ассетами
GUI методы
Нельзя обойти стороной GUI методы, существующие для вызова попапов - однако среди стандартных это, зачастую, выборка значения.
Итак, попапы собственно есть следующие:
- EditorGUILayout.Popup - строковый попап. Принцип работы: узнаем индекс строки из массива
- EditorGUILayout.IntPopup - числовой попап. Принцип работы: узнаем индекс числа из массива, при том можно подменить числа "строковым отображением" (показывать текст, подразумевать число)
- EditorGUILayout.EnumPopup - попап для перечислений. Принцип работы: указываем текущее значение перечислителя, получаем новое.
- EditorGUILayout.MaskField - попап, позволяющий выбрать несколько значений, компонуя их в маску (обычно так делают выборки слоев/тегов)
В случае с отображением "строки" опять же применимы правила форматирования строки, такие как сепараторы и косая черта, о которых я писал выше.
Особо за них говорить нечего, всё можно узнать в документации.
ShowAsDropDown
Следующий способ - использовать отдельное окно. Однако вызывать его не просто так, а "по-особенному", через метод ShowAsDropDown
. Соль этого окна в том, что оно закрывается при щелчке вне.
Для того, чтобы результат "ушел обратно" при успешных действиях - обычно делается делегат, который обрабатывается у родителя. Однако это не единственный способ вернуть значение - можно юзать функторы, а может даже втупую забить код для конкретной ситуации. Но опять же в целях универсальности лучше использовать делегат, гарантирующий обратный вызов.
Пример:
Public class AutocompleteMenu: EditorWindow
{
public int visibleCount = 6;
public static void Open(Vector2 position, OnControlEventDelegate onControlEvent, params GUIContent variants)
{
var window = CreateInstance
Соответственно далее в такое окно дописывается метод OnGUI
где рисуется абсолютно кастомный попап под наши потребности.
Метод "ShowAsDropDown" просит указать место своего появления в абсолютных координатах. Часто нам нужно отображать такой попап на месте щелчка мышью. Такие координаты мыши можно достать следующей командой:
Var screenMousePos = GUIUtility.GUIToScreenPoint(Event.current.mousePosition);
Соль этого способа в том, что вид попапа может быть любым - вы можете сделать, например, выбор иконок или оформить окно по своему желанию.
PopupWindow
Данный способ по сути является автоматизацией предыдущего, предоставляя методы OnOpen
/OnClose
и заготовленный метод Show
.
Суть в том чтобы пронаследовать наш класс от класса PopupWindow
. Однако запомните - данная реализация ограничена в плане возврата обратного значения. Если вы используете попап для конкретных целей - данное окно вам подойдет, но для универсальных попапов желательно использовать ShowAsDropDown
.
DisplayPopupMenu
Следующий способ - обычный попап, который используется во всех стандартных способах. По сути он лежит "в корне" работы GUI методов, которые я описывал немногим выше.
Этот способ использует делегат для обратного вызова.
Соль в вызове метода , при вызове которого мы указываем ссылку на метод. Если вы хотите запаковать вызов пункта в метод без делегата вам понадобится создать класс аля:
Public class PopupCallback
{
public static PopupCallback instance;
public int controlId;
public bool change;
public delegate void SetValueDelegate(object data);
public static void Init(int controlId)
{
instance = new PopupCallback { controlId = controlId };
}
public static bool Its(int controlId)
{
return instance.w(x => x.change) && instance.controlId == controlId;
}
public object obj;
public static EditorUtility.SelectMenuItemFunction SetValueStandart(int controlId)
{
Init(controlId);
return instance._SetValue;
}
public static SetValueDelegate SetValue(int controlId)
{
Init(controlId);
return instance._SetValue;
}
public void _SetValue(object userData, string options, int selected)
{
change = true;
obj = selected;
}
public void _SetValue(object data)
{
change = true;
obj = data;
}
public static object GetValue()
{
var result = instance.obj;
instance = null;
return result;
}
public static T GetValue
Данный класс содержит методы, необходимые для манипуляций с данными попапа. Если коротко - то в коде GUI вы должны завести id для вашего контрола и затем вызвать EditorUtility.DisplayPopupMenu
. В данный метод вы подставляете на место делегата метод PopupCallback.SetValueStandart
. После проверяете, равен ли id инстанса в PopupCallback вашему id (это уже идет код чтобы отловить обратный вызов). В положительном случае - достаете из инстанса данные.
Не совсем очевидно, но это именно то что делают Unity для формирования таких методов.
Кстати, у нас на сайте есть пример использования такого подхода. Так что при желании можно вкуривать
GenericMenu
Завершает данный список класс GenericMenu . Его синтаксис необычайно прост - вы создаете экземпляр этого класса и добавляете через методы новые пункты. По завершению вызываете ShowAsContext . Каждый пункт может иметь свой обратный вызов, что упрощает создание меню с командами.
Кастомный попап без фокуса
Отдельной темой является создание попапов без фокуса. Дело в том, что на данный момент это нельзя сделать напрямую. Несмотря на это - потребность в таком попапе есть, притом существенная - это кастомные подсказки со встроенными картинками, это "умная строка", не сбивающая ввод текста и предлагающая варианты для окончания и прочие случаи, при которых новое окно не должно влиять на поведение.
Для таких целей я портировал костыль. Чтобы его использовать скопируйте целиком следующий код:
PopupWindowWithoutFocus.cs
Using System;
using System.Collections.Generic;
using System.Reflection;
using UnityEditor;
using UnityEngine;
internal class PopupWindowWithoutFocus: EditorWindow
{
// Fields
private Rect m_ActivatorRect;
private const float m_BorderWidth = 1f;
private Vector2 m_LastWantedSize = Vector2.zero;
private PopupLocationHelper.PopupLocation m_LocationPriorityOrder;
private PopupWindowContent m_WindowContent;
private static Rect s_LastActivatorRect;
private static double s_LastClosedTime;
private static PopupWindowWithoutFocus s_PopupWindowWithoutFocus;
// Methods
private PopupWindowWithoutFocus()
{
hideFlags = HideFlags.DontSave;
}
private void FitWindowToContent()
{
Vector2 windowSize = m_WindowContent.GetWindowSize();
if (m_LastWantedSize != windowSize)
{
m_LastWantedSize = windowSize;
Vector2 minSize = windowSize + new Vector2(2f * m_BorderWidth, 2f * m_BorderWidth);
Rect rect = PopupLocationHelper.GetDropDownRect(m_ActivatorRect, minSize, minSize, null, m_LocationPriorityOrder);
var baseType = GetType().BaseType;
if (baseType != null)
{
var fieldInfo = baseType.GetField("m_Pos", BindingFlags.Instance | BindingFlags.NonPublic);
if (fieldInfo != null)
fieldInfo.SetValue(this, rect);
}
var vector3 = new Vector2(rect.width, rect.height);
maxSize = vector3;
base.minSize = vector3;
}
}
public static void Hide()
{
if (s_PopupWindowWithoutFocus != null)
{
s_PopupWindowWithoutFocus.Close();
}
}
private void Init(Rect activatorRect, PopupWindowContent windowContent, PopupLocationHelper.PopupLocation locationPriorityOrder)
{
m_WindowContent = windowContent;
m_WindowContent.GetType()
.GetProperty("editorWindow")
.GetSetMethod(true)
.Invoke(m_WindowContent, new object {this});
m_ActivatorRect = GUIToScreenRect(activatorRect);
m_LastWantedSize = windowContent.GetWindowSize();
m_LocationPriorityOrder = locationPriorityOrder;
Vector2 minSize = windowContent.GetWindowSize() + new Vector2(m_BorderWidth * 2f, m_BorderWidth * 2f);
position = PopupLocationHelper.GetDropDownRect(m_ActivatorRect, minSize, minSize, null, m_LocationPriorityOrder);
ShowPopup();
Repaint();
}
internal static Rect GUIToScreenRect(Rect guiRect)
{
Vector2 vector = GUIUtility.GUIToScreenPoint(new Vector2(guiRect.x, guiRect.y));
guiRect.x = vector.x;
guiRect.y = vector.y;
return guiRect;
}
public static bool IsVisible()
{
return (s_PopupWindowWithoutFocus != null);
}
private void OnDisable()
{
s_LastClosedTime = EditorApplication.timeSinceStartup;
if (m_WindowContent != null)
{
m_WindowContent.OnClose();
}
s_PopupWindowWithoutFocus = null;
}
private void OnEnable()
{
s_PopupWindowWithoutFocus = this;
}
private static bool OnGlobalMouseOrKeyEvent(EventType type, KeyCode keyCode, Vector2 mousePosition)
{
if (s_PopupWindowWithoutFocus != null)
{
if ((type == EventType.KeyDown) && (keyCode == KeyCode.Escape))
{
s_PopupWindowWithoutFocus.Close();
return true;
}
if ((type == EventType.MouseDown) && !s_PopupWindowWithoutFocus.position.Contains(mousePosition))
{
s_PopupWindowWithoutFocus.Close();
return true;
}
}
return false;
}
internal void OnGUI()
{
FitWindowToContent();
var rect = new Rect(m_BorderWidth, m_BorderWidth, position.width - (2f * m_BorderWidth), position.height - (2f * m_BorderWidth));
m_WindowContent.OnGUI(rect);
GUI.Label(new Rect(0f, 0f, position.width, position.height), GUIContent.none, "grey_border");
}
private static bool ShouldShowWindow(Rect activatorRect)
{
if (((EditorApplication.timeSinceStartup - s_LastClosedTime) < 0.2) && !(activatorRect != s_LastActivatorRect))
{
return false;
}
s_LastActivatorRect = activatorRect;
return true;
}
public static void Show(Rect activatorRect, PopupWindowContent windowContent)
{
Show(activatorRect, windowContent, null);
}
internal static void Show(Rect activatorRect, PopupWindowContent windowContent, PopupLocationHelper.PopupLocation locationPriorityOrder)
{
if (ShouldShowWindow(activatorRect))
{
if (s_PopupWindowWithoutFocus == null)
{
s_PopupWindowWithoutFocus = CreateInstance
В качестве примера используйте этот код:
Using UnityEditor; using UnityEngine; public class ExampleUnfocusWindow: PopupWindowContent { public static void Open() { Open(new Vector2()); } public static void Open(Vector2 position) { var locationPriorityOrder = new PopupLocationHelper.PopupLocation; locationPriorityOrder = PopupLocationHelper.PopupLocation.Left; locationPriorityOrder = PopupLocationHelper.PopupLocation.Right; PopupWindowWithoutFocus.Show(new Rect(position.x, position.y, 6, 6), new ExampleUnfocusWindow(), locationPriorityOrder); } public override Vector2 GetWindowSize() { return new Vector2(200, 200); } public override void OnOpen() { base.OnOpen(); } public override void OnClose() { base.OnClose(); } public override void OnGUI(Rect rect) { GUI.Box(rect, "Hello world"); } }
Настройка строки меню
Некоторые из указанных выше способов поддерживают расширенное форматирование для строки.
Если вы укажете в качестве пункта пустую строку, вместо неё будет задействован сепаратор (вертикальная черта).
Если вы разделите части строки дробной чертой /
, вы создадите подпункт с иерархией.
Так же вы можете задать сочетание клавиш, при котором будет происходить вызов пункта меню. Для этого вам понадобится написать некоторую последовательность символов через пробел, после вашего пути.
В качестве спецсимволов зарезервированы:
% - ctrl
# - shift
& - alt
_ - отсутствие спецсимвола
Таким образом, если вы хотите назначить пункту меню клавишу G вы должны написать что-то подобное следующему:
Так же пункты можно комбинировать, чтобы добиться сочетания аля "ctrl+shift".
Естественно, что не всем клавиши можно представить буквой, потому для некоторых клавиш используются специальные ключевые слова LEFT, RIGHT, UP, DOWN, F1 .. F12, HOME, END, PGUP, PGDN.
Важно понимать, что перед вводом сочетания клавиш нужно обязательно поставить пробел.
Подробнее об этой фиче вы можете узнать в официальной документации (хотя я вроде всё сам перечислил).
Заготовки
using UnityEditor;
using UnityEngine;
public class Popup: EditorWindow
{
public static void Open(Vector2 size)
{
var window = CreateInstance
Этот урок даст всем желающим основное понимание того, как будет работать GUI в Unity на примере создания простого меню. Это очень простой урок, не требующий специальных навыков, кроме начального знания Unity Java Script (или, в целом, вообще какого-либо скрипта). Приступим же.
Начнём с создания новой сцены с игрой. Эта сцена будет названа нами «Level_1». Сцену для меню мы назовём «Menu». В дальнейшем, перемещение между этими сценами будет возможно с помощью команды.
Application.LoadLevel (Номер сцены);
Однако, к этой команде мы вернёмся позже. В данный момент нас больше должно интересовать «Номер сцены». Проставить и посмотреть номер сцены возможно с помощью окна Build Settings (File
%D0%92%20%D1%8D%D1%82%D0%BE%D0%BC%20%D1%83%D1%80%D0%BE%D0%BA%D0%B5%20%D1%8F%20%D1%80%D0%B0%D1%81%D1%81%D0%BA%D0%B0%D0%B6%D1%83,%20%D0%BA%D0%B0%D0%BA%20%D1%80%D0%B0%D0%B1%D0%BE%D1%82%D0%B0%D0%B5%D1%82%20GUI%20%D0%B2%20Unity,%20%D0%B8%20%D0%BF%D0%BE%20%D1%85%D0%BE%D0%B4%D1%83%20%D0%B4%D0%B5%D0%BB%D0%B0%20%D0%B1%D1%83%D0%B4%D1%83%20%D1%81%D0%BE%D0%B7%D0%B4%D0%B0%D0%B2%D0%B0%D1%82%D1%8C%20%D0%BF%D1%80%D0%BE%D1%81%D1%82%D0%BE%D0%B5%20%D0%BC%D0%B5%D0%BD%D1%8E.%20%D0%AD%D1%82%D0%BE%D1%82%20%D1%83%D1%80%D0%BE%D0%BA%20%D0%B4%D0%BB%D1%8F%20%D0%BD%D0%BE%D0%B2%D0%B8%D1%87%D0%BA%D0%BE%D0%B2,%20%D0%BD%D0%BE%20%D0%B6%D0%B5%D0%BB%D0%B0%D1%82%D0%B5%D0%BB%D1%8C%D0%BD%D0%BE%20%D1%81%20%D0%BD%D0%B0%D1%87%D0%B0%D0%BB%D1%8C%D0%BD%D1%8B%D0%BC%20%D0%B7%D0%BD%D0%B0%D0%BD%D0%B8%D0%B5%D0%BC%20Unity%20Java%20Script,%20%D0%B4%D0%B0%20%D0%B8%D0%BB%D0%B8%20%D0%B2%D0%BE%D0%BE%D0%B1%D1%89%D0%B5%20%D0%BA%D0%B0%D0%BA%D0%BE%D0%B3%D0%BE%20%D0%BB%D0%B8%D0%B1%D0%BE%20%D1%81%D0%BA%D1%80%D0%B8%D0%BF%D1%82%D0%B0.%20%D0%9D%D1%83%20%D1%87%D1%82%D0%BE,%20%D0%BD%D0%B0%D1%87%D0%BD%D1%91%D0%BC.
%D0%90%20%D0%BD%D0%B0%D1%87%D0%B0%D1%82%D1%8C%20%D1%8F%20%D0%B4%D1%83%D0%BC%D0%B0%D1%8E%20%D1%81%20%D1%82%D0%BE%D0%B3%D0%BE,%20%D1%87%D1%82%D0%BE%20%D0%BC%D1%8B%20%D1%81%D0%BE%D0%B7%D0%B4%D0%B0%D0%B4%D0%B8%D0%BC%20%D0%BD%D0%BE%D0%B2%D1%83%D1%8E%20%D1%81%D1%86%D0%B5%D0%BD%D1%83.%20%D0%9D%D0%B0%D0%B7%D0%BE%D0%B2%D1%91%D0%BC%20%D1%81%D1%86%D0%B5%D0%BD%D1%83%20%D1%81%20%D0%B8%D0%B3%D1%80%D0%BE%D0%B9%20" level_1="">
Application.LoadLevel (Номер сцены);
К команде мы вернёмся чуть позже. Сейчас нас больше интересует "Номер сцены". Как его поставить? Где его посмотреть?
Поставить и посмотреть номер можно в окошке Build settings (File/Build settings...):
/img/origs/647.jpg" alt="Фото" />
Номер обведён красным.
Для того, чтобы добавить сцену, необходимо нажать на Add Current (обведено зелёным). В какой сцене вы находитесь, такая сцена и добавится. При запуске игры, запускается сцена "0", то есть "Menu".
Сцена создана. Теперь создадим скрипт, например "menu.js" и повесим его на камеру. Далее будем работать практически только с этим скриптом. Подготовка завершена.
Практически самый простой GUI объект - Окно. Давайте рассмотрим комманду в скрипте по подробнее.
GUI.Box (Rect (A, B, C, D), "Текст");
A - количество пикселей от левого края экрана к левому краю окна.
B - количество пикселей от верхнего края экрана к верхнему краю окна.
C - ширина окна.
D - высота окна.
А далее следует название окна. Эта надпись будет висеть сверху окна.
Давайте создадим наше первое окно:
Function OnGUI () { GUI.Box (Rect (5,5,200,200), "Текст"); }
Номер обведён красным цветом.
Если Вы хотите добавить сцену, то Вам необходимо будет нажать на кнопку AddCurrent, которая обведена зелёным. Добавится та самая сцена, в которой на данный момент Вы находитесь. При запуске игровой программы, будет запущена сцена «0», значит «Menu».
Теперь сцена создана. Далее следует создать скрипт, назовём его «menu.js» и повесить его на камеру. Дальнейшая работа пойдёт в основном с этим скриптом. Необходимая подготовка завершена.
Самый простой GUI объект – это Окно. Команда в скрипте выглядит так:
GUI.Box (Rect (A, B, C, D), "Текст");
, где А – это количество пикселей от левого края экрана к левому краю окна,
В – то же, от правого края экрана к верхнему краю окна,
С – это ширина окна,
D – это высота окна,
Далее следует название окна. Надпись будет располагаться сверху Вашего окна.
Теперь давайте создадим первое окно, в сцене оно будет выглядеть таким образом:
Для того, чтобы присоединить его к другим углам экрана, либо поместить в центр, существуют следующие команды:
Screen.width Screen.height
Первая команда будет возвращать число пикселей по ширине экрана, а вторая – по высоте экрана. При использовании этих двух команд Вы можете поместить окна в разные части экрана и они будут оставаться там при различных разрешениях экрана.
Function OnGUI () { GUI.Box (Rect (5,5,50,50), "1"); //верхний левый угол GUI.Box (Rect (Screen.width - 55,5,50,50), "2"); // верхний правй угол GUI.Box (Rect (5,Screen.height - 55,50,50), "3"); // нижний левый угол GUI.Box (Rect (Screen.width - 55,Screen.height - 55,50,50), "4"); // нижний правый угол GUI.Box (Rect (Screen.width/2 - 25,Screen.height/2 - 25,50,50), "5"); // центр }
В зависимости от разрешения экрана теперь можно увеличивать и уменьшать окна.
По мнению многих пользователей Unity самый используемый GUI объект – это кнопка. Написать скрипт для кнопки очень просто.
If (тут) { }
Сейчас будет создана кнопка, которая сможет отправить нас в сцену с игрой:
Function OnGUI () { GUI.Box (Rect (Screen.width/2 - 100,Screen.height/2 - 100,200,180), "Главное меню"); // окно if (GUI.Button (Rect (Screen.width/2 - 90,Screen.height/2 - 80,180,30), "Играть")) { // наша кнопка Application.LoadLevel (1); // загружаем уровень Level_1 } }
При нажатии на кнопку «Играть», будет загружена первая цена (Level_1).
Также стоит создать ещё пару функциональных кнопок и кнопку «выход».
Function OnGUI () { GUI.Box (Rect (Screen.width/2 - 100,Screen.height/2 - 100,200,180), "Главное меню"); if (GUI.Button (Rect (Screen.width/2 - 90,Screen.height/2 - 80,180,30), "Играть")) { Application.LoadLevel (1); } if (GUI.Button (Rect (Screen.width/2 - 90,Screen.height/2 - 40,180,30), "Настройки")) { } if (GUI.Button (Rect (Screen.width/2 - 90,Screen.height/2 - 0,180,30), "Помощь")) { } if (GUI.Button (Rect (Screen.width/2 - 90,Screen.height/2 + 40,180,30), "Выход")) { Application.Quit(); // выход } }
Команда "Application.Quit();" она не будет работать в редакторе.
Также стоит настроить дополнительные окна для производства настроек и помощи. Для их создания будем использовать переменную, к примеру «window».
Добавляем ещё пару окон.
Var window = 0; function OnGUI () { if (window == 0) { // теперь главное меню активировано при window = 0 GUI.Box (Rect (Screen.width/2 - 100,Screen.height/2 - 100,200,180), "Главное меню"); if (GUI.Button (Rect (Screen.width/2 - 90,Screen.height/2 - 80,180,30), "Играть")) { Application.LoadLevel (1); } if (GUI.Button (Rect (Screen.width/2 - 90,Screen.height/2 - 40,180,30), "Настройки")) { window = 1; // активируем окно "настройки" } if (GUI.Button (Rect (Screen.width/2 - 90,Screen.height/2 - 0,180,30), "Помощь")) { window = 2; //активируем окно "помощь" } if (GUI.Button (Rect (Screen.width/2 - 90,Screen.height/2 + 40,180,30), "Выход")) { Application.Quit(); } } if (window == 1) { // наши настройки GUI.Box (Rect (Screen.width/2 - 100,Screen.height/2 - 100,200,180), "Настройки"); if (GUI.Button (Rect (Screen.width/2 - 90,Screen.height/2 + 40,180,30), "Назад")) { window = 0; } } if (window == 2) { // наша помощь GUI.Box (Rect (Screen.width/2 - 100,Screen.height/2 - 100,200,180), "Помощь"); if (GUI.Button (Rect (Screen.width/2 - 90,Screen.height/2 + 40,180,30), "Назад")) { window = 0; } } }
Подключаем клавиатурные кнопки к управлению:
If (GUI.Button (Rect (Screen.width/2 - 90,Screen.height/2 + 40,180,30), "Назад") || Input.GetKey ("escape")) { window = 0; }
Большую важность в создании меню имеет текст. Можно сказать, что скрипт текста совсем не отличается от скрипта окна. Раздел «Помощь» требует наполнения:
If (window == 2) { GUI.Box (Rect (Screen.width/2 - 100,Screen.height/2 - 100,200,180), "Помощь"); GUI.Label (Rect (Screen.width/2 - 100,Screen.height/2 - 80,200,140), "Здесь должна быть помощь "); // текст if (GUI.Button (Rect (Screen.width/2 - 90,Screen.height/2 + 40,180,30), "Назад") || Input.GetKey ("escape")) { window = 0; } }
Теперь в разделе «Помощь» есть текст.
Также к этому тексту Вы можете применить стиль. Для этого его нужно создать.
Var style: GUIStyle;
В так называемом инпесторе камеры появится следующее:
Красным подчёркнуты часто используемые опции:
1 - Цвет текста.
2 - Шрифт.
3 - Якорь.
4 - Размер.
5 - Жирный, Курсив, Жирный курсив.
После выбора необходимых опций, стиль привязывается к тексту:
Tумблер будет очень похож на кнопку, но в отличие может находиться в двух положениях (включён, либо выключен). Пишется он так:
Var toggle: boolean = false; toggle = GUI.Toggle (Rect (20, 20, 100, 20), toggle, "Тумблер");
Тумблер применяется для переменных типа boolean, которые могут находиться только в двух значениях true и false.
Добавляем в раздел «Настройки» дополнительное окно:
If (window == 1) { GUI.Box (Rect (Screen.width/2 - 100,Screen.height/2 - 100,200,180), "Настройки"); toggle = GUI.Toggle (Rect (Screen.width/2 - 90,Screen.height/2 - 70, 80, 20), toggle, "Тумблер"); // наш тумблер if (toggle == true) { GUI.Box (Rect (Screen.width/2 - 130,Screen.height/2 - 100,20,20), ""); // левое окошко GUI.Box (Rect (Screen.width/2 + 130,Screen.height/2 - 100,20,20), ""); // правое окошко } if (GUI.Button (Rect (Screen.width/2 - 90,Screen.height/2 + 40,180,30), "Назад") || Input.GetKey ("escape")) { window = 0; } }
Если включить тумблер, то рядом с основным окном появятся два дополнительных.
Также стоит познакомиться с такой полезной функцией, как ползунок. При помощи ползунка Вы сможете изменить громкость и т.д. По написанию, ползунок практически не отличается от тумблера, только используется другой переменной: float, int.
Var sider: int = 0; sider = GUI.HorizontalSlider (Rect (25, 25, 100, 30), sider, A, B);
где A - число обозначающее значение переменной, когда ползунок находится слева.
B - число обозначающее значение переменной, когда ползунок находится справа.
Модернизируем предыдущий скрипт с помощью ползунка:
If (window == 1) { GUI.Box (Rect (Screen.width/2 - 100,Screen.height/2 - 100,200,180), "Настройки"); toggle = GUI.Toggle (Rect (Screen.width/2 - 90,Screen.height/2 - 70, 180, 20), toggle, "Тумблер"); if (toggle == true) { sider = GUI.HorizontalSlider (Rect (Screen.width/2 - 90,Screen.height/2 - 40, 180, 20), sider, 0, 160); //ползунок GUI.Box (Rect (Screen.width/2 - 130,Screen.height/2 - 100,20,20 + sider), ""); GUI.Box (Rect (Screen.width/2 + 110,Screen.height/2 - 100,20,20 + sider), ""); } if (GUI.Button (Rect (Screen.width/2 - 90,Screen.height/2 + 40,180,30), "Назад") || Input.GetKey ("escape")) { window = 0; } }
Сейчас при помощи ползунка легко можно менять размер окон.
Добавим также и вертикальный ползунок, чтобы показать, что он может быть не только горизонтальным.
If (window == 1) { GUI.Box (Rect (Screen.width/2 - 100,Screen.height/2 - 100,200,180), "Настройки"); toggle = GUI.Toggle (Rect (Screen.width/2 - 90,Screen.height/2 - 70, 180, 20), toggle, "Тумблер"); if (toggle == true) { sider = GUI.HorizontalSlider (Rect (Screen.width/2 - 90,Screen.height/2 - 40, 180, 20), sider, 0, 160); //горизонтальный sider1 = GUI.VerticalSlider (Rect (Screen.width/2 - 90,Screen.height/2 - 20, 20, 50), sider1, 0, 160); //вертикальный GUI.Box (Rect (Screen.width/2 - 130 - sider,Screen.height/2 - 100,20 + sider,20 + sider1), ""); GUI.Box (Rect (Screen.width/2 + 110,Screen.height/2 - 100,20 + sider,20 + sider1), ""); } if (GUI.Button (Rect (Screen.width/2 - 90,Screen.height/2 + 40,180,30), "Назад") || Input.GetKey ("escape")) { window = 0; } }
Стоит не забыть добавить все необходимые переменные?
Var toggle = false; //тумблер var sider: int = 0; // горизонтальный ползунок var sider1: int = 0; // вертикальный ползунок
Разрешение экрана
Разрешение экрана меняется при помощи команды:
Screen.SetResolution (A, B, C);
Где A - ширина.
B - высота.
С - полноэкранный или оконный.
Пример:
Screen.SetResolution (1280, 1024, true);
Громкость звука
Для изменения громкости применяется команда:
Audio.volume = переменная (желательно float);
Сама переменная изменяется при помощи ползунка.
Сейчас уже даже школьнику известно, что Unity - потрясающий игровой движок, способный удовлетворить любые прихоти как разработчика, так и геймера. Единственной Ахиллесовой пятой Unity был старый GUI (графический пользовательский интерфейс).
Старая система GUI была очень мудреной системой, которая требовала чтобы весь код GUI был написан с помощью специальной функции OnGUI . Это был программеро-ориентированный, подход в отличие от визуального ориентированной природы самой Unity . Сам код работал медленно и неэффективно, а на то, чтобы сваять интерфейс, приходилось тратить много времени и сил. Конечно, были инструменты сторонних разработчиков, такие как NGUI, которые пытались решить эту проблему, но за то, чтобы начать пользоваться ими нужно было расстаться с n-й суммой денег.
К счастью, разработчики в Unity Technologies прислушались к народным мольбам и, после двух лет разработки, они предоставили в Unity 4.6 совершенно новый GUI, который мы и рассмотрим в этом уроке. На протяжении трех занятий мы будем создавать новый графический интерфейс к игре, созданной в наших предыдущих сериях уроков Ваяем игру в стиле Jetpack Joyride в Unity 2D .
Замечание: Если вы и в глаза не видели уроки по рассматриваемой нами в качестве примера игре, то ничего страшного в этом нет, тем не менее мы настоятельно рекомендуем вам изучить их. В этом случае вы будете иметь на руках функциональную игру, а не просто проект из сцены с простым меню. Вы также узнаете как можно перейти от старой системы GUI к новой, а это поистине бесценный опыт.
По мере прохождения этого гайда мы добавим в игру классическую сцену главного меню.
Однако, просто добавление нескольких кнопок будет не достаточным чтобы освоить новую систему с графическим интерфейсом. Чтобы добавить изюминку к игре и привлечь ваших пользователей вы будете
- Анимировать кнопки
- Создать выезжающее окно настроек.
- Использовать более новые элементы управления GUI, такие как Text, Slider, Panel, Mask и т.д.
Создание сцены с меню в Unity
Скачайте по указанной выше ссылке проект Rocket Mouse и разархивируйте его. Откройте проект в Unity с помощью меню File\Open Project… . Кроме того, откройте папку Assets\Scenes в папке проекта и дважды щелкните на сцену RocketMouse.unity чтобы открыть ее в Unity .
После того как проект загружен, вы увидите до слез знакомый сюжет, или наоборот - совсем не знакомый для вас - в зависимости от того, изучали ли вы уроки по созданию этой игры. В любом случае, сохраняйте спокойствие и продолжайте читать).
Создадим новую пустую сцену. Для этого выберите в меню File\New Scene . Лучше сохранить сцену прямо сразу, поэтому откройте диалоговое окно Save Scene (Сохранить сцену), выбрав в меню File\Save Scene . Затем введите MenuScene в качестве имени сцены и сохранить его в папке Scenes рядом со сценой RocketMouse.
Посмотрите на Браузер проекта (Project browser) чтобы убедиться, что в одной папке лежат две сцены.
Примечание: Если у вас возникнут вопросы при открытии проекта, создании, сохранении сцены, или добавления ассетов, то перейдите к уроку Rocket Mouse . Там вы найдете подробные инструкции, часто в виде анимированных GIF изображений, которые не включены в эту статью.
Импорт изображений и шрифтов
Распакуйте архив с ассетами. В нем вы найдете две папки: Menu и Fonts . Выберите обе папки, а затем перетащите их в папку Assets в Браузере проекта. Подождите пока Unity обрабатывает файлы, после чего вы должны увидеть наши папки в Браузере проекта как показано на рисунке ниже:
Поздравляю, Вы только что завершили подготовительныеработы и теперь можете создать свой первый элемент пользовательского интерфейса внутри новой системы Unity GUI.
Добавление первого элемента пользовательского интерфейса
Первый элемент, которым мы займемся - это фоновое изображение для сцены с меню. Выберите в верхнем меню Unity GameObejct/UI/Image чтобы добавить на сцену объект с именем Image . Вы должны увидеть его во вкладке Hierarchy (Иерархия), как дитя Canvas . Все элементы должны быть размещены на холсте. Если у вас его еще нет, Unity об этом позаботится. Чтобы гарантированно увидеть изображение на вкладке Scene (Сцена), выберите Image в Иерархии и задайте его Pos X и Pos Y равными нулю.
Примечание: Я уже слышу вопросы типа: “Что такое Pos X?”, “Что такое Rect Transform и где старый добрый компонент Transform?” В этом мануале вы найдете всю интересующую вас информацию. Чтобы вам легче было во всем разобраться, мы будем рассматривать каждый аспект в контексте других объектов, участвующих в сцене. Таким образом, вы сможете увидеть, как они ведут себя при разных настройках. Такие свойства как Width , Height или Pos X не требует каких-либо объяснений.
Вы установили правильные положение и размер нашего фона. Теперь посмотрите внимательно на вкладку Иерархия и вы увидите три новых объекта в сцене. Вот они:
- Image
- Canvas
- EventSystem
Image - неинтерактивный элемент управления, который отображает текстуру спрайта и позволяет настроить множество опций. Например, вы можете закрасить изображение или поместить на него материалы. Вы даже можете контролировать полноту его отображения. Например, применить к нему анимацию появления по часовой стрелке. Canvas - корневой объект для всех элементов вашего пользовательского интерфейса. Как уже было сказано раньше, он создается автоматически, когда вы добавляете первый элемент интерфейса. Холст обладает множеством свойств, определяющих отображение интерфейса, и вы будете исследовать некоторые из них во время этого урока. EventSystem отвечает за обработку ввода, рейкастинг и события в сцене Unity. Это нужно для работы интерфейса, поэтому этот элемент добавляется автоматически.
Настройки фонового изображения
Вернемся к Image. Первое, что мы сделаем - переименуем Image в img_background . Теперь откроем Menu в поисковой строке проекта и найдем изображение menu_background . Перетащим его в поле Source Image компонента Image в инспекторе img_background .
Теперь у вас есть фоновое изображение вместо белого изображения по умолчанию. Тем не менее, оно выглядит, мягко выражаясь, не айс, потому что изображение слишком мало, да и соотношение сторон является неправильным. Чтобы исправить, найти кнопку Set Native Size (Установить исходный размер) в Инспекторе и нажмите на нее, чтобы установить размер 1024 х 577.
Тем не менее, есть еще несколько проблем:
- Фактический размер изображения 1136 x 640 , этого достаточно чтобы закрыть весь экран 4-дюймового iPhone, но не более.
- Уменьшив окно в режиме Scene, вы увидите, что холст (белый прямоугольник) закрывает только часть изображения. Если вы переключитесь в режим Game, вы увидите только часть фонового изображения, как будто камера находится слишком близко к объекту, чтобы отобразить его полностью.
Примечание: оригинальная игра была разработана для айфонов с 3,5-х и 4-дюймовыми дисплеями. Вот почему графика игры поддерживает 1136 x 640 и 960 х 640 разрешения. Но вскоре вы увидите, как UI может адаптироваться к различным разрешениям экрана.
Первая проблема состоит в результатах импортирования настроек по умолчанию, и вы будете их править в следующем разделе. Вторую проблему мы решим с помощью Canvas Scaler .
Настройка импорта изображений
Для вашего проекта вам понадобятся изображения немного большего размера, при этом нужно будет сделать так, чтобы Unity их не уменьшала. Откройте папку Menu папка в Браузере проетка и выберите изображение menu_background . В Инспекторе, выберите Default tab , установите Max Size (Максимальный размер) равным 2048 и нажмите кнопку Apply (Применить).
Теперь выберите img_background в Иерархии, а затем нажмите кнопку Set Native Size снова. Ширина и высота должны измениться на правильные значения 1136 и 640, соответственно.
Видите? Это было действительно легко исправить. Идем дальше!
Использование Canvas Scaler
Настало время настроить способ отображения. Прежде всего следует сказать, что то, как отображается игра на данном этапе - вовсе не баг. С точки зрения Unity, вид в режиме Game настроен на параметры 550×310, поэтому вы видите только часть изображения, которая помещается в окно игры.
Если вы запустите игру на устройстве или просто растянете ваш вкладку Game до размеров фонового изображения, ты вы увидите его полностью.
Хотя настройки Unity применимы в большинстве случаев, иногда необходимо изменить дефолтное поведение. Например, когда у вас маленький монитор, который не соответствует разрешению целевого гаджета. Кроме того, многие игры поддерживают только одно разрешение.
Дизайнеры используют это разрешение, чтобы диктовать размеры, расположение объектов и другие данные. Поэтому при разработке игре нужно использовать заданные дизайнерами характеристики без дополнительных вычислений, чтобы игра отображалась без багов.
К счастью, специальный компонент приходит на помощь. Этот компонент называется Canvas Scaler . В предыдущих версиях Unity он назывался, Reference Resolution и его нужно было добавлять к холсту вручную. С появлением Unity 4.6 этот компонент теперь прикреплен к каждому Canvas. Выберите Canvas в Иерархии и тогда в Инспекторе вы должны увидеть компонент Canvas Scalar .
Canvas Scalar имеет три режима работы:
Constant Pixel Size : все элементы пользовательского интерфейса сохраняют размер пикселя независимо от размера экрана. Это дефолтный режим.
Scale With Screen Size : Размеры и положение элементов пользовательского интерфейса определяются заданным разрешением. Если текущее разрешение выше, холст сохранит заданное разрешение, увеличив элементы в соответствии с новыми настройками.
Constant Physical Size : Позиции элементов пользовательских интерфейсов указаны в физических единицах, таких как миллиметры или точки. Для этого нужно знать точное число точек на дюйм экрана.
После добавления компонента, установите его Resolution (Разрешение) равным 1136 х 640. Кроме того, сдвиньте все Match Width или Match Height до упора вправо, или просто введите 1 в поле ввода.
После того, как эти изменения вступят в силу, вы увидите фоновое изображение полностью, даже в маленьком окне режима Game.
Измените разрешение вкладки Game чтобы увидеть, как ваша игра будет выглядеть в другом разрешении, например, на 3-5 дюймовом iPhone. Чудесно. Как видите, по-прежнему выглядит хорошо!
Теперь переключитесь во вкладку Scene (Сцена) и вы увидите, что размер холста не меняется при изменении размера вкладки Сцена: боковые края экрана аккуратно обрезаются а центральная часть полностью видна. Это результат установки Настройте ширину и высоту в 1 (Настройте высоту)... Это отлично соответствует разрешению ваших целевых гаджетов.
Постойте, но что насчет кнопок? Что происходит, когда они находятся очень близко к левому или правому краю экрана? Они не должны обрезаться или быть скрытыми. К счастью, Unity имеет функцию, которая поможет вам обойти эту ошибку новичка. Совсем скоро вы о ней узнаете.
Добавление изображения с заголовком
Прежде чем перейти к кнопок и других UI управления, вы будете добавлять еще один образ - образ заголовка. Для выполнения этого упражнения, вы будете использовать не полноэкранное изображение, чтобы продемонстрировать некоторые другие важные понятия новой системы GUI.
Откройте окно Scene и выберите GameObject\UI\Image в меню. Это позволит добавить еще одно белое изображение на сцену. Вот как это вышло у меня:
Примечание: Если изображение окажется слишком далеко, просто установите значение 0 для свойств Pos X и Pos Y.
Теперь попробуйте превратить этот белый прямоугольник в реальное изображение выполнив следующие действия:
- Выберите Image в Иерархии и переменуйте его в img_header .
- Откройте папку Menu в Браузере проекта и найдите картинку header_label .
- Перетащите изображения в поле Source Image инспектора.
- Нажмите на Set Native Size в Инспекторе.
Как видите, это было достаточно просто. Теперь нужно работать с позиционированием с помощью компонента Rect Transform .
Rect Transform, Anchors, Pivot и Вы)
Если вы работали с Unity раньше, то вы, наверняка, знакомы с компонентом Transform . Если нет, то ничего страшного. Это просто инструмент, с помощью которого можно расположить, вращать и масштабировать объекты на сцене. Вот как это выглядит:
Вы увидите Transform-компонент, когда выберите любой тип GameObject в Иерархии.
Тем не менее, если вы выберите какой-либо элемент пользовательского интерфейса, например, img_header , вы увидите другой компонент с именем Rect Transform .
Как видите, Transform и Rect Transform немного отличаются, но Rect Transform может изменить внешний вид вашей игры в зависимости от настроек якоря. Например, это может выглядеть следующим образом:
Примечание: Вместо Pos X , Pos Y , Width и Height вы работаете с Left , Top , Right и Bottom .
Вы задаетесь вопросом о настройке якорей, которые меняет внешний вид Rect Transform так кардинально? Вы найдете ответы, которые вы ищете в следующем разделе.
Якоря
Задание якорей - простой, элегантный и мощный способ контролировать положение и размер ваших элементов пользовательского интерфейса относительно их родителей. Это особенно удобно, когда вы изменяете размер родительских элементов.
Настраивая якоря, вы определяете несколько положений в родителе, как правило, по одному в каждом углу элемента интерфейса под названием Rect. При изменении размера родителя наш элемент будет стараться сохранить uniform distance to the anchor points, заставляя его перемещаться или изменять размер вслед за родителем.
Чтобы посмотреть на разные Anchor Presets , просто выберите img_header в иерархии и кликните на прямоугольник прямо над полем Anchors в компоненте Rect Transform.
После этого вы сможете увидеть разные Anchor Presets - то есть, наиболее распространенные установки для якорей, но ваш выбор ими не ограничен, и при необходимости вы можете менять их произвольным образом. Вы также можете выбрать разное горизонтальное и вертикальное поведение для элемента интерфейса.
Если вы посмотрите на следующее изображение, в котором отключен фон, вы увидите, что размер холста изменяется немного лучше.
Как вы видите, настройки якорей влияют на то, как элементы вашего интерфейса адаптируются к разному разрешению экрана.
Вы наверняка хотите покопаться и в других настройках, чтобы посмотреть, как они работают. Но сначала прочитайте хотя бы следующую главу. Она поможет вам лучше понять, что такое якоря, и в результате ваши эксперименты будут более успешными.
Манипулятор якорей
На данном этапе наши якоря используют 4 треугольника. Вот как это выглядит при настройке top-center :
Настраиваемые якоря
Вы можете вручную передвинуть якоря в произвольное положение, т.к. Anchor Presets можно менять любым удобным вам образом.
Примечание: Бывает так, что другой элемент интерфейса перекрывает иконку якоря, и вы не можете его выбрать. В таком случае просто вызовите иконку якоря, щелкнув на Anchor Preset (например, левая часть экрана). Иконка якоря появится в указанной части экрана, после чего вы сможете перемещать ее как угодно.
Примечание: Как видите, изменение размера холста заставляет изображение передвигаться вправо. Но это перемещение незначительно по отношению к правому краю холста. Это объясняется тем, что якоря установлены на 25% ширины холста.
Разделение якорей
Вы можете разделить якоря, чтобы элемент интерфейса растягивался горизонтально, вертикально или в обоих направлениях.
Примечание: Захватив один из краев холста и перемещая его по экрану, вы не добьетесь изменения его размера. Найдите слово Preview возле курсора, используйте его, что уменьшить или увеличить холст, и посмотрите, как элементы вашего интерфейса будут адаптироваться к разным разрешениям экрана.
Rect Transform зависит от текущих настроек якоря
В зависимости от настроек якоря, Rect Transform контролирует размер и положение элементов интерфейса разными способами.
Ели вы поставите якорь на какую-то точку, без растягивания, вы увидите такие свойства, как Pos X , Pos Y , Width иHeight .
Но если вы настроите якорь так, что это приведет к растягиванию элемента, вместо Pos X и Width у вас будут свойства Left иRight (при горизонтальном растяжении), а вместо Pos Y and Height - Top и Bottom (при горизонтальном растяжении).
На этом скриншоте якорь img_header стоит на middle-stretch . Это значит, что изображение остается в центре холста вертикально и растягивается горизонтально.
Поскольку позиция по оси X и ширина зависят от размера родителя, установите отступы от левого и правого краев родителей.
Точка опоры
Осталось последнее не рассмотренное свойство компонента Rect Transform - Pivot (Точка опоры). Точка опоры является точкой, вокруг которой производятся все преобразования. Другими словами, определяя положение элемента, вы определяете его точку опоры. Если вы станете вращать элемент пользовательского интерфейса, то он будет вращаться вокруг этой точки.
Точка опоры обозначается нормализованными координатами. То есть, ее значение изменяется с 0 на 1 как для ширины, так и для высоты, где (0,0) - нижний левый угол, а (1,1) - правый верхний угол.
Примечание: Вы также можете установить точку опоры за пределами элемента интерфейса. В этом случае она будет за пределами значений (0,0) - (1,1). Это может вам пригодиться. Например, вам нужно, чтобы объект вращался вокруг определенной точки в сцене. Чтобы изменить точку опоры, вы должны убедиться, что кнопка Pivot/Center стоит на Pivot таким образом:
Вы можете изменить Точку опоры в компоненте Rect Transform в Инспекторе или вы можете использовать Rect Tool .
Взгляните на следующие два изображения, на которых показаны элементы пользовательского интерфейса с одинаковыми значениями Pos X и Pos Y, но при этом у них различное положение на сцене.
На первом изображении Точка опоры установлена в дефолтное значение (0.5, 0.5), которое является центром элемента пользовательского интерфейса. Установите позицию элемента в положение (0, 0), а якоря - top-left .
Примечание: Важно понимать, что позиция элемента пользовательского интерфейса задается относительно якоря. Вот почему положение (0,0) означает расстояние от якоря, который устанавливаются в левом верхнем углу холста.
Теперь взглянем на второе изображение. Как видите, его положение не изменилось и составляет (0,0), но так как Точка опоры установлена в левом нижнем углу (0,0) видно, что нижний угол изображения, а не центр, теперь находится в левом верхнем углу холста.
Сложно объяснить, как точка опоры влияет на вращение и размер с помощью статичного изображения, поэтому вот несколько анимаций:
Пожалуйста, обратите внимание как изображение поворачивается вокруг точки поворота ввиде синего круга, показывающего что элемент можно свободно перемещать.
Примечание: Удерживайте кнопку ALT при масштабировании вокруг точки опоры.
Как видите, Точка опоры также влияет на изменение вашего элемента пользовательского интерфейса.
Примечание: Еще одна важная вещь, которую вам следует уяснить - это то, что изменение размера элемента интерфейса, не влияет на его масштабирование . Но вы можете изменить его параметры - Width и Height или Top, Right, Left, Bottom.Эти свойства немного отличаются. Например, размер не может быть отрицательным, но масштаб может; с помощью отрицательных значений вы можете перевернуть элемент. В большинстве случаев вам достаточно только изменить размер ваших элементов пользовательского интерфейса.
Размещение изображения с заголовом
Уф! Теперь вы знаете все, что нужно, о Rect Transform, Anchors и Pivot. Поверьте, когда-нибудь вы скажете мне спасибо за то, что корпели над этим упражнением, ведь от того, насколько хорошо вы усвоили эти понятия, зависит интерфейс вашей игры. Теперь мы можем сконцентрироваться на создании сцены меню. Остальные разделы пролетят в мгновение ока. Все эти манипуляции окончательно измотали бедный маленький img_header . Пора поместить его на законное место и оставить в покое.
Прежде чем продолжить, повторно включите img_background (если оно было отключено) чтобы увидеть границы холста. Затем выберите img_header в Иерархии и установить его свойства в Инспекторе следующим образом:
- Нажмите на Set Native Size чтобы сбросить размер, так как вы, наверняка, изменили его играя с Точкой опоры.
- Установите Якоря в top-center .
- Установите Pos X в 0 и Pos Y в -100 .
Вы должны увидеть на Вашей вкладке Сцена что-то вроде этого:
Отлично. Теперь оставьте заголовок в покое).
Добавление кнопки Старт
Теперь, когда ваше приложение имеет приятный фон с заголовком, пришло время добавить несколько кнопок. Выберите GameObject\UI\Button в меню. Это позволит добавить объект Button в сцену, при этом вы должны увидеть его в Иерархии. Если развернуть его в Иерархии, вы увидите, что кнопка содержит текстовую метку - об этом вы узнаете чуть позже.
Взгляните на кнопку в инспекторе, и вы увидите знакомый компонент Image (Script). Помните, мы использовали его для добавления фона и метки хедера? Кроме того, существует компонент кнопки (Script). Другими словами, кнопка только изображение с прикрепленным скриптом, который содержит текст кнопки.
Примечание: Текст надписи не является обязательным, так что если у вас есть изображение кнопки с нарисованным прямо на ней текстом, вы можете удалить текстовый элемент. Вы сделаете это несколько раз в течение этого урока.
Позиционирование кнопки
Теперь займемся позиционированием и изменением размера кнопки. Выполните следующие действия:
- Выберите Button в Иерархии и переменуйте ее в btn_start .
- Установите Якоря Anchors в bottom-stretch , так как нам нужно чтобы кнопка растягивалась по горизонтали в случае изменения размера экрана.
- Установите значения Left и Right равными 400 .
- Установите Height равным 80 .
- Установите Pos Y равным 300 .
Теперь выберите вложеннsq текстовый элемент и введите текст Start Game (Начать игру). Измените Font Size (размер шрифта) на 32 чтобы сделать текст кнопки больше.
Это то, что вы должны увидеть в окне Scene (Сцена):
Теперь у нас есть кнопка, и все, что нам осталось - немного поколдовать над ее внешним видом. Для этого мы установим для нее фоновое изображение и используем красивый шрифт.
9-фрагментное масштабирование
Изображение для Button устанавливается так же, как изображение для Image. В конце концов, это практически один и тот же компонент. Но в отличие от изображений, которые редко масштабируются, кнопки часто бывают самых разных размеров. Конечно, можно создать фоновое изображение для каждого размера кнопки, но зачем же тратить драгоценное место? Вместо этого мы воспользуемся техникой, называемой 9-фрагментным масштабированием , которая позволяет обойтись одним маленьким изображением, которое масштабируется в соответствии с необходимым размером. Нет, это не магия. Вам не придется бросать свои изображения в волшебный фонтан прежде, чем вы сможете их использовать:] Этот метод делает это возможным, потому, что изображение не масштабируется равномерно. Есть девять зон, каждая из которых масштабируется по-разному.
Это гарантирует, что изображение будет выглядеть хорошо в любом масштабе.
Подготовка изображения для кнопок
Прежде чем вы сможете использовать нарезанное изображение, необходимо установить эти 9 зон. Чтобы сделать это, откройте папку Menu Браузере проекта и выберите btn_9slice_normal image . В Инспектора Import Settings (Настройки импорта), устанавливается Format в Truecolor , а затем нажмите на кнопку Sprite Editor (Редактор спрайта), чтобы открыть вкладку Sprite Editor .
Примечание: Установка формата на Truecolor не обязательна и не относится к масштабированию изображений. Но в моей практике были случаи нежелательного сжатия изображений, поэтому я пришел к выводу, что лучше этим не пренебрегать. Если вы используете собственные изображения и они выглядят нормально в сжатом формате, вам можно с этим не возиться.
В Sprite Editor установите значение Border равнмы L:14 , R:14 , B:16 , T:16 , а затем нажмите на Apply !
Повторите действие для изображений btn_9slice_highlighted и btn_9slice_pressed , которые вы будете использовать для разных состояний кнопок.
Настройка изображений кнопок
Подготовив все изображения, вы должны будете всего лишь перетащить их в соответствующие поля Инспектора. Выберите btn_start в иерархии и выполните следующие действия:
- Замените Image Type на Sliced в компоненте Image.
- Замените свойство Transition в компоненте Button на SpriteSwap .
- Перетащите btn_9slice_normal в Source Image в компоненте Image.
- Перетащите btn_9slice_highlighted в Highlighted Sprite в компоненте Button.
- Перетащите btn_9slice_pressed в Pressed Sprite в компоненте Button.
Примечание: Если вы наткнетесь на ошибку: Отсутствуют границы изображения , это значит, что вы забыли настроить Границы в редакторе спрайта в настройках импорта, как описано выше.
Прежде чем запустить сцену и полюбоваться своими кнопками, придется потратить еще несколько секунд, чтобы изменить шрифт встроенной текстовой метки. После этого ваша кнопка будет выглядеть просто отпадно.
Задание пользовательских шрифтов для кнопки
Использовать пользовательские шрифты легко. Помните папку Fonts , которыу вы добавили к проекту? Теперь пришло время воспользоваться ей и использовать один из этих шрифтов. Выберите метку Text , встроенную в in the btn_start,в иерархии. Затем откройте папку Fonts в Браузере проектов и перетащите шрифт TitanOne-Regular в поле Font . Также установите Color в white (белый).
Теперь запустите сцену и наслаждайтесь новой мега-кнопкой.
Удаление прозрачности кнопки
Вы заметили, что мы можем видеть фон через кнопку? В зависимости от ваших целей это может быть хорошо или плохо. Для главного меню в этой игре будет лучше, если мы избавимся от прозрачности.
Примечание: Мне кажется, прозрачность добавляется по умолчанию, потому что во многих случаях интерфейс игры отображается вверху экрана, загораживая видимость игроку.
Нам потребуется всего несколько секунд чтобы отменить прозрачность. Выберите btn_start в Иерархии и дважды щелкните на свойство Color внутри компонента Image . В открывшемся диалоговом наборе выбора цвета установите A (альфа) равной 255 и закройте палитру цветов.
Теперь он выглядит намного лучше!
Добавление кнопки Settings (Настройка)
Есть только несколько вещей, которые осталось сделать прежде чем перейти к следующей части и одна из них добавить кнопку Settings (Настройка). Вы, наверное, уже можете сделать это сами, зная размер и положение кнопки.
Примечание: Самый простой способ - это дублировать кнопки, а потом подправить нужные свойства, но попробуйте создать кнопку с нуля, ведь Вы здесь, чтобы учиться.
Итак, вот свойства кнопки Settings:
- Name: btn_settings
- Rect Transform: Left и Right равны 450 , Height - 70 , а Pos Y - 180
- Text: Settings
Если у вас совсем ничего не получается, выполните следующие действия:
Это то, что вы должны увидеть во вкладке Scene (Сцена) после добавления кнопки Settings (Настройки):
Теперь нам осталось только нажать кнопку Start Game и запустить вторую сцену (это сама игра).
Добавляем сцены в режим Build
Прежде, чем вы сможете запустить свои сцены, вам нужно будет добавить их в список Scenes in Build в настройках проекта, чтобы они были включены в конечную версию. Для этого выберите File\Build Settings… чтобы открыть диалоговое окно Build Settings . Затем откройте папку Scenes в Браузере проекта и перетащите сперва MenuScene , а затем сцену RocketMouse в список Scenes in Build .
Примечание: Важен порядок. Соблюдайте его!
Потом закройте окно Build Settings.
Создание UIManager
Когда вы добавляете обработчик событий для кнопки, необходимо указать метод, который будет вызываться при нажатии на кнопку. Это означает, что вы должны прикрепить объект к скрипту так как вы не можете использовать статические методы. Создайте пустой игровой объект и прикрепите скрипт к нему. Этот скрипт будет содержать все методы вызываемыми UI элементами в MenuScene. Выберите GameObject\Create Empty в меню. Затем выберите GameObject в Иерархии и переименуйте в UIManager . После этого нажмите на Add Component в Инспекторе и выберите New Script . Назовите его UIManagerScript . Убедитесь, что установлен язык CSharp и нажмите на Create and Add (Создаать и добавить). Это то, что вы должны увидеть в Иерархии и Инспекторе:
Сделайте двойной клик на UIManagerScript в инспекторе, чтобы открыть скрипт в MonoDevelop. После того, как сценарий загрузится, удалите методы Start и Update и добавьте метод StartGame следующим образом:
Public void StartGame() { Application.LoadLevel("RocketMouse"); }
Сохраните файл и убедитесь, что он не содержит ошибок, создав его в MonoDevelop. Для этого выберите Build\Build All в меню MonoDevelop.
Вызов метода StartGame , когда игрок нажимает на кнопку
Вернитесь к Unity и выполните следующие действия:
- Выберите btn_start в Иерархии и и прокрутите мышью по вкладке Инспекторе до списка On Click (Button) .
- Нажмите кнопку + чтобы добавить новый элемент.
- Затем перетащите UIManager из Иерархии на добавленный элемент в списке.
- Нажмите на выпадающий список выберите функцию. Прямо сейчас в нем установлено No Function .
- В открывшемся меню выберите UIManagerScript\StartGame () .
Запустите сцену и нажмите на кнопку Start Game чтобы запустить сцену с игрой.
Что дальше?
Итак, Вы создали пользовательский интерфейс, добавили изображения кнопок и даже написал код, который запускает игру, когда вы нажимаете на кнопку! Так устроен интерфейс многих игр. Вы также узнали, что такое a lot Rect Transform, Anchors, Pivot и другие полезные штуки. Теперь, когда вы знаете, как они работают, вы сможете значительно ускорить работу над своим проектов, используя эти элементы. Вы можете загрузить готовый проект . В следующей части нашего урока вы узнаете как оживить элементы пользовательского интерфейса, создавать диалоги, использовать элементы управления такие как слайдер и переключатели, а в конце урока вы будете иметь сцену с рабочим меню! Отдохните и принимайтесь за
