Сегодня я научу вас, как сделать небольшую, но классную игрушку на флэше из книжки "Написание развлекательных и игровых сценариев". Это игра "на убегание", единственная цель играющего - уворачиваться, чтобы в него не попали. Мы здесь все несколько упростим, но лишь для того, чтобы вы могли яснее понять суть. Потом можете все это приукрасить, если захотите. Мы будем управлять прямоугольником, задача которого - уворачиваться от движущихся квадратов. Пример перед вами. Приступим!
Откройте Флэш, оставьте все настройки по умолчанию. Мы создадим все клипы прямо сейчас, поэтому уберите все лишнее. Выйдите в пункт меню Insert < New Symbol (вставка < новый символ) или нажмите CTRL+F8 и убедитесь, что выбрался пункт клипа. Назовите этот клип "box". Кликните на фрейме 1 этого клипа и нажмите три раза F6, чтобы создать 4 ключевых фрейма, пока что пустых.
2. Возьмите инструмент Rectangle (прямоугольник) - для этого надо нажать R. Чтобы получился квадрат, удерживайте клавишу "SHIFT". Создайте скромненький квадратик... как насчет размера 45 на 45? Перейдите к пункту меню Window > Align или нажмите CTRL+K. Кликните на двух изображенных ниже кнопках, и убедитесь, что кнопка "To Stage" (поставить) тоже нажата.
Теперь во втором фрейме создайте еще один квадрат, но другого цвета. Я взял красный. Чтобы отцентровать его, воспользуйтесь Align Window (выравнивание). Потом сделайте то же самое в третьем фрейме, но на этот раз пусть квадрат будет синим. Выровняйте его таким же образом, и возвращайтесь в основную рабочую область.
4. Нажмите CTRL+F8 или Insert > New Symbol (вставка > новый символ) и создайте новый клип. Теперь назовите его "rect". Как вы могли уже догадаться, в нем будет находиться наш прямоугольник, который будет уворачиваться от квадратов. Итак, нарисуйте в первом фрейме этого клипа приямоугольник малой ширины и большой высоты. (Если я непонятно выразился, взгляните на рисунок внизу). Своему я задал ширину 75 и высоту 130. Давайте-ка, выполняя этот урок, и вы возьмете те же размеры.
5. Выровняйте его по центру тем же способом, что предыдущие. Теперь кликните на фрейме один и откройте окно Properties Inspector (инспектор свойств), обратившись к пункту меню Window > Properties (окно > свойства). Там, где запросят метку фрейма, назовите его "normal". Создайте ключевой кадр во втором фрейме (для этого надо на нем кликнуть и нажать F6). Возьмите инструмент Transform (трансформация) и слегка поверните прямоугольник, чтобы он выглядел, как на нижеприведенной картинке. Потом задайте фрейму метку "right".
Теперь кликните на фрейме 3 и еще раз нажмите F6. Теперь обратитесь к пункту меню Modify > Transform > Flip Horizontal (модификация > трансформация > отражение по горизонтали). Сделав все это, задайте фрейму метку "left". Теперь перейдите к фрейму 1, кликните на прямоугольнике и скопируйте его - Edit > Copy (редактировать > копировать). Теперь вставьте в четвертый фрейм пустой ключевой кадр - для этого кликните на четвертом фрейме и нажмите F7. Потом пройдите по меню Edit > Paste In Place (редактировать > вставить в область) или, что то же самое, нажмите CTRL+SHIFT+V. Теперь кликните на двенадцатом фрейме и снова нажмите F6. Кликните на четвертом фрейме, откройте окно Properties Inspector (инспектор свойств) и выберите Motion (движение). Там, где написано "rotate" (вращение) укажите "CW" ("по часовой стрелке") и "3 times" ("3 раза").
Теперь откройте библиотеку Windows > Library (окна > библиотека), кликните правой кнопкой мыши на "box" (пункт) и в появившемся контекстном меню кликните на "Linkage" (связки). Проставьте галочку в пункте "Export for Actionscript" (экспорт для скрипта). Нажмите ОК. Обратите внимание! в этот момент появится галочка в пункте "Export in first frame" ("экспортировать в первый фрейм"). Потом проделайте все то же самое для клипа "rect".
6. Вернитесь к основному рабочему пространству и снова нажмите CTRL+F8, чтобы создать еще один клип. Кликните на кнопке клипа и дайте ей любое название, неважно какое. Я назвал "actions". Теперь эта кнопка будет запускать клип "actions". Не волнуйтесь, что вы ничего не написали в самом сценарии, просто вернитесь к основному рабочему пространству. Снова откройте библиотеку и перетащите значок этого клипа на рабочее пространство. Поскольку он пустой, он появится только в виде белого кружочка, на котором видно несколько перекрещенных ворсинок (если он не выделен). Выделите видеоклип и откройте окно сценариев - Window > Actions (окно > сценарии). Вставьте туда следующий код:
onClipEvent(load) {
_root.initGame();
}
onClipEvent(enterFrame) {
_root.moveRect();
_root.newBox();
_root.moveBox();
}
Именно эти функции понадобятся нам для создания игры. Одна из них запускает игру, другая двигает прямоугольник, третья создает новое препятствие, а последняя, четвертая это препятствие перемещает. Обратите внимание - если вы назвали свои клипы по-разному и залинковали их своим собственным названием, то вам теперь придется поменять эти названия во всем нижеприведенном коде. Если, к примеру, вы назвали свои квадраты не "box", а "enemy", то в каждой строке, где содержится слово "box", вы должны будете заменить его на "enemy". _root.moveEnemy(); и то же самое придется проделать для клипа "rect". В любом случае надо перетащить клип "actions" на рабочее пространство во фрейм 2, если вы этого до сих пор еще не сделали. Ну вот и основной код. Радуйтесь :)
stop();
function initGame() {
//диапазон движущихся квадратов
firstBox = 1;
lastBox = 0;
//количество жизней (изначально)
hits = 5;
//параметр, влияющий на уровень сложности
totalBox = 50;
//задать скорость и задержку во времени
timeSinceLastBox = 0;
bgSpeed = 0;
//создать прямоугольник так, чтобы он находился выше уровня квадратов
attachMovie( "rect", "rect", 999999 );
rect._x = 275;
rect._y = 200;
}
function moveRect() {
if (rect._currentFrame >4) {
//if during a hit dont look at keys
dx = 0;
} else if (Key.isDown(Key.RIGHT)) {
//rect turns right
dx = bgSpeed;
rect.gotoAndStop("left");
} else if (Key.isDown(Key.LEFT)) {
//rect turns left
dx = -bgSpeed;
rect.gotoAndStop("right");
} else {
//no key
dx = 0;
rect.gotoAndStop("normal");
}
//передвижение прямоугольника и ограничения этого передвижения
rect._x += dx;
if (rect._x < 150) rect._x = 150;
if (rect._x > 400) rect._x = 400;
//двигаться чуть побыстрее. Для более высоких уровнй можно повышать эту скорость, чтобы играть было труднее, главное - не перестараться
if (bgSpeed < 20) bgSpeed += .5;
}
function newBox() {
//добавить новый, только если предыдущий пробыл достаточно долго
if (timeSinceLastBox > 5) {
//начинать, тольео если есть еще квадраты
if (lastBox < totalBox) {
//добавить только 10% времени. Чтобы препятствий было больше - заменить процентное число
if (Math.random() < .1) {
//создать следующий квадрат и установить его местоположение
lastBox++;
attachMovie( "box", "box"+lastBox, lastBox );
_root["box"+lastBox]._x = Math.random()*250+150;
_root["box"+lastBox]._y = 450;
//определить, какой фрейм показывать
f = int(Math.random()*_root["box"+lastBox]._totalFrames) + 1;
_root["box"+lastBox].gotoAndStop(f);
//обновить задержку времени для следующего квадрата
timeSinceLastBox = 0;
//установка того, было ли солкновение
_root["box"+i].hit = false;
}
}
}
//даже если квадрат не добавлен, приблизиться к следующему квадрату
timeSinceLastBox++;
}
function moveBox() {
//закольцевать через все существующие клипы с квадратами
for (i=firstBox;i<=lastBox;i++) {
//get box location
x = _root["box"+i]._x;
y = _root["box"+i]._y - bgSpeed;
//проверить, прошел ли квадрат верх
if (y < -50) {
removebox(i);
//чтобы было засчитано столкновение, квадрат должен не иметь столкновений до того
//и квадрат с прямоугольником должны находиться достаточно близко
} else if ((_root["box"+i].hit == false) and (Math.abs(y-rect._y) < 90)
and (Math.abs(x-rect._x) <25)) {
hits -=1;
//отметить, что произошло столкновение
_root["box"+i].hit = true;
//показать анимацию столкновения
rect.gotoAndPlay("hit");
//остановить прямоугольник
bgSpeed = 0;
// закончить игру?
if (hits == 0) {
removeAll();
totalBox = n;
gotoAndPlay("lose");
}
}
//продолжать двигать квадрат
_root["box"+i]._y = y;
}
}
function removeBox(n) {
//убрать клип с квадратом
_root["box"+n].removeMovieClip();
//обновить диапазон движущихся камней
firstBox = n+1;
//проверить, последний ли это был квадрат
if (n == totalBox) {
removeAll();
gotoAndPlay("win");
}
}
function removeAll() {
//убрать все оставшиеся квадраты
for (i=firstBox;i<=lastBox;i++) {
_root["box"+i].removeMovieClip();
}
rect.removeMovieClip();
}
Не думаю, что надо объяснять, для чего нужна каждая из строк - для этого есть комментарии. В любом случае, 9/10 работы вы уже сделали.
Теперь, оставаясь все еще во фрейме 2, переключитесь на инструмент text (текст) и откройте окно Properties Inspector (инспектор свойств) - Window < Properties (окна < свойства). Здесь откройте выпадающее меню там, где написано "Text Tool" (инструмент "текст"). Если вы еще ничего не напечатали, там, возможно, будет пусто. Выберите из меню пункт "Dynamic Text" (динамический текст), и создайте текстовое поле, не очень большое. Где написано "Var", вставьте "hits". Затем создайте новое текстовое поле, в выпадающем меню задайте ему значение "static text" (статический текст), и напечатайте: "Hits:". Разместите его слева от динамического текста. И то, и другое поле я предлагаю поместить в правый верхний угол.
Если вы теперь протестируете клип (Control > Test Movie - управление > протестировать клип), он должен работать. У вас должно получаться двигать прямоугольник и уворачиваться от квадратов. Если в вас попадают, вы останавливаетесь, и ваш счет падает до единицы. Но если вы увернетесь от всех квадратов, ничего не произойдет. И если вы потеряете все очки, тоже ничего не произойдет. Нам надо что-то сделать, чтобы чем-то ознаменовать эти события.
8. Поэтому кликните на фрейме 3, не закрывая окна Properties Inspector, и впечатайте в поле "Frame Label" (метка фрейма) значение "win". Затем создайте с помощью инструмента text новый статический текст, который объявляет, что, дескать, вы выиграли. Какой-нибудь простенький текст типа "вы выиграли!". Кликните на фрейме 3, откройте окно actions (сценариев), и вставьте туда действие stop();
9. Кликните на фрейме 4, и задайте метку фрейма "lose". Опять откройте меню actions и вставьте туда действие stop(); как вы сделали это во фрейме 3. Теперь инструментом text создайте какой-то статический текст, гласящий что-нибудь вроде "вы проиграли!". Перейдите на фрейм 1 и туда тоже поместите действие stop();
10. В качестве последнего штриха надо создать несколько кнопок. На самом деле даже одну кнопку. Нажмите CTRL+F8, чтобы создать новый клип. Выберите клип типа button radio и назовите его как-нибудь вроде "play". И просто нарисуйте маленький прямоугольник с помощью инструмента Rectangle. С помощью инструмента Text напишите на нем "Play". Теперь вернитесь на основное рабочее поле. Откройте библиотеку и перетащите значок кнопки "Play" во фреймы 1, 3 и 4. И вставьте для каждой из кнопок следующий код:
on (release) {
gotoAndstop (2); }
Вставили? Теперь протестируйте игру еще раз. Сбейте по-быстрому пять квадратов и посмотрите, что будет. А теперь попытайтесь увернуться ото всех, и посмотрите, работает ли фрейм с сообщением о победе. Если все в порядке - значит, вы только что создали первую свою игру! Поздравляю. Теперь можно, например, сделать новые сцены и повторять все шаги заново, создавая новые уровни.