Как создать спрайты для игр. Adobe Photoshop: Рисуем и анимируем персонажа в технике Pixel Art
Мне надоело тестировать процессы GameDev с помощью треугольников и прямоугольников. Это скучно и не интересно, поэтому настало время что-нибудь взорвать. Но с чего начать? - спросите Вы. А я отвечу, нужно нарисовать sprite взрыва, если быть точным, то нарисовать sprite sheet для взрыва, который будет представлять анимацию взрыва.
Но как это сделать? - этим вопросом озадачился я. После изучения нескольких форумов и видеоуроков, я решил собрать полученную информацию в один урок на своём сайте. Итак у нас следующее технической задание на этот урок:
- Нарисовать несколько sprite картинок, из которых мы сделаем sprite sheet для анимации взрыва;
- Собрать сам sprite sheet и сохранить его в PNG файл;
- Сделать всё это, используя ПО Adove Illustrator .
Рисуем sprite картинки по шагам
Примечание. Также, если не интересно читать пошаговый мануал, то предлагаю сразу обратиться к видеоуроку в конце статьи, там всё наглядно расписано, показано и объяснено.
Шаг первый
Создаём файл с полотном для sprite картинки с параметрами 20 на 20 пикселей. Именно такие картинки будем использовать в следующих уроках по GameDev в Qt для реализации взрывов от пуль. Будем рисовать взрывы.
Шаг второй
А теперь создаём на рабочем полотне прямоугольную сетку, которая будет разделять наши пиксели. При этом необходимо задать параметры сетки такие, что её ширина и высота будут равны ширине и высоте спрайта, а количество вертикальных и горизонтальных разделителей сделать количеству пикселей по высоте и ширине соответственно. Также не забудьте убрать обводку и сделать фон прозрачным, нам же не нужен лишний белый цвет в sprite-картинке.
Шаг третий
Выбираем инструмент Быстрая Заливка и создаём левым кликом мыши группу для быстрой заливки из прямоугольной сетки. Быстрая заливка заполняет выбранным цветом область ограниченную разделителями, а также контуром или обводкой. Поскольку сетка разделяет полотно по пикселям, то каждый прямоугольник будет одним пикселем, который мы будет заполнять цветом с помощью Быстрой Заливки.
Шаг четвертый
После того, как мы отрисуем все 15 sprite картинок, создадим новый проект в Adobe Illustrator. Который будет содержать все 15 sprite картинок и будет шириной на все 15 картинок и по высоте на одну картинку. То есть будем отрисовывать все картинки в один ряд. Также поместим прямоугольник на всё полотно. Не забудьте убрать обводку и сделать фон прозрачным.
Шаг пятый
Шаг шестой
А теперь, зайдя в пункт меню Файл, с помощью пункта "Поместить" добавляем в проект все подготовленные спрайты.
Вступительное слово:
Здравствуйте уважаемые пользователи портала сайт! В этой статье я расскажу Вам, как нарисовать свой спрайт и сделать для него анимацию в XNA GameStudio , а так же познакомлю Вас с перемещениями спрайтов в двухмерном пространстве. Весь приведенный ниже код проверен, и отлично функционирует в версии 3.1 . Но, так же он должен работать и в других версиях (3.0 и 4.0 ; на счет 2.0 не уверен). Перед знакомством с этим уроком рекомендую прочитать , так как этот урок является ее продолжением, а это значит, что Вам понадобятся те знания, которые Вы получили из первой статьи.
Так же перед прочтением данного урока Вы должны обладать базовыми знаниями языка программирования C# , и иметь программу Microsoft Visual C# Express необходимой Вам версии (для XNA 3.1 - Microsoft Visual C# Express 2008 , а для XNA 4. 0 - Microsoft Visual C# Express 2010 ) с установленной библиотекой XNA GameStudio .
Итак, если Вы имеете все вышеприведенное, тогда приступим!
Часть 1. Рисование спрайта.
Немного теории:
Для начала давайте разберемся, что же такое спрайт. Спрайт – это некий объект (изображение) в 2D игре. Ваш персонаж, противник, обычное дерево или платформа – все это является спрайтами. Даже фон, который мы рисовали в предыдущей статье, будет являться своеобразным спрайтом.
Т.е., как Вы, наверное, догадались, и принцип рисования спрайтов будет схож с принципом рисования фона. Но, в этой статье мы усовершенствуем отрисовку спрайтов и создадим новый класс.
Но, есть еще один важный момент, который я хотел бы рассмотреть именно в этом разделе статьи. Для каждого спрайта мы будем задавать позицию на экране монитора. Чтобы это сделать, есть два способа (хотя, может, есть и больше, но чаще всего применяются только два). Можно просто указать позицию левого верхнего угла спрайта, а можно нарисовать прямоугольник, который охватит полностью весь спрайт, и задать его координаты. Т.е. получится так, что куда бы прямоугольник ни переместился, спрайт последует за ним.
У каждого из способов есть свои плюсы и минусы. Указывать позицию угла спрайта проще, а указывать прямоугольник более практично. В статье мы поговорим о двух этих способах задания координат. Для начала разберемся с более простым (задание координат угла спрайта) способом, а затем перейдем к способу посложнее (создание прямоугольника).
Итак, приступим!
Создание класса для рисования спрайта:
Для начала давайте создадим новый проект (как это сделать, подробно описывалось в моей предыдущей статье) и назовем его DrawSprite .
Теперь нажмите правой кнопкой на название проекта (в обозревателе решений) и выберите команду: Добавить -> Создать элемент -> Класс :
Давайте назовем его Sprites :
После создания наш класс имеет такой вид:
200?"200px":""+(this.scrollHeight+5)+"px");">using System;
using System.Linq;
using System.Text;
Namespace DrawSprite
{
class Sprites
{
}
}
Как Вы понимаете, это самый стандартный класс для проекта на языке программирования C# , т.е. пространств имен XNA здесь нет. Так как я их наизусть не помню (да и, наверное, ни один программист их все не запоминает), мы будем добавлять их «по ходу дела». Например, создали мы переменную для текстуры (Texture2D , если кто не помнит), а компилятор сообщает, что не хватает одного пространства имен (так же он пишет его название). Вот тогда-то мы его и добавим.
Итак, теперь давайте вспомним, как же мы добавляли наш фон в игру.
Мы создали переменные для текстур, загрузили сами текстуры в методе LoadContent() и нарисовали их в методе Draw() . Т.е., чтобы создать отдельный класс и в нем нарисовать спрайт (точнее, в нем обработать спрайт, а нарисуем мы его в Game1 ), нам нужно создать в нем (в нашем новом классе) переменную, создать метод для загрузки текстур (по типу метода LoadContent() ) и создать метод для рисования текстур (по типу метода Draw() ).
Теперь можно приступать к редактированию нашего нового класса. Как Вы знаете, весь код класса пишется в блоке (между фигурных скобок) класса. Поэтому сразу после:
200?"200px":""+(this.scrollHeight+5)+"px");">class Sprites
{
Запишем:
200?"200px":""+(this.scrollHeight+5)+"px");">Texture2D
Как Вы видите, если поставить курсор на «Texture2D », то последний симфол подчеркивается:
В нашем случае это означает, что не хватает простанства имен. Нажмем сочетание клавишь «Alt+Shift+F10 » и выберем самое первое. Оно добавиться:
Если все сделали правильно, то вверху экрана появится надпись:
200?"200px":""+(this.scrollHeight+5)+"px");">
А «Texture2D » изменит свой цвет.
Итак, продолжим. Замените «Texture2D » на:
200?"200px":""+(this.scrollHeight+5)+"px");">
Теперь давайте создадим конструктор. Сейчас он нам не понадобится, оставим его пустым:
200?"200px":""+(this.scrollHeight+5)+"px");">public Sprites()
{
Переменная создана, конструктор готов. Теперь перейдем к загрузке изображения. Давайте создадим метод LoadContent() сразу после конструктора. В его параметрах нужно записать два объекта. Один объект будет класса ContentManager (кстати, здесь тоже не хватает пространства имен, добавим его), а второй класса String . Первый позволит нам вызвать метод Load , для загрузки изображения, а второй позволит прописать путь к этому изображению. И так, вот как выглядит метод LoadContent() :
200?"200px":""+(this.scrollHeight+5)+"px");">
{
spriteTexture = Content.Load
}
Как Вы видите, спрайт загружается так же, как и фон. Только, теперь в классе Game1 Вам нужно будет вписать лишь слово Content и путь к текстуре. Остальное уже написано.
Так, теперь перейдем к следующему (и последнему) методу – Draw() . Единственный параметр, который ему нужно передать, это spriteBatch . Теперь остается только нарисовать спрайт известным нам способом (точно так же, как мы рисовали фон). Единственное, здесь не нужно вызывать методы spriteBatch.Begin() и spriteBatch.End() , потому, что чтобы не вызывать эти методы для каждого спрайта отдельно, мы их вызовем один раз (в классе Game1 ). И так, вот как выглядит наш метод Draw() :
200?"200px":""+(this.scrollHeight+5)+"px");">
{
spriteBatch.Draw(spriteTexture, Color.White);
}
Как Вы заметили, второй аргумент (после spriteTexture
) мы не записали. Это сделано потому что, координаты мы еще не задали.
И так, теперь переходим к той проблеме, которую я описывал вначале. Сейчас мы будем использовать простой способ, и зададим координаты левого верхнего угла спрайта. Для этого сразу после строки
200?"200px":""+(this.scrollHeight+5)+"px");">public Texture2D spriteTexture;
(в самом начале класса)
Запишем «Vector2 » и добавим необходимое пространство имен. Так же напишем название позиции:
200?"200px":""+(this.scrollHeight+5)+"px");">
И теперь в методе Draw() запишем второй аргумент.
Вот так теперь выглядит метод Draw() :
200?"200px":""+(this.scrollHeight+5)+"px");">public void Draw(SpriteBatch spriteBatch)
{
}
А вот так выглядит весь наш класс:
200?"200px":""+(this.scrollHeight+5)+"px");">using System;
using System.Collections.Generic;
using System.Linq;
using System.Text;
using Microsoft.Xna.Framework.Graphics;
using Microsoft.Xna.Framework.Content;
using Microsoft.Xna.Framework;
Namespace DrawSprite
{
class Sprites
{
public Texture2D spriteTexture;
public Vector2 spritePosition;
Public Sprites()
{
Public void LoadContent(ContentManager Content, String texture)
{
spriteTexture = Content.Load
}
Public void Draw(SpriteBatch spriteBatch)
{
spriteBatch.Draw(spriteTexture, spritePosition, Color.White);
}
}
}
Редактирование класса Game1:
Итак, теперь давайте отредактируем класс Game1 в соответствии с классом Sprites .
Для начала давайте создадим объект класса Sprites . Назовем его hero .
200?"200px":""+(this.scrollHeight+5)+"px");">Sprites hero;
Теперь в конструкторе Game1 инициализируем объект:
200?"200px":""+(this.scrollHeight+5)+"px");">hero = new Sprites();
После этого в методе LoadContent() загрузим изображение. Предварительно в папке Content создайте папку Textures и добавьте в нее изображение Вашего героя (все это описывается в моей первой статье) (я назвал его idle ). И так, в методе LoadContent() напишем:
200?"200px":""+(this.scrollHeight+5)+"px");">hero.LoadContent(Content, "Textures//idle");
Тем самым мы вызвали метод «LoadContent » из класса Sprites и приписывам в него аргументы.
Ну что, мы на «финишной прямой». Осталось перейти в метод Draw() и вызвать там spriteBatch.Begin() , hero.Draw и spriteBatch.End() . Как Вы поняли, hero.Draw мы будем вызывать из класса Sprites , т.е. в него нужно прописать только один аргумент – spriteBatch (остальное прописано в классе Sprites ). Вот так выглядит метод Draw() класса Game1 :
Теперь давайте запустим игру (F5 ), и посмотрим, что у нас вышло. У меня получилось такое изображение:
Все работает отлично, но нужно данный код доработать. Так как мы не указали координаты явно, компилятор поставил стандартные координаты для левого верхнего угла спрайта. И эти стандартные координаты равны нулю. Вы спросите, почему же спрайт нарисован сверху? Все очень просто. Ведь, в компьютерной графике координаты перевернуты. И если в математике координатная плоскость выглядит так:
То на экране монитора, как я уже говорил, координаты перевернуты, т.е. система координат берет свое начало в левом верхнем углу:
Это значит, что координаты (0, 0 ) (по X и Y ) будут находиться в левом верхнем углу.
Теперь давайте изменим наш код, и запишем свои координаты. Каждое деление координатной шкалы равно одному пикселю. Т.е., если у Вас размер экрана 600x600 пикселей, то точка 300x300 будет серединой Вашего экрана.
Итак, давайте нарисуем наш спрайт в центре экрана. Для начала давайте изменим размеры игрового окна (это подробно описанно в моей первой статье). Для этого в конструктор класса Game1 впишем:
200?"200px":""+(this.scrollHeight+5)+"px");">graphics.PreferredBackBufferHeight = 600; //Ширина экрана
graphics.PreferredBackBufferWidth = 600; //Высота экрана
Все, теперь мы можем задавать координаты. В методе Initialize()
введите:
200?"200px":""+(this.scrollHeight+5)+"px");">hero.spritePosition = new Vector2(300, 300);
Тем самым мы инициализировали объект spritePosition и присвоили его координатам значения 300 по осям X и Y .
Теперь давайте запустим игру. У меня получилось так:
Как Вы видите, спрайт нарисован не совсем в центре экрана, но можете быть уверены, что его левый верхний угол (здесь он прозрачен) нарисован ровно в центре. Таким образом можно поэксперементировать и создать героя ровно в центре игрового окна. И так, на этом я завершу эту часть статьи. В следующей части мы с Вами разберемся, как создать анимацию своему спрайту.
Данный урок по фотошопу посвящен процессу созданию анимированного пиксельного спрайта, используя для этого лишь несколько простейших инструментов фотошопа. В ходе урока вы познакомитесь со всеми основными приемами создания подобных работ, которые вы впоследствии сможете применять в собственных проектах. Итак, давайте приступим!
1. Подготовка холста и инструментов
Шаг 1
Выберите инструмент Карандаш (Pencil Tool). Он станет основным вашим инструментом на этом уроке. Задайте жесткий круглый наконечник кисти и примените к кисти приведенные ниже установки. Линия, создаваемая карандашом должна получаться очень резкой.
Шаг 2
Задайте Режим (Mode): Карандаш (Pencil) и примените показанные ниже установки:
Шаг 3
Включите отображение пиксельной сетки: Просмотр > Показать > Пиксельная сетка (View > Show > Pixel Grid). Если данный пункт меню не отображается, пройдите в меню Редактирование > Установки > Производительность (Preferences > Performance), и поставьте галочку на пункте Использовать графический процессор (graphic acceleration).
Замечание: сетка будет видимой только на вновь созданном холсте, при приближении 600% и более.
Шаг 4
Теперь пройдите в меню Редактирование > Установки > Основные (Preferences > General), или просто нажмите Control-K. В выпадающем списке “Интерполяция изображения” (Image Interpolation) выберите пункт По соседним пикселям (Nearest Neighbor). Так вы сможете быть уверены, что края вашего объекта будут оставаться достаточно резкими.
Далее пройдите в меню Редактирование > Установки > Единицы измерения и линейки (Preferences > Units & Rulers), где в выпадающем списке Линейки (Rulers) выберите пункт Пиксели (Pixels), чтобы видеть все размеры в пикселях.
2. Создания Спрайта
Шаг 1
Теперь, когда все подготовительные работы завершены, можно приступать к созданию самого Спрайта. Нарисуйте набросок персонажа с легко узнаваемым силуэтом. Постарайтесь не увлекаться его детализацией. Так же не обязательно использовать различные цвета. Набросок должен просто помочь вам наглядно представить, как будет выглядеть ваш персонаж. Для данного урока я выбрал космического солдатика.
Шаг 2
Активируйте Свободную трансформацию (Ctrl+T), и уменьшите высоту вашего персонажа до 60 пикселей.
Размер объекта отображается на панели Инфо (Info). Учтите, что настройки интерполяции должны быть точно такими же, какие мы использовали в шаге 4 предыдущего раздела. В данном случае это не столь критично, так как мы всего лишь преобразуем эскиз в пиксельный рисунок, но в будущем, работая над пикселизованными объектами, данные параметры следует контролировать.
Шаг 3
Приблизьте изображение примерно на 300-400%. Так будет нагляднее. Уменьшите Непрозрачность (Opacity) слоя с эскизом. Кликните по иконке создания нового слоя в нижней части палитры слоев. Создайте эскиз при помощи инструмента Карандаш (Pencil Tool).
Если ваш персонаж симметричен, как у меня, то достаточно нарисовать только его половинку, продублировать ее и отразить горизонтально: Редактирование > Трансформирование > Отразить горизонтально (Edit > Transform > Flip Horizontal).
Правило периодичности: старайтесь разбивать сложные фигуры на несколько простых элементов. Дело в том, что когда пиксели, образующие линию, наносятся по определенной “периодичной” системе, например: 1-2-3, или 1-1-2-2-3-3, такая линия, в отличие от беспорядочной, лучше воспринимается человеческим глазом. Однако данное правило выполнимо не всегда, и может быть нарушено, если этого требует форма создаваемой линии.
(две периодичные и одна беспорядочная линия)
Шаг 4
Когда эскиз будет готов, выберите основной цвет и окрасьте крупные элементы. Сделайте это на отдельном слое, созданном под слоем с эскизом.
Шаг 5
Смягчите внутреннюю часть эскиза, варьируя оттенки.
Продолжайте разнообразить оттенки. Как вы можете заметить, в процессе работы я подкорректировал форму некоторых деталей.
Шаг 6
Создайте новый слой и наложите на нем свет.
Установите этот слой в Режим наложения – Перекрытие (Overlay). Каким-нибудь светлым цветом прокрасьте поверхности, на которые хотите наложить свет. Размойте участки с наложенным светом пройдя в меню Фильтр > Размытие > Размытие (Filter > Blur > Blur).
Здесь я отразил окрашенную половинку горизонтально, добавил финальные цветные детали тут и там, после чего объединил оба слоя.
Шаг 7
Нашему персонажу не хватает контрастности. Пройдите в меню Изображение > Коррекция > Уровни (Image > Adjustments > Levels), задайте настройки показанные ниже, чтобы подкорректировать полутона, после чего воспользуйтесь коррекцией цветового баланса: Изображение > Коррекция > Цветовой баланс (Image > Adjustments > Color Balance) создавая более холодные и более теплые варианты.
(законченный персонаж при приближении 400%)
3. Анимация Спрайта
Шаг 1
Создайте копию слоя: Слои > Новый > Скопировать на новый слой (Layer > New > Layer Via Copy), и сместит его на 1 пиксель вверх и на 2 вправо, используя для этого инструмент Перемещение (Move Tool (V)) и соответствующие клавиши со стрелками. Это ключевая фаза при анимации шагающего персонажа.
Уменьшите Непрозрачность (Opacity) оригинального слоя до 50%, чтобы получить возможность видеть предыдущий кадр анимации.
Шаг 2
Теперь изогнем ноги и руки Спрайта, так, как будто он шагает.
- выделите левую руку при помощи инструмента Лассо (Lasso Tool)
- при помощи Свободной трансформации (Ctrl+A), и удерживая клавишу Ctrl, сместите опорные точки контейнера трансформации так, чтобы рука оказалось немного ниже шеи
- выделите голень правой ноги и сместите ее вниз, как на первом кадре
- выделите левую ногу и подтяните ее вверх – она должна быть немного согнутой
- при помощи Карандаша (Pencil) и Ластика (Eraser Tool) перерисуйте локоть правой руки
Шаг 3
Далее нам предстоит нарисовать новое положение рук и ног, точно так же, как я показал в шаге 2. Дело в том, что трансформирование рук и нок изменяет положение пикселей, и линии утрачивают свою прежнюю четкость.
Шаг 4
Создайте копию второго слоя и отразите ее горизонтально. Так у вас получится в, общей сложности, три положения: два – в шагающей фазе, одно – в исходной. Снова увеличьте Непрозрачность (Opacity) всех слоев до 100%.
Шаг 5
Пройдите в меню Окно > Шкала времени (Window > Timeline), и нажмите по кнопке Создать анимацию кадра (Create Frame Animation).
Проделайте следующие шаги:
1. Задайте задержку кадра: 0.15 секунды
2. Кликните по кнопке создания копии выделенных кадров 3 раза (будут созданы 3 копии)
3. В выпадающем списке с параметрами цикла выберите вариант Постоянно (Forever)
Шаг 6
Чтобы правильно выбрать нужный слой для каждого кадра, кликните по пиктограмме в виде глаза рядом с названием слоя на палитре слоев.
Итак:
1 кадр: исходная позиция
2 кадр: второй слой
3 кадр: снова исходная позиция
4 кадр: третий слой
Нажмите на клавишу Пробел, чтобы воспроизвести анимацию.
(законченная анимация при 100% приближении)
Шаг 7
Сохраните результат своей работы. Пройдите в меню Файл > Сохранить для WEB (File > Save For Web), и выберите формат GIF. Увеличьте масштаб изображения до 300%, и нажмите Сохранить (Save).
Урок закончен!
На данном уроке вы узнали как в фотошопе создается анимированный пикселизированный персонаж. Теперь вы умеете готовить холст и необходимые инструменты, а так же, рисовать и анимировать персонажа, используя для этого Карандаш и шкалу времени. Надеюсь, вы научились здесь чему-то новому и сможете использовать описанные приемы при работе над собственными проектами.
Часть 8: Наконец-то рисуем спрайт
Итак, теперь, когда вы прочитали предыдущие главы, провели собственные наблюдения и сделали выводы о том, как устроены спрайты и всё такое (если же вы не делали ничего из этого списка, тогда наверстайте упущенное, ибо это облегчит вашу жизнь, когда придёт время рисовать собственные спрайты)... В общем-то, это время пришло. Мы разберём несколько стилей и для начала возьмём классический и наиболее широко распространённый в ролевых играх стиль Final Fantasy 2. Даже если вам неинтересно делать маленькие спрайты 16х16 и вы хотите научиться создавать только большие, всё равно вам будет полезно прочесть этот текст до конца... Занимаясь маленькими проектами, можно научиться многим полезным вещам, которые пригодятся и при создании крупноразмерных шедевров. Учитесь в любой ситуации. От вступительных слов перейдём к спрайтам FF2:
Первое, что следует знать о FF2-спрайтах: в них используется особая разметка... Над текстом вы видите квадрат 16х16... Вдоль левой стороны идут цветные вспомогательные линии. В спрайте FF2 талии отведено три пиксела (нижняя оранжевая линия), торс - часть туловища от шеи и до талии - также занимает три пиксела (жёлтая линия), голова получает целых 10 пикселов (верхняя оранжевая линия). В разговорах о спрайтах знающие люди часто упоминают аббревиатуру "SD"... Термин SD расшифровывается как "Super Deformed" ("Сильно Деформированный") и используется в аниме для описания сцен, в которых персонаж, прежде нормально нарисованный, уменьшен и похож на куклу, и его голова такого же размера, как и остальное тело... Этот подход использовался в FF2 и во многих ранних RPG, потому что почти все они были созданы в Японии, а SD - это приём как раз из тамошних аниме, к тому же, подобный стиль хорош для выражения эмоций персонажа. На Западе мы склоняемся к "реалистичным" персонажам с маленькими головами и пропорциональными телами. Однако в прежние дни правдоподобностью приходилось жертвовать, ведь на отведенном пространстве 16х16 реалистичная голова занимала бы два пиксела в ширину и четыре в высоту... Может, это и пропорционально, зато смотрится плохо - получаются безликие персонажи, а лицо в данном случае очень важно, так как игрок идентифицирует себя скорее по лицу, чем по другим признакам. Большие головы были так широко распространены потому, что на них есть место для изображения чувств... Персонажи с крупными головами могут кивать, мотать головой из стороны в сторону, удивленно моргать, расширять глаза от ужаса, зажмуриваться, зевать, кричать и т.д. Они становятся "живыми", а значит, более интересными... На маленькькой "реалистичной" голове вы можете лишь изменять цвета и тени всего у шести пикселов, и от этого мало толку. Пропорциональными стоит рисовать персонажей на больших спрайтах (как, например, в игре Phantasy Star IV). В общем, вы поняли, почему SD-стиль продержался так долго, хех... Впрочем, это лишь мои домыслы, я могу и ошибаться.
Начнём с базовой головы. Это - пиксел за пикселом - контур головы FF2-шного спрайта... Многие художники, когда им нужно много спрайтов в одном стиле, рисуют "модель" типичного персонажа, которую затем видоизменяют для каждого героя. Это и впрямь хорошая идея, если придётся делать кучу персонажей (например, городских NPC)... Только убедитесь, что в каждом спрайте достаточно индивидуальности, избегайте простой смены цветов, как в Mortal Combat, например, хех... Итак, базовая голова: два пиксела между глазами, они сами в высоту тоже два пиксела, есть однопиксельный пробел между ними и краями головы, такой же пробел до челюсти. Вместе выглядит пропорционально. Причём занято ещё не всё отведённое место... Куча пространства оставлена под волосы, так как они тоже важны, хех... Туловища спрайтов 16х16 в высоту занимают всего шесть пикселов и отличаются друг от друга только цветами да парой-другой пикселов. Поэтому для лучшего визуального опознавания персонажи получают сильно разнящиеся причёски. Волосы могут быть всевозможными - короткими, длинными, с пробором сбоку или по центру, завязанными в хвостик, заплетёнными в косички, собранными в пучок, могут вообще отсутствовать или даже торчать шипами и т.д... Это хороший способ дифференциации персонажей, поэтому волосы получают много места на рисунке. Если закрасить спрайты чёрным цветом, то есть оставить силуэты персонажей, более-менее достоверно различать их можно будет только по форме причёски. Двигаемся дальше - заметили, что челюсть опускается до конца оранжевой линии?
Теперь добавим корпус... Я нарисовал один кулак впереди, а другой сзади. В старых играх спрайты постоянно переключались с кадра, где левая нога впереди, на кадр, где впереди правая, и наоборот... Это был способ избавиться от третьего "стоячего" кадра "ноги вместе, руки по швам". Я взял кадр, в котором персонаж находится в середине своего шага - хочется отметить некоторые тонкости текущей позы. Во-первых, я не разделил руку и корпус. Можно было бы (кстати, получилось бы подобие некой жилетки), но я не стал так делать... Пускай это будет обычный персонаж в штанах и футболке. Как вы помните, жёлтая линия определяет расстояние от низа челюсти до талии, поэтому у вас будет два пиксела для грудной клетки, ещё пиксел займет линия талии (кроме случаев с платьем или незаправленной футболкой и т.п.)... Я упомянул о линии, так как, посмотрите, плечи зашли за оранжевый разделитель. Это потому, что наш взгляд на мир не является ни прямым фронтальным видом, ни видом сверху. У нас вид "сверху вниз" ("top down"; этот термин часто используется при описании игр типа Final Fantasy). Вы смотрите сверху вниз под углом примерно 45 градусов, поэтому видны передние и верхние части строений (угол в 45 градусов обычно используется в изометрических играх, например в Diablo, где шаблоны расположены по диагонали, вместо обычного расположения сверху вниз. Многие люди не понимают, что значит "изометрия" (вам это понятие встречалось на уроках черчения, хех), поэтому при обсуждении стиля FF и т.п. говорят "сверху вниз" вместо "45 градусов"... Сконфужены? Хехех...). Так как у нас вид сверху вниз, мы можем видеть верхнюю часть плеч персонажа немного "позади" его головы... Представьте обычного человека, на которого вы смотрите сверху вниз. Чем больше высота, с который вы на него смотрите, тем большую зону плеч вы видите и тем дальше они заходят за голову. Очень многие делают ошибку, рисуя персонажей во фронтальном виде спереди для карт с видом сверху вниз... Если честно, насчёт видов можно особенно не заморачиваться... Сойдёт и так... Но в нынешние времена следует уделять больше внимания таким моментам. В былые дни славы NES разработчики так сильно извращались с перспективой, что сегодня это выглядит смешно. В то время это не имело значения из-за общей недоразвитости графики, людей больше интересовал геймплэй. Будет время, зацените карту подземелья в игре Zelda для NES-приставки... Комната сделана с учётом вида прямо сверху, герой Линк нарисован в виде сверху вниз, а статуи и прочий антураж исполнены во фронтальном виде, хех...
Теперь появились ноги. Опять же, они как бы в положении шагания, а не в обычной позиции... Хочу показать пару моментов... Я не нарисовал чёрную линию вдоль низа ступни, ибо мне нужен нижний ряд пикселов для изображения ноги, а ваш глаз сам дорисовывает иллюзорную линию под ногой от левого чёрного пиксела до правого (вы уже знаете об этом, если читали предыдущую главу... если нет, то прочитайте её). Правая нога чувачка (та, что впереди) вниз идёт не прямо, а как бы под углом... Это для анимации. Если бы ноги шли прямо вниз, когда они впереди тела, и были бы ровно вверху, когда они позади, то всё вместе выглядело бы так, будто персонаж топает поочерёдно левой и правой ногой вместо ходьбы. Искривляя немного ногу, мы придаём ей более естественный вид при шагании. Нога, оставшаяся позади, - это просто ряд пикселов. Сейчас она похожа на какой-то обрубок... Мы покажем, что это нога сзади, когда займёмся цветами. Также заметьте, что талия - НЕ прямая, она скруглена, и ноги заходят в жёлтый разделитель, соединяясь с ней. Это тоже из-за вида сверху вниз. Горизонтальная линия талии является грубой ошибкой... Из-за этого персонаж становится "жёстким" и как бы картонным на вид. Небольшое изгибание линии придаёт объём всему контуру, как будто мы смотрим на цилиндр (представьте трёхмерное изображение).
Наконец-то у него появились волосы. На них вы, вероятно, потратите большую часть времени... Один пиксел может испортить или улучшить причёску, и, пожалуй, вы будете постоянно жонглировать пикселами, пытаясь получить хорошие очертания. У нашего человечка волосы зачёсаны набок. Я добавил недостающий пиксел наверху для изображения пробора, просто ради примера, хехе... Заметьте, что его волосы не пересекают лицо сплошной чёрной линией... Будь линия сплошной, голова и волосы разделялись бы слишком сильно (и смотрелись бы примерно как корпус и ноги), поэтому стоит использовать разделением цветом. Я добавил немного чёрного под частями волос, которые свободно спадают, так как я хотел показать, что они именно нависают, а не прилизаны гелем или ещё чем. Основная линия волос проходит так же далеко от глаз, как и челюсть, имеется один разделительный ряд пикселов между ними. Это не обязательно, так как у разных персонажей будут различные причёски, это всего лишь пример, так, для начала. Вам наверняка придётся поработать над волосами основным цветом и чёрным одновременно, чтобы выяснить, где для разделения не нужны чёрные пикселы... Ну а я уже нарисовал свой миллион спрайтов, у меня получается собирать их мысленно, хехех... У этого паренька волосы идут прямо до верха спрайта, у остальных может быть по-другому. Например, у невысоких людей или у детей, а также у лысых, поскольку сама голова находится на растоянии один-два пиксела от волос. Конечно, когда рисуются дети или коротышки, потребуется экспериментировать с пропорциями и, например, отвести не шесть, а лишь четыре пиксела на тело.
Я заполнил спрайт сплошными цветами (без теней). Рассмотрите его волосы, футболку и ботинки. Я сделал причёску красно-коричневой, чтобы выделить лоб справа, а так как с той стороны под волосами нет чёрного, кажется, что эти пряди ближе к голове, чем вихор с другой стороны. Также я оставил пустой пиксел там, где чёрная линия прерывается из-за пробора... Если бы я поставил там точку того же цвета, что и волосы, казалось бы, что на макушке торчит хохолок... Чёрный пиксел в этом месте делал бы причёску слишком приглаженной, и только пустота создаёт эффект отдельных прядей. Один пиксел может внести существенную разницу в восприятие спрайта. Его футболка похожа на безрукавку... Чтобы сделать из неё жилетку, можно добавить чёрный контур, а чтобы превратить её в обычную футболку, нужно поставить белый пиксел на плече рядом с остальной белой массой. Этот единственный пиксел образует "рукавчик" на руке. Для длинных рукавов мне нужно закрасить белым всю руку, кроме последнего пиксела. Позже я покажу кучу подобных фишек.
Теперь добавим оттенки цвета и получим готовый спрайт. Когда вы наносите тени, старайтесь делать так, чтобы свет падал из одной точки... Сейчас источник света находится справа вверху, поэтому тени появились на левой и нижних частях спрайта. В массах очень популярен такой ненапряжный способ: левая и правая стороны затеняются, средняя же часть оставляется светлой... Получается, что источник света расположен прямо по центру. В принципе, это сносно, но спрайт становится немного скучноватым, ибо у него нет "права и лева", есть просто "центр"... Трудно объяснить, наверное, дело в том, что симметричные спрайты менее интересны... С затенением на одной стороне у спрайта появляются вполне определённые право и лево. Тем не менее, нет строгого правила, гласящего, насколько тёмной должна быть тень. Подбирайте, пока не будет смотреться хорошо. Правда, стоит помнить о некоторых моментах... Если у вас яркие источники света (например, действие происходит в середине дня, персонаж стоит у огня и т.п.), тени будут очень тёмными, сильно контрастирующими с обычными цветами. Если свет тусклый (внутри дома, в ночное время и т.п), контраста будет меньше. Я не хочу сказать, что вам обязательно будет нужно разное освещение на спрайтах в зависимости от местоположения, просто имейте в виду, какие эффекты затенения могут быть. Запомните еще приём - сощурьте глаза и взгляните на спрайт: если невозможно отличить светлый оттенок от тёмного, возможно, для них вам нужно больше контраста. Зачем наносить эти тени, если разница незаметна? Это особенно проявляется при использовании жёлтого цвета... Бывает трудно заметить разницу, если чуть добавить тусклости в некотором месте. Лицо, важнейшая часть персонажа, показывает чувства и обычно не сильно контрастно остальной части спрайта... Если контрастность велика, спрайт развалится на цветные куски, что раздражает глаз. Впрочем, при рисовании подобных вещей нет закономерности. Оставляйте то, что выглядит хорошо. В некоторых играх лица были одного цвета, и поэтому детали (глаза, хех) хорошо выделялись. Я сделал кожу нашего спрайта сильно контрастной, и это немного смущает. Рассмотрим нижнюю часть. Нога сзади полностью тёмная, и вы не можете видеть ступню. Нижний черный контур помогает задвинуть её назад ещё больше... Эта линия вполне могла быть тёмно-коричневой, тогда казалось бы, что он поднимает ногу. Ближняя нога ОБЯЗАНА получить больше света, чтобы она выглядела как нога, выставленная перед телом. Его ботинок отделен лишь цветом, также посмотрите на его руки... Дабы его рука выглядела ближней к нам, был добавлен лишь один пиксел тени... Чем больше тени на чём-то, тем дальше оно от нас... Я затенил тёмным цветом всю поверхность другой руки, чтобы сделать её отдалёной. Тем не менее, на кулаке лежит меньше тени, поэтому кажется что остальная рука позади него, и это хорошо. Как я уже говорил, один пиксел может изменить многое, и сейчас мы в этом убедимся:
Вы, наверное, думаете "Что за...?" На первый взгляд, все эти спрайты похожи между собой... Но у них есть различия в один пиксел... Посмотрите на передний кулак. И я покажу, что может сделать одна жалкая точка... Базовый кулак в первой картинке - это просто круг, без угловых пикселов. В результате он выглядит эдаким деликатным кулачком, как у человека с маленькими руками. Вы не можете хорошо описать эти кулаки, как их ни крути - не изменятся. Во втором случае имеется угловой пиксел слева внизу... Теперь кулак как будто прижимается к ноге. Быть может, парень пробирается бродом, или карабкается по камням, или ещё что, это всё из-за направленности кулака вниз... В третьем спрайте угловой пиксел слева вверху. Теперь он указывает на лицо, кстати, пальцем, а не локтём, ибо нижний правый угол скруглён. Получается, что он показывает: "Хто, я?" Четвёртый спрайт имеет пиксел в правом верхнем углу, и движение руки показывает: "Ну, попробуй достать меня!"... Локтя не видно, и пальцы немного направлены к голове. Как бы делает апперкот от себя... или проклинает игрока, хех. У последнего спрайта пиксел внизу справа, и это похоже на локоть, ибо это его естественное положение (в третьем спрайте вы не можете принять тот пиксел за локоть, ибо было бы очень странно видеть локоть именно там, поэтому наш мозг принимает его за пальцы)... Теперь кажется, что он делает апперкот, направленный к себе. Может быть, это начало движения "удар дракона" или ещё чего, хехех. А казалось бы, всего лишь ОДИН пиксел.
Здесь я работал двумя пикселами... В первом случае получилась плоская сторона, направленная внутрь. Два пиксела сделали кулак гораздо более плоским, как будто он кого-то шлёпает им... Ну, похоже, будто он сильно сжал кулак. В первом спрайте кулак прижат внутрь, и выглядит это вполне нормально. Но представьте себе, что он держит что-то похожее на вазу - хочет показать всем свою силу. И поэтому перемещает пикселы вверх... Теперь плоская сторона наверху, как будто балансирует на ней горшком или лампой. В третьем случае плоские стороны находятся по бокам, что выглядит скажем... не очень хорошо. Хых... единственный способ объяснить такое положение кулака, это наличие у него на руке чего-то вроде бронированной квадратной рукавицы, это можно было бы потом показать цветом... У последнего плоская часть находится внизу, он мог бы играть в баскетбол этой рукой или бить кого-то. А самое интересное - что это всего лишь ДВА пиксела, хехе... Теперь попробуем тремя:
Эффект трёх пикселов отличен от эффекта двух. Эта троица добавляет "веса" кулаку... Один пиксел создает деликатный кулак, три же делают нечто вроде увесистого кулачища, как у огра или здоровенного кузнеца. В этих спрайтах кулаки имеют примерно такой же вид, как и предыдущие, только теперь это части больших мускулистых рук, готовых что-нибудь сокрушить. Последний спрайт, у которого все четыре угла заполнены пикселами, выглядит так как будто бьёт нас. Теперь быстро взглянем на другую руку:
Давайте изучим руку, отведенную назад. На первом спрайте у неё нет угловых пикселов, и она похожа на щупальце или ещё что-то подобное... Будто руку расслабили, как-то так... Болтается там, как хвост какой-то. На второй картинке кулак направлен к корпусу, как будто персонаж напряг мускулы и сделал эдакий полукруг из руки. У третьего спрайта пиксел поставлен снаружи, из-за чего рука кажется отнесенной чуть в сторону, в отличие от предыдущего образа, где рука ощущалась ближе к телу. Мужичок на втором спрайте похож на крутого парня, фланирующего туда-сюда, а на третьем - на бегуна, у которого руки находятся в соответствующем положении. У персонажа на последнем спрайте имеется плоская линия внизу кулака, будто он опять играет в баскетбол, или у него пистолет в руке, или это часть брони, или у него просто большой кулак, и т.д... Взгляните на секунду ещё на два спрайта:
Парень слева шустр и быстр, и его руки не так нагружены тяжестью кулаков... Чувак справа более мощен, так как у него увесистые квадратные кулаки. Теперь вы должны понимать смысл моего выражения "Один пиксел может многое изменить"... Вот это и есть самое интересное для меня при работе с подобного рода маленькими спрайтами. Жонглируйте пикселами, чтобы понять, как изменится выражение лица, поза или движение персонажа лишь из-за одного или двух пикселов. Пара пикселов может создать фею или - с равным успехом - огра. Эти несколько точек разницы делают ваши спрайты интереснее и вдыхают в них жизнь. Поэтому, начав с базовой "модели", потом вносите в неё поправки, чтобы в результате получить другое визуальное восприятие персонажа. Для примера я экспериментировал только с кулаками, вы же можете работать единичными пикселами и над другими частями, особенно над выражением лица. Пробуйте, выбирайте, что будет лучше всего смотреться на спрайте. Практикуйтесь, хех... Практикуйтесь много и как следует, скоро этот навык станет естественным.
Итак, у нас есть базовый спрайт персонажа, и если наш герой не парализован и обладает разумом, то ему хочется двигаться и совершать при этом какие-то действия.... Он может просто шагать по городу куда глаза глядят, повторяя: "Добро пожаловать в (город такой-то)!", хех. Значит, нам нужен второй кадр для шагания... Осуществляется это легко. Слева наш прежний спрайт, а в среднем спрайте я взял кусок до конца желтой линии и перевернул в горизонтальной плоскости. Видите, как просто? Конечно, возникла проблема с перевёрнутым освещением, ибо получилось, что солнце перепрыгнуло с одного края неба на другой. Это, пожалуй, не очень хорошо, и поэтому мы подправим цвета теней, чтобы освещение было такое же, как и в первом кадре. У нас теперь есть два кадра для этого малого, и мы можем увидеть его анимированным:
Это простая анимация ходьбы из двух кадров. Если вы строгаете маленькие спрайты для маленького же разрешения, то двух кадров может быть вполне достаточно для достижения нужного эффекта. В ранних Final Fantasies (на Геймбое) персонажи постоянно переключались между двумя своими кадрами, даже когда они стояли. Скажем, вы такого не хотите... Вы желаете, чтобы, когда игрок не нажимает клавиш, персонаж прекращал анимацию. Ну, вы можете останавливать персонажи после прекращения движения в положении с одной ногой впереди или сзади. Если они при этом не выглядят напряжёнными - это нормально. Но вдруг вам потребуются прямостоящие персонажи?
Чтобы получить этот кадр, я просто переделал один из шагающих, сведя ноги вместе и прижав руки по швам. Руки будут выглядеть более расслабленными, если придать им "выпуклость"... Если бы остались три вертикальных пиксела, он был бы похож на солдата, стоящего по стойке "смирно" в строю. При создании стоячего кадра для этих маленьких спрайтов 16х16 возникает проблема двойного столбца... Придётся вам выбрать, где пикселы будут разделять ноги. Я сделал одинаковые тени на ногах (те два горизонтальных пиксела), чтобы ноги казались находящимися прямо под корпусом. Если бы на левой ноге не было ни одного светлого пиксела, казалось бы, что она чуть позади правой. А если бы их было много, нога опять выдвинулась бы, но уже вперёд. Теперь у нас есть "стоячий" кадр, можно его использовать, когда игрок ничего не делает. Есть также другая польза от этого кадра... Можно добавить его в анимацию ходьбы:
Часть 3. Градиент - это злоЯ работал, делая инструментарий и движки для художников, создающих игры и визуальные эффекты более десяти лет, и я всегда недоумевал, что люди делают различия между «программным артом» и «настоящим игровым артом». Я также заметил, что люди, которые дают вам свободно пропустить плохую графику, это в основном другие программисты. Не зависимо от того, как забавна ваша игра или как удивительна технически демоверсия, ‘непрограммисты’, которым вы показываете такой нарисованный персонаж, начинают думать: «Это у него реактивный ранец или может что-то другое?». Зачастую, вы можете найти способ создать хорошую графику без необходимости рисовать ее с чистого листа. Но иногда вам нужно создать графику «на лету». Ограничения в бюджете или правила в игровом соревновании, или просто сжатые сроки для прототипа, могут потребовать от вас взять линейку и кисть в руки.
Я не умею рисовать, правда… Хочу сказать, посмотрите на это:
Если это — то, на что похожа ваша графика, тогда эта статья для вас. Я думаю, что поделился бы рядом подсказок, как сделать графику лучше. Эти подсказки будут полезны всем, вне зависимости от способностей и опыта в рисовании.
В то время как подсказки типа «занимайтесь рисованием набросков каждый день» или «посетите художественный музей» могут быть полезны для начинающего художника, эта статья предназначена не для художника, она о том, как заставить людей думать, что вы — кодер, программист, любящий математику, обладаете некоторыми художественными способностями.
Кроме того, ни одна (почти) из этих подсказок не требует «практики», хотя практика является полезной и даже существенной для настоящего художника. Всегда кажется, что крайний срок сдачи проекта приходит с рассветом, а вам всего-то нужно несколько этих проклятых спрайтов.
Кое-что из этого рассказа пригодится и для пользователей Фотошопа, потому что, насколько я знаю, такие же понятия применимы к любой программе для рисования, и существуют схожие операции для всего, что я упоминаю здесь в Gimp’е, и возможно в любой другой программе, используемой вами.
Некоторое из описанного также адресовано участникам соревнования LudumDare и участникам других подобных соревнований, где цель — создать игру «на лету» за 48 часов. Мои игры имеют склонность достигать хорошего результата в графической категории (увы, убийца геймплея продолжает ускользать от меня), учитывая даже то, что я не считаю себя особенно хорошим игровым художником. Множество этих примеров исходят из моих LD записей, а большая часть этого опыта — это вещи, которые я изучил, участвуя в этих соревнованиях и будучи вынужденным создавать арт в предельные сжатые сроки. Более того, они должны быть бесценны для любого, кто пытается создать качественную графику (или что-то приближенное к ней) при коротком расписании времени или ограниченном бюджете.
Наиболее частая ошибка, которую я вижу и которую легче всего избежать. Палитра, использующаяся по умолчанию для большинства программ компьютерного рисования, возвращает во времена DOS’а (можете ли вы обнаружить связь между цветами в этой палитре и четырехбайтовыми двоичными значениями от 00 до 15? Конечно — да. Если бы вы не смогли это увидеть, вы бы были настоящим художником.).
Я не подразумеваю под палитрой палитру из 16-ти или 256-ти цветов времен VGA. Просто имею в виду скоординированную систему для вашей игры. Если вы начнете с хорошо выбранной палитры, то ваши «каракули» будут казаться эстетически приятными и даже предварительно имеющими «графический дизайн».
Но где мне найти палитру? Я даже не могу подобрать цвета, когда одеваюсь утром!
Хорошо, немного теории цвета проходит длинным путем и если вы потратите пятнадцать минут, чтобы отыскать в интернете, что такое «теория цвета», то вы окажетесь перед определением, что такое игра. Но если у вас нет на это времени, вот несколько советов, которые работают удивительным образом:
Для большой игры вы можете использовать другую палитру на уровне или области игрового мира. В случае, если ваши элементы интерфейса и главный персонаж изображены нейтральными цветами, или если эти палитры имеют общий главный цвет, вы можете в равной степени применять их между уровнями или областями.
В этом примере используется «монохроматическая» палитра, где все цвета различного оттенка очень схожего тона, другие цветовые схемы более разнообразны, но важно то, что цвета смотрятся вместе хорошо.
Ресурсы:
- MultiColr от idee labs
Этот потрясающий сайт хорош тем, что благодаря ему можно сделать палитру и получить связку фотографий на ее основе, просто выбрав несколько желаемых цветов и изображение, из которого затем можно использовать цвета.
Я не умею рисовать!..
Возможно, Вы просто слишком крутой человек, чтобы уметь рисовать. Возможно это все преднамеренно. Так и есть. Вместо того, чтобы делать хороший арт, выберите тему, которая требует плохой арт. Это сработало для «SketchFighter» и «Crayon Physics» , нарисованных на бумаге.
Используйте то, что вам доступно. Получили какую-нибудь ерунду у себя на столе? Вы, возможно, сделали одну из самых популярных игр всех времен «Desktop Tower Defense» .
Люди начинают понимать смысл этого трюка, но у него есть немного лет для существования. Будьте криативными… возможно ваши персонажи — печенья, и вы буквально можете испечь их. Или какой-нибудь зомби-бекон атакует вашу кухню. Или даже волосатая грудь, которой нужно, чтобы ее побрили .
Подсказка Третья: простые формы и силуэты
Круг, Квадрат, Треугольник, Ромб, Трапеция, Параллелограм, и т.д. Вы знаете как точно высчитать их площадь, но вы знаете, что нарисовать их получается плохо? Сделайте наброски нескольких форм от руки, затем добавьте глаза (для персонажа) или колеса (для техники) или что-нибудь еще. Они, возможно, получатся смешными и нелепыми, и совсем неточные.
В зависимости от того, как много кофе вы уже выпили, они могут быть совершенно разной формы. Все в порядке! Это хорошо, фактически, поскольку изъяны и разнообразия создают «индивидуальность» и делают их живыми. Не используйте инструменты для создания форм в своей программе для рисования, это уничтожитель «спрайтовых душ». Делая их очертания отчётливыми, вы облегчаете игроку способность визуально различать их.
Одно замечание: не пытайтесь разбираться с этим во время соревнования по написанию игры. Протестируйте сначала все перед его проведением, чтобы точно знать как что делать. Вы потратите много времени, но во время соревнования это может занять всего 15-20 минут и будет иметь большое значение.
И еще, не спешите делать «запекание» пока не закончите с текстурами для моделей. Вы не сможете убрать «запекание» или сделать его дважды.
Подсказка одиннадцатая: приобретите планшет
Даже если у вас нет стремлений стать игровым художником, но если рисуете какой-нибудь арт на компьютере, то вам нужно приобрести планшет. Необязательно большой или дорогой, можно купить планшет фирмы Wacom. Потому что рисование мышью схоже с рисованием кирпичом на бумаге.
Многие люди, которых я знаю, впервые купившие планшет, не спешили его использовать. Вот некоторые советы, которые помогут максимально эффективно использовать планшет.
- В панели управления планшета увеличьте показатель чувствительности пера на более твёрдый. Это обеспечит наилучший контроль при рисовании.
- Рисование с использованием чистого листа бумаги полностью изменить ощущение. Различные типы бумаги: офисная, страницы журналов, плотная бумага и тд. — помогут полностью ощутить рисование на планшете. Попробуйте.
- Практикуйтесь. Знаю, что до этого я говорил, что ни один из моих советов не требует практики — я лгал. Попробуйте эти упражнения:
- Сделайте в фотошопе десять квадратов в ряд и заполните их черным цветом в радиусе прозрачности от нуля до ста. Под ними сделайте десять пустых квадратов. Попробуйте оттенить нижние квадраты, чтобы выровнять основные квадраты. Попробуйте с другими кистями и попрактикуйтесь с чувствительностью нажатия пера.
- Попробуйте написать что-нибудь, алфавит или просто текст. Начните с больших размеров букв, а потом продолжайте их уменьшать. Это позволит вашей руке привыкнуть к плашнету, также как и глазам к экрану во время рисования.
В сегодняшнее время интерфейсов на основе сенсорных дисплеев, иметь планшет становится выгодно, чтобы понять как работают игры, основанные на этой технологии. Хотя такой подход ничем не отличается в сравнении технологии использования мыши.
