Создание Flash-игр



Гонки

Исходный файл: Racing.fla

Чтобы сделать из игры "Сплав на байдарке" игру "Гонки", надо просто изменить графику и ничего больше. Замените байдарку на машину. Замените кадры с поворотами, чтобы показывать поворот колес машины, а не поворот байдарки в другом направлении. Замените кадр перевернувшейся лодки на кадр автокатастрофы и т.д.
Однако мы можем использовать похожую технику для создания гоночных игр разных типов. Вместо вида на дорогу сверху мы можем сделать вид с водительского места. Дорога движется к игроку (см. рис 9.9).

Рисунок 9.9 В игре гонки дорога движется по направлению к игроку

Задача проекта

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

Подход

Иллюзия глубины может быть достигнута простым использованием перспективы. На рисунке 9.9 показано, что границы дороги нарисованы диагонально по направлению к нижним углам экрана. Хотя ширина дороги предполагается постоянной, глазу кажется, что дорога спереди уже.
В дополнение к линиям, все элементы игры должны появляться с некоторого расстояния. Это означает, что они должны двигаться не только сверху вниз, но и в стороны. Сыграйте прямо сейчас, чтобы посмотреть, как движутся камни по краям дороги и дорожные метки, похожие на звезды.
Три типа элементов движутся в этой игре: камни по сторонам дороги, звездообразные "бонусы"-метки на дороге и центральная линия дороги. В зависимости от скорости машины камни движутся по экрану вниз быстрее или медленнее. Движение камней в сторону - разбегание, создающее иллюзию перспективы, - происходит с той же скоростью, что и вниз.
Звездообразные метки располагаются ближе к центру экрана, поэтому они движутся в стороны не так быстро, как вниз; скорость их движения в стороны составляет половину от значения скорости движения вниз. Это соответствует перспективе, заданной сторонами дороги. Центральная линия просто движется прямо вниз.
Все эти элементы повторяются в игре раз за разом. Например, как только камень достигает нижней границы экрана, он снова появляется на горизонте и опять движется к игроку.
В дополнение к движению трех элементов игры мы также изменяем их масштаб. Таким образом, объекты, которые предполагаются далекими, выглядят меньше и увеличиваются по мере приближения.
Наша цель не в том, чтобы создать перспективу, реальную до последнего пиксела, а в том, чтобы достаточно к ней приблизиться, предоставив возможность воображению пользователя довершить остальное и почувствовать себя въезжающим в экран.

Подготовка ролика

Фон и линии, обозначающие границы дороги, - неподвижные элементы. Но для камней и звездообразных меток нужны клипы. Клип центральной линии - это просто линия, но расположенная таким образом, чтобы центральная точка клипа была на вершине линии.
Машина сама по себе нуждается в трех кадрах.- прямое движение, левый и правый повороты, которые используются, чтобы показать, что машина поворачивает.
Клипы камней и бонусных меток должны быть помещены под нижней границей экрана и названы "SideObject" и "bonus". Клип машины следует поместить внизу экрана и назвать "саг". Кроме того, слева находится клип "actions". Во всех четырех клипах содержатся сценарии. На экране должны быть два динамических текстовых поля: "timeDisplay» и "score". Они оба должны быть привязаны к переменным с такими же именами.
В ролике-примере я обозначил вводный кадр как кадр 1, таким образом, все действие начинается с кадра 2. Есть еше третий кадр с меткой "game over".

Создание кода

Основная часть кода - это сценарий клипа машины. Он начинается с задания переменной speed значения 0. Эта переменная должна быть на уровне _root, поскольку остальные клипы будут к ней обращаться.

onClipEvent(load) {
// Инициализируем переменную скорости.
_root.speed = 0;
}

Обработчик onClipEvent (enterFrame) сначала проверяет все четыре клавиши с изображением стрелок. Левая и правая клавиши со стрелкой перемешают машину влево или вправо и также заставляют клип с машиной показывать соответствующий кадр поворота.
Клавиши со стрелками вверх и вниз изменяют скорость машины на 0,1. Постоянно осуществляется проверка, не упала ли скорость ниже 0.
Если ни одна из клавиш со стрелками не нажата, клип с машиной возвращается к первому кадру. Обработчик осуществляет еще две проверки. Первая нужна, чтобы узнать, не находится ли под машиной клип "bonus". Если да, игрок получает очки, и бонус очень быстро проезжает далее, чтобы игрок не получил за него очки еще раз.
Вторая проверка выясняет, не коснулась ли машина обочины. Если да, движение машины в сторону ограничивается и замедляется.

onClipEvent(enterFrame) {
if (Key.isDownfKey.LEFT)) {
// Поворачиваем влево.
this._x -= 10;
this.gotoAndStop("left");
} else if (Key.isDown(Key.RIGHT)) {
// Поворачиваем вправо.
this._x += 15;
this.gotoAndStopC'right") ;
} else if (Key.isDown(Key.UP)) {
// Увеличиваем скорость.
_root.speed += .1;
} else if (Key.isDown(Key.DOWN)) {
// Тормозим.
_root.speed -= . 1;
// Проверяем, что скорость не меньше 0.
if (_root.speed < 0) _root.speed = 0;
} else {
_root.car.gotoAndStop("straight");
// Проверяем бонус.
if (this.hitTest(_root.bonus._x,_root.bonus._y)) {
_root.score++;
_root.bonus._y +=100;
// Замедляем движение, если коснулись обочины,
if (this._x < 80) {
this._x = 80;
_root.speed /= 2;
} else if (this._x > 470) {
this._x = 470;
_root.speed /= 2;
}}

Клип "sideObject" содержит сценарий, двигающий объект вниз и в сторону от центра. Для каждого следующего кадра значение _у увеличивается, а _х - изменяется. Оба параметра используют переменную speed для характеристики этого изменения, но _х использует коэффициент dx который может быть равен 1 или -1. Объект перемешается соответственно вправо или влево.
Когда объект достигает значения 600 по вертикали, что на 200 пикселов ниже границы экрана, он возвращается назад к значению 200, то есть вновь появляется на горизонте. С вероятностью 50/50 он помещается слева или справа от дороги. Именно в этот момент определяется значение переменной dx.
И наконец, масштаб объекта определяется в соответствии со значением _у. Это означает, что объект становится больше по мере приближения

onClipEvent(enterFrame) {
// Движемся вниз.
this._y += _root.speed;
// Движемся в стороны.
this._x += dx*_root.speed;
// Возвращаем объект на исходную озицию, если он проехал за
// нижнюю границу экрана.
if (this._y > 600) {
this._y = 200;
if (Math.random() < .5) {
// Объект слева.
this._x = Math.random()*170;
dx = -1;
} else {
// Объект справа.
this._x = 550-Math.random()* 170;
dx = 1;
// Задаем масштаб в соответствие со значением
_у. this._xscale = this._y/4;
this._yscale = this._y/4;
}

Обратите внимание, что клип "sideObject" не взаимодействует с машиной. Это делает только клип "bonus". Но объекты по сторонам дороги направляют взгляд игрока так, что создается ощущение глубины.
Центральная линия движется, как и камни, но, поскольку она находится в центре экрана, она не передвигается ни вправо, ни влево. Она просто движется вниз и изменяет масштаб.

onClipEvent(enterFrame) {
// Движемся вниз.
this._y += _root.speed;
// Возвращаемся к горизонту.
if (this._y > 400) {
this._y = 200;
// Устанавливаем масштаб.
this._xscale = this._y/4;
this._yscale = this._y/4;
}

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

onClipEvent(enterFrame) {
// Движемся вниз.
this._y += _root.speed;
this._x += dx*_root.speed;
// Возвращаемся к горизонту,
if (this._y > 600) {
this._y = 200;
if (Math.random() < .5) {
// Переходим на левую сторону дороги.
this._x = 250;
dx = -.5;
} else {
// Переходим на правую сторону дороги.
this._x = 300;
dx = .5;
} // Устанавливаем масштаб в соответствии с вертикальным
// положением.
this._xscale = this._y/4;
this._yscale = this._y/4;
}

Клип "actions" расположен вне экрана и содержит игровые часы. Он замечает время начала и производит обратный счет до 0. В клипе-приме игра очень короткая, всего 15 секунд. Вы можете увеличить ее до минуты или двух.
Когда обратный отсчет доходит до 0, главная временная шкала отправляется к кадру "game over". Параметр speed становится равным 0, и машина замирает на месте.

onClipEvent(load) {
// Рассчитываем время окончания игры.
endTime = getTimer()+15000;
onClipEvent(enterFrame) {
// Подсчитываем, сколько времени прошло.
timeLeft = (endTime - getTimer())/1000;
// Конец игры.
if (timeLeft <= 0) {
_root.speed = 0;
_root.timeDisplay = "0";
_root.gotoAndStop("game over");
} else {
// Отображаем оставшееся время.
_root.timeDisplay = timeLeft;
}}

Кроме команды stop () в первом кадре, есть еще только один сценарий временной шкалы - в главном кадре игры. Он перемешает машину на передний план (уровень) экрана, так что центральная линия и бонусные звезды оказываются под ней. Кроме того, короткий цикл дублирует клип "sideObject" 5 раз. Каждой копии придано разное значение _у, поэтому камни не появляются все одновременно.

// Помещаем машину на передний план,
car.swapDepths(999);
// Создаем пять камней.
for(i=0;i<5;i++) {
mc = sideobject.duplicateMovieClip("side object"+i,i);
mc._у = 400+Math.random()*200;
}

К сведению

Ролик-пример содержит вводный кадр и в нем кнопку начала игры. Третий кадр содержит сообщение "Game over" и не включает в себя клип с бонусом, который содержится только во втором кадре. Это предотвращает получение игроком очков после окончания игры. Я также добавил в ролик-пример фоновый пейзаж.

Другие возможности

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

Назад Начало  



Книжный магазин