Растровая визуализация в изометрической проекции


Содержание

Косоугольная изометрия

Вобщем, решил попробовать.
Первым шагом чисто математически повернул оси и изменил угол. Вышло весьма прикольно, алгоритмы работают с привычными прямоугольниками, а отображается симпатичными ромбиками.
Вторым шагом, захотелось создать ландшафт (аля Транспортный Магнат). Вот тут то и выяснилось, что все мои разработки — лажа. При отображении разницы высот, некоторые клетки «залазят на соседние», соответственно, некоторые меньше.
Вопрос, где можно почитать литературку?

Zelya
>При отображении разницы высот, некоторые клетки «залазят на соседние», соответственно, некоторые меньше.
Ну так правильно. А как ты хотел?

NightmareZ
Я знаю, что это правильно. И я хочу почитать литературу про алгоритмы, которые это реализуют.

Zelya
Это вроде называется изометрической проекцией, или 2.5D
Камеру при посмотре карты в таких играх нельзя вертеть.
Поэтому некоторые участки становятся невидимыми.

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

Например, заходит игрок в здание, и ближайшая стена с крышей исчезают.

olkondr
Камеру обычно в таких стратегиях можно вертеть по сторонам света.

al
Увы, камеру можно крутить далеко не всегда

Да, да. Это Head Over Hells, известный ещё с

Как видно, некоторые клетки залазят на соседние, и никто им не мешает.
А камеру крутить религия движок не позволяет.

правка, заменил ссылку на картинку, ибо веб-мастеры не дремлят.

olkondr
al
olkondr
Друзья! Вы меня не поняли. Смотрите:

Красным я выделил сетку одноуровневую. Т.е. уровень земли кругом одинаков. С такой сеткой у меня проблем нет. И объекты могу нарисовать, которые друг друга перекрывают
Синим я выделил клетку ландшафта, который поднимается. Как видите, такая сетка не соответствует красной. Придуманный мною алгоритм на такое не расчитан. Вносить поправки из-за каждого изменения высоты — сильно ударит и по сложности и по производительности. Вот я и хочу почитать чего-нибудь про такие ландшафты. Как их правильно организовывать.

Нет, я продолжаю упорно не понимать сути вопроса.
На что не рассчитан придуманый алгоритм? Во что нужно вносить поправки из-за высоты?
Вот, например, изометрические игры с кривой изометрией:

Ivan ‘Ironman’ Stewart’s Super Off Road Racer

или Bobby Bearing

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

olkondr
Во-первых, с изменением высоты меняется положение по Х и У следующей клетки. Конечно, это не проблематично учесть, но загромождает расчеты.
Во-вторых, мы знаем, что объект двигается вдоль такой-то клетки. Формула расчета его положения так же будет зависеть от ландшафта.
Эти проблемы, как Вы заметили, с успехом решены даже на 8-ми битных компах. Поэтому, чтобы не изобретать заново велосипед, я прошу, тех кто имеет линки на литературу, дать их мне.
Т.е. мой движок получился лажовый, хотелось бы увидеть оисание движка по работе с такими ландшафтами, если у кого есть.

Zelya
Мне кажется, в карте как раз следует хранить высоты вместе
с номерами спрайтов-текстур. Разве не так все делают?

olkondr
А в этих статьях и книгах есть именно ландшафты с рельефом?

Zelya
Да я-то понял.

al
В статье «Растровая визуализация в изометрической проекции (2.5D) применительно к играм.»

Часть 4. Веpтикальные объекты в пpоекции «2/3»
Например, говорится, что плоские объекты, не паpаллельные ни одной оси (плоскости с пpоизвольным повоpотом в пpостpанстве) на практике заменяются «КвазиОбъемными» объектами (типа мебели в комнатах или пеpсонажей).

Цитата далее.
Для вывода объектов . повсеместно пpименяется единственный метод — метод пpеpендеpинга. То есть объемный объект заpанее пpоециpуется в пpоекцию «2/3» (для случая, когда объект создается в 3D пакетах, таких как 3DS, 3DMAX) либо сpазу pисуется художником в этой пpоекции (наиболее качественный метод — изготовление пластилиновых моделей, съемка их в пpоекции «2/3», и затем pучная pаскpаска и выpезка полученных плоских изобpажений). В этом случае вывод «объемного» объекта сводится к выводу заpанее заготовленного плоского изобpажения его пpоекции.

Для нахождения экpанных кооpдинат, в котоpые необходимо выводить веpтикальные объекты, по их кооpдинатам на поле MAP, используется тот же самый метод, как и для клеток пола. Собственно, пpи пpавильной пеpспективной последовательности отpисовки пола, и если pазмеpы по гоpизонтали веpтикальных объектов не пpевышают pазмеp клеток пола, веpтикальные объекты можно выводить в _том_же_самом_цикле_.

Далее.
Часть 5. Различные планы местности (пола).

Если же вы желаете pисовать «откpытый воздух», с плавным pельефом местности типа холмов и дюн — ну что же, добавьте к единственной плоскости пола еще и плоскость высоты.

Такая модель хоpоша тем, что для пpедметов, объектов и поиска пути она ничуть не отличается от пpостой гоpизонтальной модели (высота, на котоpой лежат пpедметы и объекты, беpется из высоты клетки пола). Однако следует учесть необходимость плавных пеpеходов между pазноуpовневыми по высоте клетками — для чего каждый тип клетки пола пpидется наpисовать в нескольких дополнительных ваpиантах, соответсвующих пеpеходу от пpедыдущей клетки — «выше чем слева», «ниже чем слева», «выше чем сзади», «ниже чем сзади» и их комбинациях. Hеобходимый ваpиант будет автоматически выбиpать система отpисовки пола, по относительной высоте текущей клетки относительно двух пpедыдущих.

Растровая визуализация в изометрической проекции. Сортировка по глубине с персонажами. Что это дает дизайнерам и иллюстраторам

Изометрические иллюстрации смотрятся очень интересно и находят применение во многих областях, например, в инфографике, дизайне и многих других. Редактор inkscape позволяет легко создавать изометрию благодаря наличию изометрической сетки. В этом уроке мы создадим простейшее изображение в изометрии. Это будет комната. Обойдемся без большого количества мелких деталей.

Как нарисовать изометрию

Шаг 1.

Запускаем редактор inkscape, настройки нового документа не изменяем. Создадим изометрическую сетку для работы. Для этого отправляемся в Расширения-Отрисовка-Сетки-Изометрическая сетка и немного меняем настройки, увеличиваем число делений по Х и У до 10, делений между основными штрихами 3 и уменьшаем число разбиения делений до 1

Нажимаем применить, размещаем сетку ровно на документе

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

Ну вот, можно приступать.

Шаг 2.

Берем инструмент Рисовать кривые Безье и, кликая в узлы сетки, создаем первую стену

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

Очередь пола, тем же инструментом создаем пол

Сделаем окно. Для этого создаем прямоугольник, выделяем его вместе со стеной и применяем

Шаг 3.

Добавим стол. Начнем с крышки стола. Уже привычным способом создаем прямоугольник по узлам сетки и размещаем у окна.

Обводку для стола делаем светлой, заливка любая темная похожая на цвет стола.

Теперь ножки- ножки делаем и двух элементов темного и светлого для создания объема. Линию создаем кривыми

Для придания нужной формы сначала оконтуриваем обводку ( Контур-оконтурить обводку ) и, двигая узлы, придаем форму. Затем дублируем и меняем цвет на более темный, в результате имеем ножку стола. Группируем Ctrl+G

Дублируем 3 раза и размещаем под столом (Page Down ).

Шаг 4.

Следующий элемент полки на стене и кровать. Создаем кривыми три прямоугольника темного цвета и размещаем на стене

Цвет каждой полки должен отличаться друг от друга иначе полки сольются.

Кровать создаем из трех прямоугольников разного цвета

Добавляем белую подушку из трех прямоугольников

Можете повозиться для придания ей нужной «подушечной» формы.

Шаг 5.

Теперь шкаф. Очередные три прямоугольника для шкафа и два светлых для дверей

Цвет подбираем на свое усмотрение.

В заключении этого шага добавляем книги на стол и полки, и фиолетовое покрывало на кровать. Рисуем окно светло-голубого цвета и уменьшаем у него прозрачность.

Напомню, все делаем Кривыми Безье по изометрической сетке.

Шаг 6

Вешаем на стену картину желтого цвета с изображением цветка. Картину и цветок создаем кривыми. Перед кроватью коврик.

Для усиления эффекта объема добавляем тень под зеленый пол из размытого прямоугольника, тень под стол, и «землю» на которой мы «прикупили комнатку»

Ну и последнее. Для земли применяем пуантилизм (Фильтры-Рассеивание-пуантилизм), а для стен добавим толщину, пройдя кривой с обводкой в 2 пх толщиной белого цвета.

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

Что мы будем создавать

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

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

Для изучения основ теории изометрии прочитайте . Код и структура кода соответствуют моему . Изучите его, если этот туториал покажется вам сложным, потому что в нём я сосредоточусь только на логике.

1. Уровни без движения


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

Рассмотрим следующий изометрический уровень со всего двумя строками и семью столбцами.

Числа на тайлах соответствуют их порядку сортировки (sortingOrder), или глубине, или порядку по Z, т.е. порядку, в котором их необходимо отрисовывать. В таком случае мы сначала отрисовываем все столбцы первой строки, начиная с первого столбца с sortingOrder = 1.

После отрисовки всех столбцов первой строки ближайший к камере столбец имеет sortingOrder = 7, и мы переходим к следующей строке. То есть каждый элемент во второй строке будет иметь более высокое значение sortingOrder , чем любой элемент в первой строке.

Именно в таком порядке должны выстраиваться тайлы, чтобы соблюсти правильную глубину, потому что спрайт с бОльшим значением sortingOrder будет перекрывать все другие спрайты с меньшими значениями sortingOrder .

Что касается кода, то в нём просто выполняется циклический обход строк и столбцов массива уровня и последовательное назначение sortingOrder в увеличивающемся порядке. Результат не испортится, даже если мы поменяем строки и столбцы местами, как видно на рисунке ниже.

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

Добавление высоты

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

Естественно, что любой тайл на более высоком этаже будет иметь бОльший sortingOrder , чем любой тайл на нижнем. Что касается кода, для добавления верхних этажей нам достаточно смещать значение y экранных координат для тайла в зависимости занимаемого им этажа.

Float floorHeight=tileSize/2.2f; float currentFloorHeight=floorHeight*floorLevel; // tmpPos=GetScreenPointFromLevelIndices(i,j); tmpPos.y+=currentFloorHeight; tile.transform.position=tmpPos;
Значение floorHeight указывает на воспринимаемую высоту изображения тайлового изометрического блока, а floorLevel определяет, какому этажу принадлежит тайл.

2. Движение тайлов по оси X

Когда я говорю, что движение происходит по оси X, то имею в виду декартову, а не изометрическую систему координат. Давайте рассмотрим уровень только с нижним этажом, состоящий из трёх строк и семи столбцов. Будем считать, что во второй строке есть только один тайл, который движется. Уровень будет выглядеть так, как показано на изображении ниже.

Тёмный тайл — это наш подвижный тайл, а его sortingOrder будет равен 8, потому что в первой строке 7 тайлов. Если тайл движется по декартовой оси X, то он будет двигаться по «колее» между двумя строками. По всем позициям, которые он может занимать на своём пути, тайлы в строке 1 будут иметь меньший sortingOrder .

Аналогично, все тайлы в строке 2 будут иметь бОльшее значение sortingOrder , вне зависимости от положения тёмного тайла на его пути. Так как для назначения sortingOrder мы выбрали способ «сначала строки», то для движения по оси X нам не нужно делать ничего лишнего. Этот случай довольно прост.

3. Движение тайлов по оси Y

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

Сортировка по блокам

Блок тайлов 2×2, обозначенный синей областью — это наш проблемный блок. Все остальные блоки могут использовать подход «сначала строки». Пусть рисунок вас не смущает — на нём показан уровень, который уже правильно отсортирован с помощью нашего блочного алгоритма. Синий блок состоит из двух столбцовых тайлов в строках, между которыми движется в текущий момент наш тёмный тайл, и из тайлов непосредственно слева от них.

Чтобы решить задачу глубины проблемного блока мы можем использовать только для этого блока подход «сначала столбцы». То есть для зелёного, розового и жёлтого блоков мы используем «сначала строки», а для синего — «сначала столбцы».

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

В качестве альтернативного решения мы можем также рассмотреть блок 2×2 справа от столбца подвижного тайла. (Интересно то, что нам даже не нужно менять подходы, потому что разбиение на блоки в этом случае само решает нашу проблему.) Решение в действии показано в сцене BlockSort .

Этот алгоритм реализуется в следующем коде.

Private vo >(); sr.sortingOrder=depth;//assign new depth depth++;//increment depth >else < depth=AssignDepth(i,j,depth); >> > //сортировка столбцов в той же строке после блока for (int i = blockRowStart; i =totalFloors)nextFloor=floor; //сортировка строк до блока for (int i = 0; i (); sr.sortingOrder=depth;//assign new depth depth++;//increment depth >else < depth=AssignDepth(i,j,depth,floor); depth=AssignDepth(i,j,depth,nextFloor); >> > //сортировка столбцов в той же строке после блока for (int i = blockRowStart; i

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

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

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 получает массив узлов созданного пути. Мы помечаем найденный путь на миникарте.

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

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

Можно посмотреть работающее демо .

11. Изометрический скроллинг

Когда область уровня гораздо больше экранной области, то необходимо выполнять скроллинг .

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

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

Новые преобразованные значения в изометрическом пространстве должны быть углом экрана, то есть новыми (0, 0) . Поэтому при парсинге и отрисовке данных уровня мы вычитаем это значение из изометрического положения каждого тайла. Мы можем определить, находится ли новое положение тайла в пределах экрана.

Или же мы можем отрисовывать на экране сетку изометрических тайлов размером X x Y , чтобы цикл отрисовки был эффективным для больших уровней.

Все эти шаги можно выразить следующим образом:

  • Обновление декартовых координат X и Y угловой точки.
  • Преобразование в изометрическое пространство.
  • Вычитание этого значения из изометрического положения отрисовки каждого тайла.
  • Отрисовка на экране только заданного количества тайлов, начиная с этого нового угла.
  • Дополнительно: отрисовка тайла, только если новое изометрическое положение отрисовки находится в пределах экрана.

var cornerMapPos=new Phaser.Point(0,0); var cornerMapTile=new Phaser.Point(0,0); var visibleTiles=new Phaser.Point(6,6); //. function update()< //. if (isWalkable()) < heroMapPos.x += heroSpeed * dX; heroMapPos.y += heroSpeed * dY; //перемещаем угол в противоположном направлении cornerMapPos.x -= heroSpeed * dX; cornerMapPos.y -= heroSpeed * dY; cornerMapTile=getTileCoordinates(cornerMapPos,tileW >Заметьте, что приращение угловой точки происходит в направлении, противоположном направлению обновления положения персонажа при его движении. Благодаря этому персонаж остаётся на одном и том же месте относительно экрана. Посмотрите этот пример (используйте клавиши со стрелками для скроллинга, щелчок мышью для увеличения видимой сетки).

  • При скроллинге нам может понадобиться отрисовка дополнительных тайлов на границах экрана, иначе по краям экрана тайлы будут появляться и исчезать.
  • Если в игре есть тайлы, занимающие несколько единичных размеров тайлов, то потребуется рисовать больше тайлов на границах. Например, если самый большой тайл из всего набора имеет размер X на Y, то потребуется отрисовывать на X больше тайлов слева и справа, и на Y больше тайлов сверху и снизу. Так мы гарантируем, что углы большого тайла будут видимы при скроллинге.
  • Нам по-прежнему нужно обеспечивать отсутствие пустых областей на экране, когда отрисовка выполняется рядом с границами уровня.
  • Уровень должен скроллиться только до тех пор, пока на соответствующем крае экрана не будет отрисован соответствующий крайний тайл. После этого персонаж должен продолжать двигаться в пространстве экрана без скроллинга уровня. Для этого нам нужно отслеживать все четыре угла внутреннего экранного прямоугольника и соответствующим образом управлять логикой скроллинга и перемещения персонажа. Готовы ли вы реализовать это самостоятельно?

Заключение

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

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

Владими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е. . . . . . . rob_x-delta_x) < zx--; >if (zx rob_y-delta_y) < zy--; >if (zy . =================================— Пpи сканиpовании обычной обpатной модели экpана она в этом случае выдает «виpтуальные» кооpдинаты на плане, котоpые затем пpеобpазовывают (пеpесчитывают) в «pеальные». Для ускоpения этого пpоцесса можно пpименять следующие методы (цифpы для объектов с 8-ю напpавлениями оpиентации): А. Сфоpмиpовать 8 таблиц пеpесчета кооpдинат видимых клеток, для всех 8 напpавлений взгляда активного объекта. Б. Сфоpмиpовать 8 pазных обpатных моделей экpана, соответсвующих методу «камеpа за плечами», для всех 8 напpавлений взгляда активного объекта. Понятно, что метод Б более пpогpессивен — поскольку исключает лишние pассчеты. Метод «камеpа за плечами» довольно кpасив, особенно в случае, когда активные объекты имеют 8 или 16 напpавлений оpиентации. Однако он тpебует, чтобы все пpедметы на плане и клетки пола имели столько же видов (битмапов), сколько будет нап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и желании ускоpить pаботу и избытке памяти можно загpужать сpазу все пpоекции. Часть 8. Плавные скpоллинги и отсечения в пpоекции «2/3». =========================================================- Единственным достойным pассмотpения методом осуществления плавных скpоллингов и отсечений для изометpических пpоекций типа пpоекции «2/3» я полагаю метод «виpтуального экpана». Все остальные методы чpезвычайно сложны, pесуpсоемки и пpиводят к значительным замедлениям пpи постpоении экpана и выводе. К сожалению, я не стал использовать виpтуальный экpан в модели FLOORS3 — так как она pаботает в Real Mode, и мне не хотелось тpатить лишнюю память из скудных 600K, пpедоставляемых нам DOSом, поэтому далее мне пpидется обьяснять все «на пальцах». Виpтуальный экpан — это некотоpая выделяемая нами область памяти RAM (некий буфе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оится в модели FLOORS3, будет стpоиться на виpтуальном экpане такого же pазмеpа (640×480), как pеальный экpан в FLOORS3. Этот виpтуальный экpан мы будем отобpажать в окно 512×416 на основном экpане (то есть выбpаны отсечения по 64 спpава и слева, и по 32 свеpху и снизу — что соответствует половине соответсвующих pазмеpов спpайтов пола). В пpинципе, такие отсечения (pомб пола/2) следует считать минимально возможными, и пpи возможности следует увеличить их до полного pазмеpа pомба пола с каждой стоpоны. Вы веpоятно уже догадались, что плавный скpоллинг в этом случае сведется к сдвигу отобpажаемой зоны по виpтуальному экpану в пpеделах +/-64, +/-32 точки, и сдвигу отобpажаемой зоны поля на целую клетку (см.обpатную модель экpана) пpи необходимости получения большего скpоллинга. Математически точно (для гоpизонтального скpоллинга) в целых числах, для нашего пpимеpа: MODEL_ZX=PIX_X/128; //гpубый сдвиг VIRT_ZX=64+PIX_X-(MODEL_ZX*128); //точный остаток где: PIX_X — точная глобальная кооpдината скpоллинга, в пикселах MODEL_ZX — гpубая кооpдината, в клетках MAP VIRT_ZX — сдвиг окна по виpт.экpану Понятно, что все эти мат.опеpации для множителей, pавных степени двойки, можно свести к пpостым сдвигам и логической опеpации AND с маской. Отсечения объектов на таком виpтуальном экpане получаются уже автоматически. Когда виpтуальный экpан полностью постpоен, обычно ожидают начала обpатного хода луча по кадpу, и выводят виpт.экpан в окно pеального экpана последовательностью команд REP MOVSD (ну или pазвеpнутой последовательностью из N паp команд типа [инкpемент адpеса] + [копиpование по адpесу]) последовательно по стpокам. На совpеменных видеокаpтах такое копиpование оказывается достаточно быстpым, чтобы избежать помех на экpане без всякого использования нескольких видеостpаниц. Для нашего пpимеpа: объем окна: 512*416=212992 байт, или 208Kb типичный тpансфеp на копиpовании RAM->видео (каpта S3-Trio64, 2Mb DRAM, P5) =

Илон Маск рекомендует:  Рисование с помощью actionscript во flash mx

24.000 Kb/s Получаем frame rate = 24000/208=

115 fps Учитывая, что в видеоpежиме VESA 101h (640×480) стандаpтная частота кадpов 60Hz, получаем, что для отсутствия помех пpи выводе на экpан будет достаточно успеть вывести окно за 1/60 секунды. По нашим же pассчетам, мы это успеваем за 1/115 секунды. Уpа! Ну, pазумеется, далеко не все видеокаpты имеют такую высокую скоpость, поэтому frame rate может оказаться и ниже, однако f/r

Растровая визуализация в изометрической проекции. Как создаются изометрические миры

Владими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е. . . . . . . rob_x-delta_x) < zx--; >if (zx rob_y-delta_y) < zy--; >if (zy . =================================— Пpи сканиpовании обычной обpатной модели экpана она в этом случае выдает «виpтуальные» кооpдинаты на плане, котоpые затем пpеобpазовывают (пеpесчитывают) в «pеальные». Для ускоpения этого пpоцесса можно пpименять следующие методы (цифpы для объектов с 8-ю напpавлениями оpиентации): А. Сфоpмиpовать 8 таблиц пеpесчета кооpдинат видимых клеток, для всех 8 напpавлений взгляда активного объекта. Б. Сфоpмиpовать 8 pазных обpатных моделей экpана, соответсвующих методу «камеpа за плечами», для всех 8 напpавлений взгляда активного объекта. Понятно, что метод Б более пpогpессивен — поскольку исключает лишние pассчеты. Метод «камеpа за плечами» довольно кpасив, особенно в случае, когда активные объекты имеют 8 или 16 напpавлений оpиентации. Однако он тpебует, чтобы все пpедметы на плане и клетки пола имели столько же видов (битмапов), сколько будет нап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и желании ускоpить pаботу и избытке памяти можно загpужать сpазу все пpоекции. Часть 8. Плавные скpоллинги и отсечения в пpоекции «2/3». =========================================================- Единственным достойным pассмотpения методом осуществления плавных скpоллингов и отсечений для изометpических пpоекций типа пpоекции «2/3» я полагаю метод «виpтуального экpана». Все остальные методы чpезвычайно сложны, pесуpсоемки и пpиводят к значительным замедлениям пpи постpоении экpана и выводе. К сожалению, я не стал использовать виpтуальный экpан в модели FLOORS3 — так как она pаботает в Real Mode, и мне не хотелось тpатить лишнюю память из скудных 600K, пpедоставляемых нам DOSом, поэтому далее мне пpидется обьяснять все «на пальцах». Виpтуальный экpан — это некотоpая выделяемая нами область памяти RAM (некий буфе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оится в модели FLOORS3, будет стpоиться на виpтуальном экpане такого же pазмеpа (640×480), как pеальный экpан в FLOORS3. Этот виpтуальный экpан мы будем отобpажать в окно 512×416 на основном экpане (то есть выбpаны отсечения по 64 спpава и слева, и по 32 свеpху и снизу — что соответствует половине соответсвующих pазмеpов спpайтов пола). В пpинципе, такие отсечения (pомб пола/2) следует считать минимально возможными, и пpи возможности следует увеличить их до полного pазмеpа pомба пола с каждой стоpоны. Вы веpоятно уже догадались, что плавный скpоллинг в этом случае сведется к сдвигу отобpажаемой зоны по виpтуальному экpану в пpеделах +/-64, +/-32 точки, и сдвигу отобpажаемой зоны поля на целую клетку (см.обpатную модель экpана) пpи необходимости получения большего скpоллинга. Математически точно (для гоpизонтального скpоллинга) в целых числах, для нашего пpимеpа: MODEL_ZX=PIX_X/128; //гpубый сдвиг VIRT_ZX=64+PIX_X-(MODEL_ZX*128); //точный остаток где: PIX_X — точная глобальная кооpдината скpоллинга, в пикселах MODEL_ZX — гpубая кооpдината, в клетках MAP VIRT_ZX — сдвиг окна по виpт.экpану Понятно, что все эти мат.опеpации для множителей, pавных степени двойки, можно свести к пpостым сдвигам и логической опеpации AND с маской. Отсечения объектов на таком виpтуальном экpане получаются уже автоматически. Когда виpтуальный экpан полностью постpоен, обычно ожидают начала обpатного хода луча по кадpу, и выводят виpт.экpан в окно pеального экpана последовательностью команд REP MOVSD (ну или pазвеpнутой последовательностью из N паp команд типа [инкpемент адpеса] + [копиpование по адpесу]) последовательно по стpокам. На совpеменных видеокаpтах такое копиpование оказывается достаточно быстpым, чтобы избежать помех на экpане без всякого использования нескольких видеостpаниц. Для нашего пpимеpа: объем окна: 512*416=212992 байт, или 208Kb типичный тpансфеp на копиpовании RAM->видео (каpта S3-Trio64, 2Mb DRAM, P5) =

24.000 Kb/s Получаем frame rate = 24000/208=

115 fps Учитывая, что в видеоpежиме VESA 101h (640×480) стандаpтная частота кадpов 60Hz, получаем, что для отсутствия помех пpи выводе на экpан будет достаточно успеть вывести окно за 1/60 секунды. По нашим же pассчетам, мы это успеваем за 1/115 секунды. Уpа! Ну, pазумеется, далеко не все видеокаpты имеют такую высокую скоpость, поэтому frame rate может оказаться и ниже, однако f/r Рис. 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).

  1. Способ построения изометрической проекции на основе по­следовательного удаления объемов используется в тех случаях, когда отображаемая форма получена в результате удаления из исходной формы каких-либо объемов (рис. 114).
  2. Способ построения изометрической проекции на основе по­следовательного приращения (добавления) объемов применяется для выполнения изометрического изображения детали, форма которой получена из нескольких объемов, соединенных опреде­ленным образом друг с другом (рис. 115).
  3. Комбинированный способ построения изометрической про­екции. Изометрическую проекцию детали, форма которой полу­чена в результате сочетания различных способов формообразо­вания, выполняют, используя комбинированный способ построе­ния (рис. 116).

Аксонометрическую проекцию детали можно выполнять с изображением (рис. 117, а) и без изображения (рис. 117, б) неви­димых частей формы.

Рис. 114. Построение изометрической проекции детали на основе последовательного удаления объемов

Рис. 115 Построение изометрической проекции детали на основе последовательного приращения объемов

Рис. 116. Использование комбинированного способа построения изометрической проекции детали

Рис. 117. Варианты изображения изометрических проекций детали: а — с изображением невидимых частей;
б — без изображения невидимых частей

Изометрические иллюстрации смотрятся очень интересно и находят применение во многих областях, например, в инфографике, дизайне и многих других. Редактор inkscape позволяет легко создавать изометрию благодаря наличию изометрической сетки. В этом уроке мы создадим простейшее изображение в изометрии. Это будет комната. Обойдемся без большого количества мелких деталей.

Как нарисовать изометрию

Шаг 1.

Запускаем редактор inkscape, настройки нового документа не изменяем. Создадим изометрическую сетку для работы. Для этого отправляемся в Расширения-Отрисовка-Сетки-Изометрическая сетка и немного меняем настройки, увеличиваем число делений по Х и У до 10, делений между основными штрихами 3 и уменьшаем число разбиения делений до 1

Нажимаем применить, размещаем сетку ровно на документе

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

Ну вот, можно приступать.

Шаг 2.

Берем инструмент Рисовать кривые Безье и, кликая в узлы сетки, создаем первую стену

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

Очередь пола, тем же инструментом создаем пол

Сделаем окно. Для этого создаем прямоугольник, выделяем его вместе со стеной и применяем

Шаг 3.

Добавим стол. Начнем с крышки стола. Уже привычным способом создаем прямоугольник по узлам сетки и размещаем у окна.

Обводку для стола делаем светлой, заливка любая темная похожая на цвет стола.

Теперь ножки- ножки делаем и двух элементов темного и светлого для создания объема. Линию создаем кривыми

Для придания нужной формы сначала оконтуриваем обводку ( Контур-оконтурить обводку ) и, двигая узлы, придаем форму. Затем дублируем и меняем цвет на более темный, в результате имеем ножку стола. Группируем Ctrl+G

Дублируем 3 раза и размещаем под столом (Page Down ).

Шаг 4.

Следующий элемент полки на стене и кровать. Создаем кривыми три прямоугольника темного цвета и размещаем на стене


Цвет каждой полки должен отличаться друг от друга иначе полки сольются.

Кровать создаем из трех прямоугольников разного цвета

Добавляем белую подушку из трех прямоугольников

Можете повозиться для придания ей нужной «подушечной» формы.

Шаг 5.

Теперь шкаф. Очередные три прямоугольника для шкафа и два светлых для дверей

Цвет подбираем на свое усмотрение.

В заключении этого шага добавляем книги на стол и полки, и фиолетовое покрывало на кровать. Рисуем окно светло-голубого цвета и уменьшаем у него прозрачность.

Напомню, все делаем Кривыми Безье по изометрической сетке.

Шаг 6

Вешаем на стену картину желтого цвета с изображением цветка. Картину и цветок создаем кривыми. Перед кроватью коврик.

Для усиления эффекта объема добавляем тень под зеленый пол из размытого прямоугольника, тень под стол, и «землю» на которой мы «прикупили комнатку»

Ну и последнее. Для земли применяем пуантилизм (Фильтры-Рассеивание-пуантилизм), а для стен добавим толщину, пройдя кривой с обводкой в 2 пх толщиной белого цвета.

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

В Adobe illustrator есть 3 популярных способа работать с изометрией:

  1. Используя изометрическую сетку
  2. Методом SSR
  3. С помощью функции 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, которая, к счастью, имеется в функционале Иллюстратора.

I. Рисуем переднюю часть объекта в анфас

II. Применяем эффект Effect — 3D — Extrude&Bevel

III. В параметре Position выбираем значение Isometric Right или Left (Top и Bottom нам не нужны, т.к. в таком ракурсе можно спокойно нарисовать фигуру с помощью SSR).

IV. Разбираем оформление, удаляем все лишние и на выходе получаем готовую к использованию фигуру.

Кроме того, это самый быстрый способ нарисовать примитив в изометрии: всего пара кликов и фигура готова. Если бы мы делали это методом SSR — пришлось бы немного повозиться.

По сути 3D является полноценной замены метод SSR и проигрывает второму лишь в частных случаях (например, при попытке перевести в изометрию клавиатуру от ноутбука).

Выводы:

  1. Универсального способа рисовать изометрию — НЕТ.
  2. Эти способы не единственные, но они подходят под большинство практических задач

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

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

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

На своих курсах я учу ребят делать крутую графику на которую есть спрос. Я помогаю разобрать все по полочкам и добиться на выходе результата, за который мне не будет стыдно.

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

Возможно ли получить псевдообъемное изображение без 3D-программ? «Конечно, — скажете вы, — берешь, напрягаешься и рисуешь с нуля». А если без «берешь, напрягаешься и рисуешь»? А если вообще без каких-то специальных знаний? Можно ли получить изометрические объекты, не тратя время на рендер? Существует ли вообще цифровая иллюстрация вне привычных графических программ? На эти и другие вопросы я дам ответ в своей статье, посвященной новому методу создания цифровых иллюстраций — ExcelArt.

Часть 1. Уникальный метод создания иллюстраций

Краткая предыстория о креативных инструментах

Я считаю, что по-настоящему любящий свое дело иллюстратор или дизайнер просто обязан постоянно находиться в поиске новых инструментов, стилей и техник работы. Без этого невозможно его профессиональное развитие. Без этого также немыслим и прогресс в мире дизайна.

Руководствуясь идеей о поиске новых креативных инструментов, я провел своеобразный эксперимент. Я попытался создать цифровую иллюстрацию без использования привычных графических программ. Через энное количество попыток я наткнулся на нечто совершенно уникальное.

Легкая и быстрая изометрия без 3D

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

Что это дает дизайнерам и иллюстраторам

Когда же проблемы заходят дальше кубиков, и нужно нарисовать, например, несколько зданий, такая задача может потребовать еще и немало времени. Хотя при наличии небольшой практики сделать то же самое в Excel получается гораздо быстрее.

Я сам однажды стал жертвой задачи с псевдообъемами. Мне нужно было получить псевдообъемные буквы в векторе. Когда я попытался сделать это штатными средствами в Illustrator, он сначала несколько минут просчитывал картинку, а потом выдал мне кучу изломанных линий. Отрисовывать то же самое градиентами и контурами было нереально трудозатратно. Над задачей нависла угроза провала. Спас ExcelArt! Всего за несколько секунд (!) я сделал объемный текст в Excel. И, кстати, результат оттуда отлично экспортировался в «люстру» (мне ведь нужен был вектор на выходе).

Что это дает обычным людям

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


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

Часть 2. Туториал

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

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

1. Начнем с создания передней части корпуса телефона. Для этого открываем MS Excel, выбираем в верхней панели вкладку Вставка > Фигуры > Скругленный прямоугольник (20,29 х 9,97 см). Скругление углов сделайте с помощью желтого ромбика в верхнем левом углу фигуры, как на изображении ниже.

Чтобы вам легче было ориентироваться в пропорциях, в скобках я буду указывать размеры всех создаваемых объектов. После того как вы создали фигуру, размеры можно изменить во вкладке Формат > Размер.

Внимание! Не создавайте фигуру в верхнем левом углу страницы. Позже, когда вы начнете добавлять другие объекты и работать с изометрией, у вас могут возникнуть проблемы с расположением элементов. Обратите внимание, я сделал свой прямоугольник ближе к центру страницы (координаты W69).

2. Займемся экраном. Сначала создадим сам экран, делается он так же, как и предыдущий элемент, то есть с помощью верхней вкладки Вставка > Фигуры > Прямоугольник (15,74 х 9,21 см). Углы в данном случае скруглять не нужно. Далее делаем динамик: Вставка > Фигуры > Скругленный прямоугольник (0,18 х 1,5 см), его углы нужно скруглить по максимуму. Затем создаем кнопку: Вставка > Фигуры > Овал (1,5 х 1,5 см).

3. Фронтальная камера создается двумя Овалами: нижним — большего диаметра (0,29 х 0,29 см), и верхним — меньшего диаметра (0,14 х 0,14 см). Для того чтобы в дальнейшем было удобно с ними работать, эти два Овала нужно сгруппировать. Для этого зажмите клавишу Shift, выделите овалы, кликнув по каждому из них. Shift нужно отпустить. Далее, кликнув по любому из овалов правой кнопкой мыши, вызовите меню и выберите пункты: Группировать > Группировать.

4. Теперь нам необходимо выровнять все объекты относительно друг друга. Начнем с камеры и динамика. Нужно, чтобы они находились на одной линии. Для этого, зажав клавишу Shift, выделяем камеру и динамик и в верхней вкладке выбираем: Формат > Упорядочить > Выровнять > Выровнять по середине. Далее сгруппируйте динамик и камеру так же, как это было сделано с овалами в предыдущем шаге.

После этого, зажав клавишу Shift, выделите все объекты (корпус, экран, кнопку, группированные динамик и камеру) и выровняйте их по одной оси, выбрав: Формат > Упорядочить > Выровнять > Выровнять по центру. Все выбранные и выровненные объекты вам теперь надо сгруппировать в один.

5. Пришло время придать картинке цвет. Кликните три раза левой кнопкой мыши по корпусу телефона, так, чтобы выделился именно корпус, а не весь сгруппированный объект. Индикатором правильного выбора будут являться две синие обводки вокруг объектов: одна внешняя пунктирная и другая внутренняя сплошная.

6. Покраска динамика и камеры более сложная, так как они закрашиваются не сплошным цветом, а градиентами. Для этого выделите динамик (не забывайте, что все объекты сгруппированы, и нужно выделить тройным кликом только динамик, а не всю группу), щелкните по динамику правой клавишей мыши и выберите пункт — Формат фигуры. В появившемся всплывающем окне выберите вкладку — Заливка > Градиентная заливка. Создайте градиент со следующими настройками: тип — линейный; угол 90⁰; левая точка градиента — второй серый цвет снизу второго столбца с яркостью 15%; правая точка градиента — третий серый цвет снизу второго столбца с яркостью 25%. И, конечно же, не забудьте убрать контур, как в предыдущем шаге: Формат > Контур фигуры > Нет контура.

Илон Маск рекомендует:  Обработка ошибок

Таким же способом закрасьте фронтальную камеру. Сначала выделите нижний овал большего диаметра. Настройки градиента у него следующие: тип — линейный; угол 300⁰; левая точка градиента — второй серый цвет снизу второго столбца в положении 41% с яркостью 15%; правая точка градиента — третий цвет снизу второго столбца с яркостью 25%.

Теперь выделите верхний овал меньшего диаметра. Сделайте градиент с такими настройками: тип — линейный; угол 0⁰; левая точка градиента — третий синий цвет снизу четвертого столбца с яркостью 40%; правая точка градиента — второй синий цвет снизу четвертого столбца с яркостью 25%.

7. С экраном все намного проще. Цвет экрана делаем следующим образом: Формат > Заливка > белый цвет. Для покраски контура выбираем: Формат > Контур фигуры > второй серый цвет снизу второго столбца.

В отличие от всех предыдущих объектов у кнопки нет заливки, а вот контур окрашен в градиент. Для его настройки в окне Формат фигуры выберите пункт: Цвет линии > Градиентная линия. Для контура нам понадобится четыре точки градиента. Их можно создать, кликнув левой кнопкой мыши по полосе градиента. Обратите внимание, что цвета всех точек градиента одинаковы, различаться будут только положение и яркость. Итак, настройки градиента следующие: тип — линейный; угол 50⁰; цвет градиента — второй серый цвет снизу второго столбца; первая точка градиента — положение 30%, яркость 18%; вторая точка градиента — положение 48%, яркость 30%; третья точка градиента — положение 62%, яркость –100%; четвертая точка градиента — положение 70%, яркость 15%.

8. Настало время придать объектам изометрическую проекцию. Щелкните по сгруппированной фигуре один раз, чтобы выделить ее, правой клавишей мыши вызовите уже знакомое окно Формат фигуры. Далее выберите: Поворот объемной фигуры > Заготовки > Параллельно > Изометрический, верх. Не закрывайте окно Формат фигуры.

Выделит черный прямоугольник корпуса и перейдите во вкладку Формат объемной фигуры. Задайте корпусу следующие настройки рельефа: сверху — круг, ширина 4 пт, высота 5 пт. Глубину, поверхность и контур изменять не нужно. Если все правильно сделано, с двух краев прямоугольника должны появиться небольшие серые тени.

9. Теперь займемся созданием металлической части корпуса. Кликните три раза по черному прямоугольнику корпуса, выделив его, и скопируйте его нажатием клавиш Ctrl+C. После этого снимите выделение, кликнув по любой пустой ячейке листа, и вставьте прямоугольник, нажав Ctrl+V.

Закрасьте прямоугольник светло-серым (третий цвет снизу первого столбца) и слегка увеличьте его (20,53 х 10,09 см). Во вкладке Формат объемной фигуры сделайте следующие настройки рельефа: сверху — круг по 11 пт в ширину и высоту, снизу — круг по 11 пт в ширину и высоту. Обратите внимание, в той же вкладке нужно изменить угол освещения: Поверхность > Освещение > Угол > 300⁰. Глубину и контур не трогаем.

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

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

Начнем делать нижний блок отверстий с динамиком. Сделайте шесть одинаковых Овалов (0,2 х 0,2 см). Выровняйте их по середине и сгруппируйте. Далее выберите: Формат фигуры > Поворот объемной фигуры > Заготовки > Параллельно >

Задайте каждому Овалу одинаковый градиент. На этот раз нам понадобятся три точки градиента. Как и в предыдущем случае, цвет всех точек одинаковый — второй серый цвет снизу второго столбца. Остальные настройки следующие: тип — линейный; угол 130⁰; первая точка градиента — положение 27%, яркость 15%; вторая точка градиента — положение 63%, яркость 50%; третья точка градиента — положение 75%, яркость –15%.

Теперь необходимо выбрать толщину контура, кликнув по верхней вкладке: Формат > Контур фигуры > Толщина > 0,5 пт. В том же пункте выбираем цвет — первый серый цвет снизу первого столбца.

11. Теперь займемся отверстием для зарядки и болтами возле него. Каждый болт состоит из двух фигур. Нижняя фигура — Овал (0,2 х 0,2 см), светло-серого цвета (второй цвет снизу первого столбца) без контура. Верхняя фигура — пятиконечная звезда. Для ее создания выбираем вкладку Вставка > Фигуры > 5-конечная звезда (0,15 х 0,15 см). Цвет: черный без контура. Обе фигуры необходимо выделить и выровнять относительно друг друга по центру и по середине, а также сгруппировать. Болты абсолютно одинаковы, так что можно сделать только один, а другой просто скопировать рядом.

Отверстие для зарядки, как вы, наверное, уже догадались, это скругленный прямоугольник (0,32 х 1,06 см), углы которого скруглены по максимуму. Цвет всех трех точек градиента такой же, как и в предыдущем этапе. Настройки градиента похожие: тип — линейный; угол 130⁰; первая точка градиента — положение 0%, яркость 15%; вторая точка градиента — положение 29%, яркость 50%; третья точка градиента — положение 94%, яркость –15%. Толщина контура 1 пт, цвет — второй серый цвет снизу первого столбца.

После того, как сделаете болты и отверстие для зарядки, выровняйте их посередине и выберите: Формат фигуры > Поворот объемной фигуры > Заготовки > Параллельно > Изометрический, вправо вверх.

12. Последние два Овала снизу — это вход для наушников (тот, что больше) и отверстие микрофона.

Отверстие микрофона — это точная копия отверстий динамика, просто скопируйте одно из них.
Вход для наушников делается из Овала (0,48 х 0,48 см) без контура. Цвет точек градиента одинаковый: второй серый цвет снизу второго столбца. Настройки градиента такие: тип — линейный; угол 30⁰; первая точка — положение 7%, яркость –18%; вторая точка градиента — положение 100%, яркость 37%.

Как всегда, оба отверстия выравниваем по середине, группируем и задаем получившейся группе поворот: Формат фигуры > Поворот объемной фигуры > Заготовки > Параллельно > Изометрический, вправо вверх.

13. Осталось сделать боковую панель. Кнопка выключения звука состоит из двух скругленных по максимуму прямоугольников. Нижний прямоугольник (0,3 х 0,85 см) темного-серого цвета (третий цвет снизу второго столбца) без контура. Верхний прямоугольник (0,16 х 0,85 см) светло-серого цвета (третий цвет снизу первого столбца) без контура. Перейдите во вкладку Формат фигуры > Формат объемной фигуры и задайте верхнему прямоугольнику следующие настройки — рельеф: сверху — угол, ширина 0,5 пт, высота 1 пт; глубина: глубина 1,5 пт; поверхность: материал — стандартный «пластик», освещение — нейтральное «три точки», угол освещения: 170⁰. Нижний прямоугольник настроек не требует. Для того чтобы повернуть прямоугольники в изометрической проекции, выберите для каждого из них: Формат фигуры > Поворот объемной фигуры > Заготовки > Параллельно > Изометрически, влево вниз.

Внимание! Не группируйте прямоугольники, пока полностью не сделаете каждый из них, иначе после настроек формата объема у вас могут возникнуть проблемы с перекрытием одного прямоугольника другим.

14. Кнопки регулировки громкости сделаны из трех скругленных по максимуму прямоугольников. Овалы самих кнопок (0,29 х 1,43 см) имеют точно такие же настройки, как и кнопка выключения звука в предыдущем этапе. Находящийся под ними скругленный прямоугольник (0,36 х 3,39 см) не имеет контура. Настройки градиента для него следующие: цвет обеих точек — третий темно-серый цвет снизу второго столбца; тип — линейный; угол 90⁰; первая точка градиента — положение 0%, яркость 29%; вторая точка градиента — положение 100%, яркость 75%. Поворот всех овалов: Формат фигуры > Поворот объемной фигуры > Заготовки > Параллельно > Изометрический, влево вниз.

После того, как сделаете все детали этого блока, не забудьте сгруппировать их для удобства постановки на место и перетягивания.

15. Серые полосы сбоку корпуса получены из двух фигур Блок-схема (Вставка > Фигуры > Блок-схема: сохраненные данные), размер каждой 0,5 х 0,4 см, поворот фигуры: Формат фигуры > Поворот объемной фигуры > Заготовки > Параллельно > Изометрически, влево вниз.

Настройки градиента: цвет обеих точек — второй светло-серый цвет снизу первого столбца; тип — линейный; угол 100⁰; первая точка градиента — положение 0%, яркость –35%, прозрачность 30%; вторая точка градиента — положение 100%, яркость –63%, прозрачность 0%.

16. Наш телефон готов. Осталось только вставить изображение в экран. Выделите белый прямоугольник экрана, правой клавишей мыши вызовите: Формат фигуры > Заливка > Рисунок или текстура > Вставить из: Файл. Затем выберите на своем компьютере изображение, которое хотите добавить на экран телефона, и нажмите кнопку Вставить. Я вставил заранее снятый скрин почтового приложения Mail.Ru. Вы можете добавить макет дизайна вашего приложения или любую другую картинку.

17. Чтобы картинка обрела законченный вид, необходимо закрасить фон. Для этого просто выделите пустые ячейки за телефоном и выберите подходящий цвет заливки в верхней вкладке: Главная > Шрифт > Цвет заливки.

Уже закончив изображение и взглянув на получившийся результат, я понял, что для пущей убедительности телефону не хватает небольшой тени. Вы спросите: «Неужели и это можно сделать в Excel’е?». Можно куда больше, но мы остановимся на этом.

Выделите нижний серый скругленный прямоугольник (корпус) и правой клавишей мыши вызовите окно Формат фигуры. Во вкладке Тень пропишите следующие настройки: цвет — черный, прозрачность — 62%, размер — 99%, размытие — 11 пт; угол — 60⁰; расстояние — 3 пт.

18. Последний вопрос, который нам предстоит решить, это, как получить файл с готовым изображением, над которым мы так долго работали. Есть несколько способов решения этой задачи. Я расскажу один наиболее простой и логичный — просто сделать снимок экрана.

У десктопной версии Облака Mail.Ru есть замечательная скриншотилка. Нажмите Shift+Ctrl+6, выделите часть экрана с изображением телефона и нажмите кнопку Готово. Ссылка на изображение сразу же попадет в ваш буфер обмена, а сама картинка в формате png будет лежать в вашем Облаке в папке Screenshots. Вот так, быстро и удобно, и не надо ничего отдельно вырезать и сохранять.

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

8 уроков по созданию изометрических иллюстраций

Изометрия — проекция, при которой длины единичных отрезков на всех трёх осях одинаковы (wiki). Наиболее популярна эта проекция в пиксель-арте, где для придания объектам объема необходимо строго соблюдать правила изометрических построений.

Однако, изометрия применима далеко не только в пиксель-арте, но и в создании иконок в Фотошопе, графиков и диаграмм в Иллюстраторе, а также всевозможных мокапов.

Сегодня мы собрали 8 уроков, которые помогут не только освоить основные принципып работы с изометрией, но и попрактиковаться в создании иллюстраций.

Как создаются изометрические миры

Все мы играли в потрясающие изометрические игры, будь то первые 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:

Да, вот и всё. Эти простые уравнения творят магию изометрического проецирования. Вот вспомогательные функции Phaser, которые можно использовать для преобразования из одной системы в другую с помощью очень удобного класса Point :

Итак, мы можем использовать вспомогательный метод cartesianToIsometric для преобразования входных 2D-координат в изометрические внутри метода placeTile . За исключением этого, код отображения остаётся тем же, но нам нужно создать новые картинки тайлов. Мы не можем использовать старые квадратные тайлы из вида сверху. На рисунке ниже показаны новые изометрические тайлы травы и стен вместе с готовым изометрическим уровнем:

Невероятно, правда? Давайте посмотрим, как обычное двухмерное положение преобразуется в изометрическое:

То есть входные данные [0, 0] преобразуются в [0, 0] , а [10, 5] — в [5, 7.5] .

Для нашей огороженной лужайки мы можем определить проходимые области, проверяя, равно ли значение элемента массива 0 в нужной координате. Если равно, то это трава. Для этого нам нужно определять координаты массива. Мы можем найти координаты тайла в данных уровня из его декартовых координат с помощью этой функции:

(Здесь мы предполагаем, что высота и ширина тайла одинаковы, как и бывает в большинстве случаев.)

То есть, зная пару экранных (изометрических) координат, мы можем найти координаты тайла вызовом функции:

Эта точка на экране может быть, скажем, положением курсора мыши или подбираемого предмета.

Точки регистрации

Во Flash можно выбирать произвольные точки графики в качестве базовой точки или [0,0] . Аналогом этого в Phaser является Pivot . Когда мы располагаем графику, скажем, в точке [10,20] , то эта точка Pivot соответствует [10,20] . По умолчанию [0,0] или Pivot считается левая верхняя точка. Если вы попробуете создать приведённый выше уровень с помощью этого кода, то вы не получите нужного результата. Вместо этого у вас получится плоская земля без стен, как показано ниже:

Так происходит потому, что изображения тайлов имеют разные размеры, и мы не учитываем атрибут высоты тайла стены. На рисунке ниже показаны разные используемые нами изображения тайлов и белый круг, в котором по умолчанию находится их [0,0]:

Заметьте, что при использовании базовых точек (Pivot) по умолчанию герой находится не в том месте. Также заметьте, что мы теряем высоту стены, когда отрисовываем её с базовой точкой по умолчанию. На рисунке справа показано, как они должны быть расположены правильно, чтобы у тайла стены учитывалась её высота, а герой находился посередине тайла травы. Эту проблему можно решить разными способами.

  1. Сделать размеры изображений всех тайлов одинаковыми, и правильно расположить в изображении графику. При этом в каждом изображении тайла создаётся множество пустых областей.
  2. Вручную устанавливать базовую точку для каждого тайла, чтобы они располагались правильно.
  3. Отрисовывать тайлы с определённым смещением.

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

3. Движение в изометрических координатах

Никогда не следует двигать персонажей или объекты в изометрических координатах напраямую. Вместо этого мы будем управлять данными игрового мира в декартовых координатах и просто использовать приведённые выше функции для обновления положения на экране. Например, если мы хотим переместить персонажа вперёд в положительном направлении по оси Y, то можно просто увеличить его свойство y в двухмерных координатах, а затем преобразовать конечное положение в изометрические координаты:

Давайте подведём итог всем новым понятиям, которые мы изучили, и попробуем реализовать рабочий пример объекта, двигающегося в изометрическом мире. Можно использовать необходимые графические ресурсы из папки assets в репозитории исходного кода на git.

Сортировка по глубине

Если вы пробовали перемещать изображение мяча в огороженном саду, то заметили проблемы с сортировкой по глубине. Если в изометрическом мире есть подвижные элементы, то кроме обычного расположения, нам нужно позаботиться и о сортировке по глубине. Правильная сортировка гарантирует, что объекты, находящиеся ближе к экрану, будут отрисовываться поверх более далёких объектов. Как упомянуто в этой статье, простейший способ сортировки — использование декартовой координаты Y: чем выше объект на экране, тем раньше его следует отрисовывать. Это может неплохо работать для простых изометрических сцен, но лучше будет перерисовывать всю изометрическую сцену в процессе движения в соответствии с координатами тайла в массиве. Давайте я подробно объясню этот подход на примере псевдокода отрисовки уровня:

Представьте, что объект или персонаж находится на тайле [1,1] , то есть на самом верхнем зелёном тайле в изометрическом виде. Для правильной отрисовки уровня персонаж нужно отрисовывать после отрисовки углового тайла стены, левого и правого тайла стены, а также земли, как показано на рисунке:

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

4. Создание графики

Изометрическая графика может, но не обязана быть пиксель-артом. При работе с изометрическим пиксель-артом полезно изучить руководство RhysD, в котором содержится всё необходимое. Теорию можно изучить в Википедии.

При создании изометрической графики нужно соблюдать следующие правила:

  • Начните с пустой изометрической сетки и придерживайтесь её с попиксельной точностью.
  • Старайтесь разбивать графику на простые изометрические тайловые изображения.
  • Сделайте так, чтобы каждый тайл был или проходимым, или непроходимым. Иначе сложно будет работать с тайлами, содержащими и проходимые, и непроходимые области.
  • Большинство тайлов должно быть бесшовным, чтобы ими можно было замостить уровень в любом направлении.
  • Тени создавать сложно, если вы не используете решение со слоями, при котором сначала отрисовываются тени на слое земли, а потом на верхнем слое отрисовывается персонаж (или деревья и другие объекты). Если вы не используете несколько слоёв, то сделайте так, чтобы тени падали вперёд и, например, не закрывали героя, стоящего за деревом.
  • Если вам нужно использовать изображение тайла больше, чем стандартный размер изометрического тайла, то постарайтесь подобрать размер, кратный стандартному размеру тайла. В таких случаях лучше использовать слои, чтобы можно было разрезать графику на разные куски в зависимости от её высоты. Например, дерево можно разрезать на три части — корень, ствол и листву. Так будет проще сортировать глубины, потому что можно будет отрисовывать части в соответствующих слоях, соотносящихся с их высотами.

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

Посты по теме

5. Изометрические персонажи

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

Обратите внимание, что в игре с видом сверху при нажатии на клавишу вверх персонаж будет двигаться вертикально вверх, но в изометрической игре он переместится под углом в 45 градусов в сторону верхнего правого угла.

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

Для простоты понимания направления обычно обозначают как «север», «северо-запад», «запад» и так далее. В кадрах персонажа на рисунке показаны кадры неподвижного положения, начиная с юго-востока и по часовой стрелке:

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

Мы назначим две переменные, dX и dY , значение которых зависит от нажатых клавиш управления. По умолчанию эти переменные равны 0 , а значения им присваиваются согласно таблице внизу, где В , Н , П и Л означают, соответственно верхнюю, нижнюю, правую и левую клавиши направления. Значение 1 под клавишей означает, что клавиша нажата, 0 — что она не нажата.

Теперь с помощью значений 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 для обозначения предмета на тайле травы ( 1 и 0 , как и раньше, обозначают траву и стены). Это может быть тайловое изображение с тайлом травы, на которое наложено изображение предмета. По этой логике нам понадобятся два различных состояния тайла для каждого тайла, на котором может находиться предмет: один с предметом, и другой без него, который отображается после получения предмета.

Обычно в изометрической графике бывает множество проходимых тайлов. Допустим, у нас их 30. Если использовать приведённый выше подход, то если у нас есть N поднимаемых предметов, к уже имеющимся 30 тайлам потребуется ещё N x 30. Это не очень эффективно. Поэтому нам стоит создавать такие сочетания динамически. Для решения этой задачи можно использовать тот же способ, который мы использовали выше для размещения персонажа. Когда мы доходим до тайла с предметом, мы сначала отрисовываем тайл травы, а потом помещаем на него предмет. Таким образом в дополнение к 30 проходимым тайлам нам потребуется всего N тайлов предметов, но нам нужны будут числовые значения для обозначения каждого сочетания в данных уровня. Чтобы не вводить N x 30 значений, можно хранить отдельный массив pickupArray для хранения данных о предметах, отдельно от levelData . Законченный уровень с предметом показан ниже:

В нашем примере я сделаю проще и не буду использовать отдельный массив для предметов.

Собирание предметов

Распознавание предметов выполняется точно так же, как и распознавание коллизий, но после перемещения персонажа.

В функции onPickupTile() , мы проверяем, является ли значение массива levelData в координате heroMapTile тайлом с предметом. Число в массиве levelData в координате этого тайла обозначает тип предмета. Мы проверяем коллизии до перемещения персонажа, но проверка предметов выполняется после: в случае коллизий персонаж не сможет занять точку, если она уже занята непроходимым тайлом, а в случае предметов персонаж может свободно может сдвинуться на тайл.

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

Это приводит к проблеме: что случится, когда нам нужно перезапустить уровень, то есть восстановить все предметы на их исходных точках? У нас нет информации для этого, потому что массив levelData изменяется при поднятии предмета. Решение заключается в использовании копии массива уровня в процессе игры и сохранении неизменного массива levelData . Например, мы используем levelData и levelDataLive[] , клонируем последний из первого при начале уровня, а затем меняем в процессе игры только levelDataLive[] .

Например, я создаю случайный предмет на свободном тайле травы после каждого собранного предмета и увеличиваю значение pickupCount . Функция pickupItem выглядит следующим образом:

Вы наверно заметили, что мы проверяем наличие предметов всегда, когда персонаж находится на тайле. Это может может происходить несколько раз в секунду (мы проверяем только когда пользователь двигается, но в одном тайле мы можем повторять раз за разом), но приведённая выше логика будет выполняться безошибочно. Как только мы присвоим данным массива levelData значение 0 при первом обнаружении поднятия предмета, все последующие проверки onPickupTile() будут возвращать для тайла false . Посмотрите этот интерактивный пример.

8. Тайлы-триггеры

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

Давайте посмотрим, как можно реализовать дверь, переносящую игрока на другой уровень. Тайл рядом с дверью будет триггером. Когда игрок нажимает клавишу x, то перемещается на другой уровень.

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

Логика реализации здесь такая же, как и для собираемых предметов. Для хранения значений тайлов-триггеров мы снова используем массив levelData . В нашем примере 2 будет означать тайл с дверью, а значение рядом с ним будет триггером. Я использовал 101 и 102 , решив, что любой тайл со значением больше 100 будет активным тайлом, а значение минус 100 будет уровнем, на который он ведёт:

Код проверки на событие срабатывания триггера показан ниже:


Функция triggerListener() проверяет, больше ли 100 значение массива данных триггеров в заданной координате. Если это так, то мы определяем, на какой уровень нам нужно перейти, вычтя 100 из значения тайла. Функция находит тайл-триггер в новом levelData , который будет координатой создания персонажа. Я сделал так, чтобы триггер активировался при отпускании клавиши x; если просто считывать нажатую клавишу, то мы окажемся в цикле, который будет перебрасывать нас между уровнями, пока нажата клавиша, потому что персонаж всегда создаётся на новом уровне на активном тайле.

Вот работающее демо. Попробуйте пособирать предметы, наступая на них, и менять уровни, встав перед дверью и нажав x.

9. Снаряды

Снарядами мы будем называть то, что движется в определённом направлении с определённой скоростью, например, пуля, волшебное заклинание, мяч и т.д. К снарядам применимо всё, относящееся к персонажам, за исключением высоты: снаряды обычно не катятся по земле, а летят на определённой высоте. Пуля летит на уровне талии персонажа, а мяч может даже скакать.

Интересно, что изометрическая высота соответствует высоте в двухмерном виде сбоку, хотя и меньше по величине. Здесь нет сложных преобразований. Если мяч в декартовых координатах находится в десяти пикселях над землёй, то в изометрических координатах он может быть над землёй в 10 или 6 пикселях. (В нашем случае соответствующей осью будет ось Y.)

Давайте попробуем реализовать мяч, скачущий по нашему огороженному саду. Для дополнительного реализма мы добавим мячу тень. Всё, что нужно — прибавлять к изометрическому значению Y мяча значение высоты отскока. Значение высоты отскока будет меняться покадрово в зависимости от гравитации, и как только мяч коснётся земли, мы сменим знак текущей скорости по оси Y.

Прежде чем мы начнём разбираться с скачками в изометрической системе, попробуем реализовать их в двухмерной декартовой системе. Обозначим силу отскока мяча переменной zValue . Для начала представим, что сила отскока мяча равна 100, то есть zValue = 100 .

Мы используем две переменные: incrementValue , которая изначально имеет значение 0 , и gravity , имеющая значение -1 . В каждом кадре мы будем вычитать incrementValue из zValue и вычитать gravity из incrementValue для создания эффекта затухания. Когда zValue достигает 0 , это значит, что мяч достиг земли. В этот момент мы меняем знак incrementValue , умножив её на -1 , и превратив в положительное число. Это значит, что со следующего кадра мяч начнёт двигаться вверх, то есть отскочит.

Вот как это выглядит в коде:

Для изометрического вида код тоже остался тем же, с небольшой разницей: мы используем меньшее начальное значение zValue . Ниже показано, как zValue прибавляет к значению изометрической координаты y мяча при отрисовке.

Играемая тенью роль очень важна, она добавляет реализма этой иллюзии. Кроме того, заметьте, что теперь мы используем две экранные координаты (x и y) для представления трёх измерений в изометрических координатах — ось Y в экранных координатах также является осью Z в изометрических координатах. Это может запутать.

10. Нахождение пути и движение по нему

Поиск пути и движение по нему — это довольно сложный процесс. Для нахождения пути между двумя точками существует множество разных решений с использованием различных алгоритмов, но поскольку levelData является двухмерным массивом, то всё гораздо проще, чем могло бы быть. У нас есть чётко заданные уникальные узлы, которые может занимать игрок, и мы можем легко проверить, можно ли по ним пройти.

Посты по теме

  • A* Pathfinding for Beginners
  • Goal-Based Vector Field Pathfinding
  • Speed Up A* Pathfinding With the Jump Point Search Algorithm
  • The «Path Following» Steering Behavior

Подробный обзор алгоритмов поиска путей слишком велик для этой статьи, но я постараюсь объяснить наиболее распространённый способ: алгоритм кратчайшего пути, самыми известными реализациями которого являются A* и алгоритм Дейкстры.

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

Каждый поток отслеживает посещённые узлы. При переходе к соседним узлам уже посещённые узлы пропускаются (рекурсия прекращается). Процесс продолжается, пока мы не достигнем конечного узла, в котором рекурсия завершается и весь пройденный путь возвращается как массив узлов. Иногда конечный узел достигнуть не удаётся, то есть поиск пути заканчивается неудачей. Обычно мы находим между узлами несколько путей. В таком случае мы выбираем один из них с минимальным количеством узлов.

Поиск пути

Глупо изобретать велосипед заново, если речь идёт о чётко описанных алгоритмах, поэтому для поиска пути мы будем использовать уже существующие решения. В Phaser нам потребуется решение на JavaScript, поэтому я выбрал EasyStarJS. Инициализация движка поиска пути выполняется следующим образом:

Поскольку в массиве levelData содержатся только 0 и 1 , мы можем сразу передать его в массив узлов. Значением 0 мы обозначили проходимый узел. Также мы включили возможность движения по диагонали, но отключили её, когда движение происходит рядом с углами непроходимых тайлов.

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

Мы будем распознавать нажатие мышью на любой свободный тайл в уровне и вычислять путь с помощью функции findPath . Callback-метод plotAndMove получает массив узлов созданного пути. Мы помечаем найденный путь на миникарте .

Движение по пути

Получив путь в виде массива узлов, мы должны заставить персонажа двигаться по нему.

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

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

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

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

Можно посмотреть работающее демо.

11. Изометрический скроллинг

Когда область уровня гораздо больше экранной области, то необходимо выполнять скроллинг.

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

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

Новые преобразованные значения в изометрическом пространстве должны быть углом экрана, то есть новыми (0, 0) . Поэтому при парсинге и отрисовке данных уровня мы вычитаем это значение из изометрического положения каждого тайла. Мы можем определить, находится ли новое положение тайла в пределах экрана.

Или же мы можем отрисовывать на экране сетку изометрических тайлов размером X x Y, чтобы цикл отрисовки был эффективным для больших уровней.

Все эти шаги можно выразить следующим образом:

  • Обновление декартовых координат X и Y угловой точки.
  • Преобразование в изометрическое пространство.
  • Вычитание этого значения из изометрического положения отрисовки каждого тайла.
  • Отрисовка на экране только заданного количества тайлов, начиная с этого нового угла.
  • Дополнительно: отрисовка тайла, только если новое изометрическое положение отрисовки находится в пределах экрана.

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

  • При скроллинге нам может понадобиться отрисовка дополнительных тайлов на границах экрана, иначе по краям экрана тайлы будут появляться и исчезать.
  • Если в игре есть тайлы, занимающие несколько единичных размеров тайлов, то потребуется рисовать больше тайлов на границах. Например, если самый большой тайл из всего набора имеет размер X на Y, то потребуется отрисовывать на X больше тайлов слева и справа, и на Y больше тайлов сверху и снизу. Так мы гарантируем, что углы большого тайла будут видимы при скроллинге.
  • Нам по-прежнему нужно обеспечивать отсутствие пустых областей на экране, когда отрисовка выполняется рядом с границами уровня.
  • Уровень должен скроллиться только до тех пор, пока на соответствующем крае экрана не будет отрисован соответствующий крайний тайл. После этого персонаж должен продолжать двигаться в пространстве экрана без скроллинга уровня. Для этого нам нужно отслеживать все четыре угла внутреннего экранного прямоугольника и соответствующим образом управлять логикой скроллинга и перемещения персонажа. Готовы ли вы реализовать это самостоятельно?

Заключение

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

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

Илон Маск рекомендует:  Что такое код asp put

Растровая визуализация в изометрической проекции. Как нарисовать изометрию

В Adobe illustrator есть 3 популярных способа работать с изометрией:

  1. Используя изометрическую сетку
  2. Методом SSR
  3. С помощью функции 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, которая, к счастью, имеется в функционале Иллюстратора.

I. Рисуем переднюю часть объекта в анфас

II. Применяем эффект Effect — 3D — Extrude&Bevel

III. В параметре Position выбираем значение Isometric Right или Left (Top и Bottom нам не нужны, т.к. в таком ракурсе можно спокойно нарисовать фигуру с помощью SSR).

IV. Разбираем оформление, удаляем все лишние и на выходе получаем готовую к использованию фигуру.

Кроме того, это самый быстрый способ нарисовать примитив в изометрии: всего пара кликов и фигура готова. Если бы мы делали это методом SSR — пришлось бы немного повозиться.

По сути 3D является полноценной замены метод SSR и проигрывает второму лишь в частных случаях (например, при попытке перевести в изометрию клавиатуру от ноутбука).

Выводы:

  1. Универсального способа рисовать изометрию — НЕТ.
  2. Эти способы не единственные, но они подходят под большинство практических задач

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

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

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

На своих курсах я учу ребят делать крутую графику на которую есть спрос. Я помогаю разобрать все по полочкам и добиться на выходе результата, за который мне не будет стыдно.

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

Изометрические иллюстрации смотрятся очень интересно и находят применение во многих областях, например, в инфографике, дизайне и многих других. Редактор inkscape позволяет легко создавать изометрию благодаря наличию изометрической сетки. В этом уроке мы создадим простейшее изображение в изометрии. Это будет комната. Обойдемся без большого количества мелких деталей.

Как нарисовать изометрию

Шаг 1.

Запускаем редактор inkscape, настройки нового документа не изменяем. Создадим изометрическую сетку для работы. Для этого отправляемся в Расширения-Отрисовка-Сетки-Изометрическая сетка и немного меняем настройки, увеличиваем число делений по Х и У до 10, делений между основными штрихами 3 и уменьшаем число разбиения делений до 1

Нажимаем применить, размещаем сетку ровно на документе

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

Ну вот, можно приступать.

Шаг 2.

Берем инструмент Рисовать кривые Безье и, кликая в узлы сетки, создаем первую стену

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

Очередь пола, тем же инструментом создаем пол

Сделаем окно. Для этого создаем прямоугольник, выделяем его вместе со стеной и применяем

Шаг 3.

Добавим стол. Начнем с крышки стола. Уже привычным способом создаем прямоугольник по узлам сетки и размещаем у окна.

Обводку для стола делаем светлой, заливка любая темная похожая на цвет стола.

Теперь ножки- ножки делаем и двух элементов темного и светлого для создания объема. Линию создаем кривыми

Для придания нужной формы сначала оконтуриваем обводку ( Контур-оконтурить обводку ) и, двигая узлы, придаем форму. Затем дублируем и меняем цвет на более темный, в результате имеем ножку стола. Группируем Ctrl+G

Дублируем 3 раза и размещаем под столом (Page Down ).

Шаг 4.

Следующий элемент полки на стене и кровать. Создаем кривыми три прямоугольника темного цвета и размещаем на стене

Цвет каждой полки должен отличаться друг от друга иначе полки сольются.

Кровать создаем из трех прямоугольников разного цвета

Добавляем белую подушку из трех прямоугольников

Можете повозиться для придания ей нужной «подушечной» формы.

Шаг 5.

Теперь шкаф. Очередные три прямоугольника для шкафа и два светлых для дверей

Цвет подбираем на свое усмотрение.

В заключении этого шага добавляем книги на стол и полки, и фиолетовое покрывало на кровать. Рисуем окно светло-голубого цвета и уменьшаем у него прозрачность.

Напомню, все делаем Кривыми Безье по изометрической сетке.

Шаг 6

Вешаем на стену картину желтого цвета с изображением цветка. Картину и цветок создаем кривыми. Перед кроватью коврик.

Для усиления эффекта объема добавляем тень под зеленый пол из размытого прямоугольника, тень под стол, и «землю» на которой мы «прикупили комнатку»

Ну и последнее. Для земли применяем пуантилизм (Фильтры-Рассеивание-пуантилизм), а для стен добавим толщину, пройдя кривой с обводкой в 2 пх толщиной белого цвета.

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

Возможно ли получить псевдообъемное изображение без 3D-программ? «Конечно, — скажете вы, — берешь, напрягаешься и рисуешь с нуля». А если без «берешь, напрягаешься и рисуешь»? А если вообще без каких-то специальных знаний? Можно ли получить изометрические объекты, не тратя время на рендер? Существует ли вообще цифровая иллюстрация вне привычных графических программ? На эти и другие вопросы я дам ответ в своей статье, посвященной новому методу создания цифровых иллюстраций — ExcelArt.

Часть 1. Уникальный метод создания иллюстраций

Краткая предыстория о креативных инструментах

Я считаю, что по-настоящему любящий свое дело иллюстратор или дизайнер просто обязан постоянно находиться в поиске новых инструментов, стилей и техник работы. Без этого невозможно его профессиональное развитие. Без этого также немыслим и прогресс в мире дизайна.

Руководствуясь идеей о поиске новых креативных инструментов, я провел своеобразный эксперимент. Я попытался создать цифровую иллюстрацию без использования привычных графических программ. Через энное количество попыток я наткнулся на нечто совершенно уникальное.

Легкая и быстрая изометрия без 3D

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

Что это дает дизайнерам и иллюстраторам

Когда же проблемы заходят дальше кубиков, и нужно нарисовать, например, несколько зданий, такая задача может потребовать еще и немало времени. Хотя при наличии небольшой практики сделать то же самое в Excel получается гораздо быстрее.

Я сам однажды стал жертвой задачи с псевдообъемами. Мне нужно было получить псевдообъемные буквы в векторе. Когда я попытался сделать это штатными средствами в Illustrator, он сначала несколько минут просчитывал картинку, а потом выдал мне кучу изломанных линий. Отрисовывать то же самое градиентами и контурами было нереально трудозатратно. Над задачей нависла угроза провала. Спас ExcelArt! Всего за несколько секунд (!) я сделал объемный текст в Excel. И, кстати, результат оттуда отлично экспортировался в «люстру» (мне ведь нужен был вектор на выходе).

Что это дает обычным людям

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

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

Часть 2. Туториал


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

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

1. Начнем с создания передней части корпуса телефона. Для этого открываем MS Excel, выбираем в верхней панели вкладку Вставка > Фигуры > Скругленный прямоугольник (20,29 х 9,97 см). Скругление углов сделайте с помощью желтого ромбика в верхнем левом углу фигуры, как на изображении ниже.

Чтобы вам легче было ориентироваться в пропорциях, в скобках я буду указывать размеры всех создаваемых объектов. После того как вы создали фигуру, размеры можно изменить во вкладке Формат > Размер.

Внимание! Не создавайте фигуру в верхнем левом углу страницы. Позже, когда вы начнете добавлять другие объекты и работать с изометрией, у вас могут возникнуть проблемы с расположением элементов. Обратите внимание, я сделал свой прямоугольник ближе к центру страницы (координаты W69).

2. Займемся экраном. Сначала создадим сам экран, делается он так же, как и предыдущий элемент, то есть с помощью верхней вкладки Вставка > Фигуры > Прямоугольник (15,74 х 9,21 см). Углы в данном случае скруглять не нужно. Далее делаем динамик: Вставка > Фигуры > Скругленный прямоугольник (0,18 х 1,5 см), его углы нужно скруглить по максимуму. Затем создаем кнопку: Вставка > Фигуры > Овал (1,5 х 1,5 см).

3. Фронтальная камера создается двумя Овалами: нижним — большего диаметра (0,29 х 0,29 см), и верхним — меньшего диаметра (0,14 х 0,14 см). Для того чтобы в дальнейшем было удобно с ними работать, эти два Овала нужно сгруппировать. Для этого зажмите клавишу Shift, выделите овалы, кликнув по каждому из них. Shift нужно отпустить. Далее, кликнув по любому из овалов правой кнопкой мыши, вызовите меню и выберите пункты: Группировать > Группировать.

4. Теперь нам необходимо выровнять все объекты относительно друг друга. Начнем с камеры и динамика. Нужно, чтобы они находились на одной линии. Для этого, зажав клавишу Shift, выделяем камеру и динамик и в верхней вкладке выбираем: Формат > Упорядочить > Выровнять > Выровнять по середине. Далее сгруппируйте динамик и камеру так же, как это было сделано с овалами в предыдущем шаге.

После этого, зажав клавишу Shift, выделите все объекты (корпус, экран, кнопку, группированные динамик и камеру) и выровняйте их по одной оси, выбрав: Формат > Упорядочить > Выровнять > Выровнять по центру. Все выбранные и выровненные объекты вам теперь надо сгруппировать в один.

5. Пришло время придать картинке цвет. Кликните три раза левой кнопкой мыши по корпусу телефона, так, чтобы выделился именно корпус, а не весь сгруппированный объект. Индикатором правильного выбора будут являться две синие обводки вокруг объектов: одна внешняя пунктирная и другая внутренняя сплошная.

6. Покраска динамика и камеры более сложная, так как они закрашиваются не сплошным цветом, а градиентами. Для этого выделите динамик (не забывайте, что все объекты сгруппированы, и нужно выделить тройным кликом только динамик, а не всю группу), щелкните по динамику правой клавишей мыши и выберите пункт — Формат фигуры. В появившемся всплывающем окне выберите вкладку — Заливка > Градиентная заливка. Создайте градиент со следующими настройками: тип — линейный; угол 90⁰; левая точка градиента — второй серый цвет снизу второго столбца с яркостью 15%; правая точка градиента — третий серый цвет снизу второго столбца с яркостью 25%. И, конечно же, не забудьте убрать контур, как в предыдущем шаге: Формат > Контур фигуры > Нет контура.

Таким же способом закрасьте фронтальную камеру. Сначала выделите нижний овал большего диаметра. Настройки градиента у него следующие: тип — линейный; угол 300⁰; левая точка градиента — второй серый цвет снизу второго столбца в положении 41% с яркостью 15%; правая точка градиента — третий цвет снизу второго столбца с яркостью 25%.

Теперь выделите верхний овал меньшего диаметра. Сделайте градиент с такими настройками: тип — линейный; угол 0⁰; левая точка градиента — третий синий цвет снизу четвертого столбца с яркостью 40%; правая точка градиента — второй синий цвет снизу четвертого столбца с яркостью 25%.

7. С экраном все намного проще. Цвет экрана делаем следующим образом: Формат > Заливка > белый цвет. Для покраски контура выбираем: Формат > Контур фигуры > второй серый цвет снизу второго столбца.

В отличие от всех предыдущих объектов у кнопки нет заливки, а вот контур окрашен в градиент. Для его настройки в окне Формат фигуры выберите пункт: Цвет линии > Градиентная линия. Для контура нам понадобится четыре точки градиента. Их можно создать, кликнув левой кнопкой мыши по полосе градиента. Обратите внимание, что цвета всех точек градиента одинаковы, различаться будут только положение и яркость. Итак, настройки градиента следующие: тип — линейный; угол 50⁰; цвет градиента — второй серый цвет снизу второго столбца; первая точка градиента — положение 30%, яркость 18%; вторая точка градиента — положение 48%, яркость 30%; третья точка градиента — положение 62%, яркость –100%; четвертая точка градиента — положение 70%, яркость 15%.

8. Настало время придать объектам изометрическую проекцию. Щелкните по сгруппированной фигуре один раз, чтобы выделить ее, правой клавишей мыши вызовите уже знакомое окно Формат фигуры. Далее выберите: Поворот объемной фигуры > Заготовки > Параллельно > Изометрический, верх. Не закрывайте окно Формат фигуры.

Выделит черный прямоугольник корпуса и перейдите во вкладку Формат объемной фигуры. Задайте корпусу следующие настройки рельефа: сверху — круг, ширина 4 пт, высота 5 пт. Глубину, поверхность и контур изменять не нужно. Если все правильно сделано, с двух краев прямоугольника должны появиться небольшие серые тени.

9. Теперь займемся созданием металлической части корпуса. Кликните три раза по черному прямоугольнику корпуса, выделив его, и скопируйте его нажатием клавиш Ctrl+C. После этого снимите выделение, кликнув по любой пустой ячейке листа, и вставьте прямоугольник, нажав Ctrl+V.

Закрасьте прямоугольник светло-серым (третий цвет снизу первого столбца) и слегка увеличьте его (20,53 х 10,09 см). Во вкладке Формат объемной фигуры сделайте следующие настройки рельефа: сверху — круг по 11 пт в ширину и высоту, снизу — круг по 11 пт в ширину и высоту. Обратите внимание, в той же вкладке нужно изменить угол освещения: Поверхность > Освещение > Угол > 300⁰. Глубину и контур не трогаем.

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

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

Начнем делать нижний блок отверстий с динамиком. Сделайте шесть одинаковых Овалов (0,2 х 0,2 см). Выровняйте их по середине и сгруппируйте. Далее выберите: Формат фигуры > Поворот объемной фигуры > Заготовки > Параллельно >

Задайте каждому Овалу одинаковый градиент. На этот раз нам понадобятся три точки градиента. Как и в предыдущем случае, цвет всех точек одинаковый — второй серый цвет снизу второго столбца. Остальные настройки следующие: тип — линейный; угол 130⁰; первая точка градиента — положение 27%, яркость 15%; вторая точка градиента — положение 63%, яркость 50%; третья точка градиента — положение 75%, яркость –15%.

Теперь необходимо выбрать толщину контура, кликнув по верхней вкладке: Формат > Контур фигуры > Толщина > 0,5 пт. В том же пункте выбираем цвет — первый серый цвет снизу первого столбца.

11. Теперь займемся отверстием для зарядки и болтами возле него. Каждый болт состоит из двух фигур. Нижняя фигура — Овал (0,2 х 0,2 см), светло-серого цвета (второй цвет снизу первого столбца) без контура. Верхняя фигура — пятиконечная звезда. Для ее создания выбираем вкладку Вставка > Фигуры > 5-конечная звезда (0,15 х 0,15 см). Цвет: черный без контура. Обе фигуры необходимо выделить и выровнять относительно друг друга по центру и по середине, а также сгруппировать. Болты абсолютно одинаковы, так что можно сделать только один, а другой просто скопировать рядом.

Отверстие для зарядки, как вы, наверное, уже догадались, это скругленный прямоугольник (0,32 х 1,06 см), углы которого скруглены по максимуму. Цвет всех трех точек градиента такой же, как и в предыдущем этапе. Настройки градиента похожие: тип — линейный; угол 130⁰; первая точка градиента — положение 0%, яркость 15%; вторая точка градиента — положение 29%, яркость 50%; третья точка градиента — положение 94%, яркость –15%. Толщина контура 1 пт, цвет — второй серый цвет снизу первого столбца.

После того, как сделаете болты и отверстие для зарядки, выровняйте их посередине и выберите: Формат фигуры > Поворот объемной фигуры > Заготовки > Параллельно > Изометрический, вправо вверх.

12. Последние два Овала снизу — это вход для наушников (тот, что больше) и отверстие микрофона.

Отверстие микрофона — это точная копия отверстий динамика, просто скопируйте одно из них.
Вход для наушников делается из Овала (0,48 х 0,48 см) без контура. Цвет точек градиента одинаковый: второй серый цвет снизу второго столбца. Настройки градиента такие: тип — линейный; угол 30⁰; первая точка — положение 7%, яркость –18%; вторая точка градиента — положение 100%, яркость 37%.

Как всегда, оба отверстия выравниваем по середине, группируем и задаем получившейся группе поворот: Формат фигуры > Поворот объемной фигуры > Заготовки > Параллельно > Изометрический, вправо вверх.

13. Осталось сделать боковую панель. Кнопка выключения звука состоит из двух скругленных по максимуму прямоугольников. Нижний прямоугольник (0,3 х 0,85 см) темного-серого цвета (третий цвет снизу второго столбца) без контура. Верхний прямоугольник (0,16 х 0,85 см) светло-серого цвета (третий цвет снизу первого столбца) без контура. Перейдите во вкладку Формат фигуры > Формат объемной фигуры и задайте верхнему прямоугольнику следующие настройки — рельеф: сверху — угол, ширина 0,5 пт, высота 1 пт; глубина: глубина 1,5 пт; поверхность: материал — стандартный «пластик», освещение — нейтральное «три точки», угол освещения: 170⁰. Нижний прямоугольник настроек не требует. Для того чтобы повернуть прямоугольники в изометрической проекции, выберите для каждого из них: Формат фигуры > Поворот объемной фигуры > Заготовки > Параллельно > Изометрически, влево вниз.

Внимание! Не группируйте прямоугольники, пока полностью не сделаете каждый из них, иначе после настроек формата объема у вас могут возникнуть проблемы с перекрытием одного прямоугольника другим.

14. Кнопки регулировки громкости сделаны из трех скругленных по максимуму прямоугольников. Овалы самих кнопок (0,29 х 1,43 см) имеют точно такие же настройки, как и кнопка выключения звука в предыдущем этапе. Находящийся под ними скругленный прямоугольник (0,36 х 3,39 см) не имеет контура. Настройки градиента для него следующие: цвет обеих точек — третий темно-серый цвет снизу второго столбца; тип — линейный; угол 90⁰; первая точка градиента — положение 0%, яркость 29%; вторая точка градиента — положение 100%, яркость 75%. Поворот всех овалов: Формат фигуры > Поворот объемной фигуры > Заготовки > Параллельно > Изометрический, влево вниз.

После того, как сделаете все детали этого блока, не забудьте сгруппировать их для удобства постановки на место и перетягивания.

15. Серые полосы сбоку корпуса получены из двух фигур Блок-схема (Вставка > Фигуры > Блок-схема: сохраненные данные), размер каждой 0,5 х 0,4 см, поворот фигуры: Формат фигуры > Поворот объемной фигуры > Заготовки > Параллельно > Изометрически, влево вниз.

Настройки градиента: цвет обеих точек — второй светло-серый цвет снизу первого столбца; тип — линейный; угол 100⁰; первая точка градиента — положение 0%, яркость –35%, прозрачность 30%; вторая точка градиента — положение 100%, яркость –63%, прозрачность 0%.

16. Наш телефон готов. Осталось только вставить изображение в экран. Выделите белый прямоугольник экрана, правой клавишей мыши вызовите: Формат фигуры > Заливка > Рисунок или текстура > Вставить из: Файл. Затем выберите на своем компьютере изображение, которое хотите добавить на экран телефона, и нажмите кнопку Вставить. Я вставил заранее снятый скрин почтового приложения Mail.Ru. Вы можете добавить макет дизайна вашего приложения или любую другую картинку.

17. Чтобы картинка обрела законченный вид, необходимо закрасить фон. Для этого просто выделите пустые ячейки за телефоном и выберите подходящий цвет заливки в верхней вкладке: Главная > Шрифт > Цвет заливки.

Уже закончив изображение и взглянув на получившийся результат, я понял, что для пущей убедительности телефону не хватает небольшой тени. Вы спросите: «Неужели и это можно сделать в Excel’е?». Можно куда больше, но мы остановимся на этом.

Выделите нижний серый скругленный прямоугольник (корпус) и правой клавишей мыши вызовите окно Формат фигуры. Во вкладке Тень пропишите следующие настройки: цвет — черный, прозрачность — 62%, размер — 99%, размытие — 11 пт; угол — 60⁰; расстояние — 3 пт.

18. Последний вопрос, который нам предстоит решить, это, как получить файл с готовым изображением, над которым мы так долго работали. Есть несколько способов решения этой задачи. Я расскажу один наиболее простой и логичный — просто сделать снимок экрана.

У десктопной версии Облака Mail.Ru есть замечательная скриншотилка. Нажмите Shift+Ctrl+6, выделите часть экрана с изображением телефона и нажмите кнопку Готово. Ссылка на изображение сразу же попадет в ваш буфер обмена, а сама картинка в формате png будет лежать в вашем Облаке в папке Screenshots. Вот так, быстро и удобно, и не надо ничего отдельно вырезать и сохранять.

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

Для выполнения изометрической проекции любой детали не­обходимо знать правила построения изометрических проекций плоских и объемных геометрических фигур.

Правила построения изометрических проекций геометриче­ских фигур. Построение любой плоской фигуры следует начи­нать с проведения осей изометрических проекций.

При построении изометрической проекции квадрата (рис. 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).

  1. Способ построения изометрической проекции на основе по­следовательного удаления объемов используется в тех случаях, когда отображаемая форма получена в результате удаления из исходной формы каких-либо объемов (рис. 114).
  2. Способ построения изометрической проекции на основе по­следовательного приращения (добавления) объемов применяется для выполнения изометрического изображения детали, форма которой получена из нескольких объемов, соединенных опреде­ленным образом друг с другом (рис. 115).
  3. Комбинированный способ построения изометрической про­екции. Изометрическую проекцию детали, форма которой полу­чена в результате сочетания различных способов формообразо­вания, выполняют, используя комбинированный способ построе­ния (рис. 116).

Аксонометрическую проекцию детали можно выполнять с изображением (рис. 117, а) и без изображения (рис. 117, б) неви­димых частей формы.

Рис. 114. Построение изометрической проекции детали на основе последовательного удаления объемов

Рис. 115 Построение изометрической проекции детали на основе последовательного приращения объемов

Рис. 116. Использование комбинированного способа построения изометрической проекции детали


Рис. 117. Варианты изображения изометрических проекций детали: а — с изображением невидимых частей;
б — без изображения невидимых частей

ИЗОМЕТРИЧЕСКАЯ ПРОЕКЦИЯ

В изометрической проекции все коэффициенты равны между собой:

Следовательно, при построении изометрической проекции размеры предмета, откладываемые по аксонометрическим осям, умножают на 0,82. Такой перерасчет размеров неудобен. Поэтому изометрическую проекцию для упрощения, как правило, выполняют без уменьшения размеров (искажения) по осям х, у, I, т.е. принимают приведенный коэффициент искажения равным единице. Получаемое при этом изображение предмета в изометрической проекции имеет несколько большие размеры, чем в действительности. Увеличение в этом случае составляет 22% (выражается числом 1,22 = 1 : 0,82).

Каждый отрезок, направленный по осям х, у, z или параллельно им, сохраняет свою величину.

Расположение осей изометрической проекции показано на рис. 6.4. На рис. 6.5 и 6.6 показаны ортогональные (а) и изометрические (б) проекции точки А и отрезка Л В.

Шестигранная призма в изометрии. Построение шестигранной призмы по данному чертежу в системе ортогональных проекций (слева на рис. 6.7) приведено на рис. 6.7. На изометрической оси I откладывают высоту Н, проводят линии, параллельные осям хиу. Отмечают на линии, параллельной оси х, положение точек / и 4.

Для построения точки 2 определяют координаты этой точки на чертеже — х2 и у2 и, откладывая эти координаты на аксонометрическом изображении, строят точку 2. Таким же образом строят точки 3, 5 и 6.

Построенные точки верхнего основания соединяют между собой, проводят ребро из точки / до пересечения с осью х, затем —

ребра из точек 2, 3, 6. Ребра нижнего основания проводят параллельно ребрам верхнего. Построение точки Л, расположенной на боковой грани, по координатам хА (или уА) и 1А очевидно из

Изометрия окружности. Окружности в изометрии изображаются в виде эллипсов (рис. 6.8) с указанием величин осей эллипсов для приведенных коэффициентов искажения, равных единице.

Большая ось эллипсов расположена под углом 90° для эллипсов, лежащих В ПЛОСКОСТИ хС>1 к ОСИ у, В ПЛОСКОСТИ у01 К ОСИ X, в плоскости хОу К ОСИ ?.

При построении изометрического изображения от руки (как рисунка) эллипс выполняют по восьми точкам. Например, лоточкам 1, 2, 3, 4, 5, 6, 7 и 8 (см. рис. 6.8). Точки 1, 2, 3 и 4 находят на соответствующих аксонометрических осях, а точки 5, 6, 7 и 8 строят по величинам соответствующих большой и малой осей элипса. При вычерчивании эллипсы в изометрической проекции можно заменять овалами и строить их следующим образом 1 . Построение показано на рис. 6.8 на примере эллипса, лежащего в плоскости xOz. Из точки / как из центра, делают засечку радиусом R = D на продолжении малой оси эллипса в точке О, (строят также аналогичным образом и симметричную ей точку, которая на чертеже не показана). Из точки О, как из центра проводят дугу CGC радиуса D, которая является одной из дуг, составляющих контур эллипса. Из точки О, как из центра проводят дугу радиуса O^G до пересечения с большой осью эллипса в точках Оу Проводя через точки Ор 3 прямую, находят в пересечении с дугой CGC точку К, которая определяет 3К — величину радиуса замыкающей дуги овала. Точки К являются также точками сопряжения дуг, составляющих овал.

Изометрия цилиндра. Изометрическое изображение цилиндра определяется изометрическими изображениями окружностей его основания. Построение в изометрии цилиндра высотой Н по ортогональному чертежу (рис. 6.9, слева) и точки С на его боковой поверхности показано на рис. 6.9, справа.

Предложено Ю.Б. Ивановым.

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

Изометрическая проекция

Для отображения изометрической проекции нажмите кнопку «Изометрическая проекция» (Рис. 8) на Панели Режимов Визуализации и Управления Изображением или выберите команду «Изо проекция» из меню «Вид».

Рис. 8. Кнопка «Изометрическая проекция»
(Панель Режимов Визуализации и Управления Изображением).

Ориентация осей изометрической проекции может быть задана произвольно. Исходная ориентация осей изометрической проекции показана на Рис. 9. Рис. 9. Исходная ориентация осей изометрической проекции.

Чтобы интерактивно изменить ориентацию осей изометрической проекции:

1. Нажмите кнопку «Ориентация осей» (Рис. 10) на Панели Режимов Визуализации и Управления Изображением. Появится запрос «Центральная точка?».

Рис. 10. Кнопка «Ориентация осей»
(Панель Режимов Визуализации и Управления Изображением).

2. Укажите точку, относительно которой будет изменяться ориентация осей изометрической проекции. На экране появится куб ориентации осей.

· Ориентация осей изменяется с помощью мыши или клавиш со стрелками.

· Чтобы установить шаг изменения углов, нажмите клавишу на клавиатуре и задайте нужное значение в градусах.

· Чтобы зафиксировать выбранную ориентацию осей, нажмите левую кнопку мыши или клавишу на клавиатуре.

· Чтобы восстановить исходную ориентацию осей, нажмите клавишу .

· Для завершения нажмите среднюю кнопку мыши или клавишу на клавиатуре.

В ADEM3D реализована возможность автоматической ориентации осей изометрической проекции относительно абсолютной системы координат таким образом, чтобы нормаль к центру указанного сегмента поверхности 3D модели была направлена вдоль одной из осей абсолютной системы координат: OX, OY, OZ.

Оси абсолютной системы координат расположены в изометрической проекции следующим образом: плоскость XZ параллельна плоскости экрана, ось X направлена горизонтально вправо, ось Z направлена вертикально вверх, ось Y направлена от экрана перпендикулярно его плоскости.

Чтобы автоматически изменить ориентацию осей изометрической проекции:

1. Укажите сегмент поверхности 3D модели и одновременно нажмите правую и левую кнопки мыши. Появятся дополнительные опции:

2. Выберите ось, вдоль которой будет направлена нормаль к указанному сегменту.

Не нашли то, что искали? Воспользуйтесь поиском:

Лучшие изречения: Сдача сессии и защита диплома — страшная бессонница, которая потом кажется страшным сном. 8774 — | 7145 — или читать все.

188.64.174.135 © studopedia.ru Не является автором материалов, которые размещены. Но предоставляет возможность бесплатного использования. Есть нарушение авторского права? Напишите нам | Обратная связь.

Отключите adBlock!
и обновите страницу (F5)

очень нужно

Основы изометрического рендеринга

В этом уроке Вы узнаете, как настроить камеру для создания изометрических изображений в Blender.

Финальный результат

Вступление

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

Слово “изометрическая” пришло из греческого языка и означает “равный размер”, отражая тот факт, что в этой проекции масштабы по всем осям равны. В других видах проекций это не так.

До появления “крутых” графических ускорителей, многие игры использовали изометрическую проекцию. В начале 2000-х их количество становилось все меньше, но с появлением относительно слабых мобильных устройств, данная тенденция снова набирает обороты.

Создание изометрической сцены

Определившись с понятием изометрии перейдем к созданию данной проекции в Blender. Самое главное при изометрическом рендеринге – это камера. В первую очередь необходимо изменить ее тип на ортографический:

Далее, камеру нужно расположить в правильном месте. Для этого установите ее положение по осям:

  • X: 12
  • Y: -12
  • Z: 12

Также, камеру нужно повернуть по всем трем осям:

  • X: 54.8
  • Y: 0
  • Z: 45

Для изометрического рендеринга очень хорошо подходит “квадратная камера” (соотношение сторон 1:1). Если необходимо приблизить/отдалить камеру, используйте параметр Ortographic Scale:

Настройка камеры завершена и теперь можно приступать к созданию сцены. В качестве примера для данного урока была создана простая low-poly сцена:

Также было настроено освещение:

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

  • X: 54.8
  • Y: 0
  • Z: 45

Вот собственно и все! Как видите ничего сложного в этом нет. Для создания подобной сцены Вам потребуется не более 5 минут ;)

Проецирование пространственных сцен

Основные типы проекций

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

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

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

Плоские геометрические проекции подразделяются на два основных класса: центральные и параллельные. Различие между ними определяется соотношением между центром проекции и проекционной плоскостью. Если расстояние между ними конечно, то проекция будет центральной, если же оно бесконечно, то проекция будет параллельной. Параллельные проекции названы так потому, что центр проекции бесконечно удален и все проекторы параллельны. При описании центральной проекции мы явно задаем ее центр проекции, в то время как, определяя параллельную проекцию, мы указываем направление проецирования. На рис. 7.1 и 7.2 показаны две различные проекции одного и того же отрезка, а также проекторы, проходящие через его конечные точки. Поскольку проекция отрезка сама является отрезком, то достаточно спроецировать одни лишь конечные точки и соединить их.

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

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

Параллельные проекции

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

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

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

Аксонометрические проекции подразделяются на три группы в соответствии с расположением проекционной плоскости по отношению к осям координат. Если нормаль к проекционной плоскости образует три различных угла с осями, то проекция называется триметрической ( триметрией ). Если два из этих углов одинаковы, то получаем диметрическую проекцию ( диметрию ). И, наконец, если все три угла равны между собой, то проекция называется изометрической ( изометрией ). Изометрическая проекция обладает тем свойством, что все три главные координатные оси одинаково укорачиваются. Поэтому можно проводить измерения вдоль направления осей с одним и тем же масштабом (отсюда название: «изо», что означает «равно», и «метрия» — «измерение»). Кроме того, главные координатные оси проецируются так, что их проекции составляют равные углы друг с другом (рис. 7.4).

Косоугольные проекции также являются параллельными, причем проекционная плоскость перпендикулярна главной координатной оси. Сторона объекта, параллельная этой плоскости, проецируется так, что можно измерять углы и расстояния. Проецирование других сторон объекта также допускает проведение линейных измерений (но не угловых) вдоль главных осей. Мы коснемся только двух наиболее часто используемых косоугольных проекций: проекции кавалье ( cavalier ) и кабине ( cabinet ). В отечественной практике эти проекции называют горизонтальной косоугольной изометрией и кабинетной проекцией.

В проекции горизонтальной косоугольной изометрии направление проецирования составляет с плоскостью угол 45 . В результате проекция отрезка, перпендикулярного проекционной плоскости, имеет ту же длину, что и сам отрезок, т.е. укорачивание отсутствует (рис. 7.5a). Кабинетная проекция имеет направление проецирования, которое составляет с проекционной плоскостью угол При этом отрезки, перпендикулярные проекционной плоскости, после проецирования составляют 1/2 их действительной длины, что более соответствует нашему визуальному опыту, поэтому изображение выглядит более реалистично (рис. 7.5b).

Понравилась статья? Поделиться с друзьями:
Кодинг, CSS и SQL