Верстка UI для гиперказуальной игры на Godot

В этом уроке мы пройдем весь путь верстки адаптивного UI на Godot Engine. Наша сцена магазина будет адаптироваться под различные пропорции экранов мобильных телефонов и планшетов.
Полный курс по Godot 4: stepik.org/a/1...
Поддержать Паштета на boosty: boosty.to/fron...
Мой дискорд сервер: / discord
Мой канал в телеграмм: t.me/frontend_...
Я на Twitch: / frontend_pashtet

[@ДмитрийСысуев-т7й]

Друг, наткнулся на твой канал, и я просто в восторге! С такой харизмой подавать такие сложные и полезные вещи - какой же ты крутой, бро! Пожалуйста, не бросай выпускать ролики, так хочется увидеть ещё горы полезного материала от тебя и перенять твой бесценный опыт...

[@frontend-pashtet]

Спасибо большое за такой тёплый отзыв и поддержку. Я это очень ценю. Буду и дальше стараться, чтобы материал был максимально доступный и не скучный.

[@ritisir.t.s7232]

Спасибо большое! Уже расстроилась, что проблему прийдёться с костылями и кодом решать, но вовремя на ролик наткнулась, благодарачка❤

[@MRxRadex]

Огромное спасибо! Я думал что после Юнити смогу быстро вникнуть в UI систему Godot, но с наскоку не вышло. Круто всё объясняете!

[@frontend-pashtet]

Рад, что оказалось полезно) С опытом Unity должно дальше быстро пойти

[@Vasilii_Shtyrov]

Добротное видео. Куплю твой курс. Пожалуйста, продолжай пилить ролики по Godot 4, особенно в преддверии выхода Godot 4.3.

[@frontend-pashtet]

Спасибо. Очень приятно. Ролики продолжают пилиться. Завтра выйдет мини доп материал для курса, а потом уже урок для ютуба

[@doinkes7764]

Урок на русском и на свежей версии движка, класс.

[@ars_7085]

Мне как человеку ничего не понимающему в godot было сложно понять, почему у меня не менялись размеры элементов. Проблема решалась изменением в настройках проекта, в разделе основное->дисплей->окно, есть растягивание. Там надо было поменять режим и соотношение.

[@underwheelz]

Круто, я как раз хотел научится нодам контрол хорошо что это видео порекомендовал ютуб, спасибо за гайд)

[@stanislavgranovskiy4111]

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

[@Chuchel-hh6hq]

Привет , сделай пожалуйста видео о том как внедрить в казуальную игру таблицу лидеров ! А именно как сделать так чтобы в твоей онлайн игре была таблица которая показывает у кого из пользователей больше очков ! Было бы очень полезно , особенно с твоей подачей !

[@frontend-pashtet]

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

[@Chuchel-hh6hq]

@@frontend-pashtet Отлично , жду с нетерпением !

[@bloodik217]

По больше бы таких видео

[@PRO1OO]

Просто лучший!👍

[@kamilayza]

Когда 13-15 мин для кого-то долго...😐 А если честно, то видео-обучалка неплохо получился😎 всё необходимое для понимания начальной структуры создания uv и меню игр или программ Даже узнала пару лайфаков благодаря этому видео( боже, сколько же времени зря тратила на создание пустоты между объектами в годот, когда могла это сделать за пару секунд ... 😨) Теперь буду копить монеточки для этого курса, может быть и накоплю на него

[@frontend-pashtet]

Спасибо за комментарий:) 15 минут это вечность) Рад, что что-то было полезным.

[@frontend-pashtet]

@Re_ ну да, тут больше информации. Меньше надо додумывать.

[@vladyan01]

Предлагаю сделать цикл видео по всем встроенным классам движка, с примерами и теорией. Потому что там куча разных вещей которые непонятно зачем нужны, а документация не всегда понятно описывает. К примеру класс оклюзия, нафига, так и не разобрался))

[@frontend-pashtet]

Это массивная работа. Я сам многими узлами не пользуюсь) Имеет смысл наверное самые популярные освещать

[@vladyan01]

@@frontend-pashtet согласен, пока сам разберешься, пока запишешь, уже куча времени.

[@proandroidd2283]

Спасибо большое за инфу по GODOT! Пожалуйста если есть возможность писать ещё видео по GODOT, пиши пожалуйста!

[@frontend-pashtet]

Спасибо за поддержку. Конечно буду)

[@nixaristix1819]

Спасибо! Теперь интерфейсы более понятны, а то заморочился с ними совсем...

[@frontend-pashtet]

Спасибо за комментарий. Рад, что объяснение зашло)

[@portweshockscontent4310]

Очень помог, спасибо большое!

[@_1mrscool11_9]

Как обычно годнота

[@ОлегЛукин-д5ф]

Это то, что мне нужно прямо сейчас. Ты очень вовремя выложил видео. Спасибо за контент.

[@frontend-pashtet]

По таймингу

[@Камушек-ф1к]

Согласен, вовремя.

[@only8341]

Спасибо вам за урок. У меня как раз сегодня были проблемы с GUI. Я использовал вместо контейнеров, простое перемещение кнопок. Вы так вовремя выпустили видео, что я понял над чем мне надо поработать.

[@frontend-pashtet]

Я очень рад, что видео оказалось полезным. Тоже далеко не сразу разобрался, как в Godot работают UI ноды.

[@RokyTime]

Здравствуй. Нашел твой канал давно, ещё когда только увлекся программированием в целом. Решил попробывать геймдев недавно и обратился к твоему гайду "Прожиточный минимум" gdscript'а. Видимо, язык очень быстро обновляется и гайд уже не совсем актуален. В плане основы основ он даёт, но некоторые действия просто невозможно повторить в движке сейчас. Например, дебаг с помощью print. Да и код не запускается, из-за отсутствия какого-то условия. Есть какая-то возможность учить этот язык, не обращаясь к официальной документации, из-за сложности с английским ?

[@frontend-pashtet]

Привет. Думаю, можно пробовать читать документацию на русском. Она частично переведена, но проблема как раз в не полном переводе. Язык для версии 3 не менялся. А вот для Godot 4 могут быть сложности, да. Но print, мне кажется, должен работать. Даже в 4ке. Даже не знаю, что посоветовать. Разве что обращаться за помощью к сообществу. Можешь зайти в наш дискорд, если пользуешься им. Ну или с переводчиком что-то пытаться разбирать. Очень круто, что ты пытаешься разбираться в Godot. Надеюсь, у тебя пойдёт процесс. Там надо перетерпеть первую волну непонимания, и потом будет проще.

[@RokyTime]

@@frontend-pashtet Так классно, что ты помогаешь и отвечаешь на вопросы всех своих подписчиков. Спасибо за совет, очень помог, на самом деле.

[@Makcimm85]

"сложности с английским" Во многих браузерах встроены переводчики текста А в яндексе встроен перевод и озвучка ютуба с иностранных языков.

[@toster8240]

Очень в тему и прямо огонь! А видео про адаптивность игровой сцены будет?

[@frontend-pashtet]

Вполне вероятно, что будет. Там другой хак требуется

[@toster8240]

@@frontend-pashtet Было бы невероятно круто, про такое посмотреть ;-)

[@danillinad5130]

Привет, отличный урок получился. Подскажи пытаюсь встроить в margincontainer animatedsprite, но спрайт не реагирует на него и зафиксирован на своей позиции, при уменьшени/растягивании экрана все скейлится кроме animatedsprite

[@zykov.v.r]

Отличный материал, пиши больше про UI и Godot, очень интересно, задумался начать изучать годо. Если на момент выпуска курса будут деньги - запишусь

[@frontend-pashtet]

Спасибо. Надеюсь тебе понравится движок. Планирую ещё несколько уроков по UI с фишками верстки.

[@xLampster]

Топ

[@KIBERTAIM]

Всегда ли так адаптивно верстают на годот ?

[@user-secretno]

А что делать если у тебя нету size flags в инспекторе нодов?

[@lol-et1fz]

Привет ))) Этот урок ведь понадобится не только для мобаильного приложения , но и для ПК ?

[@frontend-pashtet]

Привет. Да, ты прав. Просто пример из мобильной игры.

[@Alexey_Pe]

Моя история: осваивал html+css+другое(понравилось) => попробовал ue4 **мем Уолтер падает** осилил => перешёл на godot, снова *мем Уолтер падает*. Как понял в godot нет grid как в css. Не помню было ли это в ue4

[@frontend-pashtet]

Да, аналога css grid нет. Это вообще next level верстки. Его поймут через десятилетия. Если сравнивать с вэбом, то ближайший концептуальный аналог это flex-box. Лично я до сих пор его использую и не перешел на css grid. Поэтому, мне в целом заходит UI система Godot. Знатоки говорят, что авторы вдохновлялись QT или каким-то десктопным фреймворком для верстки UI (но это не точно).

[@mid0rfid]

Чтооо артем граф теперь делает игры?!

[@arik4787]

слушай, от всей души прошу, можешь запилить видосик по стайл неймингу в годоте? А то у всех всё по разному и я даже не знаю какую структуру папок делать и как всё это чудо называть потом

[@frontend-pashtet]

Привет. По структуре парок можешь посмотреть мой последний ролик про «Базу». Там немного этому внимание уделено. А по поводу нейминга переменных есть гайд на офф сайте docs.godotengine.org/en/stable/tutorials/scripting/gdscript/gdscript_styleguide.html

[@yl1ne]

А скажи пожалуйста какое ты взял начальное разрешение экрана?

[@frontend-pashtet]

Уже не помню точно, но для таких игр это либо 720х1080, либо 1080х1920 Вот тут в доке подробно про это docs.godotengine.org/en/stable/tutorials/rendering/multiple_resolutions.html

[@yl1ne]

Спасибо большое.@@frontend-pashtet

[@egopos]

👍

[@frontend-pashtet]

Комменты помогают. Спасибо!

[@egopos]

@@frontend-pashtet не за что

[@МихаилКрынков]

Это шикарно, наконец то кто-то раскрыл тему интерфейса на русском хотелось бы больше видео на эту тему, это одна из самых непонятных вещей в годо для меня

[@frontend-pashtet]

Думаю, я могу сделать несколько коротких уроков чисто кейсовых. Как сделать какой-то конкретный элемент.

[@МихаилКрынков]

@@frontend-pashtet я думаю это было бы очень кстати, так как на тему UI мало даже зарубежных уроков

[@MrGalyano]

Привет! Когда я грид контейнеру выставляю Shrink Center, то дочерние элементы не выставляются по центру как у тебя на видео, почему так?

[@frontend-pashtet]

Уф. Сложно так сказать. Я последнее время на Godot 4 работал. У меня все в голове перемешалось сейчас. Может сам контейнер недостаточно места занимает, чтобы сворачиваться в центр? Сложно ответить. Тут надо смотреть

[@MrGalyano]

@@frontend-pashtetу тебя вроде канал в дискорде есть? Если туда скину скрины сможешь глянуть?)

[@frontend-pashtet]

@@MrGalyano discord.gg/sbHnmUphMC

[@LKDmusic-gr1dj]

Кто нибудь значет дефолтные настройки этого проекта?

[@hellymad7768]

Привет, попробовал повторить шаг за шагом, и не понял как сделать так, чтобы шрифт тоже изменялся в размере, после масштабирования( Как это можно сделать? Или, иначе говоря элемент Label с текстом не масштабируется при уменьшении экрана((

[@hellymad7768]

@@arzu3272 спасибо тебе огромнейшее!

[@СергейБарбон-ь5й]

Prject settings->Winows->Strech-> Mode->viewport

[@alexalexandrov5514]

Мегахарош, отличный лаконичный формат. У меня достаточно большой опыт с годо UI, но не знал, что так можно классно использовать центрконтейнер.

[@frontend-pashtet]

Спасибо, Алекс. Центрконтейнер в каждый дом!

[@arhimedarhimedov6367]

Привет Паша )) У меня может быть и глупый , но всё-же вопрос , а почему не Юнити 🤨?))

[@frontend-pashtet]

Привет. Я Максим :) Пробовал Юнити в самом начале. Норм движок, но Годо мне просто показался удобным. В нем прям комфортно что-то делать. Все более менее логично и не перегружено. Обычно это называют DX - development experience. Вот Для меня Годо как раз предоставляет лучший DX, чем Юнити.

[@arhimedarhimedov6367]

@@frontend-pashtet Я думал раз тебя зовут Паштет , то значит твое имя Паша )))) Дело в том что я часто вижу как создают с помощью Годо мало-полигональные игры , в Годо есть проблемы с оптимизацией игр ?

[@frontend-pashtet]

@@arhimedarhimedov6367 да, с производительностью в 3д все не так хороши, как в Unity и Unreal. Осенью выйдет бетта версия Godot 4, там будут серьезные улучшения в этом направлении.

[@arhimedarhimedov6367]

@@frontend-pashtet Спасибо за ответ ))) Да , и кстати.... если что , я тот Хейтер lol ))) Проста перепрыгнул ради безопасности на второй Аккаунт ))) Тудуф-Ту-Тудуф !!! Тудуф-Ту-Тудуф !!! I'll be beck !)))

[@frontend-pashtet]

@@arhimedarhimedov6367 оу, Хейтер Лол. Привет) Буду знать теперь, что ты Архимед

[@JohnSmith-mr6wp]

Так и не сумел заставить работать интерфейс правильно. Даже простейший пример с раздвиганием 2-х кнопок на в одном горизонтальном контейнере не работает. В отдельной сцене интерфейса всё хорошо, а как добавляешь на главную сцену, то кнопки просто кучкуются слева

[@frontend-pashtet]

Жаль. Сложно сказать, что именно не так. Если хочешь обсудить это, то можешь в дискорд залететь. Там проще на такие темы общаться

[@artkor214]

Привет Паштет! Правильно ли понимаю, чтобы получить доступ к курсу в сентябре, мне нужно поддержать тебя на бусти?

[@frontend-pashtet]

Привет. Поддерживать на бусти не обязательно для получения доступа. Некоторые уровни поддержки там имеют доступ как бонус. Можешь подписаться бесплатно или в телеге добавится, чтобы анонс не пропустить.

[@Камушек-ф1к]

@@frontend-pashtet Бесплатный курс? Круто.

[@frontend-pashtet]

@@Камушек-ф1к курс будет платным

[@Камушек-ф1к]

@@frontend-pashtet ты меня запутал.

[@frontend-pashtet]

@@Камушек-ф1к на бусти есть бесплатная подписка. Некоторые посты там доступны бесплатно. С курсом это не связано. Просто для тех, кто поддерживает меня там на определенном уровне, я потом скину промокоды на курс (скидка или бесплатно).

[@aleksandrs8488]

Ооо! Это очень крутой формат! Это как посмотреть половину стрима с целью научиться и все равно почти ничего не понять) А здесь все четко и по полочкам. Спасибо! Но вопрос: почему тебя смущает способ разбиения анимаций по спрайтам, а вот, например, HBoxContainer не смущает, хотя он Horizontal, а вот состоит он из вертикальных элементов при всего одной горизонтальной линии?)

[@frontend-pashtet]

Спасибо за комментарий. Меня, если честно, эти контейнеры тоже постоянно путают) Я добавляют один, а потом постоянно меняю на другой, но иконки у них хорошие, по ним сразу все понятно. Видио, у меня какая-то инвертированная логика.

[@aleksandrs8488]

@@frontend-pashtet Да, иконки наглядные. Надо такие же подсказки чтобы были в редакторе анимаций

[@frontend-pashtet]

@@aleksandrs8488 было бы неплохо, если честно)