Эффект - волна блика. How It's Made.
Салют, братья!
Долго копится желание написать что-то полезное для сообщества, такое, чтобы было не стыдно показать свой код :)
В продолжение серии How It's Made, хочу рассказать о том как я сделал эффект волны блика, или скользящего блика если угодно.
Успешно выполнив ТЗ и благополучно провалив его оценку, его исходники остались пылиться, пополнив моё скромное портфолио, до того момента как началась работа над Mandallapse, переработкой которой на Air/Srarling я занимался весь этот год. Горстка эффектов была десертом и наконец-то их удалось причесать.
В динамике эффект можно посмотреть на FGL (ML 1).
Первый этап.
Волна блика представляет собой 2х-сторонний линейный градиент, который можно представить как линию нарисованную в фотошопе кистью с мягким краем. Можно взять битмапу спрайта такой кисти, как это сделано у меня сейчас, либо нарисовать окружность с градиентной заливкой (и почему-то я так ещё не сделал).
Второй этап.
Берем пустую битмапу по размеру целевого объекта (рамка поля) с некоторым запасом по краям, и рисуем по диагонали (слева снизу вправо вверх) линию «кистью» сделанной на первом этапе.
Здесь важно отрегулировать размер «кисти» относительно размера объекта чтобы линия была приемлемой толщины.
Третий этап.
Создаём массив битмап и в цикле (в моём случае это таймер) двигаемся по противоположной диагонали (слева сверху вправо вниз).
В каждой итерации цикла: вставляем линию в новую битмапу, копируем её в саму себя с BlendMode.MULTIPLY и вставляем то что получилось в копию битмапы целевого объекта с BlendMode.SUBTRACT. (В целях дебага можно SUBTRACT заменить на MULTIPLY, см. первую картинку или гифку спойлером ниже)
Получаем спрайтшит анимации :-)
Четвёртый этап.
В нужном месте в нужный момент запускаем показ анимации с BlendMode.ADD.
Вуа-ля!
Итог
В мобильной версии от блика на рамке поля пришлось отказаться ввиду ресурсоёмкости, а применить к фишкам ещё предстоит.
Исходники как есть скопированы из проекта.
Вместо итогов 2015
Хоть прошлый пост на блогах с итогами 2014 получился несколько сумбурным, написан он из лучших побуждений, «фром май хат».
Из запланированного: Air/Srarling — пощупал, «Шаблоны игрового программирования» (в переводе) — прочитана, новая графика для Mandallapse — нарисована и ожидает вставки вместе с новыми фичами (микро спойлер такой), в частный дом — переехал, сноуборд — попробовал.
Из личного: после очередного симптома детоксикации (это похоже на простуду с температурой и соплями посреди лета) — удалось начать стабильно голодать по субботам; а когда тепло и не нужно топить печь — получается ложиться рано и вставать с восходом и даже позаниматься йогой.
Сижу тихонько читаю посты камрадов, слушаю подкасты Флазма, радуюсь за всех. Хочется на DevGamm, уже начать знакомиться с теми кого знаешь по никам, играм, и голосу из подкаста. Но с пустыми руками ехать стыдно.
Планы
Завершить проект, заспонсорить его и зарелизить. Делать следующие. Делиться ещё чем-то полезным.
На этом, пожелаю всем гармонии, процветания, и ЗОЖ :)
p.s.
Добавил спойлеры с гифками.
Долго копится желание написать что-то полезное для сообщества, такое, чтобы было не стыдно показать свой код :)
В продолжение серии How It's Made, хочу рассказать о том как я сделал эффект волны блика, или скользящего блика если угодно.
Вместо предисловия
Этот эффект я сделал в 2011-м в тестовом задании для Playrix, где нужно было реализовать механику мач-3 и повторить все эффекты их игры «Возвращение Атлантиды» с предоставленной ими графикой. В оригинале блик идёт диагональной волной по фигурной рамке поля синхронно с анимациями блика фишек, и выглядит довольно зрелищно.
На статичной картинке эффект едва заметен
GifCam помог заснять динамику
Успешно выполнив ТЗ и благополучно провалив его оценку, его исходники остались пылиться, пополнив моё скромное портфолио, до того момента как началась работа над Mandallapse, переработкой которой на Air/Srarling я занимался весь этот год. Горстка эффектов была десертом и наконец-то их удалось причесать.
В динамике эффект можно посмотреть на FGL (ML 1).
Или в гифке
Итак, приступим
Как известно, любую мало-мальски сложную задачу следует разложить на составляющие, более простые подзадачи. И тогда всё становится просто элементарно.Первый этап.
Волна блика представляет собой 2х-сторонний линейный градиент, который можно представить как линию нарисованную в фотошопе кистью с мягким краем. Можно взять битмапу спрайта такой кисти, как это сделано у меня сейчас, либо нарисовать окружность с градиентной заливкой (и почему-то я так ещё не сделал).
Второй этап.
Берем пустую битмапу по размеру целевого объекта (рамка поля) с некоторым запасом по краям, и рисуем по диагонали (слева снизу вправо вверх) линию «кистью» сделанной на первом этапе.
Здесь важно отрегулировать размер «кисти» относительно размера объекта чтобы линия была приемлемой толщины.
Третий этап.
Создаём массив битмап и в цикле (в моём случае это таймер) двигаемся по противоположной диагонали (слева сверху вправо вниз).
В каждой итерации цикла: вставляем линию в новую битмапу, копируем её в саму себя с BlendMode.MULTIPLY и вставляем то что получилось в копию битмапы целевого объекта с BlendMode.SUBTRACT. (В целях дебага можно SUBTRACT заменить на MULTIPLY, см. первую картинку или гифку спойлером ниже)
Гифка с MULTIPLY вместо SUBTRACT
Кусочек кода
private function tMadeWaveHandler (event:TimerEvent = null):void {
const i:int = tMadeWave.currentCount - 1;
const dataFrame:BitmapData = _dataSource.clone();
const dataWave:BitmapData = new BitmapData(_dataWave.width, _dataWave.height);
const point:Point = new Point(i * stepWaveX - waveW05 - deltaW05, i * stepWaveY - waveH05 - deltaH05);
dataWave.copyPixels(_dataWave, _dataWave.rect, point);
dataWave.draw(dataWave, null, null, BlendMode.MULTIPLY);
dataFrame.draw(dataWave, null, null, BlendMode.SUBTRACT);//SUBTRACT for release, MULTIPLY for debug
_frames[_frames.length] = dataFrame;
}Получаем спрайтшит анимации :-)
Четвёртый этап.
В нужном месте в нужный момент запускаем показ анимации с BlendMode.ADD.
Вуа-ля!
Итог
В мобильной версии от блика на рамке поля пришлось отказаться ввиду ресурсоёмкости, а применить к фишкам ещё предстоит.
Исходники как есть скопированы из проекта.
Вместо итогов 2015
Хоть прошлый пост на блогах с итогами 2014 получился несколько сумбурным, написан он из лучших побуждений, «фром май хат».
Из запланированного: Air/Srarling — пощупал, «Шаблоны игрового программирования» (в переводе) — прочитана, новая графика для Mandallapse — нарисована и ожидает вставки вместе с новыми фичами (микро спойлер такой), в частный дом — переехал, сноуборд — попробовал.
Из личного: после очередного симптома детоксикации (это похоже на простуду с температурой и соплями посреди лета) — удалось начать стабильно голодать по субботам; а когда тепло и не нужно топить печь — получается ложиться рано и вставать с восходом и даже позаниматься йогой.
Сижу тихонько читаю посты камрадов, слушаю подкасты Флазма, радуюсь за всех. Хочется на DevGamm, уже начать знакомиться с теми кого знаешь по никам, играм, и голосу из подкаста. Но с пустыми руками ехать стыдно.
Планы
Завершить проект, заспонсорить его и зарелизить. Делать следующие. Делиться ещё чем-то полезным.
На этом, пожелаю всем гармонии, процветания, и ЗОЖ :)
p.s.
Добавил спойлеры с гифками.
- +3
- TricKDexter
Комментарии (0)