a hover active

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 кадрах. Тоись мне надо было сделать пять бесшовных текстур для каждого. После первого провала, каждую следующую текстуру я рисовала немного сдвигая и видоизменяя исходный узор, чтоб просматривалась последовательность движения той же самой водной массы. Это можно делать пластикой, но по итогу всё равно надо дорабатывать. Ну и конечно, каждый раз корректировать по трём сторонам узор (он расползается).

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

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

Нашёл полезную фичу

Дросте уважаемые пидоры.

Tiberian Sun Hover MLRS in GDI, NOD and Woodland Camouflage colour schemes.