Статьи

Создайте игру-стрелялку во Flash MX

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

В этом уроке мы собираемся использовать Flash MX и ActionScript для создания настраиваемой стрелялки (вы можете скачать готовые файлы swf и fla здесь ). Вам также понадобится доступ к Photoshop или подобному пакету краски для создания вашей графики. Возможно, у вас уже есть что-то подходящее или вы решили использовать что-то из Интернета. Если вы решили использовать изображения, отличные от ваших, обязательно проверьте авторские права.

Небольшое количество знаний в области программирования полезно в этом уроке, но не является обязательным. Все области кода ActionScript объяснены.

С этим из пути пришло время начинать. Перво-наперво: кофейник! Хотя это руководство не сложно, некоторые концепции могут занять некоторое время, чтобы полностью понять, если вы новый программист. Конечно, вы можете просто скопировать код во Flash и изменить соответствующие переменные. Но, если вы собираетесь персонализировать это в будущем, почему бы не потратить время, чтобы понять это сейчас?

Как работает игра

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

В игре 3 цели. Эти цели помещаются в массив, а затем выбираются случайным образом. Имея только 3 цели, я не могу гарантировать, что вы никогда не будете играть одну и ту же последовательность более одного раза, но случайная функция помогает сделать ее интересной. У каждой цели есть 2 других графика, связанных с ней. Первым является рисунок «Активная цель» — простая красная граница, указывающая, к какой цели следует стремиться; второй — черный ящик, чтобы закрыть его, указывая, что его больше нет в игре. Конечно, используя собственное воображение, вы можете сделать намного лучше, чем эти быстрые идеи!

Графика

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

  • Целевое изображение
  • Перекрестие, чтобы прицелиться
  • Активное целевое изображение
  • Изображение для обозначения цели уничтожено

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

Я предполагаю, что вы собираетесь использовать одно и то же изображение для каждой из трех целей, которые мы строим. Активное изображение цели — это незаполненный красный квадрат, который может поместиться вокруг цели; для уничтоженного целевого изображения вам просто понадобится черный квадрат, который закроет изображение. Во Flash вы можете создать квадрат, затем удалить центральную заливку или просто создать ее с прозрачной заливкой. Но, поскольку этот урок не о создании изображений, мы не будем слишком подробно останавливаться на этом вопросе.

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

Создайте Flash-фильм

Запустите Flash MX и, если вы еще этого не сделали, откройте новый файл. Нажмите Сохранить и назовите свой фильм (вы можете быть оригинальным и назовите его shootemup.fla).

Теперь назовите ваш слой «Цели», и в кадре 1 импортируйте целевое изображение на сцену.

Импорт файла или (ctrl + R [pc]) — [Просмотреть изображение] — Открыть

Когда ваша цель находится на главной сцене, убедитесь, что она выбрана, и сделайте ее отдельным клипом (F8 [pc]). Когда появится диалоговое окно «Создать символ», назовите видеоклип (MC) «target» и убедитесь, что выбран переключатель «Movie Clip». В «Инспекторе свойств» назовите экземпляр «target1». Пока вы это делаете, перетащите еще два экземпляра TargetMC на сцену и присвойте им имена экземпляров ‘target2’ и ‘target3’ соответственно. Нажмите на кадр 2 и нажмите (F5), чтобы скопировать кадр. Сейчас мы будем придерживаться трех статических целей — хотя, помимо этого урока, сколько целей вы добавляете и как они перемещаются, полностью зависит от вас.

Создайте еще один слой, назовите его «Текст», а во фрейме 1 используйте инструмент «Текст», установив параметр «Динамический текст», чтобы создать 2 поля размером около 30 символов вдоль верхней части экрана. Размер и цвет шрифта зависит от вас. Вы можете также хотеть потратить некоторое время, оценивая и выравнивая.

Выберите параметры «одиночная линия» и «рамка вокруг текста» в инспекторе свойств. В поле экземпляра свойств назовите эти «hit» и «info» соответственно. Перейдите к кадру 2 на временной шкале и создайте новый ключевой кадр (F6). Затем, в соответствующем бите пробела на сцене, добавьте текст вдоль строк «ИГРА НАД».

Создайте еще один слой и назовите его «Действия». Откройте панель (Window Menu-Actions или (F9 [PC])) и скопируйте следующий код в кадр 1:

(ActionScript (AS) for frame 1)  
 
stop();  
//Set global highScore variables  
highScore = 0;  
 
//Set the properties for the game elements  
_root.lastFrame = false; //Stop bullets  
        //See AS for bullet MC for details  
 
setProperty(_root.crosshair, _visible, true);  
SetProperty(_root.bullet, _visible, false); //  
//Individual destroyed target images hidden until needed  
setProperty(_root.target1d, _visible, false);  
setProperty(_root.target2d, _visible, false);  
setProperty(_root.target3d, _visible, false);  
//As above. Individual highlighted target images hidden until needed  
setProperty(_root.target1Image, _visible, false);  
setProperty(_root.target2Image, _visible, false);  
setProperty(_root.target3Image, _visible, false);  
 
mouse.hide(); //hide mouse to use cross-hairs  
 
//select a target to shoot at random then add that target  
//to the array of selected targets so that it isn't used  
//again in this game.  
//When the number of direct hits against the selected  
//target has been reached. Find another random target.  
//Check whether it exists in the array. If yes, select  
//again. If no, make visible.  
 
_root.targets = new Array(); //create array on the main  
             //timeline so that it is  
             //easily accessed by all MCs  
_root.targets[0] = "target1";  
_root.targets[1] = "target2";  
_root.targets[2] = "target3"; //3 targets we are using in  
               //tutorial  
 
n = _root.targets.length; //get length of array  
 
ran = random(n); //get random number location to select from array  
 
target = _root.targets[ran]; //show random array location  
 
_root.activeTarget = target; //create target variable  
 
setProperty("_root."+target+"Image", _visible, true); //show target  
 
_root.targets.splice(ran, 1); //remove the random element  
         //from the array. splice  
         //the random number found and  
         
           //to the depth of one so only  
           //one element is removed.  
//-------------------------------------------------------//

(КАК для действий кадр 2)

Нажмите на кадр 2 в слое Actions и создайте пустой ключевой кадр (F7). Затем введите следующий код в панель действий:

 stop();  
 
_root.lastFrame = true; //Stop bullets  
       //See AS for bullet MC for details  
             
mouse.show(); //reshow mouse  
 
setProperty(_root.crosshair, _visible, false); //Hide cross hair  
 
target1Hits = 0; //reset the hits for each target in case another  
        //game is played.  
target2Hits = 0;  
target3Hits = 0;  
 
//-------------------------------------------------------//

Создать перекрестие

Создайте новый слой под названием «цель / огонь» над слоем «Цели». Создайте новый мувиклип, нажав (Ctrl + F8) и назовите его «перекрестие». Символ должен был открыться для редактирования, поэтому создайте дополнительный слой и назовите его «Действия». В кадре 1 добавьте действие остановки:

 stop();

Назовите оригинальный слой «Изображение» и импортируйте изображение с перекрестием в кадр 1, совместив его с центром сцены (представленным крестиком). Теперь скопируйте это изображение на кадры 2 и 3, создав новые ключевые кадры (F6). В кадре 2 расположите изображение на несколько пикселей выше, чем два других, как будто для создания впечатления от выстрела. Здесь полезно отметить, что перекрестие было бы намного более реалистичным, если бы вы также импортировали звуковую волну на новый слой в кадре 2. Существует много источников для этого в Интернете, но хорошей отправной точкой будет www.flashkit. .com .

Вернитесь к основной временной шкале, нажав на ссылку «Сцена 1» под временной шкалой. Теперь перетащите экземпляр вашего CrosshairMC из библиотеки и поместите его с левой стороны сцены. Выберите MC и назовите его «перекрестие» в поле экземпляра инспектора свойств. Затем откройте панель «Действия» и введите следующее:

 (ActionScript (AS) for the cross-hair)   
 
onClipEvent(enterFrame) { //When this frame(start)of the  
          //movie is entered place this  
          //MC wherever the mouse is.  
 
this._x = _root._xmouse;  
this._y = _root._ymouse;  
}  
 
//-------------------------------------------------------//
Создание пуль

Это должно быть самой простой частью всего урока. Выполните шаги для создания нового символа, как описано выше. Создайте новый символ и назовите его «bullet». Затем, когда вы редактируете MC, все, что вам нужно сделать, это создать маленькое изображение черной пулевой дыры в кадре 1 с помощью кисти. Это не должно быть очень аккуратно. Выберите это, превратите в видеоклип (F8) и назовите его «пулевая дыра». Нажмите на кадр 30 временной шкалы и нажмите (F5), чтобы заполнить все кадры между ними. Затем нажмите (F6), чтобы сделать кадр 30 ключевым. Выбрав изображение на сцене в кадре 30, перейдите в инспектор свойств и измените цвет на «Альфа» и «0%».

Теперь щелкните правой кнопкой мыши в любом кадре от 1 до 30 на временной шкале и выберите «Создать анимацию движения». Это приведет к анимации кадров, поэтому при воспроизведении фрагмента ролика до 30-го кадра пуля будет медленно исчезать. Если вы не хотите, чтобы это произошло, просто поместите изображение маркера в кадр 1 и оставьте все как есть.

Теперь создайте новый слой и назовите его «Actions». Нажмите на кадр 30 на временной шкале для этого слоя и создайте новый пустой ключевой кадр (F7). Выберите панель «действия» и поместите в действие остановки:

 stop();

Вернитесь к основной временной шкале, щелкнув ссылку «Сцена 1», как и раньше, затем перетащите экземпляр пули с левой стороны сцены рядом с перекрестием.

Выберите экземпляр маркера на сцене, назовите экземпляр «bullet», затем введите следующее на панели действий:

 (ActionScript (AS) for the bullets)   
 
onClipEvent(mouseDown) {  
 if(!_root.lastFrame) { //if not in the lastFrame  
 i++; //increase the number of i each time so that the  
   //duplicateMCs have a new depth to load to.  
 
 this.duplicateMovieClip(\\"bulletnew\\", i); //create new  
                  //duplicate  
                  //bulletMC  
   
 _root.crosshair.play(); //play the crosshair movie  
   
 }  
}  
 
onClipEvent(load) { //show bullets wherever mouse is as  
       //each new mc is loaded. Initial bullet  
       //as game loads won't show as it is  
           //hidden in the actions for the    
       //first frame.  
 
 if(!_root.lastFrame) {  
   this._x = _root._xmouse;  
   this._y = _root._ymouse;  
 }  
}  
 
//-------------------------------------------------------//

ActionScript для целей

Все еще со мной? Ваш фильм точно не будет вдохновлять, как сейчас. Что нам нужно сделать, это начать добавлять некоторые действия к целям.

ActionScript практически одинаков для всех целей, поэтому вы можете просто вырезать и вставить. Просто знайте, что при использовании кода для «target2» или «target3» вам нужно будет найти и заменить «target1» на «target2» или «target3». Это все выделено в коде, чтобы помочь вам. Вам также необходимо обновить переменную ‘activeTarget’.

Выберите экземпляр Target1 ‘Target1’ на главной сцене, щелкнув по нему левой кнопкой мыши, и откройте панель действий (Window Menu-Actions или (F9 [pc]). Скопируйте в него следующий код.

 (AS for individual targets)    
   
onClipEvent(mouseDown) {    
hitsNeeded = 5; //hits needed to destroy target - this    
     //can be any number you want    
   
     
//CHANGE target1.hitTest, target1Hits and activeTarget to read target2 //or target3 for other targets and target1 to read 2 or 3 as in the //array we set up.    
 if(_root.target1.hitTest(_root._xmouse, _root._ymouse, true) && (_root.target1Hits<hitsNeeded) && (_root.activeTarget == \\"target1\\")) {    
 //OK From the top on this one:    
     //Using the AS hitTest() method    
     //If the specified MC is clicked on and    
     //if the hits needed on this MC have not    
     //reached the maximum and    
     //*if* it is the active target (activeTarget              
       
//CHANGE target1Hits to read target2Hits or target3Hits for other //targets    
   _root.target1Hits++; //increase MC hits variable by 1    
   _root.directHits++; //increase direct hits variable    
   _root.hits.text = _root.directHits+\\" of \\"+hitsNeeded+\\" needed.\\";    //display current hits for target in a text    
     //field on the main stage    
   
 highScore = _root.highScore;    
 highScore = highScore + 10; //increase high score by                 //however many points you                 //want for a hit.    
   
 _root.info.text = highScore;    
 _root.highScore = highScore; //update the variable on    
               //the main stage    
   
//CHANGE target1Hits to target2Hits or target3Hits for other //targets    
 if(_root.target1Hits == hitsNeeded) { //if hits needed total    
               //is reached    
_root.directHits = 0; //reset direct hits counter for future          
   //targets    
   
 //CHANGE to target2Image or target3Image for other targets    
 setProperty(_root.target1Image, _visible, false);    
//hide target    
   
 //CHANGE to target2d or target3d for other targets    
    setProperty(_root.target1d, _visible, true);    
     //Show the target destroyed image    
        //Check if array is now empty    
     //If so, endgame    
   
   
 n = _root.targets.length;    
 if(n == 0) {    
   _root.gotoAndPlay(2);    
 }                    
   
 //If it wasn't empty...    
 //generate a random target    
     
 n = _root.targets.length //get the current array    
//length    
 ran = random(n); //get random number location to    
         //select from array    
   
 target = _root.targets[ran]; //create target variable    
   
 _root.activeTarget = target; //set active target    
   
 setProperty(\\"_root.\\"+target+\\"Image\\", _visible, true);    
               //show target    
   
   
 _root.targets.splice(ran, 1); //remove the random    
             //element from array    
                //so that target cannot    
             //be picked again in    
             //this game    
   
 _root.hits.text = \\"target destroyed!\\"; //update the    
                   //text field    
   }    
}    
}    
   
//-------------------------------------------------------//

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

Создание активных целевых изображений

Это мило и просто! Просто создайте новый видеоклип под названием «Активный», а затем создайте красный прямоугольник, достаточно большой, чтобы покрыть цель прозрачной заливкой.

Создайте над целевым слоем новый слой под названием «Активные цели» и поместите три экземпляра этого фрагмента ролика поверх ваших целей в кадре 1. В инспекторе свойств назовите экземпляры «target1Image», «target2Image» и « target3Image ‘, соответственно.

Создание целевых разрушенных изображений

Это почти то же самое, что и выше, на самом деле. Создайте новый видеоклип под названием «Уничтожено», затем создайте новый слой над последним, под названием «Уничтоженные цели». Добавьте 3 экземпляра, называемых «target1d», «target2d» и «target3d», соответственно.

Это оно! Кроме…

Если вы уже прошли этот урок, у вас должны быть все элементы, чтобы начать играть в свою игру. Возможно, вы захотите добавить один или два других элемента, например кнопку «повторить игру», которая может быть такой же простой, как использование стандартной кнопки из общих библиотек, входящих в комплект Flash (Window-Common Libraries-Buttons). Поместите кнопку в рамку 2, затем выберите ее и вставьте следующее в панель действий:

on (press) {    
 prevFrame();    
}

Попутно вы наверняка подумали о том, что вы можете добавить в игру — то, что вы узнали здесь, будет только началом. Удачной игры!