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

Подписаться 75 тыс.

Просмотров 21 тыс.

50% 1

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

Опубликовано:

28 сен 2024

Ссылка:

Скачать:

Готовим ссылку...

Добавить в:

Мой плейлист

Посмотреть позже

Комментарии : 95

@ДмитрийСысуев-т7й 2 года назад

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

@frontend-pashtet 2 года назад

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

@MRxRadex Год назад

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

@frontend-pashtet Год назад

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

@stanislavgranovskiy4111 Месяц назад

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

@doinkes7764 2 года назад

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

@popooppop Год назад

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

@bloodik217 2 года назад

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

@vladyan01 2 года назад

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

@frontend-pashtet 2 года назад

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

@vladyan01 2 года назад

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

@RokyTime 2 года назад

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

@frontend-pashtet 2 года назад

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

@RokyTime 2 года назад

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

@Makcimm85 8 месяцев назад

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

@_1mrscool11_9 2 года назад

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

@KIBERTAIM 6 месяцев назад

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

@user-secretno Месяц назад

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

@nixaristix1819 Год назад

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

@frontend-pashtet Год назад

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

@only8341 2 года назад

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

@frontend-pashtet 2 года назад

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

@Chuchel-hh6hq 2 года назад

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

@frontend-pashtet 2 года назад

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

@Chuchel-hh6hq 2 года назад

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

@xLampster 2 года назад

Топ

@portweshockscontent4310 7 месяцев назад

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

@ars_7085 3 месяца назад

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

@danillinad5130 Год назад

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

@toster8240 2 года назад

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

@frontend-pashtet 2 года назад

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

@toster8240 2 года назад

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

@yl1ne 7 месяцев назад

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

@frontend-pashtet 7 месяцев назад

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

@yl1ne 7 месяцев назад

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

@mid0rfid 7 месяцев назад

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

@LKDmusic-gr1dj Месяц назад

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

@hellymad7768 Год назад

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

@hellymad7768 Год назад

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

@СергейБарбон-ь5й 7 месяцев назад

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

@Alexey_Pe Год назад

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

@frontend-pashtet Год назад

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

@JohnSmith-mr6wp Год назад

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

@frontend-pashtet Год назад

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

@Vasilii_Shtyrov Месяц назад

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

@frontend-pashtet Месяц назад

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

@PRO1OO Год назад

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

@egopos 2 года назад

👍

@frontend-pashtet 2 года назад

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

@egopos 2 года назад

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

@kamilayza 2 года назад

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

@frontend-pashtet 2 года назад

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

@frontend-pashtet 2 года назад

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

@lol-et1fz 2 года назад

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

@frontend-pashtet 2 года назад

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

@ritisir.t.s7232 Год назад

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

@proandroidd2283 2 года назад

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

@frontend-pashtet 2 года назад

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

@arik4787 11 месяцев назад

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

@frontend-pashtet 11 месяцев назад

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

@MrGalyano Год назад

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

@frontend-pashtet Год назад

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

@MrGalyano Год назад

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

@frontend-pashtet Год назад

@@MrGalyano discord.gg/sbHnmUphMC

@ОлегЛукин-д5ф 2 года назад

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

@frontend-pashtet 2 года назад

По таймингу

@Камушек-ф1к 2 года назад

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

@arhimedarhimedov6367 2 года назад

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

@frontend-pashtet 2 года назад

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

@arhimedarhimedov6367 2 года назад

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

@frontend-pashtet 2 года назад

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

@arhimedarhimedov6367 2 года назад

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

@frontend-pashtet 2 года назад

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

@МихаилКрынков 2 года назад

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

@frontend-pashtet 2 года назад

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

@МихаилКрынков 2 года назад

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

@zykov.v.r 2 года назад

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

@frontend-pashtet 2 года назад

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

@aleksandrs8488 2 года назад

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

@frontend-pashtet 2 года назад

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

@aleksandrs8488 2 года назад

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

@frontend-pashtet 2 года назад

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

@alexalexandrov5514 2 года назад

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

@frontend-pashtet 2 года назад

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

@artkor214 2 года назад

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

@frontend-pashtet 2 года назад

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

@Камушек-ф1к 2 года назад

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

@frontend-pashtet 2 года назад

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

@Камушек-ф1к 2 года назад

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

@frontend-pashtet 2 года назад

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