Кроссплатформенный открытый движок на Java, позволяющий создавать 2D и 3D игры под различные платформы, среди которых: Android, HTML5, Windows, Linux, iOS.
Этот урок так же позаимствован с другого сайта. Переводить в этом уроке снова нечего, поэтому урок размещен как есть. Нажмите на картинку для полноразмерного просмотра.
Этот урок так же позаимствован с другого сайта. Переводить в этом уроке особенно нечего, поэтому вместо инструкции можно разместить здесь просто эту картинку со слайдами.
1. Используя описанную в предыдущем посте технологию рисования куба, нарисуем прямоугольную «коробку» для будущего здания.
2. На этом слайде показано, как можно нарисовать по отдельности окна и двери для здания. Естественно, что используя GraphicsGale и его возможность работы со слоями, мы можем создать одно окно и одну дверь, а потом скопировать его столько раз, сколько нам нужно.
3. Поместите окна и двери на здании, параллельно вспомогательным направляющим линиям, которые приведены на рисунке черным цветом вдоль контура крыши и фундамента. Между некоторыми этажами оставлены расстояния для карнизов. Которые мы создадим на следующем этапе.
4. Добавите теперь карнизы и сделайте крышу. Технология их рисования ничем не отличается от рисования куба и линий в стиле пиксель-арт.
5. На этом слайде можно увидеть, как можно добавить тень под крышей. Используйте выбранную цветовую гамму, иначе тень будет смотреться не очень реалистично.
6. Осталось добавить блики на стеклах в окнах. Как это сделано, можно увидеть на этом слайде.
Для рисования куба мы использовали следующую технологию, показанную на рисунке.
Естественно имея в руках такой инструмент как GraphicsGale, мы не рисовали куб по пикселям, а использовали возможность рисования прямых линий с помощью инструмента "линия", с зажатой клавишей Alt.
Теперь выбираем цветовую схему будущего куба. Цветовая палитра, которую мы будем использовать, находится в оранжевых тонах и приведена на следующем рисунке в верхнем правом углу. Используя цветовую схему, раскрашиваем куб.
Было бы правильным использовать для создания акцента на освещенных гранях куба более яркие цвета, это – второй цвет из нашей цветовой палитры.
При определенном желании и терпении с помощью кубиков можно сделать вот такие изображения в стиле пиксель-арт.
Объекты нарисованные в стиле пиксель-арт в изометрии имеют в своей основе вот такую ромбовидную сетку.
Традиционная изометрия основана на линиях, проходящих под углом 30 градусов. Однако особенности компьютерной графики и мониторов таковы, что настоящая тридцатиградусная линия с точки зрения пикселов неравномерная, "грязная" и нелогичная. Поэтому для рисования изометрии в пиксель-арте вместо нее используется линия под углом 26,565 градусов.
Не надо бояться приведенных цифр и градусов. Что бы нарисовать эту линию, вам надо всего лишь запомнить простое правило "один пиксель вверх и два в сторону". Посмотрите на картинку выше. Вторая линия нарисована как раз таким способом. Посмотрите на увеличенный фрагмент - "один пиксель вверх и два в сторону".
Два способа рисования углов в изометрии
Существуют два способа рисования углов для изометрических фигур, например, для куба.
1. Первый способ предполагает что угол состоит из трех пикселей, вертикальная линия идет посередине.
2. Второй способ предполагает, что для угла применимо все тоже правило: "один пиксель вверх и два в сторону".
Если вы рисуете углы для изометрического куба первым способом, то на стыке фигур получатся неровности, т.е. линия на стыке фигур будет математически неровной.
Т.о., для фигур состоящих из нескольких элементов рекомендуется использовать второй способ рисования углов в изометрии.
Прямые линии в пиксель-арте. Вам кажется, что рисовать прямые линии просто? Однако в пиксель-арте даже прямые линии могут выглядеть неестественно из-за неровностей или «ступенек». Неровности или ступеньки возникают из-за разрывов или смещений, которых нам нужно будет избегать при рисовании линий. Подобные ошибки, когда один кусок линии больше или меньше окружающих его кусочков, приведены на рисунке ниже и выделены красным. Еще их называют jaggy.
Изогнутые линии в пиксель-арте. Для создания кривизны убедитесь, что кусочки линии, отвечающие за изгибы и наклоны, последовательно уменьшаются. В этом примере кривая линия сделана за счет смещения и уменьшения 6 > 3 > 2 > 1 – рисунок слева. На рисунке справа есть ступенька 3 > 1< 3, она выделена красным.
Как сглаживать линии в стиле пиксель-арт
Сглаживание линий. Даже, несмотря на то, что мы рисуем в стиле пиксель-арт, линии не должны выглядеть грубо. Иногда может понадобиться применить сглаживание. Сглаживание обеспечивается за счёт добавления промежуточных оттенков к цвету линии на рисунке. Довольно сложно описать это словами, поэтому попробуем привести это на примере.
Cглаживание кривых в стиле пиксель-арт:
Сглаживание окружностей в стиле пиксель-арт:
Сглаживание окончаний линий в стиле пиксель-арт:
Совсем не обязательно рисовать линии попиксельно. Я рекомендую использовать специализированные программы для создания пиксель-арта. Например, GraphicsGale. В этой программе, для рисования линий в стиле пиксель-арт достаточно удерживать клавишу Alt.
