Обводки

Три вида линий

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

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

Темные или цветные

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

Цветные линии берут цвет формы, на фоне которой лежат: темно-красная линия на красном плаще. Если пойти дальше и осветлять линии на освещенной стороне, получится selout.

Частые ошибки

• Линии толщиной в два пикселя. На маленьких размерах двойная линия съедает спрайт. Линии должны быть в один пиксель.
• Г-образные углы. Когда линия меняет направление, угловой пиксель, касающийся обоих соседей, образует «Г» и выглядит толстым. Шагайте по диагонали.
• Разорванные тонкие части. Лезвие меча или посох шириной в один пиксель при небрежной отрисовке может распасться на точки. Держите его сплошной однопиксельной линией.
• Обводка каждой складки. Слишком много внутренних линий превращают спрайт в каркас. Пусть мелкие детали передает затенение.
• Внутренние линии такие же темные, как силуэт. Форма перестает читаться как один объект.

Как сделать это вручную

1. Залейте форму спрайта одним плоским цветом и проверьте только силуэт.
2. Нарисуйте линию силуэта шириной в один пиксель, без L-образных углов.
3. Добавляйте внутренние линии только там, где части перекрываются и их можно спутать.
4. Затените, а затем добавьте сгибы только там, где затенения не хватает.
5. Выберите темные или цветные линии и применяйте их везде.

Как это делает Pixor

Pixor находит линии по глубине, нормалям и id частей рендера и считает линии силуэта, внутренние и линии сгибов отдельными видами. Каждый можно исключить, нарисовать темным в выбранном цвете или нарисовать как выборочную обводку. Линии шириной в один пиксель без L-образных углов, тонкие части модели сохраняются однопиксельными линиями, а линии, появляющиеся только на один кадр, вычищаются. Каждый параметр линий — узел в графе стиля.

Похожее

• Selout
• Рампы палитры
• Облики и руководство по параметрам