Balls&Walls — Эксперименты с векторной графикой

Векторная графика
Недавно я сделал прототип игры Balls&Walls, который мне очень понравился. И я подумал, что неплохо бы было довести его до полноценной игры, при этом сделав весь контент своими руками.

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

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

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

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

Так я наткнулся на доклад 2D Art Tools for Indies, где в самом начале рассказывают о том, как можно делать арт в векторе и какие есть плюсы у данного подхода, о многих из них я и не догадывался. Вдохновившись этим видео, я поставил себе редактор Inkscape и начал пробовать рисовать первые игровые элементы.

Цвета

Перед тем, как непосредственно начать рисовать, я потратил еще немного времени на подбор цветовой палитры. Для этого я воспользовался сайтом IN COLOR BALANCE, на котором нашел подходящую мне палитру с разноцветными конфетами.

cvetovaya-palitra-1712

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

Первый элемент — Свободная область

Прототип

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

Первый элемент в векторе

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

Добавляем сетку

После этого, «геометрическое» отображение пустого игрового поля меня удволетворило. В плане цветов мне не нравилась чрезмерная контрастность поля, хотелось его сделать более «прозрачным».

Прозрачность и акценты

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

Второй элемент — Мяч

Эксперементы с окружностью

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

Третий элемент — Стена

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

Первый вариант стены

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

Последние цвета в прототипе

Четвертый элемент — Опасная область

Опасная область

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

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

Вот и все

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

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

Поиграть в Balls&Walls с последней графикой

Stay tuned