Fukami, ч. 1.1: Приводим сцену к теме проекта

в 21:33, , рубрики: fukami, game development, indie game, inkscape, unity3d, арт, векторная графика, игростроение, сцена, тентакли, тентаклинг, фукамизация, метки: , , , , , , , , , ,

Здравствуйте!

Fukami, ч. 1.1: Приводим сцену к теме проекта

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

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

Инструменты

В качестве основной рабочей станции используется PC с ОС Ubuntu 13.10. Для работы над графикой используются GIMP и Inkscape в связке с графическим планшетом Wacom Bamboo Pen & Touch. В Ubuntu из коробочки есть поддержка Wacom, правда настраивать кнопки приходится через консоль (инструкции есть в сети, так что не проблема).
Также на базе Ubuntu планируется наладить работу со звуком и видео. В частности для записи видео для данной статьи использовалась программа Record My Desktop, включенная в репозиторий Ubuntu. Звук для последнего демо писал со стерео-миксера с помощью Audacity. Видео в формате OGV и записанный звук сводил в OpenShot Video Editor. Экспортировал видео в формат OGG Theora, т.к. упомянутый редактор почему-то отказался видеть установленную в системе libx264. Но OGG Theora принимается Youtube без особых проблем.
Для работы с Unity3D пока (я надеюсь пока) приходится использовать станцию с Windows (ноутбук). Пробовал запустить редактор под Wine согласно инструкциям с Ask Ubuntu — не завелось (не удалось инициализировать службу лицензии).
Ubuntu One (облачное хранилище от Canonical, если кто не знает) использую для обмена данными между рабочими станциями. BtSync, видимо из-за проблем с файерволлом, сразу не завелся (разбираться пока некогда). Возможно, перейду на него в будущем.

На Ubuntu One создан каталог со сборками демо. Если кому интересно, присылайте email адреса, зарегистрированные в Ubuntu One, я в ответ вышлю инвайт к этому каталогу. Там буду стараться выкладывать сборки как минимум для Windows и Linux. На Mac протестировать не смогу, а на Android попробую в будущем.

Inkscape

Начну, пожалуй, с того, как я перерисовывал спрайт ядра. Использовал для этого так называемый метод "Дралоскопирования". Берется за образец некая фигурка оригами (наподобие вот таких) и импортируется в векторный рисунок как подложка.
Fukami, ч. 1.1: Приводим сцену к теме проекта

По подложке создается черновик векторного скелета (wireframe). Сразу включайте примагничивание ввода узлов к уже имеющимся, чтобы контуры получались замкнутыми, т.к. потом нам нужно будет их заливать.
Fukami, ч. 1.1: Приводим сцену к теме проекта

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

Использовался инструмент заливки (Fill bounded area). Он заливает полигон выбранным цветом (в данном случае 70% серого) и добавляет чуть более темную окантовку на границе между заливкой и бордюром полигона. Заливайте полигоны при одном и том же масштабе экрана, т.к. толщина окантовки заливки зависит от масштаба. Яркость выбранной заливки полигона удобно регулируется прозрачностью заливки (ПКМ на заливке -> Fill and Strokes -> Вкладка Fill).
Fukami, ч. 1.1: Приводим сцену к теме проекта

Для создания атласа спрайтов сцены также использовался Inkscape. Сначала рисовалась сцена:
Fukami, ч. 1.1: Приводим сцену к теме проекта
Потом части ее раскидывались по канве и экспортировались в PNG.

Для экспериментальных облаков с полосатой заливкой использовался инструмент Objects to Pattern в Inkscape.

Для создания окантовки деревьев фонового ландшафта использовал инструмент Outset в Inkscape.

Честная 3D перспектива

Скриптовый параллакс, реализованный в 2D демо-проекте от Unity3d, использует масштабирование для эмуляции удаления объекта от камеры. Это лишняя вычислительная нагрузка. Поэтому было решено отказаться от него и просто разнести фоновые слои по Z-оси. Сменив режим главной камеры с ортогонального на перспективный я получил честный параллакс для фоновых слоев и побочный эффект для спрайтов аватара и ракет. В демо проекте от Unity3D части тела аватара и ракет уже были разнесены по Z-оси. В ортогональном режиме камеры этого не было видно. Также и вся анимация персонажа, NPC и ракет тоже завязана на Z-координаты частей. Пришлось все переправлять заменой на ноль Z-координаты в анимационных кадрах. Структура полученной сцены представлена на анимации ниже.
Fukami, ч. 1.1: Приводим сцену к теме проекта
На переднем плане располагаются синие платформы с грибочками (Sorting Layer: Foreground в компоненте Sprite Renderer). Ниже слоя Foreground располагается слой Character, в котором размещены сам аватар, наш ГМО с прочими растениями, земля, а также плавающие в фоне кусты. SpriteRenderer для определения какой спрайт расположить поверх какого руководствуется именно указанными в параметрах Sorting Layer и Order in Layer. Соответственно, спрайты с бОльшим значением Z-координаты все равно могут отрисоваться поверх других спрайтов. Будьте внимательны с выбором Sorting Layer и Order in Layer.
Так в нашей сцене, если в Sprite Renderer фоновых кустов указать Order in Layer больше единицы или сменить Sorting Layer на Foreground, то кусты будут отрисованы поверх земли, аватара и растительности несмотря на то, что они дальше от камеры.

Виде для оценки перспективы представлено ниже.

Что дальше?

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

  • Конечно же, вместо черновых спрайтов растительности нужно нарисовать нечто поприличнее, поживописнее.
  • Добавить спрайты насекомых экзотической наружности.
  • Состряпать наконец более уместный саундтрек.
  • Переделать генетику, чтоб можно было «стрелять генами» куда захочется.
  • Реализовать приаттачиваемые к скелету растения объекты — стены, опоры, стрелялки-пулялки и что еще в голову взбредет.
  • Реализовать солнышко, излучающее тепло и радиацию; реализовать облака, дающие воду и электричество.
  • Реализовать UI с показом накопленных ресурсов и имеющихся генов.

Постскриптум

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

Надеюсь кому-то мой опыт окажется полезен. Буду делиться по мере возможностей.

СПАСИБО ЗА ВНИМАНИЕ!

Автор: HomoLuden

Источник


* - обязательные к заполнению поля


https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js