Для создания игр ака Братья Марио, Пэкмен, Паззл или Мемория в среде 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 ©
@noTformaT
