Кубик Рубика, где вместо кубика – пентагональный гексеконтаэдр

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

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

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

И окончательное решение об участии я принял лишь в день отправки, когда игра уже была готова. До этого я вообще не был уверен и мог в принципе на середине пути просто остановиться, всё закрыть, и не возвращаться к этой миниработе никогда. А причин хватало, начиная от «Я всё равно не успею всё сделать» и заканчивая «Да кому эти поделки будут интересны». В конце концов джем длился всего 3 дня и это не был какой-нибудь проект мечты или труд всей жизни.

Но просидев две ночи подряд без сна за разработкой (чуть что, днём я тоже не спал), я посмотрел на результат и понял, что ….ну вообще-то теперь даже показать кому-то будет не стыдно.

Благодарю тебя, дорогой читатель, что перетерпел нудную часть статьи. Теперь перейдём к главному.

Представим, что мы в начале пути. Задача: сделать пентагональный гексеконтаэдр...

Его можно разделить на 12 одинаковых по форме пятилистников. Это будет геймплейная основа.

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

Да начнётся реализация.

Сначала создаётся один 2D лепесток, поскольку если даже он не получится – весь минипроект можно сразу удалять и забыть как страшный сон (мои реальные мысли на тот момент). Благо, найденные на скорую руку формулы из википедии оказались полезными и получился самый точный лепесток во вселенной.

Но а пока я размышляю, стоит ли называть статью «Как Википедия спасла видеоигровой проект от закрытия», переносим лепесток в 3D и делаем таких 60 штук. Затем применяем другую кучу формул, чтобы научиться строить пятилистник в пространстве и определяем позиции всех 12.

Итог: легкоманипулируемая кодом модель всей фигуры, где каждый лепесток - отдельный объект.

Вносим правки в модель самого лепестка, чтобы он не был плоским. Модель полностью создаётся кодом без 3D-редактора. От того можно было бы запариться и сделать профессиональный редактор лепестков, но время поджимало.

Разукрашиваем их разными цветами. Готовим текстуру и корректное наложение. Пишем шейдер. Осознаём возможности разнообразного визуального представления фигуры со своими акцентами. Пишем шейдер снова. Добавляем возможность вращения элементов. Пытаемся смириться с тем, что, так как математическая основа определения лепестков в пространстве вертится (ба-дум-тсс) вокруг пятилистников, вращение трёхлистников получится визуально некорректным. Пытаемся с этим что-то сделать. Выбираем из всех экспериментальных вариантов наименее идиотичный. Учим определять собранные пятилистники, подсвечивая их. Делаем генератор хаотичных движений для перемешивания лепестков. Готовим интерфейс. Рисуем фон. Добавляем детали. Продумываем лор. Прорабатываем сюжет. Прописываем диалоги. Сочиняем развязку.

Получаем практический шедевр.

Вышло довольно стремительно..

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

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

Отдельным вершинам моделей можно придавать индивидуальные цвета. А вершин тут много. Окрасим часть из них в белый цвет. И пропишем в шейдере затемнение по отклонению нормалей от "камеры".

Текстура. Нарисуем её таким образом, чтобы выделить границу пятилистника и её центр. А затем наложим на все лепестки одинаково, чтобы изображение получилось симметричным.

Наложенная текстура по всей фигуре изображена в начале статьи, уходите туда и возвращайтесь.

А вот теперь самое интересное. Разные цвета. Если просто заложить их конъюнкцией, получится не самое красивое и информативное изображение.

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

Но это слишком просто.

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

Я хотел сильнее выделить текстуру и её суть. Вы могли обратить внимание, что она напоминает хвою. Если вы в замешательстве – это потому что я не назвал тему джема: «Новый год в другом измерении». И здесь это не просто пятилистники, а разноцветные ёлки, которые надо правильно собрать. И соответственно надо, чтобы вся фигура выглядела как куча ёлок со звездой на макушке.

Добиться этого я решил такими действиями как: оставлять зелёные куски, там где это не помешает (у подножия); заставить сверкать висящие игрушки и звезду; пусть она вся сверкает, когда правильно собрана.

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

Спустя n-ное количество времени я остановился на алгоритме, который результировал следующее:

С учётом того, что "было описано ещё выше".

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

Я решил выделить время на то, чтобы составить несколько алгоритмов визуализации и все их добавил в игру.

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

В конечном итоге игра стала выглядеть примерно так:

Заранее не просто предугадать, какова будет сложность подобных игр. Самый простой способ это выяснить – сделать прототип и проверить на практике. …В итоге он оказался очень простым. Намного проще, чем кубик Рубика. И даже у людей, не интересующихся видеоиграми и подобными штуками, выполнение задачи занимало не более часа. Можно было бы провести глубокое исследование, но с учётом того, что игру нужно было разработать за 3 суток, можно было провести не более 72 тестов (по крайней мере одному человеку).

И да. Весь прошлый абзац (как и этот) существует лишь ради того, чтобы я снова напомнил о том, что вся эта работа делалась всего 3 дня.

А тема джема: "Новый год в другом измерении". И в воздухе резонно висит вопрос: а откуда в этой работе вообще взяться другому измерению?

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

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

Сложно самому судить на сколько хорошо или плохо вышло. Были области, которые мне не удалось сделать приемлемо, например звуки во время геймплея. Они делались второпях, поскольку не было много времени. Да и если честно, к тому моменту я уже устал и хотел спать. Зато итоговая работа вышла завершённой и я, конечно, показал её своим знакомым, чтобы они поделились, что они об этом думают. Им она вроде бы понравилась.