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

Привет все читателям сайта 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