Данный выпуск в основном сформирован по результатам приходящей почты. Дело в том, что ваш покорный слуга некогда позволил себе опубликовать несколько практических материалов по работе в анимационно-программной среде разработки Adobe Flash, включая серию по программированию для Flash/Flex и отдельные уроки по созданию анимационных роликов. Они стали достаточно популярны и весьма широко распространились. Например, некоторые свои уроки я видел на пиратских дисках с Flash'ем. А как на постсоветском пространстве оценивают популярность? Вопрос риторический. В общем, просьбы по "чему-нибудь ещё" звучат постоянно, хотя это и отдельный пласт работы. В общем, время нашлось только сейчас, причём сформировались достаточно интересные задания.

Отдельно стоит отметить, что Adobe Flash, как среда для начинающих программистов, сродни Бейсику для детей моего поколения. Всё просто, удобно, быстро в реализации, а в данном случае и очень красочно. На флэше можно обучиться не только всем основным принципам современного программирования, но и получить полноценные знания о работе современных анимационных пакетов, программ моделирования и так далее. Поэтому многим представителям современной молодёжи настоятельно рекомендую начинать свой путь с флэша.

Итак, приступим. Загружайте Flash, закатывайте рукава и поехали! Думаю, что предложенный пример вам понравится. Сначала займёмся проектированием. Придумаем игру и назовём её, к примеру...

"Гангстеры и инопланетяне"

Жанр: гонки, шутер

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

Цель: уничтожение броневика за определённую дистанцию.

Сложность: лёгкая.

Графика: "лёгкая" эмуляция 3D в 2D.

Вид: от третьего лица, камера посередине дороги за машиной гангстеров.

Платформы: PC, мобильники.

Языки: русский, английский, немецкий, испанский, французский...

Раскадровка

В данном случае для простоты и краткости мы не будем делать главное меню, а предусмотрим только игровое окно. Его раскадровку, также в силу быстроты и удобства, можно нарисовать во флэше инструментом "кисточка" (Brush Tool).

Итак, у нас есть фон, дорога, полосы разметки на ней, фонари по краям, машина гангстеров, броневик инопланетян, индикатор пройденной дистанции, индикатор очков.

Планирование хода разработки

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

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

Далее рисуем броневик инопланетян. Добавляем ему дрожание, создаём функцию плавного изменения направления вправо или влево в случайном режиме. Это третий этап.

Затем реализуем функцию стрельбы по нажатию клавиши "пробел". Показываем это анимацией и звуком, связываем координаты машины и броневика для определения попадания в цель. Создаём систему подсчёта очков. Это четвёртый этап.

О дополнительных этапах мы поговорим отдельно и позже.

Создаём новый проект

Открываем File а New... выбираем Flash File (Action Script 2.0). Предполагается, что многие уже знакомы с основными интерфейсными элементами флэша - такими, как панель инструментов Tool, окно Timeline, многофункциональные окна с закладками снизу и справа от рабочей области.

Action Script 2.0 мы выбрали в силу его простоты и расположенности к быстрому программированию.

Первый этап

Предположим, что в рамках самой игры все действия у нас будут происходить ночью. Почему? Нам же нужна красочность. А поездка в ночное время будет достаточно эффектно выглядеть - когда мы сможем сделать свет от фар и фонарей за счёт полупрозрачных элементов с градиентной заливкой.

Изначально размещаем основные статические элементы. С помощью линий (Line Tool) рисуем равнобедренную трапецию (дорогу), закрашиваем её в тёмно-синий цвет. Посередине этой трапеции таким же образом рисуем разделительную полосу (узкая равнобедренная трапеция), закрашивая её в белый цвет, она также будет являться статичной.

Следующим этапом станет создание движущейся полосы с одной из сторон, например, разделяющей левую половину дороги. Что для этого нужно сделать? Пожалуй, опишем самый простейший вариант. Как и в предыдущем случае, рисуем линиями геометрическую фигуру, в данном случае, четырёхугольник - с тем учётом, что он будет двигаться с левой от камеры стороны, то есть предусмотрим определённые углы наклона для его боковых сторон. Закрашиваем его в белый цвет, выделяем и нажимаем F8. Из главного меню вы можете узнать, что это обуславливает вызов операции Convert to symbol..., что на самом деле подразумевает присвоение выделенному фрагменту свойств одного из трёх типовых объектов - Movie Clip, Button или Graphic. Movie Clip - это, если объяснять простыми словами, базовый и многофункциональный объект флэша; Button - за самим объектом закрепляются все функции кнопок, при этом на автомате можно создавать варианты реакции на ключевые события, связанные с действием курсора мыши; Graphic - выделенный фрагмент преобразуется в обычнейший графический элемент без особых дополнительных функций и свойств.

В нашем случае мы выбираем MovieClip. В поле Name окна Convert to symbol... набираем "road_line_left" или что-то по вашему усмотрению. Это имя в нашем случае чаще всего будет использоваться для того, чтобы быстро добираться к графическому наполнению объекта из библиотеки проекта, поэтому тут можно поступать и как великие С-программисты сложных программ :).

А другое имя, которое будет использоваться нами в рамках кода на ActionScript, вводится в окне свойств Properties в поле Instance Name. Допустим, "rl_left". В этом же окне Properties вы можете поэкспериментировать с объектом, изменяя его прозрачность, цветовую гамму по соотношению к фоновому цвету дороги и так далее. Расположите полоску в самое дальнее по нашей виртуальной трассе место, при этом соблюдая пропорции и расположение.

Далее нажимаем F9 (это вызов окна Actions, в котором мы будем вводить код), а указателем мыши в окне Timeline щёлкаем на первом фрэйме (кадре) нашего слоя Layer 1. Этим самым произведена перспектива следующего действия: в окне Actions мы вводим код для первого кадра первого слоя. Что мы введём в первую очередь? Давайте поступим просто - перенесём исходные данные об изначальных координатах и размерах объекта "rt_left" в код. Это выгодно, особенно в случаях, если вы что-то случайно сместили и так далее.

Итак, вводим нечто типа:

rt_left._y = 1;
rt_left._x = 177;
rt_left._width = 5;
rt_left._height = 40;

Обратите внимание, что после ввода этих строк в окне Timeline в первом фрейме Layer1 появился значок ?. Это значит, что здесь уже есть код.

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

Как вы понимаете, любая анимация связана с изменениями чего-либо в процессе времени. Во Flash имеется несколько вариантов задания временных отсчётов. Самый редко используемый, к тому же неэффективный - использование циклов. Эту мысль отбрасываем сразу. Также можно сделать таймер на базе функции setInterval(), которая вызывает определённую функцию либо методы через определённо указанный временной интервал.

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

Под уже введённым кодом напишем (сами коэффициенты изменений нужно ставить свои):

rt_left.onEnterFrame = function() {
 rt_left._y = ddd._y+20;
 rt_left._x = ddd._x-4;
 rt_left._width = ddd._width+2;
 rt_left._height = ddd._height+3;
 if (rt_left._y>500) {
  rt_left._y = 1;
  rt_left._x = 177;
  rt_left._width = 10;
  rt_left._height = 40;
 }
}

Объясним. Функция rt_left.onEnterFrame описывает изменение состояний при каждом обновлении этого кадра (в данном случае первого). То есть при каждом отсчёте мы смещаем нашу полосу на 20 точек по ординате, на 4 по абсциссе, увеличиваем длину и ширину объекта. В случае, когда он выходит за видимую область (в строке с условием if (rt_left._y>500) мы предусмотрели вариант положения, близкого к крайнему), возвращаем нашу дорожную полосу в изначальное положение, и потом все действия повторяются наново. Получается цикличный режим.

Продолжение первого этапа

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

Рисуя последние, необходимо предусмотреть эмуляцию освещения дороги, ведь речь идёт о фонарях, для чего при их создании предусмотрите полупрозрачные графические элементы (используя альфа-каналы), закрашенные градиентной заливкой с оттенками жёлтого. Для того чтобы получить доступ к прозрачности, данные промежуточные элементы нужно конвертировать в символы типа Graphic (F8). Стоит отметить, что если у вас маломощные ПК, то особенно экспериментировать с градиентом не нужно, потому как его наличие сильно загружает компьютер.

И напоследок, для упрощения, скажем о том, что поскольку общая картина движения у нас предусматривает синхронизацию со сменой кадров, то для каждого из элементов отдельную функцию имя_объекта.onEnterFrame создавать не нужно, все изменения можно помещать в уже сформированную rt_left.onEnterFrame. Не забывайте о строках комментариев, в которых вы описываете, что и как делаете. В ActionScript они вносятся как и в С-подобных с помощью "//" для одной строки или "/* текст */" для множества.

(Продолжение следует)

Кристофер,
christopher@tut.by