Я уже описывал возможности векторного редактора Xara X в прошлых выпусках. Я делаю в нём всю игровую графику на протяжении многих лет. Считаю его очень удобным и полезным. У меня, естественно, выработались какие-то предпочтения и привычки. Не знаю, насколько они оптимальны. Но если вы запустите Xara X с нуля и попытаетесь в нём что-то нарисовать для игры, то без правильных настроек столкнетесь с кучей проблем.
Здесь я распишу все настройки, которые надо сделать.
Если про какие-то настройки я не говорю, значит, они просто не важны и пусть стоят как стояли.
Итак, вы запустили Xara X (у вас может быть любая версия, настройки везде одинаковые). Я буду показывать всё на примере бесплатной версии 5:
Зайдите в меню Utilities → Options и начнём с вкладки Units:
Выберите для Page Units и Font Units значение Pixels. Все размеры должны быть только в пикселах. Нас не интересуют ни дюймы, ни сантиметры, ни поинты. Мы делаем игры, а не полиграфию.
Далее, для Color Units выберите значение 0-255. Если измерять цвет в процентах, у вас будет 100 градаций, а если в числах, то 255. Что из них точнее соответствует компьютерным значениям цвета – очевидно.
Обязательно нажмите "Применить"!
Теперь идём на вкладку Page Size:
Установите ориентацию страницы в Landscape. Но если вы делаете, например, приложение для телефона, то можно поставить Portrait.
Выберите размер бумаги (Paper Size) как Custom и укажите размеры в пикселах: ширину и высоту. Они должны совпадать с размерами игрового экрана. Например, для FullHD я указываю 1920*1080. Это необязательно, но так вы сможете отрисовать целый игровой экран, который будет совпадать пиксел в пиксел.
Размеры пишите просто 1920, 1080, а единицы измерения (пикселы) у вас уже заданы. Когда откроете настройки повторно, то увидите, что к размерам автоматически дописалось pix. Это можно дописывать и руками (везде, где есть размеры).
Outer Margin – это серое пространство вокруг листа. Я делаю его побольше, чтобы перетаскивать туда объекты, которые временно не нужны или мешают. Ну то есть для меня это просто место вне страницы, куда можно складывать всякий хлам.
Нажимайте "Применить", и пойдём дальше, на вкладку Grid and Ruler:
Необходимо задать сетку. Major Spacing, конечно в пикселах, это крупный шаг сетки. Неважно, чему он равен. Для наших задач необходимо установить параметр Number of Subdivisions равный Major Spacing. Так мы получим однопиксельную сетку, к которой можно будет привязывать объекты.
Origin: это начало координат, нужно установить в (0,0).
Coordinate direction: нужно установить Y increases в Downwards. Таким образом мы получим систему координат, совпадающую с игровой 2D-графикой.
Жмите "Применить", следующая вкладка General:
Give new objects most recent attributes: речь идёт о том, давать ли новым объектам свойства ранее созданных (цвет, прозрачность и т.д.) Это может быть иногда полезно, иногда нет. Включайте на своё усмотрение.
Select only items inside rectangle: когда вы помечаете группу объектов, то растягиваете на экране прямоугольник. Эта настройка задаёт, какие объекты помечаются: те, которые полностью помещаются в прямоугольник, или те, которые помещаются хотя бы частично. Я использую только первый вариант, он на практике сильно удобнее.
Angle constraint: ограничение угла поворота. При вращении объекта с прижатой клавишей Ctrl можно делать поворот на фиксированное число градусов. По умолчанию это 45, но я всегда ставлю 5, потому что это позволяет поворачивать объект более гранулированно. Если нужно повернуть на 45, это легко сделать и с шагом 5.
Nudge size: расстояние, на которое объект перемещается стрелками на клавиатуре. Здесь я всегда ставлю 1. Одно нажатие клавиши – перемещение на 1 пиксел, очень удобно подгонять размер или позицию объекта. А Shift+стрелка – перемещение на 10 пикселов.
Duplication distance X, Y: на каком расстоянии от оригинала создаётся его копия. Обычно копию всё равно нужно перемещать, так что это не принципиально, но для ровности я ставлю (10, 10).
Нажимаем "Применить" и идём дальше. Вкладка View:
Interactive fill dragging: при градиентной заливке/прозрачности показывать результат прямо во время шевеления мышкой. В принципе это хорошо.
Import all photos at 96 dpi: Надо выбрать эту настройку, чтобы при импорте картинок они не сжимались в размере, а занимали ровно столько пикселов, сколько в них есть.
Color line size: это относится к нижнему меню с цветами. Настраивайте под себя.
Edit local colors in: в какой цветовой системе редактировать цвета. Так как в играх мы используем RGB, то здесь следует выбрать RGB.
Небольшое уточнение: в режиме RGB видны значения компонент R,G,B в готовом для использования виде (0..255), но сам цвет выбирать не очень удобно, так как нужно возить три ползунка. В режиме HSV удобно выбирать цвет, но нет готовых значений RGB. В любом случае, эти режимы можно переключать прямо на месте.
Right-click on color: что делать при клике правой кнопкой мыши на цвете (не везде, а в цветовой полоске). Здесь я ставлю "set line color", чтобы левом кликом устанавливать цвет объекта, а правым – цвет обводки.
Delete unused colors...: вы можете создать какие-то объекты с новыми цветами, затем удалить объекты, а цвета останутся. Данная настройка позволяет решить, что с ними делать при сохранении файла: удалять как неиспользуемые или оставлять.
Всё, эти настройки можно закрыть. Теперь откройте меню Window и там выберите "Snap to grip". Это заставит все объекты прилипать к 1-пиксельной сетке. Вы можете также включать и выключать прилипание, нажимая "." на дополнительной цифровой клавиатуре.
Далее, отключите в верхней панели вот это:
Эта настройка заставляет толщину контурных линий масштабироваться вместе с объектом. Для просто рисунков это нормально, так как соблюдается пропорция между размером объекта и толщиной линии, но для игровой графики это почти всегда недопустимо, так как толщина линии станет не кратной 1 пикселу. Бывают, однако, и случаи, когда надо по-другому.
Далее, выберите инструмент "Линия" (F4) и установите тип линии в "прямой". Так удобнее, когда вы начинаете рисовать. Если этого не сделать, все линии сразу же будут получаться искривлёнными.
Проверьте ещё раз все настройки. Когда всё готово, выберите меню File→Save Template и сохраните этот файл как шаблон. Все настройки сохранятся вместе с ним.
Теперь вы можете создавать новые файлы из этого шаблона, когда выберете File→New. Вы также можете сделать несколько шаблонов с разными настройками на разные случаи жизни.
Подготовив таким образом рабочую среду, в следующем выпуске мы нарисуем примерно такую кнопку и разберём, как её экспортировать для использования в программе: