12 апреля 2016

Время - назад!

Ня! Всем привет!
Решил рассказать о конкурсе, в котором я участвовал в середине марта. Если коротко:
  • Участвовали в Y8-конкурсе
  • Сделали игру
  • Выиграли
  • Многие спрашивают, как я сделал эффект перемотки времени назад в игре
  • Чтобы не расписывать каждому отдельно, решил рассказать здесь
А теперь - подробнее! Вперёд, товарищи!
Y8 - конкурс

Известный портал флеш-игр запустил конкурс 9ого марта. Сроки — неделя, с 9ого по 16ое.
Темы аж три сразу: "Путешествия во времени", "Порталы" и "Пасха". Можно использовать сразу несколько тем в одной игре, можно - только одну.
Мы целый первый день убили на придумывание игры. Было скучно и переживательно. Хотелось не участвовать. Но после окончательной придумки «стреляем тридцать секунд, а потом всё заново, но на уровне есть я из прошлого» решили доделать до конца. "Путешествия во времени" вроде затронуты, так что в тему укладываемся. Скрин:


Time Hotel

Не буду особо рассказывать как делалась игра, какие переделки мы вносили, как кранчевали. Мне кажется, зачастую от таких рассказов можно уснуть…
Просто скажу, что в такие сжатые сроки было адски-сложно довести ее до финального состояния. За меня скажут мои помидоры ;) До этого я работал по пять штук в день, но во время конкурса приходилось чертовски перерабатывать:


Эффект перемотки

После того, как мы пробыли 30 секунд в игре - она заканчивается и всё перематывается назад. С точки зрения геймдизайна эта перемотка решает вопрос о том, как объяснить игроку тот момент, что он опять стоит у входа в гостиницу. В общем - поиграйте просто.
Забавно, но эта фишка сделалась быстро (11ое марта, два последних ночных помидора). Хотя вся игра делалась с нуля на голом флеше (из старого кода использовал только растеризацию), но смех в том, что больше всего времени убил 16ого числа на рандомную компоновку этажей… Итак, про перемотку. Стоп-кадр перемотки выглядит так:


Многих интересуют вот эти классные полоски-искажения, а-ля перемотка на старых видеопроигрывателях.
Делаю так:

1. Во время игры я сохраняю каждый десятый кадр. Рендер в битмат-дату. Всё это барахло отъедает более 100Мб оперативки.
2. Когда нужно отмотать время назад — я начинаю рисовать эти битмап-даты в обратном порядке.
3. Теперь самое интересное — искажения. Процесс отрисовки одной битмап-даты выглядит так:
  • Сначала делаю copyPixels всей битмап-дате. Получается кадр без искажений.
  • Затем поверх я рисую полоски. Беру куски из оригинальной картинки и рисую через copyPixels на экран, при этом делаю небольшой сдвиг влево-вправо. Получается, я рисую полоски поверх «кадра без искажений».
  • Затем рисую в том же месте еще одну полоску, но поуже и с бОльшим сдвигом. Приглядитесь на скрин выше — из-за такого приема торцы искажений выглядят более дугообразными по форме
  • Затем сдвигаю полоски вверх или вниз. Имеется ввиду просто число «теперь полоска в координате y+10». У каждой храню просто рандомную скорость. Так они ползают во время перемотки.
  • Если полоска дошла до границ экрана — перекидываю обратно, чтобы она продолжила искажать картинку.

Уф-ф-ф… Вот, собственно, и всё. Магия закончилась.
Перенести такой подход на мобильные девайсы не получится — слишком много оперативки отъедает. Да и рисовать их потом накладно. Тот же copyPixels не пройдет. Видимо нужны шейдеры + тупое сохранение всех-превсех состояний объектов.

В итоге наша игра выиграла. Было дико неожиданно узнать о победе! Фантастика на самом деле.

Сообщения, схожие по тематике:

0 коммент.:

Отправить комментарий