Как стать автором
Обновить

Работа с изометрическими картами в cocos2d

Время на прочтение 6 мин
Количество просмотров 15K

Привет все читателям сайта habrahabr.ru


Недавно решил заняться разработкой игр под IOS, причиной стал прочитанный пост на сайте. Это занятие помогает не впустую тратить свое время и думаю в будущем принесет неплохую добавку к зарплате. По началу прочитал книгу по Objective-C и принялся искать хороший, но бесплатный движок для написания игры, так как чистый OpenGL не хотелось использовать. Выбор пал на cocos2d, тут и друг посоветовал и нашел много хороших отзывов на сайте про него, плюс не раз слышал, что разработчики часто отвечают на вопросы на форумах.

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

Пожалуй хватит вступления. Начнем!

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

Что такое изометрические карты и что они нам дают?

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



Проектирование изометрической карты.

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

С точки зрения tilemaps, если вы посмотрите на «Рисунок 1» вы увидите конкретные действия для создания изометрической проекции. Площадь первого повернута на 45 градусов и затем масштабируется вниз вдоль ее оси Y, чтобы придать ему его типичной изометрической формы.



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



Чтобы добавить фактическую визуальную глубину до изометрической карты, у нас должен быть объект «плитки», которые выходят за рамки ромбовидной формы. Наиболее часто используемый подход заключается в разработке трехмерных объектов, как будто они рассматривались под углом 45-градусов. Как правило, такие объекты не больше чем на одну плитку выше. Это дает ощущение визуальной глубины. Подобным образом, если вы создадите объекты изометрических плиток, которые гораздо выше, чем высота двух плит, тогда будет очень трудно создать убедительный 3D вид, если объекты кажутся очень высокими, потому что игрок будет видеть только часть tilemap.

Это было маленькое вступление, теперь перейдем к самому главному — созданию карты. Для этого нам нужен редактор, какой позволит нам работать с изометрическими картами. Мы будем использовать Tiled Map Editor. Он бесплатный и часто выходят обновления, думаю не составит большого труда найти его на сайте разработчиков, плюс есть версия для Windows и Mac.

Приступим к самому созданию карты. Открываем приложение и делаем некоторые настройки, чтобы потом парсер самого cocos2d не ругался на нашу карту, находим пункт меню “Preferences” и ставим “Store tile layer data as” в Base64 (gzip compressed), вы это можете видеть на рисунке ниже.



Продолжаем. Выбираем File ➤ New откроется диалог с названием New Map. Ориентации, должна быть установлена изометрическая (isometric) и размер карты (Map size) составляет 30 плит шириной и 30 плит высотой, думаю этого нам хватит. Странным кажется здесь ширина плитки и высота (Tile size). Размер ромбовидной формы, которые мы должны рассмотреть при укладке плитки, является 54x27 пикселей. Тем не менее размер плитки ставим 52x26.



Цель этого смещения (-2, -1) чтобы потом мы имели прямые линии по краям tilemap и избежать того чтобы нам показывался нижний черный слой. Это необходимо, потому что невозможно создать идеальные формы, которые расположены на одинаковом расстоянии друг от друга и не перекрывались.

Если вы сделали ошибку и выбрали неправильное смещение, и вы не хотите по новому создавать tilemap, на которые Вы только что потратили куча времени, или если у Вас другие причины и вы хотите настроить размер tilemap или tileset, есть простой способ сделать это. Выберите TMX файл в вашем проекте в Xcode, и вы увидите, что это текстовый XML-файл. В начале файла, который вы найдете карту раздела:

<map version="1.0" orientation="isometric" width="30" height="30" tilewidth="54" tileheight="27"> 


Вы так же можем редактировать параметры tilewidth и tileheight, пока мы не нашли правильное смещения для tilemap. Аналогичным образом, если у вас возникли проблемы с определением размера плитки изометрической tileset которую вы используете, вы можете изменить параметры tileset, такие как tilewidth и tileheight:

<tileset firstgid="1" name="dg_iso32" tilewidth="54" tileheight="49"> 
         <image source="dg_iso32.png"/> 
</tileset> 


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

Создание нового изометрического Tileset

Далее нам нужно загрузить в tileset содержащие изометрической плитки. Мы будем использовать изображение dg_iso32.png. В Tiled, выбрать Map ➤ New Tileset… и перейдите к dg_iso32.png файл.



Обратите внимание, что в Tiled будет устанавливать по умолчанию ширину плитки и высоту в соответствии с настройками в диалоговом окне New Map, то что мы ставили раньше. Для изометрической tilemaps, по умолчанию всегда будет нуждаться в коррекции в связи с перекрытием изометрической плитки. Как я упоминал ранее, tileset dg_iso32.png использует плитки шириной 54 пикселя и высотой 49 пикселей. Обратите внимание, что вам придется использовать всю высоту полотна изометрической плитки, а не высоту ромба которая 27 пикселей. Рисунок выше показывает как нужно все настроить.

Хочу сказать о некоторых правилах про которые не стоит забывать.

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

В прошлих версия cocos2d были проблемы с правильным отображения игровых персонажей и других спрайтов за частично прозрачными плитками. Часть решения состоит в том, чтобы добавить специальные свойства с именем cc_vertexz к нашим слоям. Для этого нам нужно выбрать слой земли и добавить ему «Свойства слоя» Нажмите другой клавишей или с помощу Ctrl на Маке. Добавить новое свойство с именем cc_vertexz и установите его значение в -1000. То же самое проделайте со слоем «Объекты» но ввести строку «automatic» (без кавычек), как показано на рисунке ниже.



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

Дальше сохраняем все, что мы натворили, название которому мы дадим isometric.tmx.

Загрузка изометрической Tilemap в Cocos2d

Дальше открываем наш Xcode и создаем новые проект.



Называем его как душе угодно. Я назвал свой NewTileMap.



Дальше перетаскиваем нашу карту в наш проект, который мы только что создали.



Не забудьте поставить галочку, что мы только копируем объекты.

Переходим в файл НelloWorldLayer.m и начинаем кодить, сегодня не много, дальше будет больше.



в методе init стираем все что там есть и дописываем свой код.

self.map = [CCTMXTiledMap tiledMapWithTMXFile:@"isometric.tmx"];
self.background = [_map layerNamed:@"Background"];
[self addChild:_map z:-1];

_map.position = CGPointMake(-500, -500);


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

Ну вот пожалуй можно запускать нашу игру. И что мы видим?



Это не то что мы хотели увидеть! Не знаю по каким причинам, но cocos2d как-то не корректно отображает изометрические карты с стандартным шаблоном создания проекта. Ну ничего, поправим. Умные люди говорили, что стоит немного поправить CC_DIRECTOR_INIT которая определена в ccMacros.h. Я так и делал, но мне не помогло, пришлось полностью заменить папку в проекте «\libs\cocos2d» и тогда еще нужно немного отредактировать файл AppDelegate.m

Если кто решал эту проблему по другом, буду рад узнать как.



Все поправили и пробуем запустить нашу маленькую игру.



Теперь все как и должно быть! Все корректно отображается.
Думаю пока этого хватит, в следующей главе мы продолжим работу с картой.

Помогало в написание статьи книга Steffen Itterheim — Learn iPhone and iPad Cocos2D Game Development
Кому нежен будет исходник, пишите, вышлю.
Теги:
Хабы:
+22
Комментарии 6
Комментарии Комментарии 6

Публикации

Истории

Работа

iOS разработчик
23 вакансии
Swift разработчик
38 вакансий

Ближайшие события

Московский туристический хакатон
Дата 23 марта – 7 апреля
Место
Москва Онлайн
Геймтон «DatsEdenSpace» от DatsTeam
Дата 5 – 6 апреля
Время 17:00 – 20:00
Место
Онлайн
PG Bootcamp 2024
Дата 16 апреля
Время 09:30 – 21:00
Место
Минск Онлайн
EvaConf 2024
Дата 16 апреля
Время 11:00 – 16:00
Место
Москва Онлайн