• Игролог
• Игры
• Об авторе

TowerDefence #6. Редактор уровней

Ранее я уже пытался начать серию записей о редакторе уровней, но все так и закончилось на одной записи. С тех самых пор я больше не занимался разработкой новых редакторов уровней и ничего нового не придумывал. Поэтому принцип работы редактора уровня будет примерно таким же, как и в прошлой записи, но с тем лишь исключением, что сегодня мы более подробно рассмотрим другую его сторону — сохранение и загрузку игровых уровней, а так же отделим редактор уровней от самой игры. От слов к делу!

Editor.as

Первым делом давайте создадим класс Editor.as в папке с нашим игровым проектом — этот класс будет аналогом класса Game.as. Основное отличие Editor.as от Game.as будет заключаться в реализации интерфейса для создания, сохранения и загрузки уровней. Но при этом в самом редакторе уровней мы так же будем использовать класс мира Universe.as.

Поскольку на текущем этапе Editor.as ничем не будет отличатся от класса Game.as, то вы можете полностью скопировать функционал Game.as в Editor.as. Но не забудьте переименовать в исходном коде название класса и метод конструктор с «Game» на «Editor».

Поскольку теперь мы используем класс игрового мира в режиме игры и в режиме редактора уровней, нам следует сообщать игровому миру, в каком режиме он сейчас находится, чтобы далее в коде самого мира адекватно обрабатывать действия в зависимости от состояния. Поэтому теперь откроем Universe.as и добавим приватную переменную _isEditor, и сеттер для нее:

private var _isEditor:Boolean = false;

public function set editorMode(value:Boolean):void
{
  _isEditor = value;
}

После этого в классе Editor.as сразу сделаем переключение игрового мира в режим редактирования после его создания:

_universe.editorMode = true;

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

Отделение редактора уровней

Сейчас у нас по прежнему при запуске создается класс Game.as, а нам нужно на время разработки сделать возможность выбора редактора или игры при запуске приложения. Сделать выбор не сложно, достаточно лишь сразу после загрузки игры показывать простое меню из двух кнопок «Game» и «Editor».

Откройте *.fla и создайте в библиотеке клип с типом Button и назовите его «Game_btn». Нарисуйте в кадрах Up, Over, Down состояния вашей кнопки. Потом скопируйте получившуюся кнопку и переименуйте её в «Editor_btn», а так же не забудьте изменить её текстовую метку в кадрах Up, Over и Down, чтобы у вас не получилось две одинаковые кнопки. Когда обе кнопки готовы, обязательно в свойствах кнопки поставьте экспорт в ActionScript. Так же для аккуратности и наглядности все кнопки, используемые для редактора уровней, следует положить в новую папку «_EDITOR» в библиотеке клипов *.fla файла.

Уверен, некоторые из моих читателей готовы предложить использовать для реализации кнопок стандартный визуальный компонент кнопки. Но мне такой вариант не очень нравится, так как, когда захочется переделать их визуальный вид, то придётся уже не только рисовать новую кнопку, но и править код.

Когда кнопки готовы, откройте класс App.as для редактирования и добавьте новые приватные переменные:

private var _editor:Editor;
private var _btnGame:SimpleButton;
private var _btnEditor:SimpleButton;

Теперь создадим метод init():

public function init(event:Event = null):void
{
  // Кнопка "Game"
  _btnGame = new Game_btn();
  _btnGame.x = SCREEN_WIDTH_HALF;
  _btnGame.y = SCREEN_WIDTH_HALF - 120;
  _btnGame.addEventListener(MouseEvent.CLICK, gameClickHandler);
  addChild(_btnGame);
			
  // Кнопка "Editor"
  _btnEditor = new Editor_btn();
  _btnEditor.x = SCREEN_WIDTH_HALF;
  _btnEditor.y = SCREEN_HEIGHT_HALF + 40;
  _btnEditor.addEventListener(MouseEvent.CLICK, editorClickHandler);
  addChild(_btnEditor);
}

В данном коде все достаточно просто: мы создаем кнопки из наших клипов в библиотеке *.fla, устанавливаем их по центру экрана со смещением, добавляем слушателей события клика и добавляем их на сцену. Теперь изменим конструктор класса App.as и сделаем его похожим на конструкторы классов Game.as и Editor.as:

public function App()
{
  trace(APP_VERSION);
			
  if (stage)
  {
    init();
  }
  else
  {
    addEventListener(Event.ADDED_TO_STAGE, init);
  }
}

Осталось написать обработчики кликов по кнопкам, они будут выглядеть так:

private function gameClickHandler(event:Event):void
{
  _game = new Game();
  addChild(_game);
  free();
}
		
private function editorClickHandler(event:Event):void
{
  _editor = new Editor();
  addChild(_editor);
  free();
}

В зависимости от того, на какую кнопку мы кликнули, мы создаем соответствующий класс игры или редактора. Далее код загадочного метода free():

private function free():void
{
  removeChild(_btnGame);
  removeChild(_btnEditor);
			
  _btnGame.removeEventListener(MouseEvent.CLICK, gameClickHandler);
  _btnEditor.removeEventListener(MouseEvent.CLICK, editorClickHandler);
			
  _btnGame = null;
  _btnEditor = null;
}

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

import flash.events.Event;
import flash.display.SimpleButton;
import flash.events.MouseEvent;

Теперь можно протестировать приложение. Но, пока, на какую кнопку не кликни, результат мы будем видеть одинаковый. Все это потому, что наш редактор на данный момент обладает точно таким же функционалом, как и сама игра.

После того, как мы добавили возможность выбора игры или редактора в классе App.as, я надеюсь, что вам стал понятен принцип работы структуры игры, и необходимость в использовании такой цепочки классов. Позже когда мы приступим к работе над графикой, класс App.as станет основным классом, в котором будет проходить вся необходимая инициализация и подготовка игровых ресурсов прежде, чем начнется игра.

Способ хранения уровней

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

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

Но при хранении игровых уровней в классах есть существенные недостатки — это невозможность сохранить уровень из редактора в игру, а так же, для того, чтобы внести изменения в игровой уровень, прийдется перекомпилировать всю игру. Впрочем, все эти недостатки можно обойти: например, чтобы поиграть в редактируемый уровень, достаточно его сохранить в памяти и переключиться в игровой класс и там загрузить его из памяти. А если в игровом уровне много игровых параметров, которые необходимо регулировать во время игры, то можно вынести все эти важные параметры во внешний xml файл (возможно для каждого уровня свой). Когда игра будет готова, все xml файлы можно будет легко вшить в оригинальном виде прямо в классы уровней, благодоря нативной поддержки XML в AS3.

Чтобы сохранить отредактированный игровой уровень для класса, достаточно лишь при нажатии кнопки «Save» в редакторе уровней вывести все данные об уровне в окно Output, и желательно в таком виде, чтобы содержимое окна Output можно было скопировать и сразу вставить в игровой класс.

И так, в нашем случае скорее всего прийдется использовать несколько способов хранения уровней:

1. Flash IDE — не знаю как вам, но рисование тайлов с последующей их подгонкой друг к другу, достаточно затратное занятие по времени. Поэтому мне кажется наиболее оптимальным решением использовать в качестве игровых бэкграундов заготовленные заранее задники в виде составных MovieClip'ов во Flash IDE, например так же, как я делал это для грузовиков, либо использовать одну большую нарисованную картинку в любой другой программе.
2. XML — в XML формате мы будем хранить данные о врагах и вражеских волнах: когда и сколько врагов будет выбегать, сколько вражеских волн будет и т.п.
3. Класс — в классе уровня мы будем хранить карту проходимости, ссылку на клип с графическим представлением уровня и ссылку на внешний xml файл, а в финальной сборке содержимое xml документа. То есть, класс игрового уровня будет представлять собой некий скрипт, который будет связывать все данные об уровне вместе и выполнять их корректную загрузку в игровой движок.

 

Вот такой вот микс получается. Возможно некоторые из читателей зададутся вопросом: «А зачем вообще все эти заморочки со встроенным редактором, когда основная часть будет редактировать за его пределами?». И тут мне хочется отметить, что моя задача показать лишь примеры возможных способов хранения уровней, а ваше дело научиться использовать их так, как это удобно вам. Кроме того, может быть кто-то из читателей решит собирать игровую карту из отдельных тайлов подобно тому, как я показывал ранее в примере редактора уровней.

Сохранение уровней

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

Чтобы сохранить, а вернее экспортировать уровень из редактора, нужно сделать кнопочку, которая будет выводить данные в окно Output. Сделайте кнопку так же, как мы это уже сделали для окна выбора игры/редактора, можете так же скопировать одну из готовых кнопок и изменить её. Назовем новую кнопку «Save_btn» и экспортируем в AS с таким же именем. Теперь откроем Editor.as для редактирования и добавим новую приватную переменную:

private var _btnSave:SimpleButton;

В методе init() класса добавим следующий код:

// Создаем кнопку сохранить
_btnSave = new Save_btn();
_btnSave.x = _btnSave.width / 2 + 10;
_btnSave.y = App.SCREEN_HEIGHT - _btnSave.height / 2 - 10;
_btnSave.addEventListener(MouseEvent.CLICK, saveClickHandler);
addChild(_btnSave);

В данном коде мы просто создаем кнопку из экземпляра нарисованной кнопки, выравниваем её по левому нижнему углу и добавляем обработчик. Теперь напишем обработчик клика saveClickHandler():

private function saveClickHandler(event:MouseEvent):void
{
  exportToOutput();
}

В обработчике клика мы просто вызываем метод exportToOutput(), который будет выполнять вывод данных о текущем уровне в окно Output. Я обычно все методы утилиты делаю независимыми отдельными функциями на тот случай, если позже появится необходимость в получении к ним доступа без привязи к кнопкам, к тому же, на мой взгляд, это повышает читаемость кода. Далее пишем метод exportToOutput():

private function exportToOutput():void
{
  var mapMask:Array = _universe.mapMask;
  var mapWidth:int = mapMask[0].length;
  var mapHeight:int = mapMask.length;
  var line:String = "";
			
  for (var ay:int = 0; ay < mapHeight; ay++)
  {
    for (var ax:int = 0; ax < mapWidth; ax++)
    {
      // Для последней ячейки в строчке не ставим запятую
      if (ax == mapWidth - 1)
      {
        line += mapMask[ay][ax].toString();
      }
      else
      {
        line += mapMask[ay][ax].toString() +", ";
      }
    }
				
    // Выводим маску проходимости в формате кода 
    // инициализации нового двумерного массива
				
    // Первая строка
    if (ay == 0)
    {
      trace("_mapMask = [ [", line + "], ");
    }
    // Последняя строка
    else if (ay == mapHeight - 1)
    {
      trace("[", line + "] ];");
    }
    // Промежуточные строки
    else
    {
      trace("[", line + "],");
    }
    
    line = "";
  }
}

Экспорт карты проходимости в окно Output достаточно простое действие — мы перебираем всю карту проходимости и записываем значения в строку. Когда каждая строчка карты проходимости пройдена, мы выводим её в окно Output и очищаем для новых значений. Большая часть кода метода exportToOutput() — это условия, предназначенные для того, чтобы результат выглядел в виде инициализации нового двухмерного массива, который мы бы могли скопировать и вставить в наш класс уровня. Сейчас вы можете скомпилировать код и посмотреть на результат. Правда, при компиляции приложения Flash наругается на неизвестный тип SimpleButton — как вы думаете, что мы забыли сделать?

Менеджер уровней

Прежде, чем создавать загрузку уровней, нам нужно написать пару дополнительных классов, которые в будущем упростят нам работу с уровнями. Этими классами у нас будут LevelManager.as и LevelBase.as.

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

Давайте создадим новую папку/пакет в нашем проекте с именем levels, которая будет находится по адресу com.towerdefence.levels и создадим в ней новый файл LevelManager.as. Сразу в новом классе добавим статическую публичную константу TOTAL_LEVELS, в ней у нас будет храниться общее количество уровней в игре, и пока это значение будет ровняться одному уровню.

public static const TOTAL_LEVELS:int = 1;

После добавим приватную переменную _completed — в ней у нас будет храниться количество пройденных / доступных для игры уровней. Значение этой переменной пока сделаем так же равной 1, а потом это значение будем загружать из пользовательского сохранения (cookies).

private var _completed:int = 1;

Конструктор класса LevelManager.as пока оставим пустым и напишем публичный метод getLevel():

public function getLevel(levelId:int):LevelBase
{
  if (levelId < 0 || levelId > TOTAL_LEVELS)
  {
    trace("LevelManager::getLevel() - Уровня", levelId, "не существует!");
    return null;
  }
			
  switch (levelId)
  {
    case 1 :
	  return new Level1();
    break;
				
    default :
      return null;
    break;
  }
}

Цель этого метода — создать и вернуть экземпляр уровня с указанным номером. Как можно видеть из кода его реализация очень проста. Первым делом мы выполняем проверку на существование уровня, заметьте эта проверка нужна в первую очередь для разработчика чтобы потом, когда мы вдруг укажем неверный номер уровня, мы сразу увидим почему уровень не загрузился, и таким образом мы сможем сэкономить себе в будущем от 5 до 30 минут времени на поиски возможной ошибки :) Далее после проверки в зависимости от номера мы просто создаем и возвращаем соответствующий номеру экземпляр уровня. В целом, это пока весь функционал LevelManager.as, который нам требуется на данный момент.

Теперь создаем класс LevelBase.as, он должен располагаться так же в папке com.towerdefence.levels. В теле класса создадим две наследуемых переменные:

protected var _universe:Universe = Universe.getInstance();
protected var _mapMask:Array;

Здесь у нас ссылка на игровой мир и массив, в котором каждый уровень будет хранить карту проходимости. Далее добавим новый метод load(), который будет загружать каждый уровень в игровой мир:

public function load():void
{
  _universe.mapMask = _mapMask;
}

На текущем этапе разработки загрузка уровня выглядит предельно просто, мы передаем указатель на маску проходимости из игрового уровня. Но будьте внимательны, сам класс LevelBase.as не будет содержать в себе карты проходимости. Так же не забудьте добавить в класс LevelBase.as импорт класса Universe.as:

import com.towerdefence.Universe;

На этом мы пока заканчиваем с LevelBase.as и приступаем непосредственно к реализации класса первого игрового уровня. Создаем класс Level1.as — он так же должен располагаться в папке com.towerdefence.levels, и самое важное, он должен быть унаследован от класса LevelBase.as (!). Конструктор класса Level1.as оставим пока пустым и реализуем для начала работу LevelManager.as в игре.

Открываем класс Editor.as и добавляем пару приватных переменных:

private var _levelManager:LevelManager;
private var _currentLevel:LevelBase;

В переменной _levelManager у нас будет находиться менеджер уровней, а в _currentLevel текущий игровой уровень. Вообще я думаю, что переменную _currentLevel следует перенести в публичные переменные класса Universe.as, но пока пусть будет так. Теперь добавим загрузку уровня в метод init() класса Editor.as следующими строками:

// Создаем менеджер уровней
_levelManager = new LevelManager();
			
// Загружаем первый уровень
_currentLevel = _levelManager.getLevel(1);
_currentLevel.load();

Таким образом, загрузка уровня у нас получается всего двумя строчками. Прежде, чем  тестировать приложение, добавьте еще импорт папки levels в класс Editor.as строчкой:

import com.towerdefence.levels.*;

Но и после этого не спешите запускать игру. Надеюсь, вы помните, что у нас _mapMask в классе Universe.as является приватной переменной и для нее мы реализовали ранее только геттер, то есть в данный момент мы не имеем возможности записать в нее что-либо из любого другого класса, но при этом мы уже написали в классе LevelBase.as строчку _universe.mapMask = _mapMask; поэтому сейчас нам нужно написать сеттер в классе Universe.as, чтобы все работало, как нужно. Открываем Universe.as для редактирования и добавляем новый сеттер:

public function set mapMask(value:Array):void
{
  if (value != null)
  {
    _mapMask = value;
    updateDebugGrid();
  }
}

Здесь все предельно просто. Но я хочу обратить ваше внимание на то, что мы не копируем карту проходимости из уровня, а исключительно сохраняем на него указатель в переменно _mapMask класса Universe.as. Метод updateDebugGrid() так же нужно обязательно вызывать сразу после смены карты проходимости, чтобы перерисовать сетку и сразу увидить изменения на экране.

Теперь запустите игру, выберите редактор, отредактируйте маску проходимости на ваше усмотрение, и нажмите кнопку «Save», после чего скопируйте содержимое окна Output (кроме версии приложения) и вставьте в конструктор класса Level1.as. Теперь вновь скомпилируйте игру и выберите редактор уровней. Если все сделано правильно, то вы увидите ранее нарисованный уровень. Вот такое вот незамысловатое сохранение карты проходимости у нас получилось.

Домашнее задание

Сегодня мы сделали много интересных изменений, но не все еще закончено. В качестве домашнего задания я предлагаю вам реализовать загрузку уровней в игровом классе Game.as, добавив туда работу с LevelManager.as так же, как мы это сделали в Editor.as. Так же не забудьте убрать из Editor.as перехватчик нажатия клавиш, который создавал нового врага. И обязательно попробуйте создать второй уровень, чтобы окончательно разобраться с сохранением уровней и с работой простого класса LevelManager.as.

Если вы уже почувствовали в себе силы что-то самостоятельно изменять и добавлять, то вы можете сделать задание по сложнее: добавьте в редактор уровней кнопку «Clear», которая будет очищать карту проходимости и подготавливать редактор к созданию нового уровня.

Заключение

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

Работая с ArmorGames мне довелось видеть пару их игр в процессе разработке, и в этих самых играх я видел совершенно аналогичный подход к встроенным редакторам уровней. Аналогичный выбор редактора уровней или игры при запуске приложения, так же кнопку экспорт уровня в окно Output в редакторе уровней. Что, в итоге может говорить об одном — описанный способ хранения уровней и подход к разработке редактора уровней очень даже оправдан и успешно справляется со своими задачами ;)

Кстати, может быть кто-то не в курсе, но скомпилированный *.swf файл игры вы можете легко отдать вашему дизайнеру уровней для работы над уровнями. Чтобы увидеть экспортируемый уровень в окне Output достаточно запустить эту флешку непосредственно в самой Flash IDE, и при нажатии на кнопку «Save» вы сможете сохранить свои результаты, скопировав их из Output и вставив, например в текстовый документ, который можно переслать программисту, чтобы тот встроил уровень уже непосредственно в игру. Конечно, в таком случае очень полезной будет функция тестирования уровня без его сохранения, благо со встроенным редактором уровней такую функцию достаточно легко реализовать.

В следующем уроке мы добавим точку появления врагов и цели для них, так же реализуем их правильное движение и возможно даже успеем сделать первую башенку! :)

Ссылка на исходники — CS4, *.zip, 118 кб.

P.S.: Сильно извиняюсь, что стал немного реже писать в блог. Очень увлекся новым проектом и дни пролетают, как один. Но я стараюсь исправиться и уже записал в планировщик напоминание о следующем посте :)

Написать комментарий
Индикаторы: Уроки, Action Script 3
Постоянная ссылка

 

 

Я не бот!

 

Вы можете использовать следующие тэги для форматирования текста в комментариях: [b]толстый[/b], [i]наклонный[/i], [u]подчеркнутый[/u], [link]ссылка[/link], [link=адрес ссылки]текст ссылка[/link]