Хитри - блог о хитростях разработки флэш-игр, игровых баннеров и флэш-анимации

Думаю, что многих в своё время зацепила игра Crimsonland. Лично мне нравится как там реализовано управление главным героем. При нажатии клавиши “Вверх” персонаж смещается не строго вверх, а туда, куда смотрит. Кнопки “Вправо” и “Влево” только поворачивают героя и меняют направление движения.

Такое движение сделать во флеше очень просто, достаточно знать формулы синуса и косинуса. Этим мы и займёмся. Читать полностью »

Это продолжение предыдущего поста о простом движке для flash-игр. Тогда, в самом конце возникла мысль уйти от метода hitTest() и перейти на пиксельный просчёт. И чтобы сравнить оба способа и выбрать лучший вариант, сделал небольшой визуальный тест.

Кстати, в тот раз я написал не совсем правильный код. Команда break не выводила процесс из вложенного цикла и бессмысленно терялось много процессорных ресурсов. Странно, но никто по этому поводу не отписался. Значит либо все “внимательно” читают и пробуют, либо верят на слово
Этот баг я поправил. Дальше по слайдам: Читать полностью »

Давно я не писал новых статей. На то есть много причин, главные из которых - отпуск и новая флеш-игра (как найдётся спонсор, выставлю её на обозрение). Блог не умер и не собирался умирать, новые материалы будут публиковаться по мере появления свободного времени. Многие вещи у меня лежат в полуготовом состоянии и дорабатываются до состояния “интересно” - раньше выкладывать нет смысла.

Ближе к теме. Есть множество flash-игр, в которых пользователь видит уровень как-бы с высоты птичьего полета - сверху. Одна из основных задач, с которыми сталкивается разработчик в таких играх - программно организовать проходимые зоны и препятствия.

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

1. Блочное решение. Карта разбивается на кубики и у каждого стенки задаются как свойства “left”, “right”, “top” и “bottom”. Если объект вошёл в кубик, он свободно может по нему перемещаться. Перейти в соседний можно только если смежные грани не имеют стенок. Для оптимизации можно количество стенок уменьшить в 2 раза оставив только “left” и “top”. Две остальные сработают у соседних кубиков.
2. Реализовать физический движок с нулевой гравитацией.

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

Большую часть работы выполняет старая добрая функция hitTest(). Для неё рисуется зона проходимости и персонаж может перемещаться только в её пределах. Если на карте есть горы, стены, водоёмы, дома - эти области просто не закрашиваются.

Пойдём от простого к сложному. Читать полностью »

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

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

В нашем случае удобно хранить скорость в разложенном по осям виде. То есть не величина и угол поворота (как в управлении автомобилем), а в виде speedX и speedY. Далее каждую составляющую мы будем прибавлять к соответствующей координате (отрицательные значения смещают в другую сторону).

При равномерном движении можно просто прибавлять к координате число. Но введение понятия “Скорость” позволяет организовать замедление и ускорение.

Осталось разобраться с гравитацией. Это сила, которая с постоянной величиной действует вертикально вниз на все объекты (в программировании обычно на все незакрепленные объекты). То есть постоянно (по событию enterFrame) прибавляет какое-то значение к скорости (переменной speedY). Почему именно к скорости? Потому что к координатам применяется уже суммарный вектор всех сил (у нас пока только скорость и гравитация). Поэтому вначале применяем гравитацию к скорости, а потом скорость к координатам. Надеюсь, не намудрил.

Теперь по порядку: Читать полностью »

Это продолжение дорожных приключений. Тогда попросили сделать вариант с прицепом. Я понимаю желание сделать “побырику” flash-игру типа “Парковка” имея под рукой готовый код, поэтому дальше описан пример как это сделать. И не один прицеп, а целый поезд.

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

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

От предыдущего примера код почти не отличается. Добавилось несколько новых клипов и одна функция в коде. Читать полностью »

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

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

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

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

Прошла суббота, а вместе с ней и UAFPUG 3, посвященный флэш-анимации.
Я был приятно удивлен теплым коллективом и не ожидал, что это будет так интересно.
Знакомство и общение с новыми людьми, красивый город и увлекательное after party сделали свое дело. Теперь буду посещать такие мероприятия чаще.

Отдельное спасибо скажу организаторам встречи - Лерике и всем остальным, кого я не знаю: все было просто супер! Просторный, прохладный зал с мягкими диванами, розыгрыш ценных и почетных призов, экскурсия по городу, fireshow - молодцы. Порадовали гости приехавшие специально для этого из России.

Я выступал вторым, между Колесником Александром и Акимовым Олегом. Когда подошла моя очередь, я разволновался и первое время мялся как школьник и сказал далеко не все что хотел. Потом как-то попустило и речь пошла более связная. Думаю, это придет с опытом.

Выкладываю свою презентацию, ниже можно и исходник скачать. Все хитрости подаются как готовое решение - эффект копируется в флеш-мультфильм путем copy/paste. Код не везде “чистый”, потому как некоторые вещи брал из работ которым более 2-х лет. К тому же возможен “левый код”, который нужен был для символов, которых здесь нет. Я об этом не сильно заботился, потому как решение выложить исходник было принято уже на самой презентации. Поэтому примите все как есть.

Сегодня Adobe Flash - это мощная программа, которая решает широкий спектр задач и создала несколько профессий – флэш-программисты, флэш-аниматоры и иллюстраторы. Веб-дизайнеры не отстают и тоже стремятся взять флэш на вооружение.
В связи с этим, люди, которые занимаются преимущественно анимацией, Actionscript-ом практически не пользуются, максимум – команды play(), stop(), gotoAndPlay(), gotoAndStop(). Программисты же, впадая в фанатизм, пытаются все сделать исключительно скриптами, а к твиннингу относятся с пренебрежением. Не все, конечно, но многие. Как в программировании, так и в простой анимации, есть свои преимущества и недостатки. И эффективней работать будет тот, кто использует преимущества обоих направлений.
Так как сегодняшняя тема посвящена анимации, то и доклад ориентирован в основном на флэш-аниматоров.

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

Читать полностью »

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

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

Чтобы сделать такие пузырьки нужно: Читать полностью »

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

Мне известно 2 подхода к flash-программированию: структурированный и хаотичный. При первом все символы и объекты организуются в строгую иерархию, управление сосредоточено в одном месте, и этот “мозг” каждый кадр перебирает массив подчиненных ему объектов и вызывает для каждого функцию действия. Все строится по принципам ООП. Таким образом работают, например, движки 2D физики и 3D. Хороший способ, уменьшает вероятность ошибки, но требует основательного подхода и много времени.

Есть еще хаотичное или стихийное программирование, когда для каждого клипа (которому это нужно) задается событие onEnterFrame и он запускается в “свободное плавание” (программисты со стажем сейчас меня нещадно осудят). Это настоящее самоуправление, каждый клип живет в пределах своих фигурных скобок. Друг о друге символы знают мало, обычно разбиваются по группам и заносятся в массивы. Метод тоже хороший, можно все сделать быстро, но есть шанс запутаться и поматерить флэш, который “опять глючит”. Этот метод я обычно использую для задач-однодневок, пока все свежо в памяти.

Есть еще третий метод, который мне нравится больше всего - он сочетает в себе и структуру и свободу выбора - ООП основанное на событиях. Но это уже условное отделение - классы как-никак.

Так вот, возвращаясь к вопросу о глобальной паузе: для структурного подхода все просто: заводится логическая переменная (пауза есть/нет), опираясь на которую, главный клип либо вызывает для всех функцию действия, либо нет. Это что касается кода, остановить твиннинг гораздо сложнее. Например, летит муха, у нее дрожит туловище, она машет крылышками и к тому же моргает. Нужно 3 раза вызвать функцию stop(). А если на сцене символов много, и все они разные? Как минимум для каждого объекта нужно описывать функцию его полной остановки (с событиями кстати также - наследование не поможет если символы разные).Для стихийного подхода к программированию это почти расстрел. В обоих случаях нужно писать много строк Actionscripta. Некоторое время я так и мучался, попутно выдумывая, как это можно упростить. Вот то, что есть у меня на сегодня:

Что может приводить объект в движение? Твиннинг или ActionScript (а точнение событие EnterFrame). SetInterval я во внимание не беру.
Значит должна быть функция которая останавливает проигрывание клипа и отключает для него onEnterFrame. Читать полностью »

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

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

Не буду судить об оправданности применения такого подхода в играх, но в баннерах это проходит на ура (конечно, если не злоупотреблять количеством). Да и для заставок тоже пойдет.

Собственно, как это сделать: Читать полностью »