Как сделать прозрачную кнопку unity

Добавил пользователь Владимир З.
Обновлено: 04.10.2024

Глядя на некоторые ответы на форумах Unity и Q & на сайте, ответы на вопрос о том, как сделать невидимую кнопку, не работают, потому что удаление изображения, связанного с кнопкой, делает ее неработоспособной.

Как вы обходите это и сохраняете невидимое свойство, позволяя кнопке фактически работать?

2 ответа

12 Решение Fattie [2016-04-27 17:27:00]

В каждом проекте Unity вам нужно Touchable.cs:

Используйте функцию Unity обычной функции "Создать кнопку"

Как вы знаете, функция редактора автоматически добавляет два компонента. Один из них - Text , а один - Image .

Просто удалите их как

Отбросьте выше script Touchable.cs на кнопке

Вы закончили. Это все, что нужно.

Он не может "распадаться" с обновлениями Unity.

Фактически вы можете "нарезать" что-нибудь в .UI , сбросив Touchable поверх него.

Никогда еще не добавляйте прозрачное изображение, чтобы сделать кнопку.

Единство забыло абстрагировать "осязаемую" концепцию в цепочке ОО.

Итак, мы, разработчики, должны создать собственный класс Touchable из классов Unity.

Это классическая проблема "засыпки" в OO.

При "обратном заполнении" единственная проблема заключается в том, что она должна быть полностью автоматизирована. Существует только одно хорошее решение Touchable.cs, которое каждый использует.

Итак, во всех реальных проектах Unity кнопка выглядит так:

ОДИН У вас есть Unity Button.cs

TWOstrong > вам нужно добавить Touchable.cs

Некоторые команды создают функцию редактора "Create Better Button", которая просто создает игровой объект, с Button.cs + Touchable.cs.

Скажем, у вас может быть очень сложная панель пользовательского интерфейса. Может быть, он изменяет размер. Или, может быть, у вас есть анимация.

Удивительно то, что вы можете просто оставить "Button + Touchable" на что-нибудь подобное, и оно будет работать.

Просто установите Button + Touchable, чтобы развернуть для заполнения родителя. Это все, что нужно.

В этом примере изображение "resume" и "quit" может быть что-либо. (Анимация, сложная панель со многими частями, текст, спрайты, somethign invisible, стек - все.)

Во всех случаях просто снимите кнопку + Touchable под, и у вас есть безупречная кнопка.

Фактически: этот подход настолько прост, что вы будете использовать даже самые простые кнопки, используя этот подход.

Скажите, что ваша кнопка - это тривиальное изображение. Намного проще просто создать изображение, а затем на нем нажать кнопку + Touchable. (Вместо использования фактически запутывающей и проблемной функции "Button" в редакторе.)

1) Класс Unity Button.cs является фантастическим.

2) Но функция редактора "сделать кнопку" - это мусор.

3) Он делает кнопку "вверх дном",

4), то есть он помещает текст/изображение в Button.cs

5) "Button-ness" - это то, что вам нужно добавить к вообще. Именно так оно и работает с Button + Touchable.

6) Итак - довольно просто -

Как все делают все кнопки в Unity!

Исторический кредит: я считаю, что пользователь форума Unity "signalZak" был первым, кто подумал об этом много-много лет назад!

Мое первое решение заключалось в enable и disable компонентах, как показано ниже:

но это не сработало. Если компоненты image и text disabled , событие нажатия кнопки будет НЕ. Один из них ДОЛЖЕН быть enabled в состоянии для кликов событий, которые будут отправлены.

Решение состоит в том, чтобы установить альфа обоих компонентов image и text на 0, чтобы скрыть, и до 1, чтобы показать снова. Они будут скрыты, но не отключены, и нажмите events будет работать.

Графический интерфейс пользователя (англ. Graphic User Interface, GUI) — это метод взаимодействия пользователя с игрой, в котором элементы интерфейса (меню, кнопки, значки, списки и т. п.), представленные пользователю на экране, выполнены в виде графических изображений.

Интерфейс игры

Canvas

Все элементы интерфейса (кнопки, изображения) должны находиться внутри объекта Canvas. Canvas — это холст экрана, на котором размещаются элементы. Для создания холста в главном меню выбери GameObject → UI → Canvas. В окне Инспектор можно настроить параметры холста. Самая важная настройка — это Render Mode компонента Canvas. Он отвечает за режим отображения интерфейса.

Render Mode содержит следующие настройки на выбор:

Screen Space - Overlay. Элементы интерфейса показываются поверх экрана. Стоит по умолчанию;
Screen Space - Camera. Позволяет отображать интерфейс в определенной камере;
World Space. В этом режиме элементы интерфейса располагаются в 3D пространстве.

Rect Transform

Все элементы интерфейса имеют настройки Rect Transfrom. Разберем их на примере кнопки (выбрав в главном меню GameObject → UI → Button).

Во время редактирования пользовательского интерфейса в Unity нужно включить режим 2D. Для этого на панели Scene нажми кнопку 2D:

Переключение режимов

Включи инструмент редактирования пользовательского интерфейса на панели инструментов или нажми кнопку T. С помощью этого инструмента можно перемещать, вращать и изменять размер элементов интерфейса.

Режимы редактирования

Выбери элемент интерфейса. Схватив за одну из точек по краям можно изменить размер элемента.

Пример 1 Пример 2

Пример 3 Пример 4

Button

Создать кнопку можно в главном меню GameObject → UI → Button. Кнопка состоит из двух объектов, которые можно посмотреть в окне Иерархия - формы и текста внутри нее:

Объекты кнопки

Сначала разберем настройки надписи на кнопке. Выбери Text на панели Hierarchy. В Inspector будут следующие настройки текста:

Теперь, рассмотрим настройки формы кнопки. Выбери объект Button (название этого объекта можно изменить). В окне Инспектор находятся следующие основные настройки:

Normal Color. Цвет кнопки;
Highlighted Color. Цвет кнопки при наведении на нее мыши;
Pressed Color. Цвет нажатой кнопки.

Функции

Как ты уже знаешь, отдельным блокам кода можно задавать имена. Такой именованный блок кода называется функцией или методом (частный случай функций). Для примера создадим функцию с именем SayHello, которая выводит фразу Hello world! в консоль:

Обратите внимание, что функция не выполняется автоматически при создании. Чтобы функция выполнилась, ее требуется явно вызвать в желаемом месте. Для примера вызовем созданную функцию внутри функции Start():

Обработка события нажатия на кнопку

Для обработки события нажатия на кнопку необходимо выполнить два шага:

1. Создать функцию, которая должна выполняться при каждом нажатии.

2. Передать имя созданной функции в функцию AddListener() соответствующего события кнопки.

Весь код скрипта:

Обратите внимание, что имя функции может быть любым. Имя должно соответствовать действию, которое выполняет функция. А вот этот скрипт загрузит сцену с нужным именем по нажатию кнопки:

Создание кнопки со своим дизайном

Рассмотрим пример создания кнопки, состоящая из трех изображений: обычное состояние (Normal), состояние, когда на кнопку наведена мышь (Hovered) и состояние нажатия на кнопку (Pressed). Кнопки можно ⬇ скачать тут.

Сначала нужно загрузить все изображения кнопки в проект, лучше использовать одно изображение, разделенное с помощью инструмента Sprite Editor. Выбери загруженное изображение и в окне Инспектор в параметре Texture Type выбери Sprite (2D and UI). После чего нажми кнопку Apply.

Изменение типа изображения

Теперь в параметре Sprite Mode выбери Multiple и нажми кнопку Sprite Editor, чтобы открылся редактор Sprite Editor. Выбери в меню Slice → Type → Automatic и нажми кнопку Slice. Unity сам найдет все кнопки и разметит их.

Автоматическая разметка кнопок

Теперь нужно настроить фрагменты кнопки, которые не будут изменять свой размер при масштабировании элемента. Выбери кнопку, перетащи зеленые точки так, чтобы область находилась внутри кнопки и не затрагивала углы:

Выполни это действие для каждой кнопки. После этого можно закрыть окно и принять изменения.

Создай кнопку Выдели кнопку GameObject → UI → Button. Выбери ее и в окне Инспектор отредактируй следующие настройки:

в параметре Source Image выбери спрайт кнопки в обычном состоянии (normal);
в параметре Image Type выбери Sliced;
в параметре Transition выбери Sprite Swap;
в параметре Highlighted Sprite выбери спрайт подсвеченной кнопки (с нашими кнопками это normal состояние);
в параметре Pressed Sprite выбери спрайт нажатой кнопки.

Image

GameObject → UI → Image позволяет показывать на переднем плане экрана изображения такие как карта, значок жизни, магии и прочее.

Добавь в проект изображение, которое будет использоваться в графическом интерфейсе. В Окне Инспектор изображения для выбери следующие настройки:

Добавь на сцену GameObject → UI → Image. На панели Inspector выбери следующие настройки:

в параметре Source Image выбери загруженное изображение;
в параметре Color можно перекрасить изображение в определенный цвет;
в параметре Image Type выбери Simple. Если включить настройку Preserve Aspect, то изображение не будет деформироваться при изменении размера экрана. Если в настройке Image Type выбрать Tiled — изображение будет повторяться на экране.

Text

GameObject → UI → Text позволяет отображать текст в графическом интерфейсе (отображение диалогов, подсказок, надписей). Содержит следующие настройки:

Text — текст, который будет отображаться на экране;
Font — шрифт текста;
Font Style — тип шрифта. Принимает следующие значения:
Normal – обычный шрифт;
Bold – применение полужирного начертания к тексту;
Italic – применение курсивного начертания к тексту;
Bold and Italic – применение курсивного и полужирного начертания к текст.
Font Size — размер шрифта;
Alignment — выравнивание текста;
Color — цвет текста.

Текст можно менять с помощью скрипта. Это позволит в режиме реального времени отображать количество набранных очков, жизни, времени и т.п.

Один из способов сделать текст с тенью – это отобразить текст два раза, второй раз с небольшим смещением и с цветом тени позади первого. Такое решение часто используют, если графическая библиотека не дает собственных механизмов отображения теней.

Неудобство такого подхода в том, что на каждый текст с эффектом тени нужно создавать два объекта и если текст динамический, то следить за тем, чтобы текст обновлялся в обоих объектах.

Простой текст и текст с тенью, созданной вручную

Но эти эффекты можно применить не только к тексту (Text), но и к картинке (Image). А так как текст и картинка основные кирпичики для всех остальных элементов UI, то и к любому другому UI элементу. Например к кнопке:

Кнопки с эффектами Shadow и Outline

Если мы заглянем в исходный код компонентов Shadow и Outline, то увидим, что компоненты делают по сути то же самое: Shadow – создает копию геометрии UI компонента и смещает ее на несколько пикселей в одну сторону, а Outline – создает четыре копии и смещает их в четырех противоположенных направлениях по x и y, и таким образом, достигается эффект обводки.

Давайте подумаем, чего еще можно добиться используя эти компоненты:Простая обводка для выделенных объектов.Не надо рисовать два состояния для каждой картинки или производить манипуляции с цветом, можно просто добавить эффект Outline и сделать его активным для выделенного объекта.

Например, можно отобразить несколько самолетов и их тени на земле, а так же, путем изменения одного параметра, сымитировать движение солнца.- тени объектов, которые “уходят дальше”, чем обычные тени UI элементов.(Конечно же никто не будет делать механику игры на GUI элементах, но если какая-то простая сцена и по-быстрому, то почему бы и нет).

Эффект раздвоения в глазахДопустим, вы хотите наложить эффект раздвоения на HUD, когда ваш герой получает сильный удар или выпивает много алкоголя, такой вот простой скрипт, навешанный на все UI объекты окна, поможет достичь нужного результата.

Пишите в комментариях другие идеи, как можно выжать из компонентов Shadow и Outline другие эффекты и дополнительную пользу.

персонаж;
земля;
объект (от которого будет высвечиваться диалог);
диалоговое окно.

Загружаем спрайт персонажа, добавляем коллайдер, затем RigidBody и скрипт "Движение персонажа" (его мы разбирали здесь).

Далее добавляем землю, на нее — коллайдер. Дублируем объект CTRL+D, чтобы увеличить площадь. Добавляем объект, от которого будет высвечиваться диалог.

Создаем канвас и на нем — панель, масштабируем ее и добавляем текст. Настраиваем размер текста. Далее добавляем еще один текст — он будет давать пользователю подсказку, как пролистнуть текст.

В старте заполняем массив и скрываем панель.

Кликаем на почтовый ящик и в компоненте коллайдера ставим галку рядом с IsTrigger, это позволит нам проходить сквозь его коллайдер.

Возвращаемся в скрипт. Пишем новый метод OnTriggerExit2D. Он нам нужен для того, чтобы фиксировать выход персонажа из коллайдера почтового ящика. Когда персонаж выйдет из коллайдера, панель скроется, а состояние диалога будет false.

Читайте также: