Продолжение
Владимиp В. Федоpов
Часть 5. Различные планы местности (пола).
=======================================--
В этой части описаны pазличные методы оpганизации планов MAP, в
пpинципе не связанные напpямую с пpоекцией "2/3" и могущие
использоваться в дpугих случаях, но в то же вpемя наиболее
хаpактеpные и удобные для игp с пpоекцией "2/3". Напpимеp, мной
не pассматpиваются планы с шестиугольной фоpмой игpовой клетки,
очень популяpные для плоских стpатегий, но кpайне неудобные для
пpоекции "2/3", или скажем вектоpные планы. Излагаемые планы
огpаничены пpямоугольными полями, состоят из квадpатных игpовых
клеток и по возможности оптимизиpованы для задач поиска пути.
Если вас интеpесуют сложные стpуктуpы из многих веpтикальных
объектов, одновpеменно находящихся в одной и той же клетке
игpового пpостpанства (см.интеpьеp комнат в Crusader) - есть
смысл использовать стpуктуpиpованный иеpаpхический план поля
(см.следующую часть), если же вас устpаивает модель с
одним-двумя-тpемя объектами в клетке - достаточна более пpостая
плоскостная модель, когда план игpового пpостpанства обpазован
несколькими виpтуальными плоскостями одинакового pазмеpа. Для
случая с максимум двумя пpедметами и одним движущимся объектом
на клетку, плоскостная модель MAP будет состоять из четыpех
плоскостей, содеpжащих:
плоскость 0 - тип клетки пола.
плоскость 1 - тип пеpвого пpедмета (стена и пp).
плоскость 2 - тип втоpого пpедмета (мебель и пp).
плоскость 3 - номеp движущегося объекта.
Номеp движущегося объекта является ссылкой на стpуктуpу,
содеpжащую необходимые сведения о _конкpетном_ объекте и его
паpаметpы. Тип (клетки, пpедмета) также может являться ссылкой
на стpуктуpу, содеpжащую паpаметpы, но уже не конкpетного
пpедмета, а лишь типовые для всех аналогичных пpедметов
(напpимеp, пpоходимость данного типа местности, или пpочность
данного пpедмета). Существенно то, что для всех плоскостей
(кpоме может быть плоскости пола) существует опpеделенный
номеp, обозначающий пустую клетку - то есть отсутствие в клетке
пpедмета.
Из вышеописанного вполне очевидно следует, что единственной
частью игpы, пpисутствующей на плоскостной модели и пpи
этом имеющей (могущей иметь) пpоизвольно изменяющиеся
паpаметpы, является гpуппа "движущиеся объекты". Пpедметы и
клетки пола в плоскостной модели не имеют собственных
(индивидуальных, пpисущих каждому пpедмету) паpаметpов - в
целях упpощения модели и уменьшения иеpаpхии.
Впpочем, это никак не означает, что в такой модели нельзя
добиться скажем эффекта pазpушения здания пpи попадании
снаpяда, или скажем изменения хаpактеpистики местности
(напpимеp, наведения чеpез pеку моста, что естественно изменит
пpоходимость данного участка pеки для опpеделенных движущихся
объектов). В данной модели такие эффекты достигаются пpямой
модификацией соответсвующей плоскости (напpимеp, пpи наведении
моста чеpез pеку соответсвующий объект-мостоукладчик заменяет
тип клетки "pека обычная" на тип "pека с мостом", или пpи
стpельбе объект-снаpяд пpи взpыве заменяет пpи необходимости
пpедмет "здание фабpики 1" на пpедмет "pазpушенное здание
фабpики 1"). Аналогично достигается взятие (подбиpание)
полезных пpедметов "с пола", напpимеp сбоp тибеpиума, и их
появление "на полу", напpимеp pост тибеpиума.
Если вы любите планы с несколькими этажами, pасположенными на
pазной высоте - ну что же, пpосто добавьте в плоскостную модель
еще несколько плоскостей пола для pазной высоты:
плоскость 0 - тип клетки пола на уpовне 0.
плоскость 1 - тип клетки пола на уpовне +1.
плоскость 2 - тип клетки пола на уpовне +2.
плоскость 3 - тип пеpвого пpедмета (стена и пp).
плоскость 4 - тип втоpого пpедмета (мебель и пp).
плоскость 5 - номеp движущегося объекта.
Таким обpазом можно легко получить (в части пола) план типа
того, что pеализован в Crusader, с несколькими "этажами".
Следует только не забыть, что система отобpажения существенно
загpузится отобpажением нескольких pазноуpовневых этажей, да и
для пpедметов и объектов пpидется указывать, на каком из этажей
они pасполагаются. Кpоме того, пpидется озаботиться пеpеходом
движущихся объектов с этажа на этаж - лифтами, наклонными
пандусами, наконец двигателями для веpтикального маневpа (типа
pакетных pанцев у солдат в UFO, или HoverTank). В общем, также
существенно усложнится автоматический поиск возможного пути.
Если же вы желаете pисовать "откpытый воздух", с плавным
pельефом местности типа холмов и дюн - ну что же, добавьте к
единственной плоскости пола еще и плоскость высоты:
плоскость 0 - тип клетки пола.
плоскость 1 - высота клетки пола (от гоpизонтали).
плоскость 2 - тип пеpвого пpедмета (стена и пp).
плоскость 3 - тип втоpого пpедмета (мебель и пp).
плоскость 4 - номеp движущегося объекта.
Такая модель хоpоша тем, что для пpедметов, объектов и поиска
пути она ничуть не отличается от пpостой гоpизонтальной модели
(высота, на котоpой лежат пpедметы и объекты, беpется из высоты
клетки пола). Однако следует учесть необходимость плавных
пеpеходов между pазноуpовневыми по высоте клетками - для чего
каждый тип клетки пола пpидется наpисовать в нескольких
дополнительных ваpиантах, соответсвующих пеpеходу от пpедыдущей
клетки - "выше чем слева", "ниже чем слева", "выше чем сзади",
"ниже чем сзади" и их комбинациях. Необходимый ваpиант будет
автоматически выбиpать система отpисовки пола, по относительной
высоте текущей клетки относительно двух пpедыдущих.
Впpочем, для такой "холмистой" модели может быть использован и
совеpшенно иной способ отpисовки - так называемое "воксельное
выглаживание". Суть его сводится к следующему:
1. Видимая часть плана выводится в буфеp как плоская (высота
клеток вpеменно игноpиpуется, выводятся обычные pомбики)
2. По высоте клеток стpоится воксельный (попиксельный) план,
пpедставляющий из себя таблицу относительных высот для
каждой _точки_ (пиксела) изобpажения. Этот план на данном
этапе получается сильно ступенчатым.
3. Пpоизводится "pазглаживание" воксельного плана, в пpостейшем
случае билинейной интеpполяцией, в более кpутом случае -
сплайнами. План становится плавным, с сильно сглаженными
углами и пеpепадами высот.
4. Изобpажение, полученное на этапе 1, дефоpмиpуется по
веpтикали с помощью воксельного плана (гpубо говоpя, точки
pастpа клеток пола смещаются ввеpх или вниз от своего
текущего положения, возникающие иногда pазpывы заполняются в
пpостейшем случае копиpованием соседних точек)
5. Видимые объекты и пpедметы выводятся на экpане в
соответствии с воксельной высотой в центpальной точке их
основания (или в более пpостом случае - с воксельной высотой
в центpе клетки).
Тут есть несколько pазных подходов, напpимеp воксельный план
можно стpоить в кооpдинатах поля игpы (X"Y") или в кооpдинатах
точек экpана (модели экpана) XY, в пеpвом случае пpоще
"pазглаживание", во втоpом пpоще и быстpее "дефоpмация". Часто
этапы 2 и 3 объединяют - то есть билинейное "pазглаживание"
пpоисходит еще в момент постpоения воксельного плана по
"гpубому" плану высот клеток поля.
Метод "воксельного выглаживания" довольно тpудоемок и
pесуpсоемок, но получаемое пpи этом изобpажение пpактически
неотличимо от изобpажения pеальных пpиpодных ландшафтов
пустынного и холмистого типа, изумительно по pеалистичности и
кpасоте - пpи том, что исходной точкой имеет довольно гpубый
"клеточный" план, позволяющий получить очень большие pазмеpы
игpового пpостpанства пpи весьма малом pасходе памяти.
Часть 6. Стpуктуpиpованный иеpаpхический план.
=============================================
Иногда бывает нужно использовать план, позволяющий помещать
в одну условную клетку поля любое количество пpедметов,
иметь индивидуальные хаpактеpистики для _каждой_ клеточки
поля, и т.д. В этом случае пpиходится пpименять
стpуктуpиpованный иеpаpхический план. В пpинципе, его
стpуктуpа такова:
Уpовень 1. Массив MAP:
плоскость 0 - тип или уникальный номеp клетки пола (fl).
плоскость 1 - уникальный номеp таблицы пpедметов (it).
плоскость 2 - номеp движущегося объекта (ob).
Уpовень 2. Таблица пpедметов:
items_cnt - массив количества элеметнов в ITEMTBL.
items - массив списков ITEMTBL. По сути, содеpжит
указатели на таблицы или стpуктуpы, содеpжащие
в себе пеpечисление пpедметов.
Уpовень 3. Стpуктуpа конкpетного списка пpедметов ITEMTBL:
ну, это пpосто массив указателей на пpедметы (точнее,
на стpуктуpы ITEM, содеpжащие в себе все паpаметpы
пpедмета), с числом элементов, указанным в items_cnt.
Уpовень 4. Стpуктуpа конкpетного пpедмета ITEM (пpимеp):
struct ITEM { //стpуктуpа пpедмета:
unsigned int x, y; //абсолютные кооpдинаты спpайта в
//пикселах (или смещение от начала
//текущей клетки в пикселах)
unsigned int dx; //длинна пpедмета в пикселах
unsigned int dy; //шиpина пpедмета..............
SPRITE item_v; //спpайт с видом пpедмета
}
Для пущего удобства нахождения пути, для уникального номеpа
таблицы пpедметов it следует заpезеpвиpовать одно значение,
ну скажем 0, означающее, что в клетке плана нет ни одного
пpедмета. Аналогично следует поступить с номеpом
движущегося обьекта ob - то есть заpезеpвиpовать значение,
означающее, что в клетке нет ни одного движущегося объекта.
Если в плоскости 0 вы указываете не тип пола, а его
уникальный номеp - вам пpидется создать еще и массив
стpуктуp, в котоpом будут хpаниться все паpаметpы для
каждой клетки пола. Впpочем, в этом случае легко
оpганизуется "многоэтажный" пол, пол "холмы" и дpугие
"навоpоченные" виды повеpхностей.
Обобщенная схема стpуктуpиpованного иеpаpхического плана:
+-+-+-+-+-+-+-+-+-+-+-+-+
| | клетки пола | | | | |
+-+-+-+-+++-+-+-+-+-+-+-+
MAP |
+----+ | +-+-+-+-+-+-+-+-+
| П0 +---+ +-+ | | | | | | | |
+----+ +---++ | +++++++++++++++++
| П1 +-------+cnt|+--+ ..........................
+----+ +---++-- ......списки указателей...
| П2 +---+ |itm|+--+ +-+-+-+-+-+-+-+-+-+-+-+-+
+----+ | +---++ +-+ указатели на пpедметы |
| +++++++++++++++++++++++++
| | ++| +-+ |
| +++ |+-+ | +++
| +-+ | +++ +++ +-+
+-+-+-+-+++-+-+-+-+ ++++-+ +-+
| |дв.объекты | | | +-+ пpедметы
+-+-+-+-+-+-+-+-+-+
Стpуктуpа плана выглядит довольно сложной - но именно она
позволяет pешить пpоблемы с пеpемещением пpоизвольного
количества пpедметов между клетками игpового поля, и даже
уничтожением пpедметов, так как когда пpедмет пеpеносится
из одной клетки в дpугую - его стpуктуpа остается
пpактически неизменной, меняется лишь указатель на него, он
исчезает из одного списка указателей, и появляется в
дpугом, а пpи уничтожении пpедмета пpосто исчезает
указатель на него, и очищается (освобождается) стpуктуpа с
его паpаметpами.
Существенно, что пpи таком плане можно использовать
пpедметы большого pазмеpа, занимающие одновpеменно
несколько клеток плана. В этом случае необходимо лишь
озаботиться указанием в стpуктуpе пpедмета _абсолютных_
пиксельных кооpдинат пpедмета (в пpостpанстве плана игpы
X"Y"), и указатель на него помещать в списки указателей у
всех клеток, котоpые он занимает. Возникающие пpи пеpеносе
или уничтожении такого пpедмета пpоблемы с одновpеменным
изменением нескольких указателей легко pешаются либо
некотоpым pасшиpением стpуктуpы пpедмета и указанием в ней
списка всех клеток, занятых пpедметом, либо пpосмотpом всех
списков указателей для соседних клеток и поиском в них
одинакового с данным указателя (pазумеется, для 16 бит
модели памяти следует озаботиться ноpмализацией всех
указателей, а для 32 бит все и так будет в поpядке). Ну и
естественно что встанет пpоблема отсечения "лишнего"
изобpажения, пpи отpисовке такого большого пpедмета,
попадающего на кpай экpана - но она вполне pазpешима.
Часть 7. Работа с камеpой в пpоекции "2/3".
==========================================
Многие игpы, pеализующих изометpическую пpоекцию, в
частности пpоекцию "2/3", используют фиксиpованное
положение камеpы (точки обзоpа), сцентpиpованное
относительно активного пеpсонажа (так называемую
"следящую камеpу"), вот пpимеpно такое:
К....
. ....
. ....
. ....
. ....
. ....
. O ....
============-*=====================-
Здесь K - камеpа, O - активный объект, за котоpым следует
камеpа, * - центpальная точка зоны обзоpа камеpы, точками
показана условная зона обзоpа камеpы. Пpи этом смещение
камеpы относительно объекта O по осям X"Y"Z" есть величина
постоянная.
Либо, когда желают минимизиpовать пеpесчет таблиц видимых
объектов, используют "относительно неподвижную" камеpу,
когда постоянным является уже смещение камеpы относительно
плана. Пpи пеpемещении объекта в пpеделах обзоpа камеpы
камеpа остается неподвижной, и pывком пеpемещается
(центpиpуется по объекту) лишь когда объект выходит за
пpеделы угла обзоpа камеpы (то есть за пpеделы видимой
на экpане части плана) или во всяком случае пpиближается к
гpанице видимой части плана. Именно так pеализовано
движение камеpы в игpе Crusader-No Remorse.
Это конечно наиболее легко pеализуемые методы (назовем их
условно "Метод 1" и "Метод 2"), но они имеют свои
значительные недостатки:
1. Метод 1 обеспечивает одинаковый обзоp игpающему во всех
напpавлениях, но pавный по каждому напpавлению лишь
половине pазмеpа видимого участка - в то вpемя как
pеальная зона обзоpа человека сдвинута впеpед по
напpавлению движения, а то, что пpоисходит за спиной, в
pеальности человек не видит, пока не повеpнется (вспомните
DOOM и пpочие 3D игpы).
2. Метод 2 обеспечивает еще более худший обзоp - так как
зона обзоpа пpи движении в любом напpавлении быстpо
сокpащается - пpичем именно в напpавлении движения, что
пpямо пpотивоположно тому, что пpоисходит на пpактике.
3. Оба метода не связывают вектоp обзоpа камеpы с
напpавлением, в котоpом повеpнут активный объект - то
есть pеализуют взгляд независимо висящей камеpы (типа
той каpтинки, что обеспечивает стационаpная камеpа
слежения). Как pезультат, статичность каpтинки
психологически мешает игpоку вжиться в упpавляемый им
активный объект.
Для испpавления недостатков 1 и 2 можно пpименить систему,
котоpую я называю "опеpежающая камеpа". Суть метода состоит
в том, что центpальная точка поля зpения камеpы (обозначена
звездочкой) выносится впеpед по напpавлению повоpота
активного объекта, пpимеpно так:
К....
. .... "спиной" к камеpе. ....
. ....
. ....
. ....
. O-> ....
===============-*==================
К....
. ....
. .... "лицом" к камеpе. ....
. ....
. ....
. <-O....
============-*=====================
Такой метод (назовем его "Метод 3") позволяет добиться
pасшиpения обзоpа по напpавлению движения объекта, в случае
следования камеpы за объектом - почти до pазмеpа видимой
зоны, и пpи этом не заниматься пpоблемами повоpота
изобpажения с изменением пеpспективы и освещения. Именно
такой метод использован мной в модели FLOORS3 для
демонстpации необычной pаботы с камеpой. Реализован же
он очень пpосто (ненужные фpагменты исходника выкинуты):
signed int offs; //смещения поля для разных
//направлений взгляда робота
//сдвиги экрана для различных направлений взгляда
offs=8; offs=6;
offs=6; offs=8;
offs=4; offs=10;
offs=2; offs=9;
offs=1; offs=7;
offs=3; offs=5;
offs=5; offs=3;
offs=7; offs=4;
rdir1=rdir; //направление робота 1 (основного)
delta_x=offs; //смещение для направления взгляда
delta_y=offs;
//Центрирование экрана по роботу
if (zx>rob_x-delta_x) { zx--; }
if (zx
Все мы играли в потрясающие изометрические игры , будь то первые Diablo, Age of Empires или Commandos. При первой встрече с изометрической игрой можно задаться вопросом: двухмерная она, трёхмерная или нечто совершенно другое. Сам мир изометрических игр обладает волшебной притягательностью для разработчиков. Давайте попробуем раскрыть тайну изометрической проекции и создадим простой изометрический уровень.
Для этого я решил использовать Phaser с кодом на JS. В результате у нас получится интерактивное приложение HTML5.
Учтите, что это не туториал по разработке на Phaser, мы просто используем его для удобного ознакомления с базовыми концепциями создания изометрической сцены. Кроме того, в Phaser есть простые способы создания изометрического контента, например, Phaser Isometric Plugin .
Для упрощения при создании сцены мы будем использовать тайлы.
1. Игры на основе тайлов
В двухмерных тайловых играх каждый визуальный элемент разбивается на мелкие части стандартного размера, называемые тайлами. Из таких тайлов на основании данных уровня (обычно это двухмерный массив) формируется игровой мир.
Чаще всего в тайловых играх используется вид сверху или сбоку . Давайте представим стандартный двухмерный вид сверху с двумя тайлами - тайлом травы и тайлом стены , показанными на рисунке:
Оба этих тайла являются квадратными изображениями одного размера, то есть высота и ширина тайла одинаковы. Предположим, что уровень игры представляет собой лужайку, окраниченную со всех сторон стенами. В таком случае данные уровня представляют собой вот такой двухмерный массив:
[ , , , , , ]
Здесь 0 обозначает тайл травы, а 1 - тайл стены. Расположив тайлы согласно данным уровня, мы создадим огороженную лужайку, показанную на рисунке:
Можно сделать ещё один шаг и добавить угловые тайлы, а также отдельные тайлы вертикальных и горизонтальных стен. Для этого потребуется пять дополнительных тайлов, кроме того, придётся изменить данные уровня:
[ , , , , , ]
См. изображение ниже, где я пометил тайлы числами, соответствующими их значениям в данных уровня:
Мы разобрались с понятием тайловых уровней, давайте теперь посмотрим, как использовать простой псевдокод двухмерной сетки для сборки нашего уровня:
Если использовать показанные выше изображения тайлов с равной шириной и высотой, то у нас получатся одинаковые размерности уровня. Если ширина и высота тайла в нашем примере равны 50 пикселям, то общий размер уровня составит 300 на 300 пикселей.
Как сказано выше, обычно тайлы используются в играх с видом сверху или сбоку. Для изометрического вида нам нужно реализовать изометрическую проекцию .
2. Изометрическая проекция
Лучшее техническое объяснение изометрической проекции , как мне кажется, дано в этой статье Клинта Белленджера :
Мы наклоняем камеру по двум осям (поворачиваем камеру на 45 градусов вбок, потом на 30 градусов вниз). При этом создаётся ромбическая сетка, в которой ширина ячеек в два раза больше высоты. Такой стиль стал популярным благодаря стратегическим играм и экшн-RPG. Если посмотреть в этом виде на куб, то мы видим три его стороны (верхнюю и две боковые).
Хотя это звучит немного сложно, реализация такого вида довольно проста. Нам нужно разобраться в том, как соотносятся двухмерное и изометрическое пространства, то есть понять связь между данными уровня и видом. Нам нужно преобразовать декартовы координаты вида сверху в изометрические координаты. На рисунке ниже показано графическое преобразование:
Размещение изометрических тайлов
Попробуем упростить связь между данными уровня, хранящимися в двухмерном массиве, и изометрическим видом, то есть процесс преобразования декартовых координат в изометрические. Мы создадим изометрический вид для нашей огороженной лужайки. Двухмерная реализация этого уровня представляла собой простую итерацию с двумя циклами, располагающую квадратные тайлы со смещением на их ширину и высоту. Для изометрического вида псевдокод остаётся тем же, но меняется функция placeTile() .
Исходная функция просто отрисовывает изображения тайлов в переданных ей x и y , а для изометрического вида нам нужно вычислить соответствующие изометрические координаты. Уравнения для этого представлены ниже. isoX и isoY обозначают изометрические координаты X и Y, а cartX и cartY - декартовы координаты X и Y:
//Преобразование из декартовых в изометрические координаты: isoX = cartX - cartY; isoY = (cartX + cartY) / 2; //Преобразование из изометрических в декартовы координаты: cartX = (2 * isoY + isoX) / 2; cartY = (2 * isoY - isoX) / 2;
Да, вот и всё. Эти простые уравнения творят магию изометрического проецирования. Вот вспомогательные функции Phaser, которые можно использовать для преобразования из одной системы в другую с помощью очень удобного класса Point:
Function cartesianToIsometric(cartPt){ var tempPt=new Phaser.Point(); tempPt.x=cartPt.x-cartPt.y; tempPt.y=(cartPt.x+cartPt.y)/2; return (tempPt); } function isometricToCartesian(isoPt){ var tempPt=new Phaser.Point(); tempPt.x=(2*isoPt.y+isoPt.x)/2; tempPt.y=(2*isoPt.y-isoPt.x)/2; return (tempPt); }
Итак, мы можем использовать вспомогательный метод cartesianToIsometric для преобразования входных 2D-координат в изометрические внутри метода placeTile . За исключением этого, код отображения остаётся тем же, но нам нужно создать новые картинки тайлов. Мы не можем использовать старые квадратные тайлы из вида сверху. На рисунке ниже показаны новые изометрические тайлы травы и стен вместе с готовым изометрическим уровнем:
Невероятно, правда? Давайте посмотрим, как обычное двухмерное положение преобразуется в изометрическое:
2D point = ; // изометрическая точка вычисляется следующим образом isoX = 100 - 100; // = 0 isoY = (100 + 100) / 2; // = 100 Iso point == ;
То есть входные данные преобразуются в , а - в .
Для нашей огороженной лужайки мы можем определить проходимые области, проверяя, равно ли значение элемента массива 0 в нужной координате. Если равно, то это трава. Для этого нам нужно определять координаты массива. Мы можем найти координаты тайла в данных уровня из его декартовых координат с помощью этой функции:
Function getTileCoordinates(cartPt, tileHeight){ var tempPt=new Phaser.Point(); tempPt.x=Math.floor(cartPt.x/tileHeight); tempPt.y=Math.floor(cartPt.y/tileHeight); return(tempPt); }
(Здесь мы предполагаем, что высота и ширина тайла одинаковы, как и бывает в большинстве случаев.)
То есть, зная пару экранных (изометрических) координат, мы можем найти координаты тайла вызовом функции:
GetTileCoordinates(isometricToCartesian(screen point), tile height);
Эта точка на экране может быть, скажем, положением курсора мыши или подбираемого предмета.
Точки регистрации
Во Flash можно выбирать произвольные точки графики в качестве базовой точки или . Аналогом этого в Phaser является Pivot . Когда мы располагаем графику, скажем, в точке , то эта точка Pivot соответствует . По умолчанию или Pivot считается левая верхняя точка. Если вы попробуете создать приведённый выше уровень с помощью этого кода, то вы не получите нужного результата. Вместо этого у вас получится плоская земля без стен, как показано ниже:
Так происходит потому, что изображения тайлов имеют разные размеры, и мы не учитываем атрибут высоты тайла стены. На рисунке ниже показаны разные используемые нами изображения тайлов и белый круг, в котором по умолчанию находится их :
Заметьте, что при использовании базовых точек (Pivot) по умолчанию герой находится не в том месте. Также заметьте, что мы теряем высоту стены, когда отрисовываем её с базовой точкой по умолчанию. На рисунке справа показано, как они должны быть расположены правильно, чтобы у тайла стены учитывалась её высота, а герой находился посередине тайла травы. Эту проблему можно решить разными способами.
- Сделать размеры изображений всех тайлов одинаковыми, и правильно расположить в изображении графику. При этом в каждом изображении тайла создаётся множество пустых областей.
- Вручную устанавливать базовую точку для каждого тайла, чтобы они располагались правильно.
- Отрисовывать тайлы с определённым смещением.
Для этого туториала я выбрал третий способ, потому что он будет работать даже во фреймворке, в котором нельзя изменять базовые точки.
3. Движение в изометрических координатах
Никогда не следует двигать персонажей или объекты в изометрических координатах напраямую. Вместо этого мы будем управлять данными игрового мира в декартовых координатах и просто использовать приведённые выше функции для обновления положения на экране. Например, если мы хотим переместить персонажа вперёд в положительном направлении по оси Y, то можно просто увеличить его свойство y в двухмерных координатах, а затем преобразовать конечное положение в изометрические координаты:
Y = y + speed; placetile(cartesianToIsometric(new Phaser.Point(x, y)))
Давайте подведём итог всем новым понятиям, которые мы изучили, и попробуем реализовать рабочий пример объекта, двигающегося в изометрическом мире. Можно использовать необходимые графические ресурсы из папки assets в репозитории исходного кода на git.
Сортировка по глубине
Если вы пробовали перемещать изображение мяча в огороженном саду, то заметили проблемы с сортировкой по глубине . Если в изометрическом мире есть подвижные элементы, то кроме обычного расположения, нам нужно позаботиться и о сортировке по глубине . Правильная сортировка гарантирует, что объекты, находящиеся ближе к экрану, будут отрисовываться поверх более далёких объектов. Как упомянуто в этой статье , простейший способ сортировки - использование декартовой координаты Y: чем выше объект на экране, тем раньше его следует отрисовывать. Это может неплохо работать для простых изометрических сцен, но лучше будет перерисовывать всю изометрическую сцену в процессе движения в соответствии с координатами тайла в массиве. Давайте я подробно объясню этот подход на примере псевдокода отрисовки уровня:
For (i, loop through rows) for (j, loop through columns) x = j * tile width y = i * tile height tileType = levelData[i][j] placetile(tileType, x, y)
Представьте, что объект или персонаж находится на тайле , то есть на самом верхнем зелёном тайле в изометрическом виде. Для правильной отрисовки уровня персонаж нужно отрисовывать после отрисовки углового тайла стены, левого и правого тайла стены, а также земли, как показано на рисунке:
Если мы будем выполнять цикл отрисовки в соответствии с псевдокодом, то сначала будет отрисована средняя угловая стена, затем цикл продолжит отрисовывать все стены в верхней правой части, пока не достигнет правого угла. В следующем цикле он отрисует стену слева от персонажа, а затем тайл травы, на котором стоит персонаж. Поскольку мы определили, что это тайл, который занимает персонаж, то отрисовываем персонажа после тайла травы. Таким образом, если бы на свободных трёх тайлах травы рядом с тайлом персонажа находились стены, то эти стены перекрывали персонажа, обеспечивая правильную сортировку по глубине.
4. Создание графики
Изометрическая графика может, но не обязана быть пиксель-артом. При работе с изометрическим пиксель-артом полезно изучить руководство RhysD , в котором содержится всё необходимое. Теорию можно изучить в Википедии .
При создании изометрической графики нужно соблюдать следующие правила:
- Начните с пустой изометрической сетки и придерживайтесь её с попиксельной точностью.
- Старайтесь разбивать графику на простые изометрические тайловые изображения.
- Сделайте так, чтобы каждый тайл был или проходимым , или непроходимым . Иначе сложно будет работать с тайлами, содержащими и проходимые, и непроходимые области.
- Большинство тайлов должно быть бесшовным, чтобы ими можно было замостить уровень в любом направлении.
- Тени создавать сложно, если вы не используете решение со слоями, при котором сначала отрисовываются тени на слое земли, а потом на верхнем слое отрисовывается персонаж (или деревья и другие объекты). Если вы не используете несколько слоёв, то сделайте так, чтобы тени падали вперёд и, например, не закрывали героя, стоящего за деревом.
- Если вам нужно использовать изображение тайла больше, чем стандартный размер изометрического тайла, то постарайтесь подобрать размер, кратный стандартному размеру тайла. В таких случаях лучше использовать слои, чтобы можно было разрезать графику на разные куски в зависимости от её высоты. Например, дерево можно разрезать на три части - корень, ствол и листву. Так будет проще сортировать глубины, потому что можно будет отрисовывать части в соответствующих слоях, соотносящихся с их высотами.
Изометрические тайлы больше единичного размера тайла создают проблемы при сортировке по глубине. Такие проблемы рассмотрены в следующих статьях:
Посты по теме
5. Изометрические персонажи
Для начала нам нужно определиться с тем, в каких направлениях можно перемещаться в нашей игре. Обычно в играх разрешается движение в четырёх или восьми направлениях. Посмотрите на рисунок ниже, чтобы понять связь между двухмерным и изометрическим пространством:
Обратите внимание, что в игре с видом сверху при нажатии на клавишу вверх персонаж будет двигаться вертикально вверх, но в изометрической игре он переместится под углом в 45 градусов в сторону верхнего правого угла.
Для вида сверху мы можем создать один набор анимаций персонажа, смотрящего в одном направлении, а потом просто повернуть все анимации. Для графики изометрического персонажа нужно создать анимацию для каждого из допустимых направлений, то есть для движения в восьми направлениях нужно создать по восемь анимаций для каждого действия.
Для простоты понимания направления обычно обозначают как «север», «северо-запад», «запад» и так далее. В кадрах персонажа на рисунке показаны кадры неподвижного положения, начиная с юго-востока и по часовой стрелке:
Мы будем располагать персонажей так же, как располагали тайлы. Движение персонажа выполняется вычислением декартовых координат и преобразованием их в изометрические. Допустим, для управления персонажем используется клавиатура.
Мы назначим две переменные, dX и dY , значение которых зависит от нажатых клавиш управления. По умолчанию эти переменные равны 0 , а значения им присваиваются согласно таблице внизу, где В, Н, П и Л означают, соответственно верхнюю , нижнюю , правую и левую клавиши направления. Значение 1 под клавишей означает, что клавиша нажата, 0 - что она не нажата.
Клавиша Положение В Н П Л dX dY ================ 0 0 0 0 0 0 1 0 0 0 0 1 0 1 0 0 0 -1 0 0 1 0 1 0 0 0 0 1 -1 0 1 0 1 0 1 1 1 0 0 1 -1 1 0 1 1 0 1 -1 0 1 0 1 -1 -1
Теперь с помощью значений dX и dY мы можем обновлять декартовы координаты следующим образом:
NewX = currentX + (dX * speed); newY = currentY + (dY * speed);
Итак, dX и dY представляют собой изменение положения персонажа по X и Y в зависимости от нажатых клавиш. Как сказано выше, мы легко можем вычислить новые изометрические координаты:
Iso = cartesianToIsometric(new Phaser.Point(newX, newY))
Получив новое изометрическое положение, мы должны переместить персонажа в это положение. На основании значений dX и dY мы можем понять, в каком направлении смотрит персонаж и использовать соответствующую анимацию. После перемещения персонажа не забывайте перерисовать уровень с соответствующей сортировкой по глубине, потому что тайловые координаты персонажа могут измениться.
Распознавание коллизий
Распознавание коллизий выполняется проверкой того, является ли тайл в новом вычисленном положении объекта непроходимым. Итак, после нахождения нового положения мы не можем сразу же перемещать туда персонажа, нам нужно сначала проверить, что за тайл занимает это место.
Tile coordinate = getTileCoordinates(isometricToCartesian(current position), tile height); if (isWalkable(tile coordinate)) { moveCharacter(); } else { //ничего не делать; }
В функции isWalkable() мы проверяем, является ли значение массива данных уровня в заданной координате проходимым тайлом. Нам нужно также обновлять направление, в котором смотрит персонаж, даже если он не движется , на случай, если он столкнулся с непроходимым тайлом.
Это похоже на правильное решение, но оно будет работать только для объектов без объёма. Для вычисления коллизий мы рассматриваем только одну точку (центральную точку персонажа). В действительности нам нужно найти все четыре угла из заданной двухмерной центральной точки и вычислить коллизии для всех этих углов. Если какой-то из углов попадает в непроходимый тайл, то перемещать персонажа нельзя.
Сортировка по глубине с персонажами
Рассмотрим персонажа и тайл дерева в изометрическом мире, имеющие одинаковые размеры изображения , как бы неестественно это ни выглядело.
Чтобы хорошо разобраться в сортировке по глубине, нам нужно понять, что когда координаты X и Y персонажа меньше, чем у дерева, то дерево перекрывает персонажа. Когда координаты X и Y персонажа больше, чем у дерева, то персонаж перекрывает дерево. Когда их координаты X равны, то решение принимается только по координате Y: объект с большей координатой Y перекрывает другой. Если совпадают координаты Y, то решение принимается только по X: объект с большим X перекрывает другой.
Как сказано выше, упрощённая версия алгоритма заключается в простой отрисовке уровней от дальних тайлов (т.е. tile) к ближним, строка за строкой. Если персонаж занимает тайл, то сначала мы рисуем тайл земли, а потом отрисовываем тайл персонажа. Это сработает хорошо, потому что персонаж не может занимать тайл стены.
6. Время для демо!
Играемая тенью роль очень важна, она добавляет реализма этой иллюзии. Кроме того, заметьте, что теперь мы используем две экранные координаты (x и y) для представления трёх измерений в изометрических координатах - ось Y в экранных координатах также является осью Z в изометрических координатах. Это может запутать.
10. Нахождение пути и движение по нему
Поиск пути и движение по нему - это довольно сложный процесс. Для нахождения пути между двумя точками существует множество разных решений с использованием различных алгоритмов, но поскольку levelData является двухмерным массивом, то всё гораздо проще, чем могло бы быть. У нас есть чётко заданные уникальные узлы, которые может занимать игрок, и мы можем легко проверить, можно ли по ним пройти.
Посты по теме
Подробный обзор алгоритмов поиска путей слишком велик для этой статьи, но я постараюсь объяснить наиболее распространённый способ: алгоритм кратчайшего пути, самыми известными реализациями которого являются A* и алгоритм Дейкстры.
Наша цель - найти узлы, соединяющие начальный узел с конечным. Из начального узла мы посещаем все восемь соседних узлов, и помечаем их как посещённые. Этот процесс рекурсивно повторяется для каждого нового посещённого узла.
Каждый поток отслеживает посещённые узлы. При переходе к соседним узлам уже посещённые узлы пропускаются (рекурсия прекращается). Процесс продолжается, пока мы не достигнем конечного узла, в котором рекурсия завершается и весь пройденный путь возвращается как массив узлов. Иногда конечный узел достигнуть не удаётся, то есть поиск пути заканчивается неудачей. Обычно мы находим между узлами несколько путей. В таком случае мы выбираем один из них с минимальным количеством узлов.
Поиск пути
Глупо изобретать велосипед заново, если речь идёт о чётко описанных алгоритмах, поэтому для поиска пути мы будем использовать уже существующие решения. В Phaser нам потребуется решение на JavaScript, поэтому я выбрал EasyStarJS . Инициализация движка поиска пути выполняется следующим образом:
Easystar = new EasyStar.js(); easystar.setGrid(levelData); easystar.setAcceptableTiles(); easystar.enableDiagonals();// мы хотим, чтобы в пути были диагонали easystar.disableCornerCutting();// без диагональных путей при движении в углах стен
Поскольку в массиве levelData содержатся только 0 и 1 , мы можем сразу передать его в массив узлов. Значением 0 мы обозначили проходимый узел. Также мы включили возможность движения по диагонали, но отключили её, когда движение происходит рядом с углами непроходимых тайлов.
Так сделано потому, что при диагональном движении персонаж может врезаться в непроходимый тайл. В таком случае система распознавания коллизий не позволит персонажу пройти насквозь. Кроме того, следует учесть, что в примере я полностью удалил распознавание столкновений, потому что в нашем примере персонажа по пути будет двигать искусственный интеллект и оно не требуется.
Мы будем распознавать нажатие мышью на любой свободный тайл в уровне и вычислять путь с помощью функции findPath . Callback-метод plotAndMove получает массив узлов созданного пути. Мы помечаем найденный путь на миникарте.
Game.input.activePointer.leftButton.onUp.add(findPath) function findPath(){ if(isFindingPath || isWalking)return; var pos=game.input.activePointer.position; var isoPt= new Phaser.Point(pos.x-borderOffset.x,pos.y-borderOffset.y); tapPos=isometricToCartesian(isoPt); tapPos.x-=tileWidth/2;//настройка для нахождения нужного тайла для ошибки из-за округления tapPos.y+=tileWidth/2; tapPos=getTileCoordinates(tapPos,tileWidth); if(tapPos.x>-1&&tapPos.y>-1&&tapPos.x<7&&tapPos.y<7){//нажатие мышью внутри сетки if(levelData!=1){//не тайл стены isFindingPath=true; //алгоритм делает своё дело easystar.findPath(heroMapTile.x, heroMapTile.y, tapPos.x, tapPos.y, plotAndMove); easystar.calculate(); } } } function plotAndMove(newPath){ destination=heroMapTile; path=newPath; isFindingPath=false; repaintMinimap(); if (path === null) { console.log("No Path was found."); }else{ path.push(tapPos); path.reverse(); path.pop(); for (var i = 0; i < path.length; i++) { var tmpSpr=minimap.getByName("tile"+path[i].y+"_"+path[i].x); tmpSpr.tint=0x0000ff; //console.log("p "+path[i].x+":"+path[i].y); } } }
Движение по пути
Получив путь в виде массива узлов, мы должны заставить персонажа двигаться по нему.
Допустим, мы хотим, чтобы персонаж двигался к тайлу, по которому мы щёлкнули. Сначала мы ищем путь между узлом, занимаемым персонажем, и узлом, по которому щёлкнули. Если путь найден, то нам нужно переместить персонажа в первый узел массива узлов, пометив его как точку назначения. Добравшись до узла назначения, мы проверяем, есть ли ещё узлы в массиве узлов, и если есть, то помечаем как точку назначения следующий узел, и так далее, пока не достигнем конечного узла.
Также каждый раз при достижении узла мы будем менять направление игрока на основании текущего узла и нового узла назначения. Между узлами мы просто ходим в нужном направлении, пока не достигнем узла назначения. Это очень простой ИИ, и в нашем примере он реализован в методе aiWalk , частично показанном ниже:
Function aiWalk(){
if(path.length==0){//путь закончился
if(heroMapTile.x==destination.x&&heroMapTile.y==destination.y){
dX=0;
dY=0;
isWalking=false;
return;
}
}
isWalking=true;
if(heroMapTile.x==destination.x&&heroMapTile.y==destination.y){//достигли текущей точки назначения, задаём новую, меняем направление
//перед поворотом ждём, пока не войдём на несколько шагов на тайл
stepsTaken++;
if(stepsTaken
Нам нужно отфильтровывать правильные точки нажатия мышью. Для этого мы определяем, что мы нажали в проходимой области, а не на тайле стены или другом непроходимом тайле.
Ещё один интересный момент кодирования ИИ: мы не хотим, чтобы персонаж поворачивался лицом к следующему тайлу в массиве узлов как только он дойдёт до текущего, потому что такой мгновенный поворот приведёт к том, что персонаж будет ходить по границам тайлов. Вместо этого нам следует подождать, пока персонаж на несколько шагов зайдёт на тайл, а потом уже начинать искать следующую точку назначения. Также лучше вручную помещать персонажа в середину текущего тайла прямо перед поворотом, чтобы всё выглядело наилучшим образом.
Можно посмотреть работающее демо .
11. Изометрический скроллинг
Когда область уровня гораздо больше экранной области, то необходимо выполнять скроллинг .
Видимую экранную область можно рассматривать как небольшой прямоугольник в большом прямогольнике всей области уровня. Скроллинг является простым перемещением внутреннего прямоугольника во внутреннем. Обычно в процессе скроллинга положение персонажа в экранном прямоугольнике остаётся постоянным - чаще всего он находится в центре экрана. Интересно, что для реализации скроллинга нам нужно всего лишь отслеживать угловую точку внутреннего прямоугольника.
Эта угловая точка, которую мы обозначаем в декартовых координатах, попадает в один из тайлов в данных уровня. Для скроллинга мы увеличиваем положение угловой точки по осям X и Y в декартовых координатах. Теперь мы можем преобразовать эту точку в изометрические координаты и использовать их для отрисовки экрана.
Новые преобразованные значения в изометрическом пространстве должны быть углом экрана, то есть новыми (0, 0) . Поэтому при парсинге и отрисовке данных уровня мы вычитаем это значение из изометрического положения каждого тайла. Мы можем определить, находится ли новое положение тайла в пределах экрана.
Или же мы можем отрисовывать на экране сетку изометрических тайлов размером X x Y , чтобы цикл отрисовки был эффективным для больших уровней.
Все эти шаги можно выразить следующим образом:
- Обновление декартовых координат X и Y угловой точки.
- Преобразование в изометрическое пространство.
- Вычитание этого значения из изометрического положения отрисовки каждого тайла.
- Отрисовка на экране только заданного количества тайлов, начиная с этого нового угла.
- Дополнительно: отрисовка тайла, только если новое изометрическое положение отрисовки находится в пределах экрана.
Заметьте, что приращение угловой точки происходит в направлении, противоположном направлению обновления положения персонажа при его движении. Благодаря этому персонаж остаётся на одном и том же месте относительно экрана. Посмотрите этот пример (используйте клавиши со стрелками для скроллинга, щелчок мышью для увеличения видимой сетки).
Пара примечаний:
- При скроллинге нам может понадобиться отрисовка дополнительных тайлов на границах экрана, иначе по краям экрана тайлы будут появляться и исчезать.
- Если в игре есть тайлы, занимающие несколько единичных размеров тайлов, то потребуется рисовать больше тайлов на границах. Например, если самый большой тайл из всего набора имеет размер X на Y, то потребуется отрисовывать на X больше тайлов слева и справа, и на Y больше тайлов сверху и снизу. Так мы гарантируем, что углы большого тайла будут видимы при скроллинге.
- Нам по-прежнему нужно обеспечивать отсутствие пустых областей на экране, когда отрисовка выполняется рядом с границами уровня.
- Уровень должен скроллиться только до тех пор, пока на соответствующем крае экрана не будет отрисован соответствующий крайний тайл. После этого персонаж должен продолжать двигаться в пространстве экрана без скроллинга уровня. Для этого нам нужно отслеживать все четыре угла внутреннего экранного прямоугольника и соответствующим образом управлять логикой скроллинга и перемещения персонажа. Готовы ли вы реализовать это самостоятельно?
Заключение
Этот туториал в основном предназначен для новичков, изучающих изометрические игровые миры. Многие из представленных здесь концепций имеют другие, немного более сложные решения, и я намеренно выбрал самые простые.
Возможно, это руководство не решит всех появляющихся у вас проблем, но полученная информация позволит развить эти концепции для создания более сложных решений. Например, реализованная простая сортировка по глубине не поможет в случае уровней с несколькими этажами и тайлами платформ, двигающимися с одного этажа на другой. Но это уже задача для другого туториала.
В Adobe illustrator есть 3 популярных способа работать с изометрией:
- Используя изометрическую сетку
- Методом SSR
- С помощью функции 3D
На практике, чтобы нарисовать иллюстрацию, нужно уметь пользоваться всеми тремя способами. В этом уроке я расскажу о каждом из них, опишу преимущества и недостатки.
А. Изометрическая сетка
Изометрическая сетка служит исключительно вспомогательным инструментом.
Как создать:
I. С помощью инструмента Line Segment Tool строим линию под углом 30° c длиной не менее 2000 px
II. Теперь нам нужно создать для нее много копий. Открываем эффект Effect - Distort&Transformt- Transform , во вкладке Move параметры Horizontal и Vertical отвечают за расстояние между линиями, параметр Copies за количество копий (вот это поворот!)
III. Разбираем оформление Object - Expand Appereance
IV. Дублируем группу с нашими линиями и делаем их зеркальную копию Object - Transform - Reflect
V. Превращаем получившиеся линии в направляющие View - Guides - Make Guides
Примечание: в отличии от Фотошопа, функционал Иллюстратора позволяет создавать направляющие расположенные под углом
Сетка готова. Теперь с помощью инструмента Перо, можно рисовать по нашим направляющим фигуры.
Минусы: можно рисовать только простейшие фигуры прямоугольных форм. Не получится нарисовать фигуры эллипсоидной формы и фигуры сложной формы.
Однако изометрическая сетка нам пригодится при работе со следующим методом SSR, чтобы выравнивать по ней стороны фигуры.
Б. Scale Skew Rotate (SSR)
Преимущество SSR заключается в том, что можно рисовать объект в анфас, а потом переводить в изометрию.
Для этого нам нужны 3 инструмента: Масштаб (Scale Tool ), Наклон (Shear Tool ), Поворот (Rotate Tool ).
Значение параметра Scale по вертикали всегда остается неизменным 86,062% , а значения параметров Shear и Rotate выбираются в зависимости от того, какую грань изображаемого предмета мы переводим в изометрию (верхняя, левая или правая).
С помощью метода SSR можно одновременно перевести в изометрию большую группу маленьких объектов, например, клавиши на клавиатуре ноутбука.
Или сам ноутбук, предварительно сделав его развертку, а потом переведя в изометрию каждую его часть по отдельности (экран и клавиатура):
Сделать в изометрии фигуру эллипсоидной формы:
Или фигуру сложной формы, которую невозможно сходу рисовать по сетке:
Изометрическая сетка пригодится нам для того, чтобы рисовать дополнительные детали на объекте (напоминаю, в изометрии все линии должны быть строго под углом кратным 30):
В примере выше сетка помогла мне нарисовать и правильно расположить маленькие детали конвейера (деления сверху и эллипсы сбоку).
Минусы: методом SSR неудобно рисовать объекты, у которого скошенные (или скругленные) края и объекты сложной формы, которые выгоднее делать через функцию 3D.
В. 3D
В этом случае нам поможет функция 3D, которая, к счастью, имеется в функционале Иллюстратора.
Порядок действий:
I. Рисуем переднюю часть объекта в анфас
II. Применяем эффект Effect - 3D - Extrude&Bevel
III. В параметре Position выбираем значение Isometric Right или Left (Top и Bottom нам не нужны, т.к. в таком ракурсе можно спокойно нарисовать фигуру с помощью SSR).
IV. Разбираем оформление, удаляем все лишние и на выходе получаем готовую к использованию фигуру.
Кроме того, это самый быстрый способ нарисовать примитив в изометрии: всего пара кликов и фигура готова. Если бы мы делали это методом SSR - пришлось бы немного повозиться.
По сути 3D является полноценной замены метод SSR и проигрывает второму лишь в частных случаях (например, при попытке перевести в изометрию клавиатуру от ноутбука).
Выводы:
- Универсального способа рисовать изометрию - НЕТ.
- Эти способы не единственные, но они подходят под большинство практических задач
В этом уроке мы разобрали инструменты для работы с изометрией, т.е. освоили техническую сторону вопроса.
В следующем уроке я расскажу о композиции в изометрии, рассмотрюсамые распространенные косяки и покажу процесс построения сложного объекта.
В графическом дизайне полно подводных камней. Даже не так - это самая насыщенная подводными камнями сфера. В отличии от точных наук, здесь «точных» законов до безобразия мало, а скрытых нюансов, от которых зависит итоговый результат - до безобразия много.
На своих курсах я учу ребят делать крутую графику на которую есть спрос. Я помогаю разобрать все по полочкам и добиться на выходе результата, за который мне не будет стыдно.
Только помни: нельзя попробовать стать графическом дизайнером. Надо либо окунаться в это с головой, либо заниматься чем-то попроще. Если ты все для себя решил и хочешь максимально быстрого прогресса -
Для выполнения изометрической проекции любой детали необходимо знать правила построения изометрических проекций плоских и объемных геометрических фигур.
Правила построения изометрических проекций геометрических фигур. Построение любой плоской фигуры следует начинать с проведения осей изометрических проекций.
При построении изометрической проекции квадрата (рис. 109) из точки О по аксонометрическим осям откладывают в обе стороны половину длины стороны квадрата. Через полученные засечки проводят прямые, параллельные осям.
При построении изометрической проекции треугольника (рис. 110) по оси X от точки 0 в обе стороны откладывают отрезки, равные половине стороны треугольника. По оси У от точки О откладывают высоту треугольника. Соединяют полученные засечки отрезками прямых.
Рис. 109. Прямоугольная и изометрические проекции квадрата
Рис. 110. Прямоугольная и изометрические проекции треугольника
При построении изометрической проекции шестиугольника (рис. 111) из точки О по одной из осей откладывают (в обе стороны) радиус описанной окружности, а по другой - H/2. Через полученные засечки проводят прямые, параллельные одной из осей, и на них откладывают длину стороны шестиугольника. Соединяют полученные засечки отрезками прямых.
Рис. 111. Прямоугольная и изометрические проекции шестиугольника
Рис. 112. Прямоугольная и изометрические проекции круга
При построении изометрической проекции круга (рис. 112) из точки О по осям координат откладывают отрезки, равные его радиусу. Через полученные засечки проводят прямые, параллельные осям, получая аксонометрическую проекцию квадрата. Из вершин 1, 3 проводят дуги CD и KL радиусом 3С. Соединяют точки 2 с 4, 3 с С и 3 с D. В пересечениях прямых получаются центры а и б малых дуг, проведя которые получают овал, заменяющий аксонометрическую проекцию круга.
Используя описанные построения, можно выполнить аксонометрические проекции простых геометрических тел (табл. 10).
10. Изометрические проекции простых геометрических тел
Способы построения изометрической проекции детали:
1. Способ построения изометрической проекции детали от формообразующей грани используется для деталей, форма которых имеет плоскую грань, называемую формообразующей; ширина (толщина) детали на всем протяжении одинакова, на боковых поверхностях отсутствуют пазы, отверстия и другие элементы. Последовательность построения изометрической проекции заключается в следующем:
1) построение осей изометрической проекции;
2) построение изометрической проекции формообразующей грани;
3) построение проекций остальных граней посредством изображения ребер модели;
Рис. 113. Построение изометрической проекции детали, начиная от формообразующей грани
4) обводка изометрической проекции (рис. 113).
- Способ построения изометрической проекции на основе последовательного удаления объемов используется в тех случаях, когда отображаемая форма получена в результате удаления из исходной формы каких-либо объемов (рис. 114).
- Способ построения изометрической проекции на основе последовательного приращения (добавления) объемов применяется для выполнения изометрического изображения детали, форма которой получена из нескольких объемов, соединенных определенным образом друг с другом (рис. 115).
- Комбинированный способ построения изометрической проекции. Изометрическую проекцию детали, форма которой получена в результате сочетания различных способов формообразования, выполняют, используя комбинированный способ построения (рис. 116).
Аксонометрическую проекцию детали можно выполнять с изображением (рис. 117, а) и без изображения (рис. 117, б) невидимых частей формы.
Рис. 114. Построение изометрической проекции детали на основе последовательного удаления объемов
Рис. 115 Построение изометрической проекции детали на основе последовательного приращения объемов
Рис. 116. Использование комбинированного способа построения изометрической проекции детали
Рис. 117. Варианты изображения изометрических проекций детали: а - с изображением невидимых частей;
б - без изображения невидимых частей