| |
ANTIALIASING
Автор: Nemesis42 (перевод: Gas 13)
|
С чем его едят? Технически anti-aliasing (AA) это представление изображения в сглаженном виде на растровом дисплее. Что ты несешь!? Ну, во-первых, экран состоит из точек (пикселей). Пиксель - маленький квадратик на экране. Когда-нибудь смотрели на экран вблизи? Видели эти маленькие красно-зелено-голубые точки? Пиксель состоит из них. К сожалению, у них есть слабая сторона: трудно передать кривые линии и углы квадратиками. AA - выход из ситуации. Он позволяет получать сглаженные изображения. Теперь понятно? Нет? Ну, может тогда стоит показать на примере, чем рассказывать.
 (c) X-G.
Как видите, слева картинка абсолютно гладкая, тогда как справа, видны квадраты. Левое изображение создано с использованием техники AA. В увеличенном виде оба рисунка выглядят плохо, но в нормальном виде AA улучшает рисунок.
Сглаживание круга... Идея AA достаточно проста. Взгляните на эту диаграмму :
Выглядит странно? Давайте объясню. Скажем у вас есть круг, который вы хотите увидеть на экране. При большом размере (когда у вас множество пикселей) это не проблема. Но, что если вы хотите увидеть маленький кружок на экране... Имея небольшое количество пикселей, вы не сможете сложить кружок. Тут нам как раз поможет AA. Приложим этот кружок к сетке, как на втором рисунке. Каждая секция сетки - это пиксель. Все бы хорошо, но каждый пиксель может быть только одного цвета и это создает проблему без AA (как на рисунке 3). Поэтому мы должны определить насколько каждая секция заполнена и залить ее цветом в соответствии с процентом присутствующих цветов, как на рисунке 4. Таким образом, в нашем примере мы заполняем секции оттенками серого. Когда мы вернемся к исходному размеру, наш круг будет выглядеть замечательно!
Бесплатно - только сыр в мышеловке. Все это хорошо, но только частично относится к пиксельной графике. Pixel art, во-первых, как правило, ограничен в размерах. Вторым ограничением является количество цветов. Вы не сможете работать с 250 оттенками серого, скорее не более 1 или 2. Поэтому, Вы будете вынуждены сводить все 250 оттенков к этим двум, которые у вас есть Если вернуться к примеру с GameBoy, вы заметите, что X-G для AA использовал в некоторых местах одну, в некоторых - 2 тени для AA. Все очень субъективно, но теперь, когда вы знаете теорию, все что вам надо - это немного опыта. А чтобы его набраться я бы посоветовал вам форум Pixelation.
Предостережения... Помните, что есть путь истинный и неверный. Путь истинный - создавать иллюзию, описанную выше. Ошибочный путь - добавлять 50% затемнение вокруг каждого пикселя как показано ниже:
Слева - то как некоторые представляют себе AA: добавляют тень к каждому пикселю вокруг. И это не столько не правильно, сколько выглядит плохо. В центре правильно, но не совсем хорошо. Выглядит мягче, но очевидно, что проблема не устранена. И последний рисунок выполнен правильно. Использованы 2 тени и создана иллюзия гладкой лини. Заметьте в некоторых местах совсем нет AA, а в некоторых местах использовано несколько пикселей с одной тенью.
Остановите это безумие! Итак, теперь Вы знаете основы AA. На примере я показал, как работать с черным и белым цветом. Как же сделать это в цвете? В принципе, точно так же, только вместо определения процентного соотношения черного и белого, вы определяете соотношение цветов. Вы еще здесь? Да? Хорошо. Пришло время для еще одного рисунка:
Итак. Каждая секция состоит из цветов, замешанных в пикселе. Вверху вы видите цвета, которые мы пытаемся замешать, а ниже - то, что получилось. Слева черный и белый (цвета с которыми мы уже работали). После смешивания мы получаем серый цвет. Чтобы получить его, мы смешиваем процентное содержание черного и белого. Также красный + желтый = оранжевый и т.д. Справа у нас уже 3 цвета. Мы обрабатываем их таким же образом. Все очень просто. Однако, как уже было сказано выше, обычно, количество цветов у вас ограничено. И лучше просто представить средний цвет между двумя для AA.
А можно увидеть пример? Конечно. Я продолжу использовать серый цвет, но все это сработает и в цвете.
Ah! Смотрите, это поющая Twizzy. Разве она не прелесть!? Такая милая ^_^ На увеличенной версии стрелками указаны важные места. Заметьте, в некоторых местах использованы по несколько пикселей в ряд для AA (на груди, например). На рукавах можно заметить, что я вовсе не использовал AA. Пробуйте, и смотрите, как получается лучше. Кнопка "Undo" должна стать вашим лучшим другом.
А вот цветной рисунок, основанный на рисунке из DDR Konamix. Без AA многие вещи были бы просто незаметны. Также обратите внимание на AA на руках и голове.
А теперь вперед, друзья мои!!! Возможно это было слишком драматично. В любом случае, надеюсь хоть что-то стало понятно и вы попробуете эту технику и если Вам будет нужна помощь, заходите на Pixelation форум и вам обязательно помогут. И помните, не узнаешь, не попробовав. Получится рано или поздно, поверьте мне!
|
|
|
