Коротко: GUI в Roblox збирається з тих самих елементів, що й будь-який інтерфейс: рамка, текст, кнопка, шкала. Головне правило для першої гри — на екрані видно рахунок, здоров'я і те, що робити далі.
Гра може мати відмінну механіку і все одно виглядати незрозуміло, якщо інтерфейс зроблено абияк. GUI (Graphical User Interface) у Roblox — це окремий, самостійний навик, і його варто вчити свідомо, а не «як вийде».
З чого складається GUI в Roblox Studio
- ScreenGui — контейнер, у якому живуть всі елементи інтерфейсу
- Frame — прямокутна область, «підкладка» для інших елементів
- TextLabel / TextButton — текст і кнопки
- ImageLabel — картинки, іконки
Звучить просто. На практиці найбільше проблем виникає не з окремими елементами, а з тим, як вони поводяться на різних розмірах екрана.
Що має бути на екрані в першій грі
Перший інтерфейс дитина зазвичай починає з красивого — рамки, іконки, напис із назвою гри. Працює інший порядок: спершу те, без чого гравець не розуміє, що відбувається.
Мінімум для будь-якої першої гри — три речі. Скільки в мене чогось (рахунок, монети, зібрані предмети). У якому я стані (здоров'я, час, спроби). І що робити далі — підказка на старті або хоча б стрілка в бік мети. Усе інше можна додати потім; без цих трьох гравець просто не розуміє, виграє він чи програє.
Корисна вправа на занятті: показати гру однокласнику й мовчати. Якщо за десять секунд він не зрозумів, куди йти, проблема не в механіці, а в інтерфейсі. Мовчати тут головне: щойно автор починає підказувати словами, перевірка припиняється й перетворюється на екскурсію.
UDim2 — те, що плутає всіх на старті
Позиція і розмір елементів у Roblox задаються через UDim2 — систему з двох компонентів: відносного (у частках екрана) і абсолютного (у пікселях). Новачки майже завжди виставляють все в пікселях — і кнопка, яка на екрані розробника була в центрі, на іншому екрані опиняється в кутку або взагалі поза межами.
Правило, яке рятує 90% таких проблем: розмір і позицію задавати переважно у відносних величинах (scale), і лише невеликі коригування — у пікселях (offset).
AnchorPoint: друга причина, чому все з'їжджає
Навіть із правильним scale елемент може поводитись дивно, і винен тут AnchorPoint — точка, за яку елемент «тримається». За замовчуванням це лівий верхній кут: коли кнопка росте, вона розповзається вправо й униз, а не в усі боки рівномірно.
Для елемента, який має стояти по центру, AnchorPoint ставлять у середину — і тоді позиція означає саме центр кнопки, а не її кут. Це одне поле, яке дитина спочатку не помічає, а потім згадує щоразу: половина «поламаних» інтерфейсів чиниться саме ним.
Три типові помилки в перших інтерфейсах
- Занадто дрібний текст — виглядає нормально на моніторі 27 дюймів, нечитабельний на телефоні
- Кнопки впритул одна до одної — на сенсорному екрані це майже гарантовано випадкові натискання
- Контрастний фон, на якому текст просто зливається — читається погано навіть при хорошому дизайні решти елементів
Гравець із телефона: чому інтерфейс роблять під палець
Дитина робить гру на комп'ютері, мишкою, на великому екрані — і саме так її й перевіряє. А значна частина аудиторії Roblox заходить із телефонів і планшетів, де замість курсора палець, а частину екрана ще й займають системні елементи керування.
Звідси кілька простих наслідків. Кнопка має бути завбільшки з подушечку пальця, а не з курсор. Між кнопками потрібен проміжок — інакше гравець натискає сусідню. Важливе не можна ставити в самий низ і в самі кути: там пальці вже тримають пристрій. І текст, який на моніторі здається нормальним, на телефоні майже завжди дрібний.
Як перевірити інтерфейс, не маючи десяти пристроїв
У Studio є режим перегляду під різні пристрої: можна одразу подивитись, як екран виглядає на телефоні, планшеті й моніторі, не виходячи з редактора. Для дитини це перший досвід свідомої перевірки замість «у мене працює».
Робочий ритуал простий: зробив інтерфейс — перемкнувся на телефон — подивився, що не влізло. Далі найвужчий екран стає головним: якщо все читається там, на великому буде тим більше. Другий крок — дати пограти комусь, хто гру бачить уперше: свої кнопки автор знає напам'ять і тому їх не «бачить».
Порівняння: з чого краще почати вчити GUI
| Підхід | Плюс | Мінус |
|---|---|---|
| Вручну через Studio-редактор | Візуально, одразу видно результат | Повільно для складних інтерфейсів |
| Через скрипт (генерація коду) | Можна повторно використовувати | Складніше для перших тижнів навчання |
Для перших місяців ми завжди рекомендуємо ручний підхід через редактор — GUI через код вводимо пізніше, коли базові поняття вже засвоєні.
Колір, який не заважає читати
Кольори — місце, де перший інтерфейс найчастіше псується з найкращих намірів. Дитина знаходить яскраво-рожевий, салатовий і фіолетовий, ставить їх поруч — і текст перестає читатись, хоча кожен колір окремо гарний.
Проста дисципліна, яка рятує: два основні кольори плюс один акцентний, і акцентний — тільки для того, на що треба натиснути. Текст білий на темному або темний на світлому, без напівтонів. Якщо напис доводиться вдивлятися, щоб прочитати, змінюють не шрифт, а підкладку: темна напівпрозора рамка під текстом рятує майже будь-яку сцену, бо гра за спиною інтерфейсу весь час різна — то світле небо, то темна печера.
Тут же варто сказати про однаковість. Якщо кнопка «грати» синя й округла, то й кнопка «магазин» має бути синьою й округлою: гравець запам'ятовує вигляд, а не напис, і на другому екрані шукає очима те саме. Інтерфейс, зібраний із п'яти різних стилів, виглядає зламаним навіть тоді, коли кожен елемент окремо акуратний.
Кнопка має відповідати
Остання річ, яку додають, і перша, яку помічає гравець: реакція. Натиснув — кнопка змінила колір, трохи зменшилась, клацнула. Без цього гравець не впевнений, спрацювало чи ні, і тисне ще раз, а потім ще.
Те саме стосується змін у грі: рахунок, який просто перескочив із 10 на 20, помічають гірше, ніж рахунок, біля якого на секунду спалахнуло «+10». Дитині це пояснювати не доводиться — вона сама бачить різницю, коли перевіряє гру на друзях.
Думка викладача
«Дизайн інтерфейсу — це та частина курсу, де навіть діти, які не вважають себе «художниками», раптом захоплюються. Тому що тут відразу видно результат — переставив кнопку, і вся гра виглядає інакше», — ділиться спостереженням один із наших викладачів.
Гарний інтерфейс — це не про красиві кольори. Це про те, щоб гравець за секунду зрозумів, куди натиснути. Цьому вчимо на курсі Roblox Studio окремим блоком — приходьте на пробне заняття, покажемо перші принципи вживу.
