Кужéля | Game UI/UX
607 subscribers
466 photos
24 videos
15 files
144 links
Привет! Меня зовут Кристина и я геймдев UI/UX художник
Тут про интерфейсы в играх, дизайн и геймдев изнутри
💌 Для связи – @cujel
Download Telegram
Продолжаю хвастаться и немного хвалиться

Сегодня показываю вам звездатый прогресс игрока! 🌟

Основой механики является шкала прогресса, при достижении определённых этапов которой игрок получает награды. Здесь представлены не все состояния интерфейса, а только основные!

Плюс решила показать, как собран фон для такого окна – чтобы и место в атласе сохранить и задобрить программистов. Фон состоит из градиента и двух текстур — волн и звёзд. Такое решение было выбрано специально: во время прокрутки эти элементы движутся с разной скоростью, создавая эффект параллакса и получается кра-со-та 🤩

🔵 Публикация на артстейшн

#арт
Please open Telegram to view this post
VIEW IN TELEGRAM
Please open Telegram to view this post
VIEW IN TELEGRAM
311472
Выловила своего супер-коллегу нереального крутого программиста Пашу и позадавала ему вопросы! Обсудили с Пашей совместную работу двух полярно разных отделов, его програмистские мечты и напутствия для UI/UX художников

1. Как выглядит для тебя идеальный UI/UX-художник?
Который представляет как в итоге нарезанный макет будет вставлен в игру. Который больше думает о функционале, чем о красивостях.


2. Что ты хотел бы, чтобы каждый UI/UX-художник понимал о разработке?
Понимал что:
– чем меньше картинка - тем лучше
– новые экраны надо стараться собирать из существующих спрайтов
– за частую часть спрайта можно вырезать и выкинуть, и взамен этого растянуть его
– все что можно сделать белым и красить - нужно делать белым
– спрайты которые лежат в атласах из из которых собирается финальный "элемент", должны быть максимально мелкими и разрезанными (для реюза) А иконка оффера или чего-то загружаемого - быть цельной
– меньше альфы - крепче спишь


3. Стоит ли UI/UX-художнику изучать основы программирования? Если да, то насколько глубоко?
Программирование вряд ли. А вот изучить движок и принципы верстки в нем - полезно.
Сама по себе верстка в Unity почти никак не связана с программированием, но принципы работы с:
– атласами
– canvas
– layout
– drawcall и batching
– как рендерится спрайт simple/sliced/tiled
и тд лишними не будут


4. Какие ошибки в подготовке ассетов ты встречаешь чаще всего?
1) Слишком большой размер, часто можно или просто уменьшить или обрезать спрайт
Если это цельная картинка, например фон - я просто меняю размер в Unity.
Если спрайт в атласе - приходится править через художника

2) Часто текст или спрайт который должен стоять по середине контента смещен на 1-10 "пикселей"
Я просто забиваю и центрирую

3) Красивости ради красивостей, иногда так или иная завитушка будет еле видна на экране телефона, а для нее используется отдельный спрайт
Тут все индивидуально, или обсуждаем и убираем, или оставляем

4) Разные отступы между буквами и строками в текстах
До сих пор не понял прикола, обычно подгоняю под макет, мне не сложно. Но в 30% текста отступы отличаются от стандартных


5. Что сегодня сложнее всего реализовать в игровых интерфейсах?
– Паралакс
– Карусели и скролы,
– Прогрессбары
– Контент с динамическим размером, часто на "средних" размерах все ок, а когда ширина/высота становится слишком большой или маленькой вылазят артефакты.


6. Сколько времени на самом деле занимает реализация «одной простой кнопки»?
Если это простая кнопка - 1 минута
Создать в Unity GameObject Button и повесить на нее спрайт.
А дальше зависит сколько у этой кнопки слоев, рамок, теней, разных цветовых состояний. Доп иконок у текста, нотификаций "что-то новое" и тд


7. Если бы ты мог дать UI/UX-художникам всего один совет, какой бы он был?
Делай хорошо, плохо не делай )))
А если серьезно, стараться представлять как макет будет выглядеть по итогу в игре (с учетом разного контента, размеров экранов и тд)


8. Когда вы (програмисты) будете довольны? (спец-вопрос)
Когда интерфейс будет состоять из 2х белых спрайтов (круг и квадрат)


Кто следующий?))
25855
Ребята, привет 👋

Сегодня должен был быть стрим в 17:00 Мск

Его не будет! Причина: я сопля, не спала всю ночь — кажется, я отравилась оливками 😐

Поэтому перенесем стрим на 31.07 в 19:30 мск

Напоминаю, что интересующие вас вопросы можно задать тут: https://forms.gle/G1fkzPVN1QBcgdFE6

😘
Please open Telegram to view this post
VIEW IN TELEGRAM
11622

На прошлой неделе прошли с мужем Hollow Knight и я поняла, почему у этой игры так много фанатов (я теперь одна из них)

Атмосферно и красиво буквально ВСЁ: начиная от саундтреков и звуковых эффектов заканчивая необычайно богатым и глубоким лором. Левелдизайнеру руки целую – это надо же было сделать такие замудренные уровни, которые пройти можно только с божью помощью

Артовая составляющая 10/10 – персонажи, локации, предметы, интерфейсы, всё проработанно на таком восхитительном уровне, что хочется плакать от того как это красиво

И вот, знаете, никогда не было у меня большого желания заиметь печатный артбук по какой-либо игре, но тут всё поменялось

Пока довольствуюсь только электронной версией и делюсь ею с вами! Потому что красотой надо делится

😄
Please open Telegram to view this post
VIEW IN TELEGRAM
13842🔥1
Hollow Knight — Wanderer's Journal.pdf
455.2 MB
Артбук Hollow Knight — Wanderer's Journal 🐛

#полезное #книги
Please open Telegram to view this post
VIEW IN TELEGRAM
16322
Ребята, всех жду сегодня на своём стриме в 19:30 Мск!

У вас всё еще есть шанс задать мне вопрос, если вы этого еще не сделали: https://forms.gle/G1fkzPVN1QBcgdFE6

📹📹📹 Мой твич: https://www.twitch.tv/cujelya 📹📹📹
Please open Telegram to view this post
VIEW IN TELEGRAM
43🔥2🥰2
короче вот и настримились, комп лёг
пытаюсь реанимировать


ПО ИТОГУ:
ОБС и мак не вывозят от слова совсем, буду пытаться решать проблему 🙏
Please open Telegram to view this post
VIEW IN TELEGRAM
🥴144
Ребята, я вас наверное утомила, НО!

Сегодня запущу тестовый игровой (!) стрим, теста ради, посмотреть как всё работает

Играть будем в «Жизнь и страдания господина Бранте»

19:30 мск на https://www.twitch.tv/cujelya

Если кому интересно - залетайте! Буду всем рада ❤️❤️❤️

P.S. Стрим с ответами на вопросы сделаем попозже, сейчас главное убедиться, что я всё нормально настроила и всё работает стабильно



🌂🌂🌂🌂🌂🌂 запись стрима сохранилась на Твиче! Всем спасибо, кто пришел
Please open Telegram to view this post
VIEW IN TELEGRAM
🔥157😍5
Вот и настал тот день, когда я села разбираться с Unity

А если конкретно, то с приницпами вёрстки интерфейсов в этом движке. Меня вдохновили слова моего коллеги Паши, да и в целом уже пора. Требования к сециалистам меняются, в вакансиях то тут, то там пишут "знакомство с юнити будет большим плюсом". Ну, значит, точно пора. ИИ вроде как освоили, фигму тоже

Честно, с возрастом ой как страшно и лениво разбираться в новых программках, приходится себя пересиливать. Но как и в любом деле – самое главное начать. Так я разобралась пока с самым базовым – настройкой сценой, канвас, камерой, префабами. Параллельно мучаю своих программистов, но не сильно 😊

Вот видео, по которым я разбиралась:
🟣 ИЗУЧЕНИЕ UNITY | ВВЕДЕНИЕ В ВЕРСТКУ от learn-unity

🟣 ИЗУЧЕНИЕ UNITY | ТЕКСТ НА КАНВАСЕ от learn-unity

🟣 Пользовательский интерфейс (UI) в Unity | Базовые знания | Юнити 2025 от ProFusionLabs

🟣 РАБОТАЙ С ТЕКСТОМ В UNITY ПРАВИЛЬНО! Лучшие практики работы с текстом в Unity! от Яковлев Илья - IT и игры

🟣 Unity Prefabs - The Complete Animated Guide | Game Dev Classroom от Lost Relic Games (на английском)

Как-то так и живём, если вы тоже хотели начать познавать UI в юнити – то вот он ваш знак, пора! 💗

#юнити #полезное
Please open Telegram to view this post
VIEW IN TELEGRAM
27442
Агент 00-ИИ

⚠️ Внимание! ИИ-ворнинг! Если вас триггерит тема ии, то дальше лучше не читать ⚠️

В прошедшую пятницу рассказывала своим коллегам о моём опыте работы с "самописным" ии-агентом на базе ChatGPT. Я сделала себе агента для помощи в рабочих задачках и "развлекалась" с ним на протяжении двух месяцев. Вот к чему я пришла:

Во-первых, оказалось, что "написать" свеого ИИ-агента вовсе не сложно. Даже если вы не знаете, какие задачки вам нужно ему делегировать, то можете просто у него спросить, так поступила и я:
Я UI/UX художник в мобильном геймдеве, который большую часть врмени работает в RnD отделе и честно говоря, не до конца понимаю чем ты можешь мне помочь. У меня сейчас есть задачка <...>, сама генерация картинок в чат GPT работает не совсем как мне надо – кроме нужных элементов меняются еще и другие, те, которые менять не надо было. Ты как-то можешь помочь мне решить эту проблему?


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

Во-вторых, качество генераций и "понимания" гораздо выше, чем в диалоге с "обычным" чатом. После обучения агент действительно становится умнее в разы, чем обычный чат. Это и понятно, так как генерации начинают работать чуть более предсказуемыми и в случае чего, ты всегда можешь его попросить прошерстить контекст/перечитать диалог и поправить свои ошибки.

В-третьих, скорость генераций стала дольше. На одну и ту же задачку у обычного чата уходило примерно 1 минута, у моего ии-агента эта же задачка занимает 4 минуты. Но результат, как я писала выше, куда качественнее.

Однозначно ии-агент это крутой инструмент в работе, помогающий увеличить скорость разработки в разы. Но всё же материал выходит "сырой", поэтому нет-нет, а ручками всё нужно доводить до качественного и красивого финала 👍
Please open Telegram to view this post
VIEW IN TELEGRAM
14931
в пятницу (эту) СТРИМ!! (честно-честно!) Отвечу на ваши вопросы (наконец-то!)

📹📹📹 14 августа в 19:15 мск буду ждать вас на своём твич канале 📹📹📹

Картинка для привлечения внимания 😊
Please open Telegram to view this post
VIEW IN TELEGRAM
10621
Кужéля | Game UI/UX
в пятницу (эту) СТРИМ!! (честно-честно!) Отвечу на ваши вопросы (наконец-то!) 📹📹📹 14 августа в 19:15 мск буду ждать вас на своём твич канале 📹📹📹 Картинка для привлечения внимания 😊
Всех жду!!
Стартуем в течение 10 минут!

https://www.twitch.tv/cujelya

⭐️⭐️⭐️⭐️⭐️
Всем спасибо, кто пришел!

Часть с ответами на вопросы нарежу и залью сюда на следующей неделе!

Что касается хоррора я в ауте (орала много) 🥲
Please open Telegram to view this post
VIEW IN TELEGRAM
6431
Media is too big
VIEW IN TELEGRAM
🐰 Отвечаю на ваши вопросы!

Нарезала первую часть стрима (сначала около-рабочие вопросы, затем просто жизненные), таймкоды:

🔵Если бы не геймдев, то где бы я работала? (00:00 – 3:32)
🔵Можно ли стать хорошим UI художником, если не умеешь рисовать? (3:32 – 6:30)
🔵Стоить ли тратить время на Unity UI/UX художнику? (6:30 – 8:13)
🔵Как справляться с токсичностью в отделе? (8:13 – 11:23)
🔵Курсы по UI/UX дизайну (11:23 – 16:50)
🔵Мои советы для начинающих UI/UX художников: с чего начать? (16:50 – 22:17)

🟣Почему я такая крутая? 😛 (22:18 – 22:49)
🟣Рассуждения на тему Pintrest VS Huaban (22:50 – 26:27)
🍕 Почему пицца с ананасами топ и вы должны это принять (26:28 – 34:57)

Мои предыдущие нарезки со стримов:

🔜 ЗАПИСЬ СТРИМА ЧАСТЬ 1
➡️ ЗАПИСЬ СТРИМА ЧАСТЬ 2
🔜 ЗАПИСЬ СТРИМА ЧАСТЬ 3

‼️ Если у вас не грузится видео в тг, то можно посмотреть на гугл-диске вот тут

#стрим #полезное

p.s. полный неотцензуренный стрим лежит на моём твиче! там ответы на вопросы + геймплееим в Photomaly
Please open Telegram to view this post
VIEW IN TELEGRAM
14106
🤓 Снова в школу на курсы

Август подходит к концу, а вместе с тем наступает пора учебы. Не знаю как у вас, а у меня сентябрь – это новая отправная точка для всяких курсов, обучений, изучения чего-то нового. И вот в последнее время всё чаще мне задают вопрос: а какие курсы по игровому UI/UX ты можешь посоветовать? Поэтому решила собрать для вас все доступные курсы на данный момент (на русском языке)!

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


🫖«Дизайн игровых интерфейсов» от CG LAB

🫖«Figma для дизайна игровых интерфейсов» от CG LAB (бесплатно!)

🫖«Дизайн игровых интерфейсов UI/UX» от Fungi Studio

🫖«UX/UI Designer in Gamedev» от независимой группы профессионалов

🫖«Курс дизайн игровых интерфейсов (UI/UX)» от 3DRAY STUDIO

🫖«Основы игровых интерфейсов» от ArtNest

🫖«UI-дизайн для игр» от Smirnov School

🫖«Художник игровых интерфейсов» от Grafit Academy

🫖«Художник игровых интерфейсов» от Redby

🫖«Анимация интерфейса в Spine» от Animation School (бонус!)

#полезное #курсы
Please open Telegram to view this post
VIEW IN TELEGRAM
🔥167❤‍🔥3🥰3
Курсы по игровому UI/UX на английском языке! 🇬🇧

Честно, проресерчила и была в шоке, как много годноты на первый взгляд! Среди собранных мной курсов есть как чисто курс по игровому UX (!), так и курс для мидл+, сеньоров (!!) Пару курсов записала себе уже в планы на обучение на следующий год хе-хе-хе 🙂

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


🫖«UI/UX for Game Design» от Zenva

🫖«UI/UX Design for Games» от Vessel Forge (менторшип!)

🫖«UX/UI for Gaming» от ELVTR

🫖«Advanced UX/UI for Gaming» от ELVTR

🫖«Game UX Design» от независимой группы профессионалов

🫖«The UI Peeps 14-Week Masterclass» от STEPHAN DUBE

🫖«User Interface in Games» от EpicGames (coursera)

🫖Курсы по UI/UX в геймдеве на русском языке вот тут 🫖

#полезное #курсы
Please open Telegram to view this post
VIEW IN TELEGRAM
1064
Грейд: Сеньор

Вот вы научились рисовать, и делаете это довольно неплохо, понимаете и разбираетесь в базовых принципах проектирования интерфейсов – делаете важные кнопки заметными, создаёте визуальную иерархию и тд и тп. А что дальше? Как перешагнуть на новый уровень и стать еще круче?

1️⃣Читайте-читайте-читайте! И не ограничивайтесь только книгами, читайте статьи коллег по цеху – как связанных с геймдевом, так и с дизайном продуктовых интерфейсов. Вы и представить не можете какой это огромный кладезь информации. Особенно ценные статьи про чьи-то факапы – на ошибках учатся, а на чужих ошибках делать это гораздо приятнее, чем на своих собственных.

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

3️⃣ Играйте и перенимайте лучшие или интересные решения. Игры можно не любить, но следить за трендами и "модой" очень нужно. Сделайте себе отдельную папку на компьютере и складывайте туда то, что вас зацепило – необычный дизайн магазина или любопытное решение какой-то UX задачи. Так вы не только развиваете насмотренность, но и подготавливаете себе определенную базу для апгрейда ваших собственных интерфейсов.

4️⃣ Выработайте навык самообучения. Сейчас индустрию шатает, а конкуренция становится всё больше и больше. Не обрастайте мхом, следите за новым ПО, изучайте смежные области – тот же Unity, например, ковыряйте анимацию интерфейсов. В вакансиях всё чаще ищут универсального специалиста, это грустно, но таковы реалии, нам остаётся только под них подстраиваться.

Картинка ради ментального исцеления в эту пятницу 💙
Please open Telegram to view this post
VIEW IN TELEGRAM
1166