Изометрия - метод представления объемных изображений на плоском экране, при котором сохраняются размеры деталей по всем трем координатам. В отличие от перспективы изометрия обеспечивает сохранение всех форм объемного изображения. Здесь каждая грань имеет точную дину относительно масштаба изображения. С другой стороны, перспектива в лучшей степени моделирует объемность.
(Источник: словарь из интернета)
Изометрическая проекция основана на расположении объектов на сетке, рассматриваемой сверху и развернутой таким образом, что она образует форму ромба [ рис. 1 ]. При расположении на такой сетке объекта или объектов, обеспечивается их трехмерность без перспективных искажений, что очень хорошо подходит для создания различных моделей.
[ рис. 1 ]
Традиционно изометрические модели строятся с использованием угла равного 30°, но в связи с особенностью отображения графики на экране монитора, диагональная линия построенная под этим углом выглядит неровной [ рис. 2 ], поэтому, чтобы линия получалась ровной и чистой при создании изображений используют угол, равный 26,565° [ рис. 3 ]
[ рис. 2 ]
[ рис. 3 ]
Эти цифры (26, 565) при создании пиксельной линии практически бесполезны, все, что вам нужно знать - что линия созданная под таким углом состоит из горизонтальных штрихов шириной в два пикселя. В то же самое время, знать эти цифры просто необходимо, если планируется развернуть текстуру или изображение.
Два метода построения объектов
Существует два основных метода построения объектов, оба они проиллюстрированы ниже. При использовании первого A (на рисунке изображен красным) ближний к нам угол строится при помощи трех пиксельных точек, а при использовании второго B (на рисунке изображен зеленым) при помощи двух.
Если планируется создать отдельный объект, то любой из этих методов прекрасно подойдет для этой цели, хотя я бы порекомендовал метод A, так как он дает более острые, более чистые углы, что в результате дает и более красивую форму в целом. Если же вы планируете создать ряд одинаковых объектов, расположенных друг за другом, или объекты, базирующиеся на сетке или тайлы, то лучше использовать метод В, так как иначе получите форму с некрасивыми зазубренными краями, как показано на рисунке ниже.
Стрелками показаны выступы там, где должна быть ровная прямая линия. А при использовании метода В подобного не происходит и в конечном результате вы получите чистый, ровный край.
Существуют, конечно, различные методы затенения, освещения объекта и выдвижения его на передний план. Анимированная иллюстрация ниже демонстрирует несколько основных приемов, а какой из них использовать - зависит от вас и от стиля графики, которую вы создаете.
Построение сетки
Как уже говорилось ранее метод В предпочтительнее для объектов, базирующихся на сетке и тайлов. Создать определенную поверхность при помощи сетки с нанесенными на нее линиями достаточно просто, трудность в том, как правильно собрать все фрагменты в единое целое, после удаления этих линий.
Чтобы правильно это сделать, достаточно добавить к каждому фрагменту сетки две соседние грани, на месте которых ранее проходила черная линия. Анимация сверху, надеюсь, достаточно хорошо это иллюстрирует, а анимация ниже показывает как фрагменты должны соединяться между собой. На рисунке видно, что левый и правый углы каждого фрагмента должны быть высотой в два пикселя.
На следующей иллюстрации изображен увеличенный фрагмент соединения плиток между собой, хорошо виден размер левого и правого углов, о которых говорилось выше.
А эти два изображения могут вам пригодиться в работе. Первый - готовая изометрическая сетка, а второй - шаблон для ее создания.
Создание основных геометрических фигур
Круги и окружности самая хитрая часть изометрических фигур. Если рисование горизонтального или изометрически плоского круга - дело достаточно простое, то изображение круга искаженного в вертикальной плоскости может вызвать затруднения.
На иллюстрации видно как можно использовать в качестве вспомогательного инструмента изометрический куб. Обратите внимание, что верхняя окружность просто вписывается в плоскость куба, касаясь его граней, а боковые окружности эти грани пересекают.
Трансформация 2D-изображения в изометрическое
Вы должны понимать, что для создания изометрической модели недостаточно просто исказить 2D-изображение, так как оно не может показать истинную форму объекта.
Так, например, любое из выше представленных изображений в 2D-представлении выглядит как небольшая иллюстрация рядом с ним.
Следует также отметить, что искажение под уже известным нам углом в 26,565 градусов тоже не даст нужного эффекта, так как изображение станет более вытянутым.
Рисунок, представленный выше - это достаточно хорошо демонстрирует. На среднем изображении видно, что X1 > Х2, на правом же изображении представлен математически верный вариант искажения. Чаще всего самым простым решением будет - создание направляющих линий по которым потом будет выстроено изображение, так как искажение объекта, как правило, вызывает нежелательное сглаживание линий.
При построении направляющей, предварительно необходимо вычислить длину вновь создаваемой линии. Информация ниже вам в этом поможет.
Чтобы вычислить процентное соотношение старой и новой линий необходимо полученное значение Х разделить на длину старой линии и умножить на 100.
1.7889/2 x 100 = 89.443%
Метод отсечения
При создании некоторых объектов применяют метод, зачастую существенно облегчающий задачу - это метод отсечения. Суть данного метода сводится к тому, что путем отсечения некоторых деталей от готовой формы можно получить необходимый нам объект. В качестве иллюстрации используем следующее пошаговое создание стола. Возьмем готовую форму параллелепипеда.
Разметим на ней ножки будущего стола.
Затем сотрем ненужные части изображения.
Стол готов. Однако полученный результат не впечатляет. Ножки стола не имеют объема и кажутся тонкими, словно сделанными из бумаги. Происходит это по причине того, что при данном положении стола мы должны видеть не одну, а две стороны каждой из ножек. Чтобы исправить это - необходимо продублировать стороны ножек.
Заключительным шагом будет замена красной линии разметки на линии контура и подсветки.
Другие примеры
Изображение ниже с сайта [ www.eboy.com ] показывает несколько другую технику затенения и осветления объекта. Обратите внимание, что хотя правая сторона фургона находится в тени, человек, его левая рука и щетка, которой он моет машину выдвинуты на передний план. И если при этом использовано несколько оттенков цвета, то для покраски грузовика использовано их минимальное количество, они же использованы для выделения или затенения некоторых деталей.
Следующая иллюстрация - небольшая часть холла гостиницы Habbo с сайта[ www.habohotel.com ]
Увеличим масштаб части этой иллюстрации, чтобы рассмотреть более мелкие детали.
На этом фрагменте хорошо видно использование светлой тонкой линии для внешней границы поверхности, а также использование черной окантовки для придания акцента ряду деталей. Обратите внимание, что черная граница используется только по внешнему периметру объектов.
Следующая иллюстрация с сайта [ www.eboy.com ] показывает как используются линии, созданные под различными углами, чтобы придать объекту неправильную форму.
