Пользователь
0,0
рейтинг
1 июня 2011 в 15:50

Разработка → Как сделать промо-ролик игры малыми силами



В статье «Игра за 2 дня» я на примере проекта Папа Пингвин рассказал о том, как сделать игру для iOS, используя Unity, за двое суток.

В продолжение этой темы — статья о том, каким образом можно малыми силами сделать небольшой мультфильм в поддержку игры. Текст статьи подготовил Алексей Лунин (type_2), наш художественный директор. Данная статья может пригодится маленьким студиям-разработчикам и просто энтузиастам, делающим небольшие игрушки для мобильных (и не только) платформ.

Если вы не хотите повторять тех же ошибок, что сделали мы, читайте дальше.

Маленький мультфильм

Ура! Решено! Делаем ролик к игре своими силами! Выпустив Папу Пингвина, мы решили сделать небольшой мультфильм в поддержку нашей микроигры и приурочить релиз этого мультфильма к релизу одного из будущих апдейтов. Первоначально задача показалось тривиальной. Особенно тем, кто непосредственно не был задействован в ее решении.

Алгоритм работы предполагался следующий:
  1. Формулировка идеи/сценария
  2. Создание раскадровки с таймингом
  3. Создание на флэше мультипликационных сцен
  4. Запись геймплейных сцен
  5. Сведение всех сцен в единую дорожку
  6. Рендеринг
  7. Отсылка рендера звукорежисеру
  8. Получение звуковой дорожки
  9. Постобработка

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

Сценарий и раскадровка

Набрасываем в карандаше раскадровку с учетом возможностей (рисуем то, что сами сумеем сделать) и приступаем. Главная идея ролика вытекает из сути игры — пингвины-малыши постоянно просят рыбу, за которой отец-пингвин вынужден нырять все глубже и глубже, уворачиваясь от хищных рыб и попутно глотая пузырьки с воздухом. Соответственно сам ролик состоит из чередования игрового процесса и флэш-анимации.
image

Первая ошибка: единая сцена во флэше

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

image

Сложности с экспортом видео из флэша

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

Вторая ошибка: использование iMovie для монтажа

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

Как позже выяснилось из тематических форумов, эта проблема была не только у нас. У кого-то все работало без проблем, а кто-то терял все наработки. Выручил Final Cut. Интуитивно понятный интерфейс и относительная простота поставленной задачи позволили без каких либо проблем доделать монтаж, наложить межкадровые эффекты, после чего наложить готовую звуковую дорожку на видео. И быть уверенным, что с твоими исходниками ничего не случится.

Главная ошибка: корректировка раскадровки сцены на финальном этапе работы

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

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

Заключение

Торопясь поскорее сделать небольшой мультфильм для поддержки вашей игры, помните о следующем:
  1. Храните каждый кадр мультфильма в отдельной сцене/файле, для того, чтобы на этапе монтажа не испытывать никаких проблем с корректировками тайминга и внесением корректировок по отзывам.
  2. Если вы используете флэш, то, скорее всего для получения качественной картинки и частоты кадров вашего мультфильма, вам нужно будет использовать не экспорт в видеоформат, а банальное снятие видео с экрана с использованием, например, программы Screenium.
  3. Не используйте iMovie для монтажа, если не готовы оказаться в один момент без исходников своего мультфильма.
  4. Четко следуйте алгоритму производства, указанному в начале данной статьи, и осознанно и без спешки принимайте каждый этап работ, чтобы не пришлось, например, вносить корректировки в раскадровку на финальных этапах монтажа.
Использованный софт

PC:
  • Corel 12 (как ни странно, именно Corel, а не Illustrator работает в связке с флэшом на уровне ctrl+cctrl+v)
  • Adobe Flash CS3
Мас:
  • Screenium
  • Final Cut
Софт, который по тем или иным причинам не подошел:

РС:
  • VideoPad Video Editor
  • Debut Video Capture Software
  • Cam Studio
  • Cool Screen Capture
  • Киностудия Windows Live
Mac:
  • iMovie
P.S.
Наконец-то вышла Web-версия игры.
P.P.S.
Обновление игры 1.2 для iOS-устройств уже доступно в App Store.
P.P.P.S.
Updated: Я наконец-то написал статью про то, как реализовать 2d на движке Unity3d.
image
Антон Григорьев @fischer
карма
66,0
рейтинг 0,0
Реклама помогает поддерживать и развивать наши сервисы

Подробнее
Реклама

Самое читаемое Разработка

Комментарии (31)

  • +2
    Крутой ролик! Сразу захотелось поиграть!
  • +1
    А почему нет Android версии?
    Ведь в этом чуть ли не главная фишка Unity3d.
    • +3
      Мы рассматриваем этот вариант. Основная сложность — большое количество Android-устройств, каждое со своими характеристиками, размерами экрана и тд. Это же добавляет сложность в тестировании.
      В Unity просто собрать версию для конкретной платформы и запустить — не всегда срабатывает. К тому же всегда остаются некоторые платформо-зависимые части (например, мультитач, видео-проигрыватель iOS и тд).
      Кстати, в версии 3.3 разработчики Unity сделали очень многое в поддержку платформы Android.
  • +3
    Флэш отлично выгоняет видео хоть в AVI, хоть в MOV, хоть в секвенцию с нужным размером кадра и нужным fps без всяких шаманств, а обычным File — Export — Export movie
    Есть только одно «но», о котором нужно знать, начиная делать анимацию во флэше. Оно звучит так:
    Никогда, нигде и ни при каких обстоятельствах не использовать AS, и все символы из библиотеки должны быть только Graphic!
    Понятно, что это правило потребует от вас дополнительных рукотворных действий, но зато с выгоном видео не будет никаких проблем.
    • +1
      Спасибо, учтем.
  • +1
    Прочитал и вашу прошлую статью о разработке за неделю. Спасибо, очень интересно. Скажите, окупилось ли всё это для вас или ещё рано об этом говорить?
    • 0
      На самом деле, пока судить рано. Papa Penguin — наш второстепенный, экспериментальный проект (основной проект — iGoddess, улучшенная i-версия Богини).
      Первую, двухдневную версию мы выложили в App Store интереса ради, практически без пиара.
      Версия Papa Penguin 1.2, которая на подходе в AppStore и к которой делался ролик, является уже более серьезной. По ней уже можно будет что-то судить. Плюс ко всему мы добавили Web-версию и рассматриваем сейчас другие платформы.
      • 0
        Спасибо за ответ. Было бы интересно почитать в будущем результат всего этого дела. Желаю вам успехов.
        • 0
          Присоединяюсь, обе статьи очень интересные, и игра получилась замечательная.
          Что характерно, после того как попробовал флеш-версию, появилось непреодолимое желание купить игру, хотя до этого принципиально денег на софт не тратил никогда.

          Кто знает, если у меня USA аккаунт, украинскую карточку Visa к нему подключить удастся?

          С нетерпением ждем статью про продвижение игры, если таковая планируется.
  • +3
    В конце он решил утонуть всё таки…
  • +2
    в последнее время на хабре чаще стали появляться статьи про гейм-девелопмент, это радует!
  • 0
    Лёш, привет. Прикольно вышло!
    Но можно было лучше)
    Судя по фразе «помог Файнал Кат» у вас везде trial-версии, думаю не проблема была бы в таком случае испробовать cs5, там и экспорт фл<>люстра работает лучше
    Смутило, что маленькие пингвины очень похожи на взрослого: пока они рядом не встали ваще непонятно, что это пингвинята)
    Почему 4:3?
    Вообще грабли типичные и много где описанные :) Сколько в итоге заняло времени производство?
    Под маком флеш у меня даже с простым AS без проблем экспортировался в mov без всяких записей с экрана
    • 0
      Привет. стараемся :)

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

      На будущее конечно все учтется. И инструментарий и допущенные ошибки и комментарии.
    • 0
      А по времени… Трудно сказать. чистого времени на анимацию и отрисовку сам понимаешь — не много. А вот сведение, перетаскивание проекта с мака на рс и обратно, доделывание и редактирование отдельных кусочков и тому подобное — неделю примерно
  • 0
    Можно узнать чем Вам не подошел iMovie?
    • +1
      у него автосохранение.
      были перебои с электричеством и после этого в проекте все куски сцены перемешались.
      гораздо спокойнее когда есть кнопка «сохранить» гарантирующая что проект не умрет от того, что программа сама не автосохранилась или сохранилась не корректно
    • 0
      1. Нет сохранения проекта файлом (или группой фалов). => Нельзя использовать так (например, сохранить в svn), чтобы потом можно на любом другом компе с проектом работать.
      2. Штатное сохранение сделано так, что в любой момент может случиться так, что при загрузке получаешь нерабочий исковерканный проект. На это многие ругается на просторах Интернета.
      iMovie подходит только для быстрого создания видео из кусков, которое потом не будет больше редактироваться и на которое можно навсегда забить.
  • 0
    Да по сценарию вообще серьезные залипы %))))
    Правый пингвиненок вообще ни разу ничего не попросил, паинька. А левому подавай то одно то другое.
    Ну и как бы кульминации не хватает. Пусть даже не то чтобы логичного завершения, а вот изюминки какой-то, юмора, неважно чего, но какого-то завершения. А то такое ощущение и складывается, что просто каждый раз надо больше и больше рыбы, до бесконечности.
    • +1
      Правый просто скромный очень :) А ощущение верное, в этом весь смысл и игры и сюжет ролика.
      • 0
        По поводу игры отдельная история, здесь речь о ролике.
        Какой-то финал у ролика должен быть, например, когда экран заполняется рыбами, у папы-пингвина взрывается мозг, или он превращается в дьявола, или в супер-пингвина с огромными мышцами, или просто камера отъезжает, показывает земной шар и на нем происходит нечто типа ядерного взрыва, только из рыбешек. Одним словом, какая-то точка. Вот этого не хватает в ролике.
        • +1
          мне почему-то казалось что все логично выстроено…
          • 0
            Всё нормально, концовка отличная.
        • НЛО прилетело и опубликовало эту надпись здесь
  • +1
    Спасибо за вебплеер, только не нашел кнопки ВЫРУБИТЬ ЗВУК!!! =)
  • 0
    На каком железе и как быстро делали рендер?
    • 0
      это 2д спрайты.
    • +1
      Mac Mini MC270RS/A.
      Снятие видео — моментально.
      Экспорт из Final Cut Pro в разрешении 800x600 — минут 5.
  • +1
    Главная проблема дизайна во флэш, по моему опыту, состоит в том, что дизайнеры, как правило, умеют и любят рисовать и вообще креативить, а вот организовывать и структурировать — не любят и умеют, если честно, единицы.

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

    А видео — его ж надо на сцены разбивать, потом еще каждую сцену на действия, потом уже делать анимацию, плюс все примитивы надо где-то системно хранить, причем не путаться — есть элементы, которые не меняются по ходу всего ролика, а есть те, которые хоть и похожи, но в каждой сцене должны быть свои и которые так и тянет использовать повторно, а потом поправил в одном месте — а оно непонятно как попередвигало в других, сиди потом, разбирайся…

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

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

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

    Рад, если кто-то был лишен этого чудесного опыта, разбирать дизайн-спагетти и перетусовывать в свою структуру флэш-библиотеки.
  • 0
    Почему у маленького пингвина брови на макушке?
  • +1
    Как же раздражает специально искаженная музыка из мультфильма «В Синем Море, В Белой Пене» (Арменфильм, 1984). И-за этого ролик похож на китайскую игрушку с кривыми мелодиями. Вашему композитору нужно поставить единицу за работу и не давать денег.
  • 0
    Тоже встречались с проблемой экспорта видео, даже не смотря на разбиение по сценам и использование растра, проблема была в использовании длинных задников, на фоне которых происходили действия в мультфильме, но от которых нельзя было отказаться. Так что не смотря на все ухищрения, все равно не удавалось добиться требуемой частоты кадров, комп попросту не успевал рендерить, фпс гулял, по видимому экспорт у флеша устроен как-то особенно, не помогло даже использование более мощных компов. Мы не стали углубляться совсем уж в корни проблемы и выяснять как устроена работа экспорта, а нашли следующее решение: перед тем как экспортировать видео, выставили фпс в 1 кадр в секунду, что даже слабому компу должно в полной мере хватать на осмысление и рендер этого самого кадра, это конечно существенно увеличило время экспорта, но зато у нас были все кадры :) затем полученный результат просто разогнали в файнал кате до требуемых величин фпс.
    Отмечу, что и все сцены не следует хранить в одном файле, потому как если проект большой, то это ведет к раздуванию файла, потом он может начать медленно открываться и в один прекрасный момент перестать открываться :)
    Так же могу порекомендовать использовать виртуальную камеру, это существенно упрощает создание анимации, особенно при панорамировании да и во многом другом, двигаешь только камеру, можно делать: наезды, отъезды, движение, крупность кадра и др. приятные штуки.

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