Типи кнопок
У цьому уроці показано, як створити екранні кнопки для меню, дій, інтерфейсу тощо.
TextButton ImageButton
TextButton схожий на TextLabel, за винятком того, що гравці можуть активувати його клацанням/дотиком. Він також має багато однакових візуальних властивостей — шрифт, колір фону, колір обведення тощо.
ImageButton схожий на інтерактивну версію об’єкта ImageLabel. Він також має більшість тих самих властивостей, що й аналог без кнопки.
Створення кнопки
Наступні кроки показують, як додати ImageButton на екран і перемикати його між трьома видами залежно від взаємодії гравця.У вікні Провідника наведіть курсор на об’єкт StarterGui , натисніть кнопку + і вставте ScreenGui .
Виберіть новий об’єкт ScreenGui і подібним чином вставте ImageButton .
Це додасть порожню кнопку зображення в кут перегляду гри.
Як найкраща практика, перейменуйте нову кнопку відповідно до її призначення, наприклад MapButton .
Розмір
Щоб кнопка динамічно змінювала розмір на різних пристроях і екранах, найкраще використовувати властивості масштабу .У вікні «Властивості» знайдіть властивість «Розмір» і клацніть стрілку, щоб розгорнути дерево.
Установіть такі властивості розміру:
Обмежте кнопку квадратною рамкою, встановивши для SizeConstraint значення RelativeYY .
Масштабування
Поточний розмір має добре працювати на телефоні, але шкала X/Y 0,15 (15%) може виглядати занадто великою на екрані комп’ютера. Щоб виправити це, ви можете додати UISizeConstraint .Наведіть курсор на об’єкт MapButton і вставте UISizeConstraint .
Виберіть новий об’єкт обмеження розміру та встановіть для його властивості MaxSize значення 90, 90 .
Позиція
На мобільних пристроях кнопки зазвичай слід переміщати в межах досяжності великого пальця гравця, наприклад у нижній правій частині екрана.Змініть властивість AnchorPoint кнопки на 0,5, 1 , щоб позиціонування здійснювалося навколо нижньої центральної точки.
Розгорніть дерево позицій кнопки та встановіть такі значення властивостей. Це перемістить кнопку біля стандартної кнопки переходу, яка з’являється на телефонах/планшетах.
Зображення
Для цієї кнопки потрібні три користувацькі зображення — її звичайний вигляд на екрані, вигляд при наведенні миші та остаточне зображення, коли гравець натискає її.
Нормальний
Наведено курсор
Натиснуто
Налаштування цих зовнішніх зображень можна виконати за допомогою властивостей Image , HoverImage і PressedImage .
Знайдіть властивість Image кнопки та вставте його в rbxassetid://6025368017 або скористайтеся власним ресурсом .
Для властивості HoverImage вставте rbxassetid://6025452347 .
Для властивості PressedImage вставте rbxassetid://6025454897 .
Стайлінг
Щоб завершити вигляд кнопки на екрані, внесіть такі налаштування:Встановіть BackgroundTransparency на значення 1 , щоб зробити фон прозорим.
Злегка поверніть кнопку, встановивши Rotation на -5 .
Функціональність кнопки
Останнім завданням є підключення основних функцій кнопок.У вікні Провідника наведіть курсор на об’єкт MapButton і вставте LocalScript .
У сценарії скопіюйте та вставте ці нові рядки:
local button = script.Parent
local function onButtonActivated()
print("Button activated!")
-- Perform expected button action(s) here
end
button.Activated:Connect(onButtonActivated)
Цей простий сценарій кнопки працює наступним чином:Перший рядок встановлює змінну кнопку, яка повідомляє сценарію, з яким конкретним об’єктом він пов’язаний. У цьому випадку він пов’язаний із ImageButton , батьківським сценарієм.
Функція onButtonActivated керує активацією кнопки. Усередині нього ви повинні виконати заплановану дію, наприклад відкрити головне меню гри.
Останній рядок з’єднує кнопку з функцією onButtonActivated із подією Activated. Це призведе до запуску функції кожного разу, коли гравець активує кнопку в грі.
Хоча існує кілька різних подій, які можна пов’язати з кнопками, подія Activated є найнадійнішою для основних кнопок, забезпечуючи стандартну поведінку кнопок на всіх платформах від ПК до телефону/планшета та консолі.
Якщо кнопка не працює належним чином, перевірте таке:
Функція onButtonActivated керує активацією кнопки. Усередині нього ви повинні виконати заплановану дію, наприклад відкрити головне меню гри.
Останній рядок з’єднує кнопку з функцією onButtonActivated із подією Activated. Це призведе до запуску функції кожного разу, коли гравець активує кнопку в грі.
Хоча існує кілька різних подій, які можна пов’язати з кнопками, подія Activated є найнадійнішою для основних кнопок, забезпечуючи стандартну поведінку кнопок на всіх платформах від ПК до телефону/планшета та консолі.
Вирішення проблем
- Переконайтеся, що ви використовували LocalScript на стороні клієнта, а не сценарій на стороні сервера.
- Переконайтеся, що LocalScript є прямим дочірнім елементом об’єкта кнопки (а не дочірнім для контейнера
- ScreenGui).
- Переконайтеся, що для властивостей Image, HoverImage і PressedImage налаштовано відповідні ресурси зображення.