Здравствуйте!
В прошлой статье был представлен концепт «генетически модифицируемого организма», но сцена была использована не соответствующая тематике. В этой статье хочу рассказать как и спомощью каких инструментов переделывался арт сцены. Основные изменения следующие:
В качестве основной рабочей станции используется 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 попробую в будущем.
Начну, пожалуй, с того, как я перерисовывал спрайт ядра. Использовал для этого так называемый метод "Дралоскопирования". Берется за образец некая фигурка оригами (наподобие вот таких) и импортируется в векторный рисунок как подложка.
По подложке создается черновик векторного скелета (wireframe). Сразу включайте примагничивание ввода узлов к уже имеющимся, чтобы контуры получались замкнутыми, т.к. потом нам нужно будет их заливать.
Если развиты навыки пространственного мышления, то образец Вам больше не нужен. Можно подправить расположение узлов и переходить к заливке замкнутых контуров.
Использовался инструмент заливки (Fill bounded area). Он заливает полигон выбранным цветом (в данном случае 70% серого) и добавляет чуть более темную окантовку на границе между заливкой и бордюром полигона. Заливайте полигоны при одном и том же масштабе экрана, т.к. толщина окантовки заливки зависит от масштаба. Яркость выбранной заливки полигона удобно регулируется прозрачностью заливки (ПКМ на заливке -> Fill and Strokes -> Вкладка Fill).
Для создания атласа спрайтов сцены также использовался Inkscape. Сначала рисовалась сцена:
Потом части ее раскидывались по канве и экспортировались в PNG.
Для экспериментальных облаков с полосатой заливкой использовался инструмент Objects to Pattern в Inkscape.
Для создания окантовки деревьев фонового ландшафта использовал инструмент Outset в Inkscape.
Скриптовый параллакс, реализованный в 2D демо-проекте от Unity3d, использует масштабирование для эмуляции удаления объекта от камеры. Это лишняя вычислительная нагрузка. Поэтому было решено отказаться от него и просто разнести фоновые слои по Z-оси. Сменив режим главной камеры с ортогонального на перспективный я получил честный параллакс для фоновых слоев и побочный эффект для спрайтов аватара и ракет. В демо проекте от Unity3D части тела аватара и ракет уже были разнесены по Z-оси. В ортогональном режиме камеры этого не было видно. Также и вся анимация персонажа, NPC и ракет тоже завязана на Z-координаты частей. Пришлось все переправлять заменой на ноль Z-координаты в анимационных кадрах. Структура полученной сцены представлена на анимации ниже.
На переднем плане располагаются синие платформы с грибочками (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, то кусты будут отрисованы поверх земли, аватара и растительности несмотря на то, что они дальше от камеры.
Виде для оценки перспективы представлено ниже.
Работы, конечно, еще вагон и мно-ого-го сколько маленьких тележек. Выделю парочку ближайших приоритетов.
После первой статьи о проекте со мной связались два разработчика. Потому еще одна важная задача — наладить процессы, чтобы было комфортно работать в свободное время. Как писал выше, для обмена данными используется пока Ubuntu One. Коммуникация через Skype. Трекер задач пока не выбран. Этим и формированием самих задач пожалуй и займусь в ближайшее время. Когда будет следующий апдейт по проекту сказать не могу.
Надеюсь кому-то мой опыт окажется полезен. Буду делиться по мере возможностей.
СПАСИБО ЗА ВНИМАНИЕ!
В прошлой статье был представлен концепт «генетически модифицируемого организма», но сцена была использована не соответствующая тематике. В этой статье хочу рассказать как и спомощью каких инструментов переделывался арт сцены. Основные изменения следующие:
- Городская тема, здания и летающая тарелка заменены растениями, видом на растительный ландшафт; заменен фон (небо).
- Добавлены экспериментальные спрайты облаков (те что в полосочку на КДПВ выше)
- Режим основной камеры изменен на перспективный (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
Начну, пожалуй, с того, как я перерисовывал спрайт ядра. Использовал для этого так называемый метод "Дралоскопирования". Берется за образец некая фигурка оригами (наподобие вот таких) и импортируется в векторный рисунок как подложка.
По подложке создается черновик векторного скелета (wireframe). Сразу включайте примагничивание ввода узлов к уже имеющимся, чтобы контуры получались замкнутыми, т.к. потом нам нужно будет их заливать.
Если развиты навыки пространственного мышления, то образец Вам больше не нужен. Можно подправить расположение узлов и переходить к заливке замкнутых контуров.
Использовался инструмент заливки (Fill bounded area). Он заливает полигон выбранным цветом (в данном случае 70% серого) и добавляет чуть более темную окантовку на границе между заливкой и бордюром полигона. Заливайте полигоны при одном и том же масштабе экрана, т.к. толщина окантовки заливки зависит от масштаба. Яркость выбранной заливки полигона удобно регулируется прозрачностью заливки (ПКМ на заливке -> Fill and Strokes -> Вкладка Fill).
Для создания атласа спрайтов сцены также использовался Inkscape. Сначала рисовалась сцена:
Потом части ее раскидывались по канве и экспортировались в PNG.
Для экспериментальных облаков с полосатой заливкой использовался инструмент Objects to Pattern в Inkscape.
Для создания окантовки деревьев фонового ландшафта использовал инструмент Outset в Inkscape.
Честная 3D перспектива
Скриптовый параллакс, реализованный в 2D демо-проекте от Unity3d, использует масштабирование для эмуляции удаления объекта от камеры. Это лишняя вычислительная нагрузка. Поэтому было решено отказаться от него и просто разнести фоновые слои по Z-оси. Сменив режим главной камеры с ортогонального на перспективный я получил честный параллакс для фоновых слоев и побочный эффект для спрайтов аватара и ракет. В демо проекте от Unity3D части тела аватара и ракет уже были разнесены по Z-оси. В ортогональном режиме камеры этого не было видно. Также и вся анимация персонажа, NPC и ракет тоже завязана на Z-координаты частей. Пришлось все переправлять заменой на ноль Z-координаты в анимационных кадрах. Структура полученной сцены представлена на анимации ниже.
На переднем плане располагаются синие платформы с грибочками (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. Трекер задач пока не выбран. Этим и формированием самих задач пожалуй и займусь в ближайшее время. Когда будет следующий апдейт по проекту сказать не могу.
Надеюсь кому-то мой опыт окажется полезен. Буду делиться по мере возможностей.
СПАСИБО ЗА ВНИМАНИЕ!
