что такое gui в unity
GUI Basics (Legacy)
Making Controls with UnityGUI
GUI controls themselves are very simple in structure. This structure is evident in the following example.
The Loader Menu created by the example code
Let’s take a look at the details of the example code:
The first GUI line, GUI.Box (Rect (10,10,100,90), “Loader Menu”); displays a Box Control with the header text “Loader Menu”. It follows the typical GUI Control declaration scheme which we’ll explore momentarily.
The next GUI line is a Button Control declaration. Notice that it is slightly different from the Box Control declaration. Specifically, the entire Button declaration is placed inside an if statement. When the game is running and the Button is clicked, this if statement returns true and any code inside the if block is executed.
Since the OnGUI() code gets called every frame, you don’t need to explicitly create or destroy GUI controls. The line that declares the Control is the same one that creates it. If you need to display Controls at specific times, you can use any kind of scripting logic to do so.
Here, GUI.Button() only gets called every other second, so the button will appear and disappear. Naturally, the user can only click it when the button is visible.
As you can see, you can use any desired logic to control when GUI Controls are displayed and functional. Now we will explore the details of each Control’s declaration.
Anatomy of a Control
There are three key pieces of information required when declaring a GUI Control:
Observe that this structure is a function with two arguments. We’ll explore the details of this structure now.
Position
The coordinate system is top-left based. Rect(10, 20, 300, 100) defines a Rectangle that starts at coordinates: 10,20 and ends at coordinates 310,120. It is worth repeating that the second pair of values in Rect() are total width and height, not the coordinates where the controls end. This is why the example mentioned above ends at 310,120 and not 300,100.
You can use the Screen.width and Screen.height properties to get the total dimensions of the screen space available in the player. The following example may help clarify how this is done:
The Boxes positioned by the above example
Content
The second argument for a GUI Control is the actual content to be displayed with the Control. Most often you will want to display some text or an image on your Control. To display text, pass a string as the Content argument like this:
To display an image, declare a Texture2D public variable, and pass the variable name as the content argument like this:
Here is an example closer to a real-world scenario:
There is a third option which allows you to display images and text together in a GUI Control. You can provide a GUIContent object as the Content argument, and define the string and image to be displayed within the GUIContent.
You can also define a Tooltip in the GUIContent, and display it elsewhere in the GUI when the mouse hovers over it.
If you’re daring you can also use GUIContent to display a string, an icon, and a tooltip!
The script reference page for the GUIContent constructor has some examples of its use.
Immediate Mode GUI (IMGUI)
The “Immediate Mode” GUI system (also known as IMGUI) is an entirely separate feature to Unity’s main GameObject-based UI System. IMGUI is a code-driven GUI system, and is mainly intended as a tool for programmers. It is driven by calls to the OnGUI function on any script which implements it. For example, this code:
Would result in a button displayed like so:
The result of the above code example
The Immediate Mode GUI system is commonly used for:
The IMGUI system is not generally intended to be used for normal in-game user interfaces that players might use and interact with. For that you should use Unity’s main GameObject-based UI system, which offers a GameObject-based approach for editing and positioning UI elements, and has far better tools to work with the visual design and layout of the UI.
“Immediate Mode” refers to the way the IMGUI is created and drawn. To create IMGUI elements, you must write code that goes into a special function named OnGUI. The code to display the interface is executed every frame, and drawn to the screen. There are no persistent gameobjects other than the object to which your OnGUI code is attached, or other types of objects in the hierarchy related to the visual elements that are drawn.
Устаревшая система GUI позволяет создавать широкий спектр пользовательских интерфейсов из кода. Вместо того, чтобы создавать объект GUI, вручную его позиционировать и писать скрипт, который управляет его функциями, вы можете сделать все это несколькими строками кода. Код создаёт элементы управления GUI ( GUI controls ), которые инстанциируются, позиционируются и управляются вызовом одной функции.
Этот раздел показывает как использовать GUI в вашей игре и в расширениях для редактора Unity.
IMGUI Basics
This section will explain the bare necessities for scripting Controls with Unity’s Immediate Mode GUI system (IMGUI).
Making Controls with IMGUI
IMGUI controls themselves are very simple in structure. This structure is evident in the following example.
This example is a complete, functional level loader. If you copy/paste this script and attach it a GameObject, you’ll see the following menu appear in when you enter Play Mode:
Меню загрузчика, созданное по коду из примера
Давайте посмотрим на детали кода примера:
The first GUI line, GUI.Box (Rect (10,10,100,90), “Loader Menu”); displays a Box Control with the header text “Loader Menu”. It follows the typical GUI Control declaration scheme which we’ll explore momentarily.
The next GUI line is a Button Control declaration. Notice that it is slightly different from the Box Control declaration. Specifically, the entire Button declaration is placed inside an if statement. When the game is running and the Button is clicked, this if statement returns true and any code inside the if block is executed.
Since the OnGUI() code gets called every frame, you don’t need to explicitly create or destroy GUI controls. The line that declares the Control is the same one that creates it. If you need to display Controls at specific times, you can use any kind of scripting logic to do so.
Here, GUI.Button() only gets called every other second, so the button will appear and disappear. Naturally, the user can only click it when the button is visible.
Как вы видите, вы можете использовать любую желаемую логику для управления отображением и функционалом GUI контролов. Теперь детально рассмотрим объявление каждого их контролов.
Анатомия контрола
Для определения GUI контрола требуется три ключевых части информации:
Type (Position, Content)
Type is the Control Type, and is declared by calling a function in Unity’s GUI class or the GUILayout class, which is discussed at length in the Layout Modes section of the Guide. For example, GUI.Label() will create a non-interactive label. All the different control types are explained later, in the Controls section of the Guide.
Позиция
The Position is the first argument in any GUI Control function. The argument itself is provided with a Rect() function. Rect() defines four properties: left-most position, top-most position, total width, total height. All of these values are provided in integers, which correspond to pixel values. All UnityGUI controls work in Screen Space, which is the resolution of the published player in pixels.
The coordinate system is top-left based. Rect(10, 20, 300, 100) defines a Rectangle that starts at coordinates: 10,20 and ends at coordinates 310,120. It is worth repeating that the second pair of values in Rect() are total width and height, not the coordinates where the controls end. This is why the example mentioned above ends at 310,120 and not 300,100.
You can use the Screen.width and Screen.height properties to get the total dimensions of the screen space available in the player. The following example may help clarify how this is done:
Box’ы, размещённые в примере выше
Содержимое
To display an image, declare a Texture2D public variable, and pass the variable name as the content argument like this:
Вот приближённый к реальной жизни пример:
There is a third option which allows you to display images and text together in a GUI Control. You can provide a GUIContent object as the Content argument, and define the string and image to be displayed within the GUIContent.
You can also define a Tooltip in the GUIContent, and display it elsewhere in the GUI when the mouse hovers over it.
Если у вас достаточно смелости, то вы можете использовать GUIContent для отображения строки, иконки и всплывающей подсказки!
В справке по конструктору GUIContent есть несколько примеров его использования.
Расширение UnityGUI
Существует множество способов эффективного использования и расширения UnityGUI для достижения ваших целей. Контролы можно чередовать и создавать и у вас есть множество способов влияния на то, как будет обрабатываться ввод от пользователя.
Составные контролы
В вашем GUI могут возникнуть ситуации, когда два типа контролов всегда показываются вместе друг с другом. Например, вы, возможно, создаёте экран создания персонажа, с разными горизонтальными слайдерами. И у всех этих слайдеров должен быть контрол Label для идентификации, чтобы игрок понимал за какую характеристику отвечает тот или иной слайдер. В таком случае, вы можете совмещать каждый вызов GUI.Label() с вызовом GUI.HorizontalSlider(), либо вы можете создать составной контрол (Compound Control), который включат и Slider и Label.
The above Compound Control always creates this pair of Controls
Статичные составные контролы
С помощью статичных (Static) функций, вы можете создать целую коллекцию самодостаточных собственных составных контролов. Таким образом, вам не придётся объявлять вашу функцию в каждом скрипте, в котором вы желаете её использовать.
После сохранения представленного выше примера в файле со скриптом под именем CompoundControls, вы сможете вызывать функцию LabelSlider() из любого другого скрипта с помощью вызова метода CompoundControls.LabelSlider() с передачей нужных вам аргументов.
Продуманные составные контролы
Вы можете быть весьма креативны при разработке составных контролов. Их можно размещать и группировать любым подходящим вам способом. В следующем примере создается RGB слайдер, подходящий для повторного использования.
The RGB Slider created by the example above
Теперь давайте построим составные контролы на основе друг друга, чтобы продемонстрировать как составные контролы можно использовать внутри других составных контролов. Чтобы это сделать, мы создадим новый RGB слайдер, аналогичный тому, что бы создан выше, но в этот раз мы будем использовать LabelSlider для этой цели. Таким образом, мы всегда будем видеть Label, поясняющий нам за какой цвет отвечает каждый из слайдеров.
The Compound RGB Label Slider created by the above code
Учебник по новому GUI в Unity. Часть 1.
К счастью, разработчики в Unity Technologies прислушались к народным мольбам и, после двух лет разработки, они предоставили в Unity 4.6 совершенно новый GUI, который мы и рассмотрим в этом уроке. На протяжении трех занятий мы будем создавать новый графический интерфейс к игре, созданной в наших предыдущих сериях уроков Ваяем игру в стиле Jetpack Joyride в Unity 2D.
Замечание: Если вы и в глаза не видели уроки по рассматриваемой нами в качестве примера игре, то ничего страшного в этом нет, тем не менее мы настоятельно рекомендуем вам изучить их. В этом случае вы будете иметь на руках функциональную игру, а не просто проект из сцены с простым меню. Вы также узнаете как можно перейти от старой системы GUI к новой, а это поистине бесценный опыт.
По мере прохождения этого гайда мы добавим в игру классическую сцену главного меню.
Однако, просто добавление нескольких кнопок будет не достаточным чтобы освоить новую систему с графическим интерфейсом. Чтобы добавить изюминку к игре и привлечь ваших пользователей вы будете
Если вам не терпится, скачайте и вы сразу увидите что мы изучим на этом уроке)
Начинаем работать с GUI
Для начала, вам понадобится несколько изображений для фона, кнопок и других элементов пользовательского интерфейса, а также шрифты для надписей и текста на кнопках. Хорошая новость состоит в том, что вам не придется рыскать в Интернете для поиска нужных ассетов, потому что я подготовил специальный пакет, который имеет все необходимое. Вы можете скачать этот пакет отсюда: RocketMouse_GUI_Assets. Он содержит фоновые изображения, кнопки, значки и др.
Как уже упоминалось, вам придется добавить новую сцену к проекту Rocket Mouse созданному в предыдущих уроках, так что начнем, загрузив окончательный вариант этого проекта: RocketMouse_Final.
Создание сцены с меню в 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 изображений, которые не включены в эту статью.
Импорт изображений и шрифтов
Поздравляю, Вы только что завершили подготовительныеработы и теперь можете создать свой первый элемент пользовательского интерфейса внутри новой системы Unity GUI.
Добавление первого элемента пользовательского интерфейса
Примечание: Я уже слышу вопросы типа: “Что такое Pos X?”, “Что такое Rect Transform и где старый добрый компонент Transform?” В этом мануале вы найдете всю интересующую вас информацию. Чтобы вам легче было во всем разобраться, мы будем рассматривать каждый аспект в контексте других объектов, участвующих в сцене. Таким образом, вы сможете увидеть, как они ведут себя при разных настройках. Такие свойства как Width, Height или Pos X не требует каких-либо объяснений.
Вы установили правильные положение и размер нашего фона. Теперь посмотрите внимательно на вкладку Иерархия и вы увидите три новых объекта в сцене. Вот они:
Настройки фонового изображения
Теперь у вас есть фоновое изображение вместо белого изображения по умолчанию. Тем не менее, оно выглядит, мягко выражаясь, не айс, потому что изображение слишком мало, да и соотношение сторон является неправильным. Чтобы исправить, найти кнопку Set Native Size (Установить исходный размер) в Инспекторе и нажмите на нее, чтобы установить размер 1024 х 577.
Теперь изображение выглядит как настоящий фон.
Тем не менее, есть еще несколько проблем:
Примечание: оригинальная игра была разработана для айфонов с 3,5-х и 4-дюймовыми дисплеями. Вот почему графика игры поддерживает 1136 x 640 и 960 х 640 разрешения. Но вскоре вы увидите, как UI может адаптироваться к различным разрешениям экрана.
Первая проблема состоит в результатах импортирования настроек по умолчанию, и вы будете их править в следующем разделе. Вторую проблему мы решим с помощью Canvas Scaler.
Настройка импорта изображений
Теперь выберите img_background в Иерархии, а затем нажмите кнопку Set Native Size снова. Ширина и высота должны измениться на правильные значения 1136 и 640, соответственно.
Видите? Это было действительно легко исправить. Идем дальше!
Использование Canvas Scaler
Если вы запустите игру на устройстве или просто растянете ваш вкладку Game до размеров фонового изображения, ты вы увидите его полностью.
Хотя настройки Unity применимы в большинстве случаев, иногда необходимо изменить дефолтное поведение. Например, когда у вас маленький монитор, который не соответствует разрешению целевого гаджета. Кроме того, многие игры поддерживают только одно разрешение.
Дизайнеры используют это разрешение, чтобы диктовать размеры, расположение объектов и другие данные. Поэтому при разработке игре нужно использовать заданные дизайнерами характеристики без дополнительных вычислений, чтобы игра отображалась без багов.
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 имеет функцию, которая поможет вам обойти эту ошибку новичка. Совсем скоро вы о ней узнаете.
Добавление изображения с заголовком
Откройте окно Scene и выберите GameObject\UI\Image в меню. Это позволит добавить еще одно белое изображение на сцену. Вот как это вышло у меня:
Примечание: Если изображение окажется слишком далеко, просто установите значение 0 для свойств Pos X и Pos Y.
Теперь попробуйте превратить этот белый прямоугольник в реальное изображение выполнив следующие действия:
Как видите, это было достаточно просто. Теперь нужно работать с позиционированием с помощью компонента Rect Transform.
Rect Transform, Anchors, Pivot и Вы)
Вы увидите Transform-компонент, когда выберите любой тип GameObject в Иерархии.
Как видите, Transform и Rect Transform немного отличаются, но Rect Transform может изменить внешний вид вашей игры в зависимости от настроек якоря. Например, это может выглядеть следующим образом:
Вы задаетесь вопросом о настройке якорей, которые меняет внешний вид Rect Transform так кардинально? Вы найдете ответы, которые вы ищете в следующем разделе.
Якоря
Настраивая якоря, вы определяете несколько положений в родителе, как правило, по одному в каждом углу элемента интерфейса под названием Rect. При изменении размера родителя наш элемент будет стараться сохранить uniform distance to the anchor points, заставляя его перемещаться или изменять размер вслед за родителем.
Чтобы посмотреть на разные Anchor Presets, просто выберите img_headerв иерархии и кликните на прямоугольник прямо над полем Anchors в компоненте Rect Transform.
Если вы посмотрите на следующее изображение, в котором отключен фон, вы увидите, что размер холста изменяется немного лучше.
Как вы видите, настройки якорей влияют на то, как элементы вашего интерфейса адаптируются к разному разрешению экрана.
Вы наверняка хотите покопаться и в других настройках, чтобы посмотреть, как они работают. Но сначала прочитайте хотя бы следующую главу. Она поможет вам лучше понять, что такое якоря, и в результате ваши эксперименты будут более успешными.
Манипулятор якорей
На данном этапе наши якоря используют 4 треугольника. Вот как это выглядит при настройке top-center:
Настраиваемые якоря
Вы можете вручную передвинуть якоря в произвольное положение, т.к. Anchor Presets можно менять любым удобным вам образом.
Примечание: Бывает так, что другой элемент интерфейса перекрывает иконку якоря, и вы не можете его выбрать. В таком случае просто вызовите иконку якоря, щелкнув на Anchor Preset (например, левая часть экрана). Иконка якоря появится в указанной части экрана, после чего вы сможете перемещать ее как угодно.
Примечание: Как видите, изменение размера холста заставляет изображение передвигаться вправо. Но это перемещение незначительно по отношению к правому краю холста. Это объясняется тем, что якоря установлены на 25% ширины холста.
Разделение якорей
Вы можете разделить якоря, чтобы элемент интерфейса растягивался горизонтально, вертикально или в обоих направлениях.
Примечание: Захватив один из краев холста и перемещая его по экрану, вы не добьетесь изменения его размера. Найдите слово Preview возле курсора, используйте его, что уменьшить или увеличить холст, и посмотрите, как элементы вашего интерфейса будут адаптироваться к разным разрешениям экрана.
Rect Transform зависит от текущих настроек якоря
В зависимости от настроек якоря, Rect Transform контролирует размер и положение элементов интерфейса разными способами.
Ели вы поставите якорь на какую-то точку, без растягивания, вы увидите такие свойства, как Pos X, Pos Y, Width иHeight.
На этом скриншоте якорь img_header стоит на middle-stretch. Это значит, что изображение остается в центре холста вертикально и растягивается горизонтально.
Поскольку позиция по оси X и ширина зависят от размера родителя, установите отступы от левого и правого краев родителей.
Точка опоры
Примечание: Вы также можете установить точку опоры за пределами элемента интерфейса. В этом случае она будет за пределами значений (0,0) – (1,1). Это может вам пригодиться. Например, вам нужно, чтобы объект вращался вокруг определенной точки в сцене. Чтобы изменить точку опоры, вы должны убедиться, что кнопка Pivot/Center стоит на Pivot таким образом:
Вы можете изменить Точку опоры в компоненте Rect Transform в Инспекторе или вы можете использовать Rect Tool.
Взгляните на следующие два изображения, на которых показаны элементы пользовательского интерфейса с одинаковыми значениями Pos X и Pos Y, но при этом у них различное положение на сцене.
Примечание: Важно понимать, что позиция элемента пользовательского интерфейса задается относительно якоря. Вот почему положение (0,0) означает расстояние от якоря, который устанавливаются в левом верхнем углу холста.
Теперь взглянем на второе изображение. Как видите, его положение не изменилось и составляет (0,0), но так как Точка опоры установлена в левом нижнем углу (0,0) видно, что нижний угол изображения, а не центр, теперь находится в левом верхнем углу холста.
Сложно объяснить, как точка опоры влияет на вращение и размер с помощью статичного изображения, поэтому вот несколько анимаций:
Пожалуйста, обратите внимание как изображение поворачивается вокруг точки поворота ввиде синего круга, показывающего что элемент можно свободно перемещать.
Примечание: Удерживайте кнопку ALT при масштабировании вокруг точки опоры.
Как видите, Точка опоры также влияет на изменение вашего элемента пользовательского интерфейса.
Размещение изображения с заголовом
Уф! Теперь вы знаете все, что нужно, о Rect Transform, Anchors и Pivot. Поверьте, когда-нибудь вы скажете мне спасибо за то, что корпели над этим упражнением, ведь от того, насколько хорошо вы усвоили эти понятия, зависит интерфейс вашей игры. Теперь мы можем сконцентрироваться на создании сцены меню. Остальные разделы пролетят в мгновение ока. Все эти манипуляции окончательно измотали бедный маленький img_header. Пора поместить его на законное место и оставить в покое.
Прежде чем продолжить, повторно включите img_background (если оно было отключено) чтобы увидеть границы холста. Затем выберите img_header в Иерархии и установить его свойства в Инспекторе следующим образом:
Вы должны увидеть на Вашей вкладке Сцена что-то вроде этого:
Отлично. Теперь оставьте заголовок в покое).
Добавление кнопки Старт
Взгляните на кнопку в инспекторе, и вы увидите знакомый компонент Image (Script). Помните, мы использовали его для добавления фона и метки хедера? Кроме того, существует компонент кнопки (Script). Другими словами, кнопка только изображение с прикрепленным скриптом, который содержит текст кнопки.
Примечание: Текст надписи не является обязательным, так что если у вас есть изображение кнопки с нарисованным прямо на ней текстом, вы можете удалить текстовый элемент. Вы сделаете это несколько раз в течение этого урока.
Позиционирование кнопки
Теперь займемся позиционированием и изменением размера кнопки. Выполните следующие действия:
Теперь выберите вложеннsq текстовый элемент и введите текст Start Game (Начать игру). Измените Font Size (размер шрифта) на 32 чтобы сделать текст кнопки больше.
Это то, что вы должны увидеть в окне Scene (Сцена):
9-фрагментное масштабирование
Изображение для Button устанавливается так же, как изображение для Image. В конце концов, это практически один и тот же компонент. Но в отличие от изображений, которые редко масштабируются, кнопки часто бывают самых разных размеров. Конечно, можно создать фоновое изображение для каждого размера кнопки, но зачем же тратить драгоценное место? Вместо этого мы воспользуемся техникой, называемой 9-фрагментным масштабированием, которая позволяет обойтись одним маленьким изображением, которое масштабируется в соответствии с необходимым размером. Нет, это не магия. Вам не придется бросать свои изображения в волшебный фонтан прежде, чем вы сможете их использовать :] Этот метод делает это возможным, потому, что изображение не масштабируется равномерно. Есть девять зон, каждая из которых масштабируется по-разному.
Это гарантирует, что изображение будет выглядеть хорошо в любом масштабе.
Подготовка изображения для кнопок
Примечание: Установка формата на Truecolor не обязательна и не относится к масштабированию изображений. Но в моей практике были случаи нежелательного сжатия изображений, поэтому я пришел к выводу, что лучше этим не пренебрегать. Если вы используете собственные изображения и они выглядят нормально в сжатом формате, вам можно с этим не возиться.
Настройка изображений кнопок
Подготовив все изображения, вы должны будете всего лишь перетащить их в соответствующие поля Инспектора. Выберите btn_start в иерархии и выполните следующие действия:
Примечание: Если вы наткнетесь на ошибку: Отсутствуют границы изображения, это значит, что вы забыли настроить Границы в редакторе спрайта в настройках импорта, как описано выше.
Прежде чем запустить сцену и полюбоваться своими кнопками, придется потратить еще несколько секунд, чтобы изменить шрифт встроенной текстовой метки. После этого ваша кнопка будет выглядеть просто отпадно.
Задание пользовательских шрифтов для кнопки
Теперь запустите сцену и наслаждайтесь новой мега-кнопкой.
Удаление прозрачности кнопки
Вы заметили, что мы можем видеть фон через кнопку? В зависимости от ваших целей это может быть хорошо или плохо. Для главного меню в этой игре будет лучше, если мы избавимся от прозрачности.
Примечание:Мне кажется, прозрачность добавляется по умолчанию, потому что во многих случаях интерфейс игры отображается вверху экрана, загораживая видимость игроку.
Теперь он выглядит намного лучше!
Добавление кнопки Settings (Настройка)
Есть только несколько вещей, которые осталось сделать прежде чем перейти к следующей части и одна из них добавить кнопку Settings (Настройка). Вы, наверное, уже можете сделать это сами, зная размер и положение кнопки.
Итак, вот свойства кнопки Settings:
Если у вас совсем ничего не получается, выполните следующие действия:
Это то, что вы должны увидеть во вкладке Scene (Сцена) после добавления кнопки Settings (Настройки):
Теперь нам осталось только нажать кнопку Start Game и запустить вторую сцену (это сама игра).
Добавляем сцены в режим Build
Потом закройте окно Build Settings.
Создание UIManager
Сделайте двойной клик на UIManagerScript в инспекторе, чтобы открыть скрипт в MonoDevelop. После того, как сценарий загрузится, удалите методы Start и Update и добавьте метод StartGame следующим образом:
Сохраните файл и убедитесь, что он не содержит ошибок, создав его в MonoDevelop. Для этого выберите Build\Build All в меню MonoDevelop.
Вернитесь к Unity и выполните следующие действия:
Запустите сцену и нажмите на кнопку Start Game чтобы запустить сцену с игрой.