LandLords

LandLords DevLog

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

(16.12.22)
Этот пост не будет длинным, и в нём я покажу то, что точно не реализуется в нашей игре, но в отрыве от контекста сделано хорошо) Кроме самой плашки меню, прицепленного к ней листа и базовой кнопы, я ведь ещё успела сделать баннер-название и баннер-вкладку. Ну и кнопочки-стрелки)

И то, и другое подчинено одинаковой логике: лента-"закладка" на открытом свитке) Светло-лиловый цвет ещё по начальным драфтам очевидно просился в акцентные, так как противостоит всем оттенкам базовой гаммы гексов в игре - там одни теплые, желтоватые либо натуральные тона. А золотая полоса смотрится на таком фоне по-королевски) 

В ширину они также масштабируются, как и кнопка, а в том, который вкладка, так ещё и иконки можно вписывать нужные, кроме надписей.

Из минусов отмечу, что получилось несколько чрезмерно выгнуто, задрано кверху. На этапе сборки я посмотрела, что ощущается небольшой зуд несоответствия наклона плоскостей, больше всего заметный на первой кнопке. Но да это не беда уже, поскольку спустя пару недель с начала отрисовки меня ОСЕНИЛО видение общих принципов стилистики так явно, как ни разу ещё до этого

В настоящий момент я уже активно отрисовываю новый набор UI элементов, во многом похожий на старый, но значительно усовершенствованный, хоть это может показаться не столь заметным с первого взгляда)

(19.12.22)
Итак - ТАДАААМ! - представляю новую КНОПОЧКУ! Она ещё блестящее, карамельнее и вкуснее предыдущей! Да, как и в прошлый раз, одна эта кнопка может по необходимости менять цвет (это программно), а также растягиваться по горизонтали - я уже попробовала, получается прямо настоящая конфета-карамелька!

Я уже рассказывала, как эти кнопки следует нарезать для того, чтоб позже программисты беспроблемно вставили их UI. Но не упомянула кое-что другое, тоже важное.

Кнопка - вещь динамическая. Она либо нажата, либо нет, как минимум. И пользователь должен это сразу понимать. Поэтому в базовом варике вы должны нарисовать не меньше ДВУХ модификаций одной и той же кнопочки, а в идеале 4:

- Idle. Это дефолтное обычное состояние. Она не нажата и над ней не висит ваш курсор.

- Hover. Вы занесли над кнопкой курсор, но пока не нажали, не активировали её. Вещь не смертельно необходимая, но защищает пользователя от случайного нажатия. Обычно в состоянии hover кнопка такая же по положению, как и в idle, но имеет подсветку.

- Active. Это нажатая, "вдавленная" по сравнению с предыдущими положениями кнопка. Тоже чаще всего с подсветкой.

- Disabled. Монохромная кнопка в положении idle, с которой ничего нельзя сделать - она недоступна. Используется в UI, где существуют какие-то опции, заблоченные до определённого уровня.

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

Нажатая в самом верху, потом hover и только потом idle)

13.01.23

Ну что ж, в 2023 мы планируем, ни много ни мало, а закончить наших Канализаторов. 

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

И моя отчётность в виде любых публичных девлогов - тоже неплохой такой стимул. Заставляет не лениться и двигать проект вперёд.

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

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

Так она легко режется на 8 частей - 4 типа угла и 4 типа "тела", однострочного выделения в пиксель для масштабируемой части. Срастается на раз-два!

Чего увы пока не скажешь про верхний баннер ыыы..

20.01.23

На этой неделе мы перешли к самому интересному (и к тому, с чего на мой взгляд и надо было начинать) - отрисовке гексов! Пока они в работе, у меня для вас оставшиеся элементы UI (из тех, что уже есть и работают).

Это МНОГОСТРАДАЛЬНЫЙ баннер-шильдик, позволяющий гулять по разделам меню. Он вынул у меня всю бля душу! Я переделывала его уже 6 раз! Понимаю, что это не предел, но в моём идеальном мире вся организация работы студии стремится к сокращению подобной необоснованной растраты трудочасов.

Поскольку я не собирала этих штук на Unity, не скажу, всё ли там то же самое, но в браузере такая хрень собирается так:

два края, левый-правый

однопиксельное "тело", которое без изменений можно хоть до Луны растянуть

"накладка" серединка.

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

Итак: высота PNGшки в пикселях должна быть равной для ВСЕХ частей. Максимальная она посредине. "Тело" не доходит ни до верхнего, ни до нижнего края холста. Левый и правый края имеют пустое пространство снизу. Поэтому резать лучше кропаньем одного целого файла. При этом хорошо бы соблюдать чётный размер в пикселях, а также чтоб левый и правый края были одинаковыми по ширине, а не только по высоте. И всё это ради того, чтоб одну кнопку/элемент можно было масштабировать под любую надпись, содержимое.

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

Красивая ассиметрия, которую хрен отмасштабируешь, особенные теньки или угол наклона... НО! Любой визуальный компонент = вес, который нужно загружать. И даже если представить, что каждый такой компонент весит 100Кб (конечно, это далеко не так), то:

1) масштабируемая кнопка, подходящая для 7 пунктов меню будет весить 400Кб (два края, тело, серединка)

2) 7 уникальных немасштабируемых кнопок будут весить 700Кб.

Даже в очень приблизительном подсчёте становится понятно, что уникальные визуальные компоненты сильно увеличат вес игры, а значит и время загрузки, время отклика, вообще ВСË.

Вот и приходится мучаться... Шильдик на локальной сборке меню чето так и не срастается. Причем когда я его составляю и сращиваю в PS, всё гуд. Видимо, Л. всё таки придётся разобраться с этим самому, поскольку косяк уже ТОЧНО не с моей стороны...

27.01.23

Всё то время, что я пока не устроилась, я посвящаю игре. И за прошедшую неделю удалось определиться и сверстать первый ГЕКС! А именно - безресурсный гекс воды, которая окружает остров) Почти сразу решили, что нужно сделать анимацию. А вот дальше пошло-поехало, да ещё и в разные стороны 

Моя первая идея была сделать такие накипающие и проходящие барашки волн. Это бы не затрагивало края гекса, ограничиваюсь анимацией на внутренней части. Но Л. нашёл пример "колеблющейся" воды с характерными "сотами". Идея мне показалась классной. Из обозримых трудностей было лишь то, что текстура должна была быть бесшовной (из обозримых на ПЕРВЫЙ взгляд)

Бесшовка делается не так уж сложно. Вы рисуете произвольный узор. Если это квадрат, то продублировав, подставляете копию сначала с одной стороны скажем справа, правите узор НА ОРИГИНАЛЬНОЙ КРАТИНКЕ, так чтоб он стыковался с копией. Потом эту копию подставляете со второй прилежащей стороны, допустим, снизу. Тоже правите узор на ОРИГИНАЛЕ. К остальным двум сторонам подставлять и править уже нет необходимости - вы согласовали эти дела на предыдущих шагах. Разве что для проверки себя.

В моём случае я подставляла и правила по трём сторонам (гекс всё же 6 сторон имеет). Срослось идеально! Но пришлось переделать, поскольку волны были слишком рандомные, тоись этот узор каждый раз был ну вообще не связан друг с другом. ПОТОМУ ЧТО АНИМАЦИЯ ЖЕ!

Мы для начала остановились на 5 кадрах. Тоись мне надо было сделать пять бесшовных текстур для каждого. После первого провала, каждую следующую текстуру я рисовала немного сдвигая и видоизменяя исходный узор, чтоб просматривалась последовательность движения той же самой водной массы. Это можно делать пластикой, но по итогу всё равно надо дорабатывать. Ну и конечно, каждый раз корректировать по трём сторонам узор (он расползается).

Результат вышел ВООБЩЕ КЛАССНЫЙ! НО.... но... Примерив на сборку, поняли, что он слишком крупный и етически рябит. У игроков скорее всего вытекут глаза ещё до второго хода. Но, прежде чем пойдём дальше, почтём эту прелестную анимацию) Вообще геймдэв это сплошной путь потерь и похорон, но без этого уж никак.

ссылка на гифку

LandLords DevLog

(Здесь и дальше я буду приводить числа, когда я делала эти записи прогресса, пока не нагоню настоящее положение дел. Поскольку не сразу и не всё было сделано по уму, сюда также попадут и всякие фейлы. Оставлю в качестве примера, как не надо)

14.11.22
Вощим) Мы решили запилить аналог КОЛОНИЗАТОРОВ, всем известной настолки CATAN, но только с небольшими дополнениями и спецификой, годной для реализации в онлайн-веб игре! Нам хватило одного раза поиграть в неё с друзьями, как сразу стало ясно: ВЕЩЬ СТОЯЩАЯ 

Первое, во что мы немедленно уткнулись - как это будет сделано? 3d? Но никто ж не умеет это сраное тридэ! Я сейчас вспоминаю, и мне аж стыдно то, как я упиралась, раздражалась и искала всеее возможные поводы НЕ использовать 3d. 

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

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

Смирившись с необходимостью подтянуть 3d, я взялась за стартовуб часть. Которую в самом начале тоже всрала, схватившись урывочно за какие-то отдельные элементы, без системы, без анализа... Как будто и не я проходила курс по созданию игровых проектов с нуля!

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

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

***

(25.11.22)
Уже две или даже три недели мы продолжаем работу над этим проектом.

И БОЖЕ как я заебэ за это короткое время! Я понимаю, что работа над реальным проектом вряд ли выглядит так стерильно и ровненько, как тот пайплайн, по которому мы работали на курсе. Всегда что-то идёт не по плану. Но, поскольку мы пробуем работать вместе как гейм-дев команда, при этом ни один из нас до этого в ГД компании не работал и не знает, как оно бывает, мы испытываем обильный СТРЕСС 

Л. со стороны программиста постоянно меняет основные цели и задачи визуала. Бери то, нет это, нет вообще другое! Но игра же должна иметь КАКОЕ-ТО ОБЩЕЕ СТИЛИСТИЧЕСКОЕ РЕШЕНИЕ. НЕЛЬЗЯ плясать стиль от кнопки! Чтоб нарисовать ХОТЬ ЧТО-ТО, нужно понимать, какой ОБЩИЙ ключ.

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

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

Но основы представления о том, что у нас происходит, всё же начали медленно вылепливаться в этом хаотичном процессе... Не знаю, насколько это плохой подход (остро ощущаю, что ТОЧНО не хороший, но что поделать...), и надеюсь только на то, что в дальнейшем не придётся всё перерисовывать с чистого листа (спойлер: ПРИДËТСЯ)

***

28.11.22

Сколько ни воняй, делу это обычно не помогает, а вот нервы вредит.

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

Да, всё получается не настолько однозначно и чисто, как в Skater Girl игре (проект можно посмотреть у меня на ArtStation), но ориентиры есть, они ясные, и осталось только воплотить этот магический синтез.

Если в двух словах, мы видим это такой няшной казуалкой. Уж очень обобщённо, да?

Ок, дизайнить персов решено в гуманоидном духе, но не ОДНОЗНАЧНО человеков. Такие, очень утрированные существа. Неодушевлённые предметы то тут то там получат личики. В целом ориентируемся на кавайную кругляшковость.

Кстати, для художника тут важно до начала работы составить борд референсов, причём НА ВСЕ элементы игры. Я, как и подавляющее большинство, делаю это на Pinterest. Референсы на элементы меню, его вёрстку, то, как выглядит трава-пенёк-облачко и тд. Причём не обязательно, чтоб все эти референсы были из одной игры или даже одного сеттинга. Искусство подбора рефов - это отдельное мастерство)

В настоящее время обдумываем план, как рисовать гексы с тем, чтоб там оставалось место на размещение дороги, реки, поселения. И алгоритм размещения 6-ок и 8-ок НЕ рядом 

Ещё одна полезная штука: на начальных этапах хорошо бы поискать какие-то похожие проекты. Нам удалось найти не просто похожие, а буквально самих Колонизаторов с таким же названием. Только вот выпущены они не от имени фирмы-правообладателя. Но это меньшее из зол. На свою беду (и нашу радость) игра очень уёбищная. Визуал видимо хотели вывести в 3d, но это получилось топорно и уродски, на каких-то супер-lowpoly моделях. Это вновь заставило задуматься, стоит ли его вообще использовать… Насчёт продуманности меню не знаю, но даже уродский визуал - это не худшее из бед.

Самое важное это то, что игроки проклинают разрабов на основании целого списка вещей. Лаги, ублюдошный просчёт длительности хода, невозможность играть коллективно, много-много-много всего и наконец то, что у игры нет никакой поддержки. Её не будут патчить, править, что угодно. На гнев пользователей никто не реагирует. Этот полуфабрикат кто-то сделал и метнул уродца в воду, на волю волн, тэкскэть.

Вощим, на почве всех этих отзывов у нас есть довольно обширный фидбэк на чужие ошибки, которые мы может постараться обойти, при этом не наступая на грабли предыдущих разрабов. Так что, как бы убого не была сделана игра, ребят, спасибо! Помогли нам, идущим вашей тропой )

***

2.12.22

Рисовать меню я начала - с чего бы вы думали? - с кнопки! Да, я, после того, как все мои попытки начать "по уму" были саботированы, потыкалась в бэкграунды, в промо, но по итогу сошлись на том, что элементы базового UI на старте - самое актуальное. Л. как раз пилит логинку и старт игры, поэтому все решения можно будет тут же и проверить.

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

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

Как это делается:

- мы рисуем какую-то условную небольшую ширину. Я решила дизайнить все базовые кнопки (кроме фигурных стрелочек) под гексы

- потом мы "режем" в фотошопе эту кнопку на части: левая, правая и "тело". Причём это тело состоит из выделения в ОДИН пиксель.

- Позже, программно растягивая этот пиксель в длину (или ширину, зависит от, так сказать) мы получаем все необходимые кнопки в едином ключе и без лишних запар. Прогерам она отправляется именно в этих трёх PNGшках - лево, право, тело.

Ниже пример того, как я искала стиль идеальной кнопочки)))

***

5.12.22

После кнопок я перешла к другому важному и базовому элементу меню - собственно, подложке, на которой все эти кнопочки-тогглы-иконки и прочее будут расположены. В сыром виде мы пока решили называть игру не Колонизаторы - уж слишком в лоб, да и не совсем правда - а LandLords, что-то типа "Феодалы". Я просто отсюда и далее буду называть этот проект именно LandLords, чтоб не путать ни себя, ни вас)

Так вот, поскольку вся эта феодальная-земельная чепуха напрямую отсылает нас в какое-то средневековье, то логично было б и материалы, а также оформление использовать не выбивающееся из этой логики. Плашку решено было сделать ДЕРЕВЯННОЙ, оригинально, да?

По уму было б хорошо сразу понимать, какая у меню будет структура. Но пока это до сих пор плавающий момент... В итоге я сделала некую ОБОБЩËННУЮ плашку. Её разрешения хватит для умеренного масштабирования. А также её можно, как и кнопку, бесконечно и без видимых потерь растягивать в ширину. Самые отличительные моменты у неё - это углы. Остальное поле довольно монотонное.

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

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

12.12.22

Карочииии, посмотрите на эту красивую панельку и попрощайтесь с ней. Поскольку ей на смену придёт другая.  И вот почему.

В предыдущий раз я говорила о проблеме подстраивания UI элементов в браузере. Особенность браузерной игры такова, что кроме того, что её можно открыть на любом устройстве - пк, планшет, мобила - экран, если он не ограничен каким-то окном, можно скроллить вниз до посинения. В случае со сложным меню, это меню получается реально ДЛИННЫМ.

В чём проблема с нарисованным? Оно отлично масштабируется в ширину. При этом виде растягивания на затрагивается текстура деревяшки, поэтому всё ок. Но вот вертикально...

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

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

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

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

LandLords DevLog

Начну издалека. Этот и следующие посты я хочу посвятить разработке инди-игр буквально с нуля до такого финала, в который можно поиграть. Игра, о которой пойдёт речь, как раз находится в разработке. Поэтому те, кому будет интересно, смогут практически в реальном времени наблюдать за успехами, падениями, сложностями. Возможно даже, кого-то это вдохновит на создание чего-то подобного.

Краткое предисловие: я уже больше года ищу постоянное место работы в геймдэве. После событий февраля ’22 года индустрия испытывает кризис. Об этом говорят сами люди, которые в ней работают на ведущих позициях. Большая часть классных компаний релоцировалась, в стране остались в основном аутсорсинговые студии, где текучка нещадная и на творческие начинания всем пох. Либо инди-студии. Требования чрезвычайно высокие даже для джунов, при том, что з/п предлагаются мягко говоря скромные. Безрыбье. Это пройдёт, как и любой кризис.

Но во-первых, не хочется сидеть без дела, во-вторых, любой проект - это пополнение портфолио. Ну а в-третьих, есть ОЧЕНЬ сильное желание и попробовать силы в полном цикле, и создавать что-то, во что и самой было бы приятно играть, и за что не было бы мучительно стыдно (как за заполонивший рынок безвкусный казуал).

Сразу скажу, что казуальная стилистика МОЖЕТ быть ПОТРЯСАЮЩЕЙ. Например, все мультфильмы Disney Pixar это яркие примеры очень красивого, гармоничного казуального стиля. Но часто, когда в основу ложится прибыль, издатели пытаются брать не качеством, а количеством. Производство становится поточным, а стиль превращается в унылое, несмотря на безобразную пестроту, г.

*Казуальная графика – один из художественных стилей игрового арта. Ее можно сравнить с мультяшным или игрушечным стилем. Рисуя в казуальной графике, мы отбрасываем лишние детали, а те, что остались, укрупняем, и таким образом создаем яркий запоминающийся образ.*

Итак, на начало осени 2022 у нас на руках ворох прекрасных идей разной степени проработанности, неполная команда под реализацию этих дел, и фундаментальный вопрос "С ЧЕГО ЖЕ НАЧИНАТЬ?!"

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

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

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

 Снова последовал сосредоточенный брейншторм того, что же ЭТО будет. Пришли к простому и ясному выводу:

…Но увы, часть людей, готовых к делу сначала, поотваливалась по своим делам, и нас осталось только ДВОЕ. Программист и художник.

to be continued