Топ 10 лучших изометрических игр
Есть что-то особенное в изометрических играх, такое горячо любимое и близкое для любого и игрока. Большинство лучших изометрических игр, были созданы в то время, когда игры делались не на конвейере ради многомиллионных продаж, а ради удовольствия от игрового процесса, и в итоге большинство из них вышли шедеврами, или даже нетленными произведениями искусства.
Изометрия вызывает теплые, ламповые чувства, сходны с теми, которые получаешь от настолок или игр в DnD, партии в MtG в компании друзей, или даже во время покраски фигурок Warhammer. Несмотря на устаревшую графику или технологии 90х, эти игры выглядят намного естественнее и более живыми чем современные.
Что же такое изометрия? Для того чтобы узнать определение, обратимся к Википедии:
«Изометри́ческая прое́кция — это разновидность аксонометрической проекции, при которой в отображении трёхмерного объекта на плоскость коэффициент искажения (отношение длины спроецированного на плоскость отрезка, параллельного координатной оси, к действительной длине отрезка) по всем трём осям один и тот же. Слово «изометрическая» в названии проекции пришло из греческого языка и означает «равный размер», отражая тот факт, что в этой проекции масштабы по всем осям равны. В других видах проекций это не так.»
Как видим, это просто один из вариантов отображения предметов, в псевдо 3D, в котором объекты соблюдают свои пропорции и размеры, что и создает эффект «естественности» изображения. Данный подход был популярен в 90х-2000х годах, так как был довольно современным и не требовал от ПК большой производительности.
Топ 10 лучших изометрических игр:
Ultima Online
Одна из первых MMORPG, родоначальник этого популярного жанра. Творение легендарного Ричарда Гериота, которое заставило миллионы игроков по всему миру жить второй жизнью в фентезийных мирах. Самое интересное, что официальные сервера Ultima Online все еще работают, а игра получает обновления, хотя чуть меньше чем через 2 года ей исполнится 20 лет!
Diablo
Fallout
Одна из самых известных пост апокалиптических игр, для которой создали свою собственную игровую механику SPECIAL и довольно реалистичный мир, разрушенный атомной войной. Игра разрабатывалась как продолжение классической игры Wasteland, но потом разработчики по различным причинам ушли от этой идеи, и создали что-то свое. Игра получила продолжение, еще одну изометрическую часть с новым сюжетом и другой локацией в том же мире. Fallout отличается от других игр особой стилистикой, изобилующей запоминающимися образами, и довольно хорошим черным юмором.
Theme Hospital
Лучший симулятор госпиталя всех времен и народов, сочетающий в себе довольно мощный редактор уровней, возможность развивать и перестраивать свой госпиталь, с отличным эксцентричным черным юмором и графикой – вот что сделало игру хитом. Стройте госпиталь своей мечты, лечите пациентов от довольно странных и смешных недугов, и не забывайте – вы всегда можете выгнать смертельно больных из своего учреждения, чтобы не портить статистику.
Warcraft/Starcraft
Simcity 2000
Стоить свой собственный город, развивать его и решать его судьбу – довольно амбициозно. И видеоигры позволяют вам это сделать. Simcity 2000 является развитием родоначальника серии Simcity, являясь его улучшенной версией, как и с точки зрения игрового процесса, так и с точки зрения графики.
Xcom
Своеобразная, но довольно популярная серия игр, основанная на пошаговой стратегии UFO: Enemy Unknown. Довольно интересная механика боя, хороший сюжет и проработка многих мелочей сделал игры Xcom популярными, что породило множество переизданий оригинальной игры, так и очевидные клоны. В 2012 вышел ремастер оригинальной игры в полном 3D, а сейчас идет разработка новой части серии – XCOM 2.
Baldur’s Gate
Первая классическая RPG во вселенной Forgotten Realms от студии BioWare. Игра сочетает в себе игровую механику Advanced Dungeons & Dragons 2 редакции, с хорошо продуманным сюжетом и миром с глубокой историей. Множество нововведений хорошо объединены с лучшими чертами серий Ultima, Jagged Alliance и Wasteland, а в итоге получилась отличная игра, которая ценилась не только за графику, а за каждый из ее элементов.
Little Big Adventure
Rollercoaster Tycoon 2
Еще один симулятор, но на этот раз нам доверят стоить и развивать собственный тематический парк с Американскими горками. Игра обладает отличной детализированной графикой и мощным редактором, который позволяет создавать просто умопомрачительные горки. Единственное, чего не хватате оригинальным изометрическим играм серии, это возможности прокатится на построенных горках с видом от первого лица. Данная возможность появилась только в 3 части игры, которая была полностью в 3D.
Изометрия в играх. С чего все начиналось?
Привет друзья! Я думаю, что нет такого человека, который бы не сталкивался с играми в изометрии, будь то это какая-то ролевая игра, стратегия или вообще любой другой жанр. И сегодня мы обсудим именно эту тему – тему изометрической проекции в видеоиграх.
В данном блоге мы, вспомним первые игры в изометрии, поговорим для чего она нужна, как развивалась, и попытаемся понять, почему использование этой проекции всё чаще применяется в игровой индустрии и почему она нравится нравятся игрокам?
Если хочешь усвоить всю эту информацию в простой и расслабляющей форме, то можешь пройти по ссылке на видео!
Сложилось так, что изометрия в видеоиграх используется по разным причинам. Вот, например, первые подобные проекты использовали изометрию для имитации в 2D играх ЗD графики, недоступной для компьютеров и приставок того времени. Когда же такая возможность представилась, разработчики продолжили использовать изометрию отчасти из-за трудностей изучения новых технологий, отчасти из-за финансовой составляющей, ведь 3D графика была дорогим удовольствием. В нынешнее время изометрия неотъемлема для некоторых игр, так как привязана к серии, например, Diablo никто не может представить её не в изометрии или к жанру, например, стратегии. Некоторые игры просто используют изометрию как отличительную особенность.
Само понятие изометрии в компьютерных играх относится к тому или иному виду параллельной проекции с особым расположением камеры. Где угол обзора смещён так что позволяет создаёт эффект трёхмерности и позволяет показать некоторые детали окружения, которые не видны при виде сверху или виде сбоку. Вот вам несколько примеров изометрии в деле: XCOM 2, Diablo III, Disco Elysium, Sid Meier’s Civilization V и Baldur’s Gate III.
Но несмотря на название, изометрическая компьютерная графика не обязательно является истинно изометрической – т.е. оси не всегда ориентированы под углом 120° друг к другу. Вот вам наглядный пример, истинный изометрический рисунок куба (слева), можете обратить здесь внимание на углы и равную длину каждого из ребер куба, соотношение пикселей в такой изометрии будет примерно 1,732:1, а вот диметрическая проекция (справа) которая в основном и используется в играх, тут уже и разные углы, и только некоторые ребра равны, но соотношение сторон уже 2:1.
Проекция, используемая в видеоиграх, немного отличается от «истинной» изометрии из-за ограничений растровой графики. Линии в направлениях X и Y не будут следовать аккуратному пиксельному узору, если они нарисованы под нужным углом 30° к горизонтали.
В то время как современные компьютеры могут устранить эту проблему с помощью сглаживания, более ранняя компьютерная графика не поддерживала достаточное количество цветов или не обладала достаточной мощностью процессора для этого. Поэтому для рисования осей X и Y использовали соотношение 2:1, т.е. диметрическую проекцию.
А на слайдах ниже вы можете увидеть соответствующие углы поворота 3D-камеры для истинной изометрической проекции (слева) и для диметрической проекции (справа). И из всего этого мы можем сделать вывод, что раньше и не было истинной изометрии, так как ее было трудно воплотить.
Но изометрическая и диметрическая проекция — это не все, на самом деле в играх используются различные виды проекции схожие с изометрией, например:
Использующие триметрическую проекцию, такие игры как первый Fallout и SimCity 4
Использующие косоугольную проекцию, например Ultima Online
Комбинация перспективной проекции и вида с высоты птичьего полёта, например, Torchlight и Divinity: Original Sin
Но в итоге свелось к одному мы просто привыкли называть все это кратко, ИЗОМЕТРИЯ!
В области видеоигр метод изометрической проекции стал популярным из-за лёгкости, с которой можно сделать 2D графику на основе спрайтов и плиток для представления трёхмерной игровой среды. Поскольку параллельно проецируемые объекты не изменяются в размере при перемещении по области, компьютеру нет необходимости масштабировать спрайты или выполнять сложные вычисления, необходимые для имитации визуальной перспективы.
Из плюсов изометрии мы можем отметить то, что использование изометрической или почти изометрической перспективы в видеоиграх даёт преимущества игрового процесса. Например, по сравнению с top-down игрой где проекция строго сверху, они добавляют третье измерение, которое открывает новые возможности для игрока.
Так же, по сравнению с видеоиграми от первого или третьего лица, они позволяют вам легче управлять большим количеством юнитов, например, целой группой персонажей в какой-нибудь РПГ или большой армией в стратегии. Поэтому стратегии и ролевых игр с механикой управления группой персонажей так сильно подружились с изометрией.
Кроме того, изометрия может облегчить ситуации, когда игрок может отвлекаться от основной механики игры из-за необходимости постоянно управлять громоздкой 3D-камерой. То есть, игрок может сосредоточиться на самой игре, а не на манипулировании игровой камерой во время активных действий.
Останемся мы конечно не без недостатков, одним из главных недостатков в изометрической графике является то, что по мере того, как разрешения и соотношения сторон дисплея продолжают развиваться, статические 2D изображения необходимо каждый раз повторно визуализировать, чтобы идти в ногу со временем, и не страдать от эффектов пикселизации и использовать – anti-aliasing или на русском технология сглаживания.
Однако повторный рендеринг игровой графики не всегда возможен. Например, как это было в 2012 году, когда студия Beamdog переделывала Baldur’s Gate от BioWare 1998 года, то студии не хватало оригинальных ресурсов разработчиков из-за того, что исходные данные были потеряны в результате наводнения, и они выбрали простое масштабирование 2D графики со сглаживанием без повторного рендеринга игровых спрайтов. Результатом была игра с определённой нечёткостью или её отсутствием по сравнению с графикой оригинальной игры.
Слева Baldur’s Gate 98 года, справа Baldur’s Gate: Enhanced Editio (можно заметить небольшое замыливание и некоторую нечеткость)
В то время как настоящие 3D в играх можно было увидеть уже в начале 70-х годов, первыми же видеоиграми, в которых использовался особый визуальный стиль изометрической проекции были аркадные игры в начале 80-х годов.
Как принято считать начало изометрии положила Игра Zaxxon от Sega вышедшая в апреле 1982 года, но скажу вам, что это было не совсем так. Первой же игрой в изометрии стала Treasure Island которая вышла в сентябре 1981 года под предводительством Японской компании Data East Corporation ну или DECO загвоздка в том, что она была выпущена в 1981 только для Японии, а на международный рынок вышла в июне 1982.
Изображение игры Treasure Island:
В свою очередь Zaxxon, была выпущенная на международном уровне в апреле 1982 года, но в Японии она был выпущен в декабре 1981 года, она была значительно популярнее и более влиятельнее. После выпуска игра имела коммерческий успех и вошла в пятёрку самых прибыльных аркадных игр того года. Поэтому ее и считают первой изометрической игрой.
Изображение игры Zaxxon:
И да вот вам интересный факт Название игры Zaxxon происходит от другого названия изометрии, axonometric projection, (AXXON from AXONometric projection) или аксонометрическая проекция это считайте синонимы.
Изображение игры Q*bert:
В следующем году в феврале 83 года была выпущена изометрическая платформер-аркада Congo Bongo, работала на том же оборудовании, что и Zaxxon. Это позволяет персонажу игрока перемещаться по большим изометрическим уровням, включая истинное трёхмерное лазание и падение.
Изображение игры Congo Bongo:
Вскоре в 1983 году изометрические игры перестали быть эксклюзивными для аркадного рынка, и пришли в домашние компьютеры с выпуском Blue Max для 8-битного семейства Atari и Ant Attack для ZX Spectrum. В Ant Attack игрок мог двигаться вперед в любом направлении прокрутки, игра, предлагая полное свободное движение, а не фиксированное на одной оси, как в Zaxxon. Виды также можно было изменять вокруг 90° оси.
Ant Attack для ZX Spectrum:
Годом позже на ZX Spectrum была выпущена игра Knight Lore, которая обычно считается революционным проектом, которая определила жанр изометрических игр на годы вперёд, однако изометрия не ограничивалась аркадными-приключенческими играми, так же в середине 80-х начали активно выходить и стратегии.
Изображение игры Knight Lore:
Дальше на протяжении 90х годов появлялись успешные и знаменитые изометрические проекты, которые известны и по сей день, такие как SimCity 2000 (1994), Civilization II (1996), X-COM (1994) и Diablo (1996), и везде использовалась фиксированная изометрическая перспектива. Но с появлением уже 3D-ускорения на персональных компьютерах и игровых консолях игры, ранее использовавшие 2D-перспективу, как правило, вместо этого начали переключаться на истинное 3D и изометрию.
Это можно увидеть в преемниках вышеупомянутых игр: например, SimCity, Civilization VI, XCOM 2 и Diablo III эти игры уже используют трёхмерную полигональную графику. Потом время изометрии начало немного утихать.
SimCity. Как было и как стало:
Civilization. Как было и как стало:
XCOM. Как было и как стало:
Diablo. Как было и как стало:
И новый бум популярности, и неизменную актуальность в новом тысячелетии изометрия обзавелась после старта краутфандинговой площадки Kickstarter в 2009г на которой вскоре стали появляться популярные проекты и в дальнейшем выходить в свет.
К ним можно отнести серию Shadowrun Returns (2013-2015); серии Pillars of Eternity (2015-2018) и Tyranny (2016). Все эти игры были высоко оценены у пользователя и все они имели изометрию тем самым впечатав в мышлении игроков что изометрия — это не отголоски прошлого, а отличное настоящее и не менее хорошее будущее.
Также с помощью Kickstarter было профинансировано и несколько популярных псевдоизометрических 3D-ролевых игр, таких как Divinity: Original Sin (2014) и Wasteland 2 (2014) Однако эти игры отличаются от вышеперечисленных игр тем, что в них используется перспективная проекция вместо параллельной. Так сказать, Kickstarter вдохнул новую жизнь в изометрические игры так как ими в основном занимались небольшие компании.
После данного периода большинство изометрических проектов влюбили в себя большое количество игроков. И да это все было не из-за изометрии в игре, а от того что игры были на высочайшем уровне, и изометрия выступала отчасти большим полигоном для экспериментов разработчиков в плане визуальной составляющей и проработке геймплея, которых нельзя было сделать в играх от первого или третьего лица.
Технологии не стоят на месте и третье измерение для нас это уже что-то обычное и уже потихоньку мы переходим к VR проектам. Однако это никак не повлияло на существование проектов, использующих изометрию, и даже напротив, их число с каждым годом растёт. Ей находят новые, порой неожиданные применения, а популярность игр с изометрией утирает нос многим другим играм от первого или третьего лица.
Изометрия неотъемлемая часть видеоигровой индустрии. Такое состояние дел показывает нам, что изометрические видеоигры — это не просто проходящий этап, они будут продолжать своё существование ещё многие годы и в них играли и будут играть, не смотря не на что.
А на сегодня все, пишите в комментариях свои изометрические игры, которые вам больше всего запомнились, будет интересно почитать!
Как создаются изометрические миры
Все мы играли в потрясающие изометрические игры, будь то первые Diablo, Age of Empires или Commandos. При первой встрече с изометрической игрой можно задаться вопросом: двухмерная она, трёхмерная или нечто совершенно другое. Сам мир изометрических игр обладает волшебной притягательностью для разработчиков. Давайте попробуем раскрыть тайну изометрической проекции и создадим простой изометрический уровень.
Для этого я решил использовать Phaser с кодом на JS. В результате у нас получится интерактивное приложение HTML5.
Учтите, что это не туториал по разработке на Phaser, мы просто используем его для удобного ознакомления с базовыми концепциями создания изометрической сцены. Кроме того, в Phaser есть простые способы создания изометрического контента, например, Phaser Isometric Plugin.
Для упрощения при создании сцены мы будем использовать тайлы.
1. Игры на основе тайлов
В двухмерных тайловых играх каждый визуальный элемент разбивается на мелкие части стандартного размера, называемые тайлами. Из таких тайлов на основании данных уровня (обычно это двухмерный массив) формируется игровой мир.
Чаще всего в тайловых играх используется вид сверху или сбоку. Давайте представим стандартный двухмерный вид сверху с двумя тайлами — тайлом травы и тайлом стены, показанными на рисунке:
Оба этих тайла являются квадратными изображениями одного размера, то есть высота и ширина тайла одинаковы. Предположим, что уровень игры представляет собой лужайку, ограниченную со всех сторон стенами. В таком случае данные уровня представляют собой вот такой двухмерный массив:
Здесь 0 обозначает тайл травы, а 1 — тайл стены. Расположив тайлы согласно данным уровня, мы создадим огороженную лужайку, показанную на рисунке:
Можно сделать ещё один шаг и добавить угловые тайлы, а также отдельные тайлы вертикальных и горизонтальных стен. Для этого потребуется пять дополнительных тайлов, кроме того, придётся изменить данные уровня:
См. изображение ниже, где я пометил тайлы числами, соответствующими их значениям в данных уровня:
Мы разобрались с понятием тайловых уровней, давайте теперь посмотрим, как использовать простой псевдокод двухмерной сетки для сборки нашего уровня:
Если использовать показанные выше изображения тайлов с равной шириной и высотой, то у нас получатся одинаковые размерности уровня. Если ширина и высота тайла в нашем примере равны 50 пикселям, то общий размер уровня составит 300 на 300 пикселей.
Как сказано выше, обычно тайлы используются в играх с видом сверху или сбоку. Для изометрического вида нам нужно реализовать изометрическую проекцию.
2. Изометрическая проекция
Мы наклоняем камеру по двум осям (поворачиваем камеру на 45 градусов вбок, потом на 30 градусов вниз). При этом создаётся ромбическая сетка, в которой ширина ячеек в два раза больше высоты. Такой стиль стал популярным благодаря стратегическим играм и экшн-RPG. Если посмотреть в этом виде на куб, то мы видим три его стороны (верхнюю и две боковые).
Хотя это звучит немного сложно, реализация такого вида довольно проста. Нам нужно разобраться в том, как соотносятся двухмерное и изометрическое пространства, то есть понять связь между данными уровня и видом. Нам нужно преобразовать декартовы координаты вида сверху в изометрические координаты. На рисунке ниже показано графическое преобразование:
Размещение изометрических тайлов
Да, вот и всё. Эти простые уравнения творят магию изометрического проецирования. Вот вспомогательные функции Phaser, которые можно использовать для преобразования из одной системы в другую с помощью очень удобного класса Point :
Невероятно, правда? Давайте посмотрим, как обычное двухмерное положение преобразуется в изометрическое:
Для нашей огороженной лужайки мы можем определить проходимые области, проверяя, равно ли значение элемента массива 0 в нужной координате. Если равно, то это трава. Для этого нам нужно определять координаты массива. Мы можем найти координаты тайла в данных уровня из его декартовых координат с помощью этой функции:
(Здесь мы предполагаем, что высота и ширина тайла одинаковы, как и бывает в большинстве случаев.)
То есть, зная пару экранных (изометрических) координат, мы можем найти координаты тайла вызовом функции:
Эта точка на экране может быть, скажем, положением курсора мыши или подбираемого предмета.
Точки регистрации
Так происходит потому, что изображения тайлов имеют разные размеры, и мы не учитываем атрибут высоты тайла стены. На рисунке ниже показаны разные используемые нами изображения тайлов и белый круг, в котором по умолчанию находится их [0,0]:
Заметьте, что при использовании базовых точек (Pivot) по умолчанию герой находится не в том месте. Также заметьте, что мы теряем высоту стены, когда отрисовываем её с базовой точкой по умолчанию. На рисунке справа показано, как они должны быть расположены правильно, чтобы у тайла стены учитывалась её высота, а герой находился посередине тайла травы. Эту проблему можно решить разными способами.
3. Движение в изометрических координатах
Никогда не следует двигать персонажей или объекты в изометрических координатах напраямую. Вместо этого мы будем управлять данными игрового мира в декартовых координатах и просто использовать приведённые выше функции для обновления положения на экране. Например, если мы хотим переместить персонажа вперёд в положительном направлении по оси Y, то можно просто увеличить его свойство y в двухмерных координатах, а затем преобразовать конечное положение в изометрические координаты:
Давайте подведём итог всем новым понятиям, которые мы изучили, и попробуем реализовать рабочий пример объекта, двигающегося в изометрическом мире. Можно использовать необходимые графические ресурсы из папки assets в репозитории исходного кода на git.
Сортировка по глубине
Если вы пробовали перемещать изображение мяча в огороженном саду, то заметили проблемы с сортировкой по глубине. Если в изометрическом мире есть подвижные элементы, то кроме обычного расположения, нам нужно позаботиться и о сортировке по глубине. Правильная сортировка гарантирует, что объекты, находящиеся ближе к экрану, будут отрисовываться поверх более далёких объектов. Как упомянуто в этой статье, простейший способ сортировки — использование декартовой координаты Y: чем выше объект на экране, тем раньше его следует отрисовывать. Это может неплохо работать для простых изометрических сцен, но лучше будет перерисовывать всю изометрическую сцену в процессе движения в соответствии с координатами тайла в массиве. Давайте я подробно объясню этот подход на примере псевдокода отрисовки уровня:
Если мы будем выполнять цикл отрисовки в соответствии с псевдокодом, то сначала будет отрисована средняя угловая стена, затем цикл продолжит отрисовывать все стены в верхней правой части, пока не достигнет правого угла. В следующем цикле он отрисует стену слева от персонажа, а затем тайл травы, на котором стоит персонаж. Поскольку мы определили, что это тайл, который занимает персонаж, то отрисовываем персонажа после тайла травы. Таким образом, если бы на свободных трёх тайлах травы рядом с тайлом персонажа находились стены, то эти стены перекрывали персонажа, обеспечивая правильную сортировку по глубине.
4. Создание графики
Изометрическая графика может, но не обязана быть пиксель-артом. При работе с изометрическим пиксель-артом полезно изучить руководство RhysD, в котором содержится всё необходимое. Теорию можно изучить в Википедии.
При создании изометрической графики нужно соблюдать следующие правила:
Посты по теме
5. Изометрические персонажи
Для начала нам нужно определиться с тем, в каких направлениях можно перемещаться в нашей игре. Обычно в играх разрешается движение в четырёх или восьми направлениях. Посмотрите на рисунок ниже, чтобы понять связь между двухмерным и изометрическим пространством:
Обратите внимание, что в игре с видом сверху при нажатии на клавишу вверх персонаж будет двигаться вертикально вверх, но в изометрической игре он переместится под углом в 45 градусов в сторону верхнего правого угла.
Для вида сверху мы можем создать один набор анимаций персонажа, смотрящего в одном направлении, а потом просто повернуть все анимации. Для графики изометрического персонажа нужно создать анимацию для каждого из допустимых направлений, то есть для движения в восьми направлениях нужно создать по восемь анимаций для каждого действия.
Для простоты понимания направления обычно обозначают как «север», «северо-запад», «запад» и так далее. В кадрах персонажа на рисунке показаны кадры неподвижного положения, начиная с юго-востока и по часовой стрелке:
Мы будем располагать персонажей так же, как располагали тайлы. Движение персонажа выполняется вычислением декартовых координат и преобразованием их в изометрические. Допустим, для управления персонажем используется клавиатура.
Теперь с помощью значений dX и dY мы можем обновлять декартовы координаты следующим образом:
Итак, dX и dY представляют собой изменение положения персонажа по X и Y в зависимости от нажатых клавиш. Как сказано выше, мы легко можем вычислить новые изометрические координаты:
Получив новое изометрическое положение, мы должны переместить персонажа в это положение. На основании значений dX и dY мы можем понять, в каком направлении смотрит персонаж и использовать соответствующую анимацию. После перемещения персонажа не забывайте перерисовать уровень с соответствующей сортировкой по глубине, потому что тайловые координаты персонажа могут измениться.
Распознавание коллизий
Распознавание коллизий выполняется проверкой того, является ли тайл в новом вычисленном положении объекта непроходимым. Итак, после нахождения нового положения мы не можем сразу же перемещать туда персонажа, нам нужно сначала проверить, что за тайл занимает это место.
В функции isWalkable() мы проверяем, является ли значение массива данных уровня в заданной координате проходимым тайлом. Нам нужно также обновлять направление, в котором смотрит персонаж, даже если он не движется, на случай, если он столкнулся с непроходимым тайлом.
Это похоже на правильное решение, но оно будет работать только для объектов без объёма. Для вычисления коллизий мы рассматриваем только одну точку (центральную точку персонажа). В действительности нам нужно найти все четыре угла из заданной двухмерной центральной точки и вычислить коллизии для всех этих углов. Если какой-то из углов попадает в непроходимый тайл, то перемещать персонажа нельзя.
Сортировка по глубине с персонажами
Рассмотрим персонажа и тайл дерева в изометрическом мире, имеющие одинаковые размеры изображения, как бы неестественно это ни выглядело.
Чтобы хорошо разобраться в сортировке по глубине, нам нужно понять, что когда координаты X и Y персонажа меньше, чем у дерева, то дерево перекрывает персонажа. Когда координаты X и Y персонажа больше, чем у дерева, то персонаж перекрывает дерево. Когда их координаты X равны, то решение принимается только по координате Y: объект с большей координатой Y перекрывает другой. Если совпадают координаты Y, то решение принимается только по X: объект с большим X перекрывает другой.
Как сказано выше, упрощённая версия алгоритма заключается в простой отрисовке уровней от дальних тайлов (т.е. tile[0][0] ) к ближним, строка за строкой. Если персонаж занимает тайл, то сначала мы рисуем тайл земли, а потом отрисовываем тайл персонажа. Это сработает хорошо, потому что персонаж не может занимать тайл стены.
6. Время для демо!
Вот демо на Phaser. Нажмите мышью для переключения на интерактивную область, а потом управляйте персонажем клавишами со стрелками. Для перемещения по диагонали нажимайте две клавиши.
7. Собираемые предметы
Собираемые предметы — это объекты, которые можно подбирать на уровне, обычно просто наступая на них. Например это могут быть монеты, кристаллы, боеприпасы и т.д.
Данные о предметах можно хранить прямо в данных уровня, как показано ниже:
В нашем примере я сделаю проще и не буду использовать отдельный массив для предметов.
Собирание предметов
Распознавание предметов выполняется точно так же, как и распознавание коллизий, но после перемещения персонажа.
8. Тайлы-триггеры
Как понятно из названия, тайлы-триггеры запускают какие-то действия, когда игрок наступает на них или нажимает на них клавишу. Они могут телепортировать игрока в другое место, открывать ворота, создавать врагов и так далее. В каком-то смысле, собираемые предметы являются просто особым типом триггеров: когда игрок наступает на тайл с монетой, монета исчезает, а счётчик монет увеличивается.
Давайте посмотрим, как можно реализовать дверь, переносящую игрока на другой уровень. Тайл рядом с дверью будет триггером. Когда игрок нажимает клавишу x, то перемещается на другой уровень.
Для смены уровней нужно всего лишь заменить текущий массив levelData на массив нового уровня, а затем назначить новое положение и направление heroMapTile персонажа. Допустим, есть два уровня с дверями, через которые можно проходить. Поскольку тайл земли рядом с дверью будет активным тайлом в обоих уровнях, можно использовать его в качестве нового положения персонажа, появляющегося на уровне.
Код проверки на событие срабатывания триггера показан ниже:
Вот работающее демо. Попробуйте пособирать предметы, наступая на них, и менять уровни, встав перед дверью и нажав x.
9. Снаряды
Снарядами мы будем называть то, что движется в определённом направлении с определённой скоростью, например, пуля, волшебное заклинание, мяч и т.д. К снарядам применимо всё, относящееся к персонажам, за исключением высоты: снаряды обычно не катятся по земле, а летят на определённой высоте. Пуля летит на уровне талии персонажа, а мяч может даже скакать.
Интересно, что изометрическая высота соответствует высоте в двухмерном виде сбоку, хотя и меньше по величине. Здесь нет сложных преобразований. Если мяч в декартовых координатах находится в десяти пикселях над землёй, то в изометрических координатах он может быть над землёй в 10 или 6 пикселях. (В нашем случае соответствующей осью будет ось Y.)
Давайте попробуем реализовать мяч, скачущий по нашему огороженному саду. Для дополнительного реализма мы добавим мячу тень. Всё, что нужно — прибавлять к изометрическому значению Y мяча значение высоты отскока. Значение высоты отскока будет меняться покадрово в зависимости от гравитации, и как только мяч коснётся земли, мы сменим знак текущей скорости по оси Y.
Вот как это выглядит в коде:
Играемая тенью роль очень важна, она добавляет реализма этой иллюзии. Кроме того, заметьте, что теперь мы используем две экранные координаты (x и y) для представления трёх измерений в изометрических координатах — ось Y в экранных координатах также является осью Z в изометрических координатах. Это может запутать.
10. Нахождение пути и движение по нему
Поиск пути и движение по нему — это довольно сложный процесс. Для нахождения пути между двумя точками существует множество разных решений с использованием различных алгоритмов, но поскольку levelData является двухмерным массивом, то всё гораздо проще, чем могло бы быть. У нас есть чётко заданные уникальные узлы, которые может занимать игрок, и мы можем легко проверить, можно ли по ним пройти.
Посты по теме
Наша цель — найти узлы, соединяющие начальный узел с конечным. Из начального узла мы посещаем все восемь соседних узлов, и помечаем их как посещённые. Этот процесс рекурсивно повторяется для каждого нового посещённого узла.
Каждый поток отслеживает посещённые узлы. При переходе к соседним узлам уже посещённые узлы пропускаются (рекурсия прекращается). Процесс продолжается, пока мы не достигнем конечного узла, в котором рекурсия завершается и весь пройденный путь возвращается как массив узлов. Иногда конечный узел достигнуть не удаётся, то есть поиск пути заканчивается неудачей. Обычно мы находим между узлами несколько путей. В таком случае мы выбираем один из них с минимальным количеством узлов.
Поиск пути
Глупо изобретать велосипед заново, если речь идёт о чётко описанных алгоритмах, поэтому для поиска пути мы будем использовать уже существующие решения. В Phaser нам потребуется решение на JavaScript, поэтому я выбрал EasyStarJS. Инициализация движка поиска пути выполняется следующим образом:
Так сделано потому, что при диагональном движении персонаж может врезаться в непроходимый тайл. В таком случае система распознавания коллизий не позволит персонажу пройти насквозь. Кроме того, следует учесть, что в примере я полностью удалил распознавание столкновений, потому что в нашем примере персонажа по пути будет двигать искусственный интеллект и оно не требуется.
Движение по пути
Получив путь в виде массива узлов, мы должны заставить персонажа двигаться по нему.
Допустим, мы хотим, чтобы персонаж двигался к тайлу, по которому мы щёлкнули. Сначала мы ищем путь между узлом, занимаемым персонажем, и узлом, по которому щёлкнули. Если путь найден, то нам нужно переместить персонажа в первый узел массива узлов, пометив его как точку назначения. Добравшись до узла назначения, мы проверяем, есть ли ещё узлы в массиве узлов, и если есть, то помечаем как точку назначения следующий узел, и так далее, пока не достигнем конечного узла.
Нам нужно отфильтровывать правильные точки нажатия мышью. Для этого мы определяем, что мы нажали в проходимой области, а не на тайле стены или другом непроходимом тайле.
Ещё один интересный момент кодирования ИИ: мы не хотим, чтобы персонаж поворачивался лицом к следующему тайлу в массиве узлов как только он дойдёт до текущего, потому что такой мгновенный поворот приведёт к том, что персонаж будет ходить по границам тайлов. Вместо этого нам следует подождать, пока персонаж на несколько шагов зайдёт на тайл, а потом уже начинать искать следующую точку назначения. Также лучше вручную помещать персонажа в середину текущего тайла прямо перед поворотом, чтобы всё выглядело наилучшим образом.
Можно посмотреть работающее демо.
11. Изометрический скроллинг
Когда область уровня гораздо больше экранной области, то необходимо выполнять скроллинг.
Видимую экранную область можно рассматривать как небольшой прямоугольник в большом прямогольнике всей области уровня. Скроллинг является простым перемещением внутреннего прямоугольника во внутреннем. Обычно в процессе скроллинга положение персонажа в экранном прямоугольнике остаётся постоянным — чаще всего он находится в центре экрана. Интересно, что для реализации скроллинга нам нужно всего лишь отслеживать угловую точку внутреннего прямоугольника.
Эта угловая точка, которую мы обозначаем в декартовых координатах, попадает в один из тайлов в данных уровня. Для скроллинга мы увеличиваем положение угловой точки по осям X и Y в декартовых координатах. Теперь мы можем преобразовать эту точку в изометрические координаты и использовать их для отрисовки экрана.
Или же мы можем отрисовывать на экране сетку изометрических тайлов размером X x Y, чтобы цикл отрисовки был эффективным для больших уровней.
Все эти шаги можно выразить следующим образом:
Заметьте, что приращение угловой точки происходит в направлении, противоположном направлению обновления положения персонажа при его движении. Благодаря этому персонаж остаётся на одном и том же месте относительно экрана. Посмотрите этот пример (используйте клавиши со стрелками для скроллинга, щелчок мышью для увеличения видимой сетки).
Заключение
Этот туториал в основном предназначен для новичков, изучающих изометрические игровые миры. Многие из представленных здесь концепций имеют другие, немного более сложные решения, и я намеренно выбрал самые простые.
Возможно, это руководство не решит всех появляющихся у вас проблем, но полученная информация позволит развить эти концепции для создания более сложных решений. Например, реализованная простая сортировка по глубине не поможет в случае уровней с несколькими этажами и тайлами платформ, двигающимися с одного этажа на другой. Но это уже задача для другого туториала.
