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

Рет қаралды 18,559

Жыл бұрын

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

Пікірлер: 89

@ritisir.t.s7232 9 ай бұрын

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

@user-qg8ry6kk1r Жыл бұрын

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

@frontend-pashtet Жыл бұрын

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

@popooppop Жыл бұрын

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

@danillinad5130 8 ай бұрын

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

@MRxRadex Жыл бұрын

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

@frontend-pashtet Жыл бұрын

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

@bloodik217 Жыл бұрын

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

@PRO1OO Жыл бұрын

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

@portweshockscontent4310 3 ай бұрын

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

@_1mrscool11_9 Жыл бұрын

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

@RokyTime Жыл бұрын

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

@frontend-pashtet Жыл бұрын

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

@RokyTime Жыл бұрын

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

@Makcimm85 4 ай бұрын

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

@nixaristix1819 Жыл бұрын

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

@frontend-pashtet Жыл бұрын

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

@toster8240 Жыл бұрын

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

@frontend-pashtet Жыл бұрын

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

@toster8240 Жыл бұрын

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

@doinkes7764 Жыл бұрын

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

@Chuchel-hh6hq Жыл бұрын

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

@frontend-pashtet Жыл бұрын

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

@Chuchel-hh6hq Жыл бұрын

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

@proandroidd2283 Жыл бұрын

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

@frontend-pashtet Жыл бұрын

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

@MrGalyano Жыл бұрын

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

@frontend-pashtet Жыл бұрын

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

@MrGalyano Жыл бұрын

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

@frontend-pashtet Жыл бұрын

@@MrGalyano discord.gg/sbHnmUphMC

@yl1ne 3 ай бұрын

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

@frontend-pashtet 3 ай бұрын

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

@yl1ne 3 ай бұрын

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

@xLampster Жыл бұрын

Топ

@user-mz6eq8oi5t Жыл бұрын

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

@frontend-pashtet Жыл бұрын

По таймингу

@user-pu9ud7qw3c Жыл бұрын

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

@vladyan01 Жыл бұрын

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

@frontend-pashtet Жыл бұрын

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

@vladyan01 Жыл бұрын

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

@valerijzykov5195 Жыл бұрын

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

@frontend-pashtet Жыл бұрын

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

@lol-et1fz Жыл бұрын

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

@frontend-pashtet Жыл бұрын

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

@KIBERTAIM 2 ай бұрын

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

@hellymad7768 Жыл бұрын

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

@hellymad7768 10 ай бұрын

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

@user-tj5fb4xq3q 3 ай бұрын

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

@kamilayza Жыл бұрын

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

@frontend-pashtet Жыл бұрын

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

@frontend-pashtet Жыл бұрын

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

@only8341 Жыл бұрын

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

@frontend-pashtet Жыл бұрын

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

@arik4787 7 ай бұрын

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

@frontend-pashtet 7 ай бұрын

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

@aleksandrs8488 Жыл бұрын

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

@frontend-pashtet Жыл бұрын

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

@aleksandrs8488 Жыл бұрын

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

@frontend-pashtet Жыл бұрын

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

@egopos Жыл бұрын

👍

@frontend-pashtet Жыл бұрын

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

@egopos Жыл бұрын

@@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 оу, Хейтер Лол. Привет) Буду знать теперь, что ты Архимед

@artkor214 Жыл бұрын

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

@frontend-pashtet Жыл бұрын

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

@user-pu9ud7qw3c Жыл бұрын

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

@frontend-pashtet Жыл бұрын

@@user-pu9ud7qw3c курс будет платным

@user-pu9ud7qw3c Жыл бұрын

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

@frontend-pashtet Жыл бұрын

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

@mid0rfid 3 ай бұрын

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

@Alexey_Pe Жыл бұрын

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

@frontend-pashtet Жыл бұрын

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

@alexalexandrov5514 Жыл бұрын

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

@frontend-pashtet Жыл бұрын

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

@JohnSmith-mr6wp Жыл бұрын

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

@frontend-pashtet Жыл бұрын

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

@user-pp5ol5zg3p Жыл бұрын

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

@frontend-pashtet Жыл бұрын

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

@user-pp5ol5zg3p Жыл бұрын

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