Создание уровня комнаты родителей, часть 2

Часть 1

Ну что, продолжаем. Я обещала интересное, вот вам.

После некоторого анализа мы выбрали первоночальный формат 1024*768, который, запущенный на вайд скрине, будет обрезаться свеху и снизу. Возникает вопрос – как отрисовать на бумаге в формате 4*3, не прибегая к изнурительным подсчетам? И тут я достаю из широких штанин айпад с экраном прям как нужно!

DSC_2866Получается, что уровень рисуется в масштабе 1 в 1.

Я выбираю одно состояние уровня из прототипа (не важно, какое – уровень уже знаком) и включаю подсветку планшета на максимум. Поверх экрана я креплю кальку на бумажном скотче. Калька просвечивается, а трюк со строительны скотчем известен каждому художнику – он легко приклеивает, легко отклеивается и практически не портит бумагу после себя. Для того, чтобы было веселее (ну и потому что мне просто некуда его больше деть), я использую разноцветный мимими скотч типа такого http://www.cutetape.com/shop/japanese-washi-masking-tape.html.

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

DSC_2868 DSC_2870 DSC_2871
Выключаю экран, проверяю, все ли в порядке, ничего ли не забыла. И включаю на паде фонарик.
Отдельный момент был с выбором этого самого фонарика. Мне нужен был яркая однотонная подсветка и экран, который бы не реагировал на тапы – я-то буду касаться экрана рукой и использовать планшет как световой стол все время отрисовки. То есть мне нужно приложение, которое ничего не делало, только показывало белый экран. Точка. Нетривиальная проблема, но после некоторых поисков оказалось, что приложение такое есть – Easy Flashlight. Красота и благодать.

Когда я знаю, где что находится, я создаю новый слой клею новый слой кальки и заливаю предпологаемые теневые области на уровне любым маркером. Проверяю, все ли в порядке, все ли еще верно с логикой.

DSC_2873А дальше начинается самый фан.

Я беру в руки любимый линер 0.1 (в принципе любой, я предпочитаю водоустойчивые, на случай, если расплачусь в процессе), креплю на каждый элемент по слою кальки и берусь медитативно отрисовывать. Самое большое удовольствие именно от этого процесса. Дальше меньше слов, больше картинок.

DSC_2875 DSC_2879 DSC_2877 DSC_2885Интересная часть – проработка анимаций. По сути процесс, идентичный тому, как делается классическая анимация. Послойно, с просветкой каждого кадра на световом столе. При этом каждый каждый кадр нумеруется, чтобы при дальнейшем сканировании не запутаться.

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

Когда все отрисовано, остается вопрос техники – отсканировать (мелкие кадры на том же скотче крепятся к белому листу бумаги, чтобы не разлетелись), свести в фотошопе (для этого созданы специальные actions, которые уменьшают каждый спрайт до нужного размера и красят в нужный цвет) и добавть фоновый цвет (стандартная кисть, стандартные настройки, никакой магии).

DSC_2887 DSC_2888 DSC_2889Нарезать теми же слайсами, отдать программисту, настоять и подождать. Приятной игры :)

05_lvl_parents_fan_

Создание уровня комнаты родителей, часть 1

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

Первая часть немного суховата, но это подготовка и продумывание уровня – самый длительный процесс. Без него вторая часть не имеет смысла.

Итак.

05_lvl_parents_fin

Будем делать уровень родительской комнаты. Финальный вариант можно увидеть выше, поиграть же можно, нажав кнопочку Demo справа на странице.

Разработка уровня начинается с простого описания логики по минимальному количеству кликов/тапов для прохождения. Сложность каждого уровня увеличивается, количество тапов для прохождения каждого из них растет.

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

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

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

bedroom

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

05_lvl_parents_prototypeДальше быстрая нарезка слайсов (Slice tool) – этот инструмент в фотошопе невероятно спасает (верстальщики меня поймут). Каждый слайс имеет координаты и размер, имея эту информацию программист может быстро собирать уровень, не подбирая позиции на глаз.

05_lvl_parents_prototype_slicesСветло-голубые горизонтальные линии – гайды (guides) – показывают, где будет обрезаться уровень на вайд скринах – за пределами этих линик активные элементы размещать бессмысленно.

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

DSC_2866

Про работу с падом и с живыми инструментами – в следующем выпуске :) Обещаю, тут уже будет интересно.

Часть 2

Анимация ГГ

Третий запланированный уровень для джема в процессе обсуждения, но с ним мы не спешим. Так всегда – сначала на словах все кажется гениальным, а потом уровень в три клика собирает комментарии “а как тут пройти?”. Исправляемся.

А пока пришло время для анимации главного героя Moony. В отличие от уровней, где анимация в основном отрисовывается покадрово на кальке, персонажа легче делать сразу в фотошопе – анимация живого существа сложнее и требует больше правок, чем окружающего мира. Посмотрите на того же Ghost Trick (о да, я буду его приводить в пример к месту и не к месту!).

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

Было несколько вариантов поглощать мальчишку тенью, и, покрутив так и эдак, остановились на таком варианте:

2506_char_anim_die

 

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

UPD. Теперь анимации есть и в демо, enjoy!

Уровень 00_lvl_diner

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

1392048849567

 

Каждый элемент фотографируется несколько раз (в виду отсутствия сканера) и подгоняется по размеру на фон прототипа.

Screenshot 2014-02-11 12.03.49

 

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

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

00_lvl_diner_01

Уровни – общий процесс

Работаем над отрисовкой уровней, используя iPad как эдакий световой стол в виду отсутствия сканера и принтера.

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

1391866260521

 

 

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

 

1391987121657

Арт – общие сведения и персонаж

Поиски персонажа:

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

Игра будет иметь представленный выше sketchy стиль, соответствующий сюжету – следите за обновлениями.

Поиск персонажа: