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

Ня! Всем привет!

Решил рассказать о конкурсе, в котором я участвовал в середине марта. Если коротко:

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

А теперь - подробнее! Вперёд, товарищи!

Y8 - конкурс

Известный портал флеш-игр запустил конкурс 9ого марта. Сроки — неделя, с 9ого по 16ое.

Темы аж три сразу: "Путешествия во времени", "Порталы" и "Пасха". Можно использовать сразу несколько тем в одной игре, можно - только одну.

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

Time Hotel

Не буду особо рассказывать как делалась игра, какие переделки мы вносили, как кранчевали. Мне кажется, зачастую от таких рассказов можно уснуть…

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

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

После того, как мы пробыли 30 секунд в игре - она заканчивается и всё перематывается назад. С точки зрения геймдизайна эта перемотка решает вопрос о том, как объяснить игроку тот момент, что он опять стоит у входа в гостиницу. В общем - поиграйте просто.

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

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

1. Во время игры я сохраняю каждый десятый кадр. Рендер в битмат-дату. Всё это барахло отъедает более 100Мб оперативки.
2. Когда нужно отмотать время назад — я начинаю рисовать эти битмап-даты в обратном порядке.
3. Теперь самое интересное — искажения. Процесс отрисовки одной битмап-даты выглядит так:

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

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

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

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