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

TowerDefence #4. Готовимся к поиску пути

Чтобы урок про поиск пути получился интересным и полным за счет возможности протестировать работу алгоритма сразу же — нам нужно для этого сделать еще некоторые приготовления.

Обработка мышки

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

Об этом много рассказывать не нужно, поэтому сразу открываем класс Game.as и в конструкторе класса пишем следующий код:

addEventListener(MouseEvent.MOUSE_MOVE, mouseMoveHandler);

В заголовке класса не забываем импортировать класс:

import flash.events.MouseEvent;

Теперь пишем обработчик движения мышки:

private function mouseMoveHandler(event:MouseEvent):void
{
  _universe.updateMousePos(event.stageX, event.stageY);
}

Как видно из кода, используя метод updateMousePos() класса Universe.as, мы передаем координаты мыши в игровой мир. Теперь нам необходимо написать метод updateMousePos(), чтобы обрабатывать координаты мышки. Переходим к редактированию класса Universe.as и добавляем новые публичные переменные:

// Текущее положение курсора мыши в пикселях
public var mousePosX:int = 0;
public var mousePosY:int = 0;

// Текущая ячейка, над которой находится курсор мыши
public var cellPosX:int = 0;
public var cellPosY:int = 0;

Эти переменные у нас будут публичными для того, чтобы любые другие игровые классы могли использовать их. Далее создаем метод updateMousePos():

public function updateMousePos(mouseX:int, mouseY:int):void
{
  mousePosX = mouseX;
  mousePosY = mouseY;
            
  // Координаты тайла, над которым находится курсор мыши
  cellPosX = int(mouseX / MAP_CELL_SIZE);
  cellPosY = int(mouseY / MAP_CELL_SIZE);
            
  // Подсветка текущего тайла
  _currentCell.x = MAP_CELL_HALF + cellPosX * MAP_CELL_SIZE;
  _currentCell.y = MAP_CELL_HALF + cellPosY * MAP_CELL_SIZE;
}

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

public static const MAP_CELL_HALF:int = 16;

В качестве подсветки текущего тайла выступает обычный MovieClip из библиотеки клипов в TowerDefence.fla. Добавьте в папку _DEBUG новый клип с именем CurrentCell_mc и нарисуйте в нем полу-прозрачный квадратик или рамочку размером 32x32 пикселя, и выровняйте его по центру. Возвращаемся в Universe.as и добавляем новую приватную переменную, которая будет содержать этот квадратик:

private var _currentCell:Sprite;

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

_currentCell = new CurrentCell_mc();
addChild(_currentCell);

Тестируем! Если все сделано правильно, то вы должны увидеть как квадратик-подсветка перемещается за курсором, и подсвечивает ту ячейку, над которой находится курсор мыши.

Если у вас что-то не работает и при этом не выводится никаких ошибок, то ищем причину, следуя шагам:

1. В методе mouseEventHandler() класса Game.as добавляем следующий код:

trace(event.stageX, event.stageY);

Тестируем приложение и смотрим, что выводится в окне output. Если в окне бегут цифры (координаты мыши), значит здесь все ок. �?наче перечитываем еще раз все внимательно или сверяемся с исходником.

2. Если вы вообще не видите спрайта _currentCell или он застыл в правом верхнем углу экрана, то добавляем trace всех координат в методе updateMousePos() и проверяем, что выводится в окне output. В особенности обратите внимание на координаты клипа _currentCell.x и _currentCell.y. Далее ищим причину ошибки самостоятельно или сверяемся с исходником.

Вопрос на засыпку: Как вы думаете зачем мы перехватываем координаты мыши непосредственно в классе Game.as, а не в игровом мире?

Доработка игровой карты

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

При создании игровой карты мы выровняли квадратики по левому верхнему углу внутри клипа, то есть центром каждой ячейки является левый верхний угол. Таким образом зная, например координаты ячейки x-3, y-2 мы можем узнать координаты этой ячейки в пикселях так:

cell.x = 3 * MAP_CELL_SIZE;
cell.y = 2 * MAP_CELL_SIZE;

Сейчас у нас реализовано так.

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

А нужно сделать так.

Узнать правильные коордианты ячейки очень просто, к расчетам нужно добавить лишь половину ширины и высоты ячейки, которую мы уже успели вынести в отдельную константу:

cell.x = MAP_CELL_HALF + 3 * MAP_CELL_SIZE;
cell.y = MAP_CELL_HALF + 2 * MAP_CELL_SIZE;

Ленивым заводить лишнюю константу для хранение размера половины ячейки я очень не рекомендую делать так: cell.x = MAP_CELL_SIZE * .5 + 3 * MAP_CELL_SIZE; Это не единственное место, где нам понадобится размер половины ячейки, и в итоге у вас может получится много лишних вычислений.

Теперь, чтобы карта выводилась согласно новым требованиям, нам нужно переделать метод makeDebugGrid(), добавив в место обнуления координат каждой ячеки присвоение значения MAP_CELL_HALF. Более того, я переименовал этот метод в updateDebugGrid(), так как каждый раз, удаляя или изменяя состояние карты проходимости, нам прийдется его повторно вызывать. �? поскольку старая его реализация была очень не оптимальна для постоянного его вызова, я его немного оптимизировал следующим образом:

private function updateDebugGrid():void
{
  // Графический образ ячейки
  var cellSprite:MovieClip = new DebugCell_mc(); 
            
  // Растровый холст для рисования сетки
  var bmpData:BitmapData = new BitmapData(MAP_CELL_SIZE * MAP_WIDTH_MAX, 
    MAP_CELL_SIZE * MAP_HEIGHT_MAX, true, 0x00000000);
            
  // Начальное положение текущей ячейки по высоте/ширине
  var matrix:Matrix = new Matrix();
  matrix.tx = MAP_CELL_HALF; 
  matrix.ty = MAP_CELL_HALF;
            
  // Двигаемся по высоте карты
  for (var ay:int = 0; ay < MAP_HEIGHT_MAX; ay++)
  {
    // Двигаемся по ширине карты
    for (var ax:int = 0; ax < MAP_WIDTH_MAX; ax++)
    {
      // Переключаем состояние ячейки
      cellSprite.gotoAndStop(getCellState(ax, ay));
                    
      // Рисуем текущую ячейку
      bmpData.draw(cellSprite, matrix);
                    
      // Меняем положение текущей ячейки по ширине
      matrix.tx += MAP_CELL_SIZE;
    }
                
    // Меняем положение текущей ячейки по высоте
    matrix.ty += MAP_CELL_SIZE;
    // Обнуляем ширину
    matrix.tx = MAP_CELL_HALF;
  }
                    
  // Передаем растровый холст в картинку
  _debugGrid.bitmapData = bmpData;
            
  cellSprite = null;
}

Принципиальное его отличие от прошлой реализации только в том, что мы избавились от временного контейнера grid и сейчас не создается на каждую ячейку отдельный MovieClip. В новой реализации создается растровый холст и, используя один единственный MovieClip, мы словно штампом отпечатываем на холсте все клеточки по очереди, предварительно переключая состояние этого штампа (клипа) в зависимости от состояния клетки. В качестве координат смещения клипа используется класс Matrix, в котором сразу указываются координаты где рисовать клип. Сам же клип в структуру отображения не добавляется и его координаты не обновляются. Когда весь холст заштампован ячейками, мы присваевам его нашей растровой картинке Bitmap. Обратите внимание, что создание и добавление картинки _debugGrid было вынесено за пределы этого метода, так как она больше не пересоздается и нет необходимости каждый раз её удалять и добавлять снова. Мы меняем только графические данные в bitmapData. Так что не забудьте добавить инициализацию нашей отладочной сетки в конструктор Universe.as:

_debugGrid = new Bitmap();
addChild(_debugGrid);

Далее, чтобы наши графические ячейки вставали правильно, нужно еще отредактировать клип DebugCell_mc во Flash IDE. Открываем клип для редактирования и на всех ключевых кадрах выравниваем квадратики по центру холста.

Тестируем! Теперь все должно быть так как нам нужно.

Редактирование карты проходимости

Теперь самый простой и самый вкусный этап на сегодня — добавляем возможность редактирования карты проходимости. Открываем Universe.as и добавляем в заголовок класса импортирование flash.events.MouseEvent, как мы это делали для класса Game.as и в конструкторе класса Universe.as добавляем слушателя:

addEventListener(MouseEvent.MOUSE_UP, mouseUpHandler);

Далее добавляем метод mouseUpHandler() — это обработчик отжатия кнопки мыши:

private function mouseUpHandler(event:MouseEvent):void
{
  if (getCellState(cellPosX, cellPosY) == STATE_CELL_BUSY)
    setCellState(cellPosX, cellPosY, STATE_CELL_FREE);
  else
    setCellState(cellPosX, cellPosY, STATE_CELL_BUSY);

  updateDebugGrid();
}

Тут я думаю все должно быть просто и понятно без дополнительных комментариев. �?спользуя методы getCellState() и setCellState(), а так же текущие координаты клетки, мы освобождаем занятую клетку при клике и наоборот, пустую клеточку занимаем, а в конце обновляем отладочную сетку. Тестируем!

Если все сделано правильно, то УРА! Мы можем наконец-то лицезреть самый простейший редактор карты проходимости, и это проклюнулась только самая макушечка большущего айсберга.

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

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

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

1. Добавить локальные переменные для хранения координат текущей ячейки врага в классе EnemyBase.as: _cellPosX, _cellPosY;
2. Рассчитывать текущую ячейку врага при его движении в методе update() в классе EnemyBase.as. �? не забудьте добавить вызов родительского метода в EnemySoldier.update() — нужно это, чтобы для всех врагов был один рассчет координат. Подсказка: решение для рассчета текущей ячейки ищите в методе Universe.updateMousePos();
3. Добавить в EnemyBase.as публичный метод setToCell(cellX:int, cellY:int), в котором необходимо производить рассчет нового положения врага, исходя из координат ячейки и помещать врага в данную ячейку на карте. Решение для рассчета текущего положения врага согласно указанной ячейки ищите в методе Universe.updateMousePos();

Проверить домашние задание вы сможете самостоятельно сверившись с исходниками из следующего урока.

Заключение

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

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

Содержание

1. Вступление
2. Структура игры
3. Карта проходимости
4. Первый враг
5. Готовимся к поиску пути
6. Поиск пути
7. Редактор уровней
8. Движение врагов
9. Первая башня
10. Кэширование объектов
11. Полоса жизни
12. Вражеские волны
13. Загрузка вражеских волн
14. Продолжение следует...