Четверг, 05 Декабря 2024, 10:57

Приветствую Вас Гость

[ Новые сообщения · Игроделы · Правила · Поиск ]
  • Страница 1 из 1
  • 1
Flex и ActionScript 3.0 для создания мини-флеш игр. Часть 1
B1zDelKinДата: Пятница, 22 Января 2010, 11:22 | Сообщение # 1
частый гость
Сейчас нет на сайте
Для создания игр ака Братья Марио, Пэкмен, Паззл или Мемория в среде Flash в основном использутся программы Flash CS*вписать нужное число* и ей подобные. Разумеется, среда Flex обладает не меньшим (а значительно большим) потенциалом для такой работы.

Однако, исследуя данный вопрос на бескрайних просторах интернета, обнаружил, что тема освещена достаточно неважно. Между тем, использование этих знаний существенно повысит мощь создаваемых Вами Flex-приложений. Раз мы здесь говорим о ГемДев'е... то это могут быть и мини-игры для ващей браузерной игры, чтобы игрокам не было скучно во время каких-то действий, или даже основой для вашей игры.

В данной серии уроков, будет пройден путь от простой экранной стрелялки до простой карты-квеста для создаваемой в данном разделе Ассасином игры (с его согласия ессно).

Для работы будет использоваться бесплатная оболочка для среды Flex - Flash Develop.
Вся графика в уроках будет создаваться программным путем, но Вы вправе пользоваться чем угодно.

Настоятельно рекомендую перед чтением данных (да и вообще любых уроков по AS3) уроков прочитать хоть что-нибудь про ActionScript 3.0. Литература представленна в соответсвующей прикрепленной теме данного раздела. И дело тут не в том, что я не собираюсь объяснять каждую запятую, просто мое ИМХО говорит мне, что человеку поленившемуся потратить день на прочтение нужной книги, данные уроки не нужны, не помогут, да и в вообще игроделательная лихорадка у него пройдет вместе с подростковыми прыщами.

От себя порекомендую ознакомиться с трудами Джоба Макара (Jobe Makar) и посетить блог Метью Касперсона (Matthew Casperson).

В самом первом уроке мы создадим экранную стрелялку. Сначала нужно четко представить суть игры. Наша игра будет заключаться в следующем:

На экране в рандомном порядке будут появляться враги, которых нам нужно будет "убить" кликом мыши. Довольно просто.
Теперь подумаем, что нам для этого понадобиться?

Итак, вопрос на миллион рублей! "Что нам понадобиться для создания задуманной стрелялки?"
A ) - Уличная магия
B ) - Загадочный Бурундук
C ) - Два своих класса для курсора и врага
D ) - 2 билета на "Аншлаг-Аншлаг"

Если Вы ответили "С", то можете читать далее (остальным начать сначала).

Итак приступим. Открываем FD, создаем новый проект Flex, как нибудь его называем (н-р, ShootEmAll).
Теперь ПКМ на папке src и выбираем Add -> New Class.

В появившемся окне в поле Name пишем название нашего будущего класса, пусть это будет Cursor.
Далее напротив поля Base Class жмем на Browse и вписываем туда Sprite.

Жмем ок. FD автоматически создаст тело нашего будущего класса.
Класс Sprite - это базовый визуальный класс Flash. Поскольку наш курсор будет графическим объектом, он должен его раширять. На это указывает ключевое слово extends.

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

Code

this.graphics.lineStyle(1);
this.graphics.beginFill(0xFF0000);
this.graphics.drawCircle(0, 0, 10);
this.graphics.endFill();

Курсор готов к использованию. Теперь повторим предыдущие шаги и создадим новый класс Enemy, символизирующий наего будущего врага (не забудем добавить ему расширение класса Sprite).

Теперь надо подумать о будущей логике нашего врага. Что мы от него хотим?
Прежде всего мы хотим, чтобы при клике враг "умирал", то есть исчезал со сцены.
Также мы добавим определенное поведение при наведении и уводе мыши на врага.

Но сначала нам так же, как и в случае с курсором нужно отобразить его:

Code

this.graphics.lineStyle(1);
this.graphics.beginFill(0x0000FF);
this.graphics.drawCircle(0, 0, 50);
this.graphics.beginFill(0x00FF00);
this.graphics.drawCircle(0, 0, 30);
this.graphics.beginFill(0xFFC000);
this.graphics.drawCircle(0, 0, 15);
this.graphics.endFill();

Теперь мы добавим оговоренные выше обработчики событий в конец функции-конструтора:

Code

this.addEventListener(MouseEvent.CLICK, killEnemy);
this.addEventListener(MouseEvent.MOUSE_MOVE, overEnemy);
this.addEventListener(MouseEvent.MOUSE_OUT, outEnemy);

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

Code

protected function killEnemy(e:MouseEvent):void
{
  this.parent.removeChild(this);
}

Два других обработчика срабатывают при наведении и "уведении" мыши на врага и просто меняют степень его прозрачности:

Code

protected function overEnemy(e:MouseEvent):void
{
  this.alpha = .4;
}
    
protected function outEnemy(e:MouseEvent):void
{
  this.alpha = 1;
}

Теперь возьмемся за саму игру. Открываем наш Main.mxml и добавим созданный нами курсор:

Code

private var cursor:Cursor; // создаем экземпляр класса курсор

private function init():void
{
    
  cursor = new Cursor(); // инициируем курсор
  stage.addChild(cursor); // добавляем курсор в сцену   
  Mouse.hide(); // прячем стандартный курсор

                 stage.addEventListener(MouseEvent.MOUSE_MOVE, dragCursor); // заставляем курсор двигаться
  stage.addEventListener(MouseEvent.MOUSE_OUT, hideCursor);  //  если курсор выходит за пределы экрана игры - прячем
  stage.addEventListener(MouseEvent.MOUSE_OVER, showCursor);  // если курсор возвращается на экран - показываем
}

Думаю тут все ясно. Функции для обработчиков событий предельно просты:

Code

private function dragCursor(event:MouseEvent):void
{
  cursor.x = this.mouseX;
  cursor.y = this.mouseY;
}
    
private function hideCursor(event:MouseEvent):void
{
  cursor.alpha = .0;
}
    
private function showCursor(event:MouseEvent):void
{
  cursor.alpha = .75;
}

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

Code

private var enemyMaker:Timer; // таймер для вызова функции создания врага
private var enemyCount:int; // числовая переменная равняющася количеству врагов появящихся на экране

private function init():void
{
     
  [b]enemyCount = 10;
     
  enemyMaker = new Timer(1000, enemyCount); // инициируем таймер с количеством повторений равынм количеству врагов
  enemyMaker.addEventListener(TimerEvent.TIMER, createEnemy); // каждую секунду вызываем функцию createEnemy
  enemyMaker.start(); //  стартуем счетчик [/b]  
     
  cursor = new Cursor();
  stage.addChild(cursor);
     
  Mouse.hide();
     
  stage.addEventListener(MouseEvent.MOUSE_MOVE, dragCursor);
  stage.addEventListener(MouseEvent.MOUSE_OUT, hideCursor);
  stage.addEventListener(MouseEvent.MOUSE_OVER, showCursor);
     
}

Теперь сама функция создания врагов:

Code

private function createEnemy(event:TimerEvent):void
{
  var enemy:Sprite; // так как класс Enemy расширяет класс Sprite то мы можем для создания экземпляра врага использовать родительсткй класс
  enemy = new Enemy(); // а при инициации мы конкретно указываем экземпляром какого класса будет являться объект и соответсвенно какие свойства и методы ему будут доступны
   
                 enemy.x = Math.random() * stage.stageWidth; // задаем х врага рандомной значение по ширине сцены, ты же операции предстоит и для оси ординат
   
                 //// далее для х и у вводятся ограничения на местоположение, во избежание половинчатости врага
    
  if (enemy.x <= 50) {   
   enemy.x = 51;  
  }
  else if (enemy.x >= 450) {
   enemy.x = 449;
  }
     
  enemy.y = Math.random() * stage.stageHeight;
     
  if (enemy.y <= 50) {
   enemy.y = 51;  
  }
  else if (enemy.y >= 450) {
   enemy.y = 449;
  }
     
  stage.addChild(enemy); /// ну и наконец после того как все параметры врага заданы - добавляем его на сцену игры
     
}

Полный код Main.mxml

Code

<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" width="500" height="500" layout="absolute" applicationComplete="init()">
  <mx:Script>
   <![CDATA[
   import flash.display.DisplayObject;
         import flash.display.Sprite;
   import flash.events.MouseEvent;
   import flash.events.TimerEvent;
   import flash.utils.Timer;
    
   private var cursor:Cursor;
    
   private var enemyMaker:Timer;
   private var enemyCount:int;
    
     
   private function init():void
   {
     
    enemyCount = 10;
     
    enemyMaker = new Timer(1000, enemyCount);
    enemyMaker.addEventListener(TimerEvent.TIMER, createEnemy);
    enemyMaker.start();
     
    cursor = new Cursor();
    stage.addChild(cursor);
     
    Mouse.hide();
     
    stage.addEventListener(MouseEvent.MOUSE_MOVE, dragCursor);
    stage.addEventListener(MouseEvent.MOUSE_OUT, hideCursor);
    stage.addEventListener(MouseEvent.MOUSE_OVER, showCursor);
     
   }
    
   private function dragCursor(event:MouseEvent):void
   {
    cursor.x = this.mouseX;
    cursor.y = this.mouseY;
   }
    
   private function hideCursor(event:MouseEvent):void
   {
    cursor.alpha = .0;
   }
    
   private function showCursor(event:MouseEvent):void
   {
    cursor.alpha = .75;
   }
    
   private function createEnemy(event:TimerEvent):void
   {
    var enemy:Sprite;
    enemy = new Enemy();
    enemy.x = Math.random() * stage.stageWidth;
     
    if (enemy.x <= 50) {
     enemy.x = 51;  
    }
    else if (enemy.x >= 450) {
     enemy.x = 449;
    }
     
    enemy.y = Math.random() * stage.stageHeight;
     
    if (enemy.y <= 50) {
     enemy.y = 51;  
    }
    else if (enemy.y >= 450) {
     enemy.y = 449;
    }
     
    stage.addChild(enemy);
     
   }
    
   ]]>
  </mx:Script>
   
</mx:Application>

Полный код Cursor.as

Code

package   
{
  import flash.display.Sprite;
   
  public class Cursor extends Sprite
  {
    
   public function Cursor()  
   {
    this.graphics.lineStyle(1);
    this.graphics.beginFill(0xFF0000);
    this.graphics.drawCircle(0, 0, 10);
    this.graphics.endFill();
   }
    
  }

}

Полный код Enemy.as

Code

package   
{
  import flash.display.Sprite;
  import flash.events.MouseEvent;
   
  public class Enemy extends Sprite
  {
    
   public function Enemy()  
   {
    this.graphics.lineStyle(1);
    this.graphics.beginFill(0x0000FF);
    this.graphics.drawCircle(0, 0, 50);
    this.graphics.beginFill(0x00FF00);
    this.graphics.drawCircle(0, 0, 30);
    this.graphics.beginFill(0xFFC000);
    this.graphics.drawCircle(0, 0, 15);
    this.graphics.endFill();
     
    this.addEventListener(MouseEvent.CLICK, killEnemy);
    this.addEventListener(MouseEvent.MOUSE_MOVE, overEnemy);
    this.addEventListener(MouseEvent.MOUSE_OUT, outEnemy);
   }
    
   protected function killEnemy(e:MouseEvent):void
   {
    this.parent.removeChild(this);
   }
    
   protected function overEnemy(e:MouseEvent):void
   {
    this.alpha = .4;
   }
    
   protected function outEnemy(e:MouseEvent):void
   {
    this.alpha = 1;
   }
  }

}

Компилим, играем.

B1z ©

AssasinДата: Пятница, 22 Января 2010, 14:42 | Сообщение # 2
web-coder
Сейчас нет на сайте
Quote (B1zDelKin)
В данной серии уроков, будет пройден путь от простой экранной стрелялки до простой карты-квеста для создаваемой в данном разделе Ассасином игры (с его согласия ессно).

Полностью одобряю wink
Kolya0894Дата: Понедельник, 22 Марта 2010, 18:41 | Сообщение # 3
постоянный участник
Сейчас нет на сайте
Я вообще считаю, что лучшая среда разработки Flash-игр это Macromedia Flash...

SlavyanOOsДата: Понедельник, 22 Марта 2010, 19:06 | Сообщение # 4
Problems, developer?
Сейчас нет на сайте
Quote (Kolya0894)
Я вообще считаю, что лучшая среда разработки Flash-игр это Macromedia Flash...

Да, и я тоже так считаю. Только она теперь Adobe Flash.
AssasinДата: Понедельник, 22 Марта 2010, 21:10 | Сообщение # 5
web-coder
Сейчас нет на сайте
Согласен, но не все могут купить лицензию, так что приходится искать бесплатные движки, каким является Flash Develop
PrototypeGameZДата: Понедельник, 30 Августа 2010, 09:41 | Сообщение # 6
был не раз
Сейчас нет на сайте
Я вообще познакомился с FlashDevelop с его чуть недописаными уроками и теперь подучился. Спасибо B1zDelKin - у. wacko
WereWolfДата: Воскресенье, 03 Октября 2010, 20:46 | Сообщение # 7
частый гость
Сейчас нет на сайте
Как это исправить?

Установил СДК, указал все пути, компилит без ошибок... Но при запуске:

"RSL Error 1 of 1"
Error #2032: Ошибка потока. URL: file:///C|/Games/ShootER/bin/framework_12683.swf


В мире много глюков - и с ними надо жить!!!
fastДата: Суббота, 06 Ноября 2010, 14:46 | Сообщение # 8
уже был
Сейчас нет на сайте
ау поможіть як создать ігру я новенькій я тупо нуб в контакте

Добавлено (06.11.2010, 14:46)
---------------------------------------------
SlavyanOOs
поможи а то я хочу ігру создать в контакте а незнаю как sad

TheShowMustGoOnДата: Суббота, 06 Ноября 2010, 14:48 | Сообщение # 9
I think I'm a banana tree
Сейчас нет на сайте
fast, Клик & пиши на Русском smile

You Take My Breath Away
BUDARHANATДата: Среда, 09 Марта 2011, 02:51 | Сообщение # 10
участник
Сейчас нет на сайте
Что означает "Компилим" ? Как это делается ?

Добавлено (09.03.2011, 02:51)
---------------------------------------------
Люди добрые есть кто живой ?


В этой жизни тот добивается чего-то, кто смог победить в себе свою лень, свои страхи, свою неуверенность, свои слабости и недостатки.
noTformaTДата: Среда, 09 Марта 2011, 03:10 | Сообщение # 11
Ukrainian independent game developer
Сейчас нет на сайте
BUDARHANAT, честно? забей на флеш девелоп, на Адоб Флеше все делается за секунды и без мароки с настройками иксэмэлфайла smile
Хочешь делать игры на флеше - бери Адоб Флеш, Хочешь делать РИА приложения бери флекс и флекс билдер. А флеш девелоп это редактор "по вкусу", хотя haXe в флеш девелопе просто супер, ИМХО smile


@noTformaT
BUDARHANATДата: Среда, 09 Марта 2011, 17:45 | Сообщение # 12
участник
Сейчас нет на сайте
Ну у меня есть и Adobe и Macromedia и Develop )
Мне пока хоть бы чему нибудь научится и не важно в чём.

Я наверно создам отдельную тему с конкретными вопросами. Может так лучше будет сформировать урок на будущее по созданию игры.


В этой жизни тот добивается чего-то, кто смог победить в себе свою лень, свои страхи, свою неуверенность, свои слабости и недостатки.
lokinamДата: Пятница, 18 Ноября 2011, 19:57 | Сообщение # 13
постоянный участник
Сейчас нет на сайте
Adobe, Macromedia одно и тоже просто переименовали функций чуть чуть добавили и всё.
  • Страница 1 из 1
  • 1
Поиск:

Все права сохранены. GcUp.ru © 2008-2024 Рейтинг