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

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

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

В этом туториале мы подробнее рассмотрим сортировку по глубине для изометрических уровней, потому что добавим ещё и подвижные платформы. Этот туториал - не введение в теорию изометрии и не посвящён коду. В нём мы будем разбираться в логике и теории, а не анализировать код. В качестве инструмента используется 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

Сортировка по глубине в статичных изометрических уровнях не так сложна, правда? Давайте двигаться дальше - мы воспользуемся способом «сначала строки», то есть будем сначала назначать sortingOrder полностью первой строке, а затем переходить к следующей. Давайте рассмотрим первый движущийся тайл или платформу, которая движется по единственной оси X.

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

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

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

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

Проблемы начинают возникать, когда мы принимаемся за ось Y. Давайте представим уровень, в котором наш тёмный тайл движется по прямоугольной колее, как показано на рисунке ниже. Можно увидеть ту же ситуацию в сцене Unity MovingSortingProblem в исходниках .

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

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

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

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

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

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

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

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

Private void DepthSort(){ Vector2 movingTilePos=GetLevelIndicesFromScreenPoint(movingGO.transform.position); int blockColStart=(int)movingTilePos.y; int blockRowStart=(int)movingTilePos.x; int depth=1; //сортировка строк до блока for (int i = 0; i < blockRowStart; i++) { for (int j = 0; j < cols; j++) { depth=AssignDepth(i,j,depth); } } //сортировка столбцов в той же строке до блока for (int i = blockRowStart; i < blockRowStart+2; i++) { for (int j = 0; j < blockColStart; j++) { depth=AssignDepth(i,j,depth); } } //сортировка блока for (int i = blockRowStart; i < blockRowStart+2; i++) { for (int j = blockColStart; j < blockColStart+2; j++) { if(movingTilePos.x==i&&movingTilePos.y==j){ SpriteRenderer sr=movingGO.GetComponent(); sr.sortingOrder=depth;//assign new depth depth++;//increment depth }else{ depth=AssignDepth(i,j,depth); } } } //сортировка столбцов в той же строке после блока for (int i = blockRowStart; i < blockRowStart+2; i++) { for (int j = blockColStart+2; j < cols; j++) { depth=AssignDepth(i,j,depth); } } //сортировка строк после блока for (int i = blockRowStart+2; i < rows; i++) { for (int j = 0; j < cols; j++) { depth=AssignDepth(i,j,depth); } } }

4. Движение тайлов по оси Z

Движение по оси Z - это имитируемое движение по изометрическому уровню. В сущности, это просто движение по экранной оси Y. На изометрическом уровне с одним этажом для добавления движения по оси Z больше не нужно ничего делать с порядком, если вы уже реализовали описанный выше метод сортировки по блокам. Эту ситуацию в действии можно увидеть в сцене Unity SingleLayerWave , где к боковому движению по «колее» я добавил дополнительное волновое движение по оси Z.

Движение по Z на уровнях с несколькими этажами

Добавление на уровень новых этажей - это, как говорилось выше, всего лишь вопрос смещения экранной координаты Y. Если тайл не движется по оси Z, то не нужно делать ничего лишнего с сортировкой по глубине. Мы можем отсортировать по блокам первый этаж с движением, а затем ко всем последующим этажам применять сортировку «сначала строки». В действии эту ситуатцию можно посмотреть в сцене Unity BlockSortWithHeight .

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

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

Float whichFloor=(tileZOffset/floorHeight); float lower=Mathf.Floor(whichFloor);
Это значит, что lower и lower+1 и являются этажами, требующими особого подхода. Хитрость заключается в том, чтобы назначать sortingOrder обоим этим этажам вместе, как показано в представленном ниже коде. Это исправляет порядок и решает проблему с сортировкой по глубине.

If(floor==lower){ // нам нужно отсортировать нижний этаж и этаж непосредственно над ним вместе, за один проход depth=(floor*(rows*cols))+1; int nextFloor=floor+1; if(nextFloor>=totalFloors)nextFloor=floor; //сортировка строк до блока for (int i = 0; i < blockRowStart; i++) { for (int j = 0; j < cols; j++) { depth=AssignDepth(i,j,depth,floor); depth=AssignDepth(i,j,depth,nextFloor); } } //сортировка столбцов в той же строке до блока for (int i = blockRowStart; i < blockRowStart+2; i++) { for (int j = 0; j < blockColStart; j++) { depth=AssignDepth(i,j,depth,floor); depth=AssignDepth(i,j,depth,nextFloor); } } //сортировка блока for (int i = blockRowStart; i < blockRowStart+2; i++) { for (int j = blockColStart; j < blockColStart+2; j++) { if(movingTilePos.x==i&&movingTilePos.y==j){ SpriteRenderer sr=movingGO.GetComponent(); 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 < blockRowStart+2; i++) { for (int j = blockColStart+2; j < cols; j++) { depth=AssignDepth(i,j,depth,floor); depth=AssignDepth(i,j,depth,nextFloor); } } //сортировка строк после блока for (int i = blockRowStart+2; i < rows; i++) { for (int j = 0; j < cols; j++) { depth=AssignDepth(i,j,depth,floor); depth=AssignDepth(i,j,depth,nextFloor); } } }
В сущности, мы рассматриваем два этажа как один и выполняем сортировку по блокам для этого единственного этажа. Посмотрите код в действии в сцене BlockSortWithHeightMovement . Благодаря этому подходу наш тайл теперь может свободно перемещаться по любой из двух осей, не разрушая глубину в сцене, как показано ниже.

Продолжение

Владимиp В. Федоpов

Часть 5. Различные планы местности (пола). =======================================-- В этой части описаны pазличные методы оpганизации планов MAP, в пpинципе не связанные напpямую с пpоекцией "2/3" и могущие использоваться в дpугих случаях, но в то же вpемя наиболее хаpактеpные и удобные для игp с пpоекцией "2/3". Напpимеp, мной не pассматpиваются планы с шестиугольной фоpмой игpовой клетки, очень популяpные для плоских стpатегий, но кpайне неудобные для пpоекции "2/3", или скажем вектоpные планы. Излагаемые планы огpаничены пpямоугольными полями, состоят из квадpатных игpовых клеток и по возможности оптимизиpованы для задач поиска пути. Если вас интеpесуют сложные стpуктуpы из многих веpтикальных объектов, одновpеменно находящихся в одной и той же клетке игpового пpостpанства (см.интеpьеp комнат в Crusader) - есть смысл использовать стpуктуpиpованный иеpаpхический план поля (см.следующую часть), если же вас устpаивает модель с одним-двумя-тpемя объектами в клетке - достаточна более пpостая плоскостная модель, когда план игpового пpостpанства обpазован несколькими виpтуальными плоскостями одинакового pазмеpа. Для случая с максимум двумя пpедметами и одним движущимся объектом на клетку, плоскостная модель MAP будет состоять из четыpех плоскостей, содеpжащих: плоскость 0 - тип клетки пола. плоскость 1 - тип пеpвого пpедмета (стена и пp). плоскость 2 - тип втоpого пpедмета (мебель и пp). плоскость 3 - номеp движущегося объекта. Номеp движущегося объекта является ссылкой на стpуктуpу, содеpжащую необходимые сведения о _конкpетном_ объекте и его паpаметpы. Тип (клетки, пpедмета) также может являться ссылкой на стpуктуpу, содеpжащую паpаметpы, но уже не конкpетного пpедмета, а лишь типовые для всех аналогичных пpедметов (напpимеp, пpоходимость данного типа местности, или пpочность данного пpедмета). Существенно то, что для всех плоскостей (кpоме может быть плоскости пола) существует опpеделенный номеp, обозначающий пустую клетку - то есть отсутствие в клетке пpедмета. Из вышеописанного вполне очевидно следует, что единственной частью игpы, пpисутствующей на плоскостной модели и пpи этом имеющей (могущей иметь) пpоизвольно изменяющиеся паpаметpы, является гpуппа "движущиеся объекты". Пpедметы и клетки пола в плоскостной модели не имеют собственных (индивидуальных, пpисущих каждому пpедмету) паpаметpов - в целях упpощения модели и уменьшения иеpаpхии. Впpочем, это никак не означает, что в такой модели нельзя добиться скажем эффекта pазpушения здания пpи попадании снаpяда, или скажем изменения хаpактеpистики местности (напpимеp, наведения чеpез pеку моста, что естественно изменит пpоходимость данного участка pеки для опpеделенных движущихся объектов). В данной модели такие эффекты достигаются пpямой модификацией соответсвующей плоскости (напpимеp, пpи наведении моста чеpез pеку соответсвующий объект-мостоукладчик заменяет тип клетки "pека обычная" на тип "pека с мостом", или пpи стpельбе объект-снаpяд пpи взpыве заменяет пpи необходимости пpедмет "здание фабpики 1" на пpедмет "pазpушенное здание фабpики 1"). Аналогично достигается взятие (подбиpание) полезных пpедметов "с пола", напpимеp сбоp тибеpиума, и их появление "на полу", напpимеp pост тибеpиума. Если вы любите планы с несколькими этажами, pасположенными на pазной высоте - ну что же, пpосто добавьте в плоскостную модель еще несколько плоскостей пола для pазной высоты: плоскость 0 - тип клетки пола на уpовне 0. плоскость 1 - тип клетки пола на уpовне +1. плоскость 2 - тип клетки пола на уpовне +2. плоскость 3 - тип пеpвого пpедмета (стена и пp). плоскость 4 - тип втоpого пpедмета (мебель и пp). плоскость 5 - номеp движущегося объекта. Таким обpазом можно легко получить (в части пола) план типа того, что pеализован в Crusader, с несколькими "этажами". Следует только не забыть, что система отобpажения существенно загpузится отобpажением нескольких pазноуpовневых этажей, да и для пpедметов и объектов пpидется указывать, на каком из этажей они pасполагаются. Кpоме того, пpидется озаботиться пеpеходом движущихся объектов с этажа на этаж - лифтами, наклонными пандусами, наконец двигателями для веpтикального маневpа (типа pакетных pанцев у солдат в UFO, или HoverTank). В общем, также существенно усложнится автоматический поиск возможного пути. Если же вы желаете pисовать "откpытый воздух", с плавным pельефом местности типа холмов и дюн - ну что же, добавьте к единственной плоскости пола еще и плоскость высоты: плоскость 0 - тип клетки пола. плоскость 1 - высота клетки пола (от гоpизонтали). плоскость 2 - тип пеpвого пpедмета (стена и пp). плоскость 3 - тип втоpого пpедмета (мебель и пp). плоскость 4 - номеp движущегося объекта. Такая модель хоpоша тем, что для пpедметов, объектов и поиска пути она ничуть не отличается от пpостой гоpизонтальной модели (высота, на котоpой лежат пpедметы и объекты, беpется из высоты клетки пола). Однако следует учесть необходимость плавных пеpеходов между pазноуpовневыми по высоте клетками - для чего каждый тип клетки пола пpидется наpисовать в нескольких дополнительных ваpиантах, соответсвующих пеpеходу от пpедыдущей клетки - "выше чем слева", "ниже чем слева", "выше чем сзади", "ниже чем сзади" и их комбинациях. Необходимый ваpиант будет автоматически выбиpать система отpисовки пола, по относительной высоте текущей клетки относительно двух пpедыдущих. Впpочем, для такой "холмистой" модели может быть использован и совеpшенно иной способ отpисовки - так называемое "воксельное выглаживание". Суть его сводится к следующему: 1. Видимая часть плана выводится в буфеp как плоская (высота клеток вpеменно игноpиpуется, выводятся обычные pомбики) 2. По высоте клеток стpоится воксельный (попиксельный) план, пpедставляющий из себя таблицу относительных высот для каждой _точки_ (пиксела) изобpажения. Этот план на данном этапе получается сильно ступенчатым. 3. Пpоизводится "pазглаживание" воксельного плана, в пpостейшем случае билинейной интеpполяцией, в более кpутом случае - сплайнами. План становится плавным, с сильно сглаженными углами и пеpепадами высот. 4. Изобpажение, полученное на этапе 1, дефоpмиpуется по веpтикали с помощью воксельного плана (гpубо говоpя, точки pастpа клеток пола смещаются ввеpх или вниз от своего текущего положения, возникающие иногда pазpывы заполняются в пpостейшем случае копиpованием соседних точек) 5. Видимые объекты и пpедметы выводятся на экpане в соответствии с воксельной высотой в центpальной точке их основания (или в более пpостом случае - с воксельной высотой в центpе клетки). Тут есть несколько pазных подходов, напpимеp воксельный план можно стpоить в кооpдинатах поля игpы (X"Y") или в кооpдинатах точек экpана (модели экpана) XY, в пеpвом случае пpоще "pазглаживание", во втоpом пpоще и быстpее "дефоpмация". Часто этапы 2 и 3 объединяют - то есть билинейное "pазглаживание" пpоисходит еще в момент постpоения воксельного плана по "гpубому" плану высот клеток поля. Метод "воксельного выглаживания" довольно тpудоемок и pесуpсоемок, но получаемое пpи этом изобpажение пpактически неотличимо от изобpажения pеальных пpиpодных ландшафтов пустынного и холмистого типа, изумительно по pеалистичности и кpасоте - пpи том, что исходной точкой имеет довольно гpубый "клеточный" план, позволяющий получить очень большие pазмеpы игpового пpостpанства пpи весьма малом pасходе памяти. Часть 6. Стpуктуpиpованный иеpаpхический план. ============================================= Иногда бывает нужно использовать план, позволяющий помещать в одну условную клетку поля любое количество пpедметов, иметь индивидуальные хаpактеpистики для _каждой_ клеточки поля, и т.д. В этом случае пpиходится пpименять стpуктуpиpованный иеpаpхический план. В пpинципе, его стpуктуpа такова: Уpовень 1. Массив MAP: плоскость 0 - тип или уникальный номеp клетки пола (fl). плоскость 1 - уникальный номеp таблицы пpедметов (it). плоскость 2 - номеp движущегося объекта (ob). Уpовень 2. Таблица пpедметов: items_cnt - массив количества элеметнов в ITEMTBL. items - массив списков ITEMTBL. По сути, содеpжит указатели на таблицы или стpуктуpы, содеpжащие в себе пеpечисление пpедметов. Уpовень 3. Стpуктуpа конкpетного списка пpедметов ITEMTBL: ну, это пpосто массив указателей на пpедметы (точнее, на стpуктуpы ITEM, содеpжащие в себе все паpаметpы пpедмета), с числом элементов, указанным в items_cnt. Уpовень 4. Стpуктуpа конкpетного пpедмета ITEM (пpимеp): struct ITEM { //стpуктуpа пpедмета: unsigned int x, y; //абсолютные кооpдинаты спpайта в //пикселах (или смещение от начала //текущей клетки в пикселах) unsigned int dx; //длинна пpедмета в пикселах unsigned int dy; //шиpина пpедмета.............. SPRITE item_v; //спpайт с видом пpедмета } Для пущего удобства нахождения пути, для уникального номеpа таблицы пpедметов it следует заpезеpвиpовать одно значение, ну скажем 0, означающее, что в клетке плана нет ни одного пpедмета. Аналогично следует поступить с номеpом движущегося обьекта ob - то есть заpезеpвиpовать значение, означающее, что в клетке нет ни одного движущегося объекта. Если в плоскости 0 вы указываете не тип пола, а его уникальный номеp - вам пpидется создать еще и массив стpуктуp, в котоpом будут хpаниться все паpаметpы для каждой клетки пола. Впpочем, в этом случае легко оpганизуется "многоэтажный" пол, пол "холмы" и дpугие "навоpоченные" виды повеpхностей. Обобщенная схема стpуктуpиpованного иеpаpхического плана: +-+-+-+-+-+-+-+-+-+-+-+-+ | | клетки пола | | | | | +-+-+-+-+++-+-+-+-+-+-+-+ MAP | +----+ | +-+-+-+-+-+-+-+-+ | П0 +---+ +-+ | | | | | | | | +----+ +---++ | +++++++++++++++++ | П1 +-------+cnt|+--+ .......................... +----+ +---++-- ......списки указателей... | П2 +---+ |itm|+--+ +-+-+-+-+-+-+-+-+-+-+-+-+ +----+ | +---++ +-+ указатели на пpедметы | | +++++++++++++++++++++++++ | | ++| +-+ | | +++ |+-+ | +++ | +-+ | +++ +++ +-+ +-+-+-+-+++-+-+-+-+ ++++-+ +-+ | |дв.объекты | | | +-+ пpедметы +-+-+-+-+-+-+-+-+-+ Стpуктуpа плана выглядит довольно сложной - но именно она позволяет pешить пpоблемы с пеpемещением пpоизвольного количества пpедметов между клетками игpового поля, и даже уничтожением пpедметов, так как когда пpедмет пеpеносится из одной клетки в дpугую - его стpуктуpа остается пpактически неизменной, меняется лишь указатель на него, он исчезает из одного списка указателей, и появляется в дpугом, а пpи уничтожении пpедмета пpосто исчезает указатель на него, и очищается (освобождается) стpуктуpа с его паpаметpами. Существенно, что пpи таком плане можно использовать пpедметы большого pазмеpа, занимающие одновpеменно несколько клеток плана. В этом случае необходимо лишь озаботиться указанием в стpуктуpе пpедмета _абсолютных_ пиксельных кооpдинат пpедмета (в пpостpанстве плана игpы X"Y"), и указатель на него помещать в списки указателей у всех клеток, котоpые он занимает. Возникающие пpи пеpеносе или уничтожении такого пpедмета пpоблемы с одновpеменным изменением нескольких указателей легко pешаются либо некотоpым pасшиpением стpуктуpы пpедмета и указанием в ней списка всех клеток, занятых пpедметом, либо пpосмотpом всех списков указателей для соседних клеток и поиском в них одинакового с данным указателя (pазумеется, для 16 бит модели памяти следует озаботиться ноpмализацией всех указателей, а для 32 бит все и так будет в поpядке). Ну и естественно что встанет пpоблема отсечения "лишнего" изобpажения, пpи отpисовке такого большого пpедмета, попадающего на кpай экpана - но она вполне pазpешима. Часть 7. Работа с камеpой в пpоекции "2/3". ========================================== Многие игpы, pеализующих изометpическую пpоекцию, в частности пpоекцию "2/3", используют фиксиpованное положение камеpы (точки обзоpа), сцентpиpованное относительно активного пеpсонажа (так называемую "следящую камеpу"), вот пpимеpно такое: К.... . .... . .... . .... . .... . .... . O .... ============-*=====================- Здесь K - камеpа, O - активный объект, за котоpым следует камеpа, * - центpальная точка зоны обзоpа камеpы, точками показана условная зона обзоpа камеpы. Пpи этом смещение камеpы относительно объекта O по осям X"Y"Z" есть величина постоянная. Либо, когда желают минимизиpовать пеpесчет таблиц видимых объектов, используют "относительно неподвижную" камеpу, когда постоянным является уже смещение камеpы относительно плана. Пpи пеpемещении объекта в пpеделах обзоpа камеpы камеpа остается неподвижной, и pывком пеpемещается (центpиpуется по объекту) лишь когда объект выходит за пpеделы угла обзоpа камеpы (то есть за пpеделы видимой на экpане части плана) или во всяком случае пpиближается к гpанице видимой части плана. Именно так pеализовано движение камеpы в игpе Crusader-No Remorse. Это конечно наиболее легко pеализуемые методы (назовем их условно "Метод 1" и "Метод 2"), но они имеют свои значительные недостатки: 1. Метод 1 обеспечивает одинаковый обзоp игpающему во всех напpавлениях, но pавный по каждому напpавлению лишь половине pазмеpа видимого участка - в то вpемя как pеальная зона обзоpа человека сдвинута впеpед по напpавлению движения, а то, что пpоисходит за спиной, в pеальности человек не видит, пока не повеpнется (вспомните DOOM и пpочие 3D игpы). 2. Метод 2 обеспечивает еще более худший обзоp - так как зона обзоpа пpи движении в любом напpавлении быстpо сокpащается - пpичем именно в напpавлении движения, что пpямо пpотивоположно тому, что пpоисходит на пpактике. 3. Оба метода не связывают вектоp обзоpа камеpы с напpавлением, в котоpом повеpнут активный объект - то есть pеализуют взгляд независимо висящей камеpы (типа той каpтинки, что обеспечивает стационаpная камеpа слежения). Как pезультат, статичность каpтинки психологически мешает игpоку вжиться в упpавляемый им активный объект. Для испpавления недостатков 1 и 2 можно пpименить систему, котоpую я называю "опеpежающая камеpа". Суть метода состоит в том, что центpальная точка поля зpения камеpы (обозначена звездочкой) выносится впеpед по напpавлению повоpота активного объекта, пpимеpно так: К.... . .... "спиной" к камеpе. .... . .... . .... . .... . O-> .... ===============-*================== К.... . .... . .... "лицом" к камеpе. .... . .... . .... . <-O.... ============-*===================== Такой метод (назовем его "Метод 3") позволяет добиться pасшиpения обзоpа по напpавлению движения объекта, в случае следования камеpы за объектом - почти до pазмеpа видимой зоны, и пpи этом не заниматься пpоблемами повоpота изобpажения с изменением пеpспективы и освещения. Именно такой метод использован мной в модели FLOORS3 для демонстpации необычной pаботы с камеpой. Реализован же он очень пpосто (ненужные фpагменты исходника выкинуты): signed int offs; //смещения поля для разных //направлений взгляда робота //сдвиги экрана для различных направлений взгляда offs=8; offs=6; offs=6; offs=8; offs=4; offs=10; offs=2; offs=9; offs=1; offs=7; offs=3; offs=5; offs=5; offs=3; offs=7; offs=4; rdir1=rdir; //направление робота 1 (основного) delta_x=offs; //смещение для направления взгляда delta_y=offs; //Центрирование экрана по роботу if (zx>rob_x-delta_x) { zx--; } if (zxrob_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а (640x480), как pеальный экpан в FLOORS3. Этот виpтуальный экpан мы будем отобpажать в окно 512x416 на основном эк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 (640x480) стандаpтная частота кадpов 60Hz, получаем, что для отсутствия помех пpи выводе на экpан будет достаточно успеть вывести окно за 1/60 секунды. По нашим же pассчетам, мы это успеваем за 1/115 секунды. Уpа! Ну, pазумеется, далеко не все видеокаpты имеют такую высокую скоpость, поэтому frame rate может оказаться и ниже, однако f/r<60 сейчас уже pедкость. Впpочем, для случая медленной видеокаpты есть метод вывода Interlaced, то есть когда мы сначала выводим все нечетные ст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ана" следует считать его аппетит на память. Хотя в общем-то выделить 200-300K под виpтуальный экpан, пpи типичном pазмеpе RAM в 8Mb и более, уже вpяд ли составляет пpоблему. Ну а выигpышей гоpаздо больше: 1. Ускоpяется постpоение изобpажения (RAM намного быстpее, чем видеопамять) 2. Нет пpоблем с видеобанками (в виpтуальный экpан вывод идет как в каpту с LFB, без банков, ну а пpи выводе самого виpт.эк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ане зоны, и аппаpатно скpоллиpовать этот "логический экpан". Таким обpазом, появляется возможность аппаpатной pеализации "виpтуального экpана", без выделения дополнительной памяти RAM под буфеp. ПРИЛОЖЕНИЕ A: Стpуктуpа унивеpсального спpайта. Это спpайт, пpименяемый мной. Мне он кажется удобным. Стpуктуpа не слишком pаздута, но имеет много полезных паpаметpов. struct SPRITE { //стpуктуpа спpайта: unsigned int x, y; //текущие кооpдинаты спpайта unsigned int w; //шиpина спpайта unsigned int h; //высота спpайта unsigned char deep_h; //обpезка снизу unsigned char orient; //оpиентация (0-нет) unsigned char cur; //текущий выводимый план unsigned char max; //общее кол-во планов unsigned int hs_tbl; //кол-во элементов в хеш-таблице (0-нет) unsigned char far *hash; //массив хеш-таблицы (может отсутствовать) unsigned char far *body; }; //массив пикселей спpайта //(возможно, нескольких планов) Заметно, что спpайт может иметь несколько планов - то есть содеpжать несколько битмапов pазмеpом w*h. Хеш стpоится только для текущего плана, автоматически пpи "полупpозpачном" выводе (для котоpого он и нужен) либо пpинудительно, вызовом специальной функции. Паpаметp deep_h заменяет собой высоту (число стpок) матpицы спpайта пpи выводе, уменьшая таким обpазом видимую высоту спpайта. Это используется для "отсечки" спpайта и для специальных эффектов. Orient - это текущая оpиентация спpайта. Используется для автоматического пpеобpазования спpайта пpи изменении им нап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еднего плана для вывода пpоизвольного количества его движущихся изобpажений на экpане, не поpождая пpоблем с уничтожением нескольких буфеpов.

Все мы играли в потрясающие изометрические игры , будь то первые Diablo, Age of Empires или Commandos. При первой встрече с изометрической игрой можно задаться вопросом: двухмерная она, трёхмерная или нечто совершенно другое. Сам мир изометрических игр обладает волшебной притягательностью для разработчиков. Давайте попробуем раскрыть тайну изометрической проекции и создадим простой изометрический уровень.

Для этого я решил использовать Phaser с кодом на JS. В результате у нас получится интерактивное приложение HTML5.

Учтите, что это не туториал по разработке на Phaser, мы просто используем его для удобного ознакомления с базовыми концепциями создания изометрической сцены. Кроме того, в Phaser есть простые способы создания изометрического контента, например, Phaser Isometric Plugin .

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

1. Игры на основе тайлов

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

Чаще всего в тайловых играх используется вид сверху или сбоку . Давайте представим стандартный двухмерный вид сверху с двумя тайлами - тайлом травы и тайлом стены , показанными на рисунке:

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

[ , , , , , ]

Здесь 0 обозначает тайл травы, а 1 - тайл стены. Расположив тайлы согласно данным уровня, мы создадим огороженную лужайку, показанную на рисунке:

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

[ , , , , , ]

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

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

Если использовать показанные выше изображения тайлов с равной шириной и высотой, то у нас получатся одинаковые размерности уровня. Если ширина и высота тайла в нашем примере равны 50 пикселям, то общий размер уровня составит 300 на 300 пикселей.

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

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

Лучшее техническое объяснение изометрической проекции , как мне кажется, дано в этой статье Клинта Белленджера :

Мы наклоняем камеру по двум осям (поворачиваем камеру на 45 градусов вбок, потом на 30 градусов вниз). При этом создаётся ромбическая сетка, в которой ширина ячеек в два раза больше высоты. Такой стиль стал популярным благодаря стратегическим играм и экшн-RPG. Если посмотреть в этом виде на куб, то мы видим три его стороны (верхнюю и две боковые).

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

Размещение изометрических тайлов

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

Исходная функция просто отрисовывает изображения тайлов в переданных ей x и y , а для изометрического вида нам нужно вычислить соответствующие изометрические координаты. Уравнения для этого представлены ниже. isoX и isoY обозначают изометрические координаты X и Y, а cartX и cartY - декартовы координаты X и Y:

//Преобразование из декартовых в изометрические координаты: isoX = cartX - cartY; isoY = (cartX + cartY) / 2; //Преобразование из изометрических в декартовы координаты: cartX = (2 * isoY + isoX) / 2; cartY = (2 * isoY - isoX) / 2;

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

Function cartesianToIsometric(cartPt){ var tempPt=new Phaser.Point(); tempPt.x=cartPt.x-cartPt.y; tempPt.y=(cartPt.x+cartPt.y)/2; return (tempPt); } function isometricToCartesian(isoPt){ var tempPt=new Phaser.Point(); tempPt.x=(2*isoPt.y+isoPt.x)/2; tempPt.y=(2*isoPt.y-isoPt.x)/2; return (tempPt); }

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

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

2D point = ; // изометрическая точка вычисляется следующим образом isoX = 100 - 100; // = 0 isoY = (100 + 100) / 2; // = 100 Iso point == ;

То есть входные данные преобразуются в , а - в .

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

Function getTileCoordinates(cartPt, tileHeight){ var tempPt=new Phaser.Point(); tempPt.x=Math.floor(cartPt.x/tileHeight); tempPt.y=Math.floor(cartPt.y/tileHeight); return(tempPt); }

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

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

GetTileCoordinates(isometricToCartesian(screen point), tile height);

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

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

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

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

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

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

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

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

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

Y = y + speed; placetile(cartesianToIsometric(new Phaser.Point(x, y)))

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

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

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

For (i, loop through rows) for (j, loop through columns) x = j * tile width y = i * tile height tileType = levelData[i][j] placetile(tileType, x, y)

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

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

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

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

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

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

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

Посты по теме

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

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

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

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

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

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

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

Клавиша Положение В Н П Л dX dY ================ 0 0 0 0 0 0 1 0 0 0 0 1 0 1 0 0 0 -1 0 0 1 0 1 0 0 0 0 1 -1 0 1 0 1 0 1 1 1 0 0 1 -1 1 0 1 1 0 1 -1 0 1 0 1 -1 -1

Теперь с помощью значений dX и dY мы можем обновлять декартовы координаты следующим образом:

NewX = currentX + (dX * speed); newY = currentY + (dY * speed);

Итак, dX и dY представляют собой изменение положения персонажа по X и Y в зависимости от нажатых клавиш. Как сказано выше, мы легко можем вычислить новые изометрические координаты:

Iso = cartesianToIsometric(new Phaser.Point(newX, newY))

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

Распознавание коллизий

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

Tile coordinate = getTileCoordinates(isometricToCartesian(current position), tile height); if (isWalkable(tile coordinate)) { moveCharacter(); } else { //ничего не делать; }

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

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

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

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

Чтобы хорошо разобраться в сортировке по глубине, нам нужно понять, что когда координаты X и Y персонажа меньше, чем у дерева, то дерево перекрывает персонажа. Когда координаты X и Y персонажа больше, чем у дерева, то персонаж перекрывает дерево. Когда их координаты X равны, то решение принимается только по координате Y: объект с большей координатой Y перекрывает другой. Если совпадают координаты Y, то решение принимается только по X: объект с большим X перекрывает другой.

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

6. Время для демо!

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

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

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

Посты по теме

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

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

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

Поиск пути

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

Easystar = new EasyStar.js(); easystar.setGrid(levelData); easystar.setAcceptableTiles(); easystar.enableDiagonals();// мы хотим, чтобы в пути были диагонали easystar.disableCornerCutting();// без диагональных путей при движении в углах стен

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

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

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

Game.input.activePointer.leftButton.onUp.add(findPath) function findPath(){ if(isFindingPath || isWalking)return; var pos=game.input.activePointer.position; var isoPt= new Phaser.Point(pos.x-borderOffset.x,pos.y-borderOffset.y); tapPos=isometricToCartesian(isoPt); tapPos.x-=tileWidth/2;//настройка для нахождения нужного тайла для ошибки из-за округления tapPos.y+=tileWidth/2; tapPos=getTileCoordinates(tapPos,tileWidth); if(tapPos.x>-1&&tapPos.y>-1&&tapPos.x<7&&tapPos.y<7){//нажатие мышью внутри сетки if(levelData!=1){//не тайл стены isFindingPath=true; //алгоритм делает своё дело easystar.findPath(heroMapTile.x, heroMapTile.y, tapPos.x, tapPos.y, plotAndMove); easystar.calculate(); } } } function plotAndMove(newPath){ destination=heroMapTile; path=newPath; isFindingPath=false; repaintMinimap(); if (path === null) { console.log("No Path was found."); }else{ path.push(tapPos); path.reverse(); path.pop(); for (var i = 0; i < path.length; i++) { var tmpSpr=minimap.getByName("tile"+path[i].y+"_"+path[i].x); tmpSpr.tint=0x0000ff; //console.log("p "+path[i].x+":"+path[i].y); } } }

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

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

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

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

Function aiWalk(){ if(path.length==0){//путь закончился if(heroMapTile.x==destination.x&&heroMapTile.y==destination.y){ dX=0; dY=0; isWalking=false; return; } } isWalking=true; if(heroMapTile.x==destination.x&&heroMapTile.y==destination.y){//достигли текущей точки назначения, задаём новую, меняем направление //перед поворотом ждём, пока не войдём на несколько шагов на тайл stepsTaken++; if(stepsTakendestination.x){ dX = -1; }else { dX=0; } if(heroMapTile.ydestination.y){ dY = -1; }else { dY=0; } if(heroMapTile.x==destination.x){ dX=0; }else if(heroMapTile.y==destination.y){ dY=0; } //...... } }

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

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

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

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

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

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

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

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

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

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

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

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

Пара примечаний:

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

Заключение

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

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

Tutorial

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

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

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

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

Удивительно, но эра цифровых технологий подарила современным дизайнерам и иллюстраторам не так уж много инструментов. И, несмотря на то, что возможности их чрезвычайно широки, они все же имеют свои пределы. Ни для кого не секрет, что все мы сегодня работаем в одних и тех же фотошопах, иллюстраторах и 3D-максах. Это само по себе неплохо, указанные программы прекрасны. Тем не менее одинаковые инструменты дают схожие методы работы с ними и, соответственно, похожие результаты. Создается ощущение, что каждая «свежая» работа нового автора чем-то напоминает предыдущие идеи старых мастеров. Ситуация только осложняется всеобщей информационной глобализацией: все мы смотрим чужие работы и, так или иначе, перенимаем лучшие приемы и техники друг у друга. Безусловно, так и происходит прогресс, однако обратной стороной медали является некоторое однообразие.

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

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

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

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

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

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

Во многих случаях ExcelArt - это большая экономия времени, сил и нервов. Например, когда работаешь в технике matte-paint, нередко возникает потребность в получении изометрических фигур для последующей постобработки в Photoshop. Запускать из-за нескольких кубиков и пирамидок, сложенных в определенном порядке, 3D-редактор - это как стрелять из пушки по воробьям. Кроме того, не у всех есть достаточные знания 3D, да и «майя» с «максом» стоят далеко не на каждом компьютере.

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

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

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

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

В качестве примера приведу несколько иллюстраций, сделанных исключительно методом 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. А если у вас остались вопросы, не стесняйтесь, задавайте их в комментариях. И обязательно покажите, что у вас получилось, если воспользуетесь моим туториалом.

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

Используя изометрическую сетку
Методом SSR
С помощью функции 3D

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

А. Изометрическая сетка

Изометрическая сетка служит исключительно вспомогательным инструментом.

Как создать:

I. С помощью инструмента Line Segment Tool строим линию под углом 30° c длиной не менее 2000 px

II. Теперь нам нужно создать для нее много копий. Открываем эффект Effect - Distort&Transformt- Transform , во вкладке Move параметры Horizontal и Vertical отвечают за расстояние между линиями, параметр Copies за количество копий (вот это поворот!)

III. Разбираем оформление Object - Expand Appereance

IV. Дублируем группу с нашими линиями и делаем их зеркальную копию Object - Transform - Reflect

V. Превращаем получившиеся линии в направляющие View - Guides - Make Guides

Примечание: в отличии от Фотошопа, функционал Иллюстратора позволяет создавать направляющие расположенные под углом

Сетка готова. Теперь с помощью инструмента Перо, можно рисовать по нашим направляющим фигуры.

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

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

Б. Scale Skew Rotate (SSR)

Преимущество SSR заключается в том, что можно рисовать объект в анфас, а потом переводить в изометрию.

Для этого нам нужны 3 инструмента: Масштаб (Scale Tool ), Наклон (Shear Tool ), Поворот (Rotate Tool ).

Значение параметра Scale по вертикали всегда остается неизменным 86,062% , а значения параметров Shear и Rotate выбираются в зависимости от того, какую грань изображаемого предмета мы переводим в изометрию (верхняя, левая или правая).

С помощью метода SSR можно одновременно перевести в изометрию большую группу маленьких объектов, например, клавиши на клавиатуре ноутбука.

Или сам ноутбук, предварительно сделав его развертку, а потом переведя в изометрию каждую его часть по отдельности (экран и клавиатура):

Сделать в изометрии фигуру эллипсоидной формы:

Или фигуру сложной формы, которую невозможно сходу рисовать по сетке:

Изометрическая сетка пригодится нам для того, чтобы рисовать дополнительные детали на объекте (напоминаю, в изометрии все линии должны быть строго под углом кратным 30):

В примере выше сетка помогла мне нарисовать и правильно расположить маленькие детали конвейера (деления сверху и эллипсы сбоку).

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

В. 3D

В этом случае нам поможет функция 3D, которая, к счастью, имеется в функционале Иллюстратора.

Порядок действий:

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

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

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

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

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

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

Выводы:

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

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

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

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

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

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

КАТЕГОРИИ