Galaxy2D Tutorials Галактика 2D
FAQ о клетках

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

 

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

 

Вряд ли мне по силам осветить все аспекты данной проблемы, но кое в чем я смогу вам помочь.

 

Для работы с палитрой подходят следующие программы Adobe Photoshop v 3.05 или выше, Electronic Arts' Deluxe Paint, Autodesk Animator Pro v 1.1. Эти программы позволяют манипулировать с палитрами и переводить изображение с одной палитрой в другую палитру. Кроме этого, Adobe Photoshop позволит вам осуществлять перевод с 24 битных изображений в 8 битные.

 

Вы должны понимать, что такое RGB и HLS режимы. Но для полноты изложения приведем определение, как это трактуется в Animator Pro.

 

RGB ( Красный - Зеленый - Синий ) - способ задания цвета при помощи смешивания этих трех цветов.

 

HLS ( Цвет - Яркость - Насыщенность ) - способ задания цвета посредством указания этих трех параметров.

 

RGB - это основной способ задания цвета, но HLS - более подходит для манипулирования цветами и создания плавных переходов цвета от темных тонов до более светлых.

 

Кроме этого, я предполагаю, что вы освоили программирование физических регистров палитры, например, через DirectX.

 

Введем понятие регистр палитры. Как вы уже, наверное, знаете, в 256 цветной палитре, каждому цвету под номером 0 до 255 можно поставить в соответствие любой из 256 тысяч цветов. Так вот я назову регистрами палитры любой из этих 256 цветов. Просьба не путать с цветами и физическими регистрами палитры.

 

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

 

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

Несколько регистров на меню, окна и другие стандартные атрибуты по управлению игрой.

Выделить цвета для текстур, таких как стены, трава, вода и прочие.

Предусмотреть цвета для объектов, таких как персонажи и враги.

Не забыть цвета для фоновых изображений, подобно небу, облакам и дальнему виду.

Оставить несколько резервных регистров для улучшения конвертирования 24 битного изображения в 8 битное.

 

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

 

Наверное, такой подход покажет вам через чур сложным. Не просто ли сделать общую на все случаи палитру? Конечно, можно, но при этом пропадает масса эффектов с палитрой. Кроме этого, надо просто привыкнуть к подобному подходу, и в дальнейшем вам все покажется простым и понятным.

 

Во - первых, для чего необходимо такое разделение палитры. Для того чтобы иметь возможность не зависимо друг от друга менять части палитры. Например, вам необходимо при высвечивании меню сделать затемнение игрового поля. Если вы разделили палитру на части, то достаточно затемнить часть палитры отведенную под игровое поле, чтобы получить желаемый эффект. Так вы при этом не трогаете другие регистры палитры, то затемнение их не коснется.

 

Кроме деления палитры на части вы должны четко продумать какие цвета вы будете использовать. Например, вам необходим взрыв, то используйте цвета от яркого желтого до темно - красного и темно - оранжевого. Если вы хотите иметь грозовое небо, то используйте цвета от темно - синего, фиолетового до ярко - голубого ( для отображения вспышек ). Если вы опытный художник, то лучше всего делать цвета самому. Начинающие могут собирать цвета с реальных фотографий. Если, например, вам нужны телесные цвета, то выберите пару изображений в журналах с обнаженным телом, со сканируйте их. Выберите в Adobe те цвета, которые вам необходимы и используйте их.

 

Если ваше приложение будет выполнено в темных или наоборот светлых тонах, то убавьте или добавьте яркость, соответственно, в регистрах ваших цветов.

 

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

 

Если, вам не достаточно данных инструментов, всегда можно создать собственный инструментарий по работе с палитрой.

 

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

 

Диапазон могут быть различной длины. Для работы в Deluxe и Ani удобно диапазоны иметь длиной 8, 16, 32 и далее регистров. Но в каждом конкретном случае длина диапазона может быть разной. Диапазоны могут состоять и из цветов, которые не умеют плавного перехода от темного к светлому.

 

Какой длиной должен быть диапазон? Это зависит от конкретного приложения. Если увеличить диапазон цвета, то это даст более плавные градиент цвета. Но, если у вас нет больших однотоных объектов, то в этом случае вам не нужны будут большие диапазоны цвета. Надо помнить, что большинство мелких деталей обычно не различимы. Кроме этого, при увеличении разрешения можно применять сглаживание цветов, так передача полутонов станет менее заметной.

 

Не повторяйте одни и те же цвета  в разных диапазонах. Например, черный и белый цвет могут располагаться в сером диапазоне, который будет общим для всех палитр. Не забудь повторить где-нибудь цвет, который находиться в регистре прозрачного цвета. Конечно, некоторые диапазоны необходимо будет делать от черного к белому цвету, но в некоторых случаях будет достаточно только средних цветов.

 

Для трехмерных приложений очень важно будет чтобы цвета в диапазоне различались друг от друга равномерно, но при этом надо учесть, что различия между темными тонами цвета человеческий глаз различает лучше, чем между более светлыми. Для этого можно использовать специально подготовленный серый диапазон и использовать HSL режим изменения цветов для изменения регистров палитры, при этом сохранив разницу между цветами. Т.е. вы должны менять насыщенность ( saturation ) и оттенок ( hue ) для выбора цвета и не изменять яркость для получения плавного градиента.

 

Если вам лень самому создавать регистры палитры можно использовать палитры старых игр. Для этого необходимо иметь захватчик экрана. Их великое множество раскидано по бескрайним просторам Internet. После того как захватите изображение, вы можете использовать те диапазоны, которые вам необходимы.

 

В некоторых случаях всех перечисленных методов бывает не достаточно или полученные цвета в регистрах не обладают должной насыщенностью и яркостью. В этом случае вы всегда можете сами сгенерировать палитру. Это достаточно тонкий процесс. Ниже на примере конвертирования изображения из RGB в 8 битную палитру я покажу, как сгенерировать палитру с оптимальным цветовым охватом.

 

Подведем итог для создания регистров палитры вы можете:

 

Использовать готовые изображения.

Создавать диапазоны самостоятельно.

Использовать палитры готовых игр.

Генерировать палитры.

 

Теперь рассмотрим проблему конвертирования 24 битных изображений в 8 битную палитру. Существуют несколько разных методов для наиболее четкого подобного конвертирования. Но для начала оговоримся, бессмысленно утверждать, что возможно конвертировать все возможные изображения в 24 битах в 8 битную палитру. Это невозможно. Но всегда есть возможность несколько ухудшить качество изображения без значительного изменения внешнего вида. Т.е. всегда приходиться выбирать, чем поступиться для сохранения привлекательности.

 

Для чего может понадобиться перевод изображения из полноцветной палитры в 8 битную? Как правило результатом работы многих программ создания изображений могут являться 24 битные изображения. В основном большинство таких программ могут и сами произвести усечение до 8 битной палитры. Но они не располагают такими средствами как, например PhotoShop. Для более точного конвертирования 8 битных изображений с разными палитрами, так же необходим перевод исходного изображения в 24 битную шкалу, а потом уже в результирующую 8 битную палитру.

 

Расскажем только об общих принципах работы не вдаваясь в детали. В Photo есть возможность переводить изображение из RGB режима в Index Color при этом выбирать способ конвертирования : pattern ( по шаблону ) и dithering ( случайное сглаживание ). Так же можно выбрать палитру, в которую производиться конвертирование. Можно также сделать палитру, которая будет наиболее близко подходить по цветам к изображению, указав количество используемых регистров палитры.

 

Предварительно, из изображения можно удалить плавные переходы цвета, которые не играют существенной роли при отображении, но, тем не менее, могут не красиво отобразиться в результирующей палитре. Это происходит в том случае, когда в 24 битном изображении есть цвета или переходы цвета, которые не могут быть корректно отображены в 8 битной палитре. Для удаления таких лишних цветов используйте “Цветокоррекцию” и “Магическую палочку”. И потом необязательно чтобы все цвета в 8 битном изображении были точно, такими как в 24 битном. Всегда можно и изменить их тональность без существенного ухудшения качества изображения.

 

Так же для снижения количества цветовых оттенков можно использовать фильтр HSV или программу PolyView. Совместно использование фильтров “Размытие” и “Резкость” позволяют так же сократить количество оттенков.

 

Для сокращения оттенков цвета в Ani есть режим “Сжатия” палитры. При этом в некоторых случаях можно в 2 - 3 раза сократить количество цветов в изображении.

 

Возможно, у вас займет определенное время этот процесс, прежде чем вы достигнете желаемого результата.

 

Если вы постоянно проделываете одно и тоже то, наверное, вам захочет самому написать конвертор из 24 бита в 8 бит. Ниже я расскажу, как это делается.

 

Теперь поговорим об эффектах которые можно сделать с помощью смены регистров палитры.

 

Затемнение и засветление изображение. Для этого вам необходимо всего лишь удалять или добавлять некоторую постоянную величину к регистрам палитры.

Мерцание отдельных регистров, например для оконтуривания объектов. Мигание звезд, светильников.

Циклическое изменение регистров или просто перестановка. Например, для придания движения воды. Закат - плавно чередуя цвета от самых ярких внизу к самым темным вверху до полного затухания. Пламя двигателя двигается, если циклически менять цвет.

Сглаживание спрайтов с фоном.

Вывод полупрозрачных затемнений типа меню.

Использование части палитры для вывода серых изображений. Например, у вас есть окантовка экрана, вы хотите, что бы на каждом уровне она меняла свой цвет, но при этом текстура окантовки была той же. Для этого создайте текстуру в серой палитре, например 32 цвета. Выводите ее на экран, используя регистры окантовки, и меняйте их, таким образом, как вам хочется. Например, смените основной оттенок с синего на красный.

Использование части палитры для более точного подгона фонового изображения. Как это делается в Windows или играх Sierra.

Метод коррекции гаммы или программная регулировка яркости. При этом имеется несколько разных палитр, которые устанавливаются в зависимости от номера гаммы.

Анимация цветами. Движение мячиков, метеоритов - когда рисуются пути метеоритов и также циклически меняется цвет.

Создание демонстраций типа движений огня.

Можно в спрайтах оставить по краям точки с номерами цветов, которые можно динамически переопределить в зависимости от окружения спрайта. Для сглаживания острых краев. В зависимости от номера регистра сглаживающего цвета можно определить какой цвет сглаживать. Цветовое сглаживание - это подбор цвета, например в линии, чтобы она казалось идеально равной. Для этого надо взять тот цвет который на экране и тот который надо сглаживать взять среднее арифметическое и соответственно изменить данный регистр палитры отвечающий за данный исходный цвет. Так же можно сглаживать не квадратам, а по кругам.

Изменение освещения объектов. Например, выделим для каждого объекта на экране часть палитры. Теперь для изменения его освещенности достаточно соответствующим образом изменить палитру объекта.

 

Для всех этих эффектов характерным является работа с физическими регистрами палитры. Лучше всего менять не все сразу, а по частям. Например, 32 регистра за один кадр.

 

Приведение одной палитры в другую можно сделать составив таблицу перекодировки одной палитры из другой. Т.е. для каждого цвета исходной палитры надо сопоставить цвет приемной. Самый простой метод найти ближайший цвет это сложить абсолютную разницу между значениями цветовых составляющих ( RGB ) цвета приемной палитры и цвета исходной, и найти регистр в исходной палитры который меньше всего отличается от цвета приемной.

 

Пусть r, g, b цвет в приемной палитре, т.е. тот цвет, которому надо найти соответствие в исходной палитре. Тогда искомый цвет в исходной палитре будет найден по следующему алгоритму:

 

Минимальная разница = 1024

Для всех 256 цветов исходной палитры выполнять:

                         разница =         abs ( R - исходная палитра [ i ]. R ) +

                                                  abs ( G - исходная палитра [ i ]. G ) +

                                                  abs ( B - исходная палитра [ i ]. B )

                         Если разница меньше чем минимальная разница то

                                      считать этот цвет искомым

 

В данном случае разница находиться в кубе, а надо в эллипсе. Т.е разность должна находиться :

                         разница =         ( R - исходная палитра [ i ]. R )^2 * 0.229 +

                                                  ( G - исходная палитра [ i ]. G ) ^2 * 0.587 +

                                                  ( B - исходная палитра [ i ]. B ) ^2 * 0.114

 

Коэффициенты в данном случае учитывают предпочтение отдаваемое человеческим глазом одним цветам по сравнению с другими.

 

Данный подход очень быстро работает, но иногда передача цветовых оттенков происходит не совсем корректно. Особенно когда цвета палитр сильно отличаются или в палитре исходного изображения намного больше плавных переходов цветов, чем приемной.

 

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

 

Дальнейшие приведение 24 битных изображений в 8 битные будет рассматриваться на примере адаптированной палитры. В принципе любое 8 битное изображение просто перевести в 24 битное и в дальнейшем воспользоваться приведенными ниже алгоритмами.

 

24 битный цвет состоит из трех составляющих R, G, B каждая из которых меняется 0 до 255. Построим палитру в которой цветовые компоненты будут меняться :

 

0 < R < 5; 0 < G < 7; 0 < B < 4;

 

Тогда всего будет 240 цветов. Оставшиеся цвета не будут использованы.

 

Для построения такой палитры можно использовать формулу вычисления номера регистра палитра:

 

номер регистра палитры = B * 8 * 6 + G * 6 + R;

 

Например, при R=2, G=3, B=1 - номер = 68.

 

Теперь перейдем к алгоритмам смешивания. Существует два основных вида алгоритмов смешивания:

 

упорядоченный алгоритм с использованием шаблонов;

алгоритм с распределением ошибок.

 

Алгоритм смешивания с шаблонами ( halftonig, pattern ) использует заранее просчитанные шаблоны для вычисления регистра адаптированной палитры в 24 битного цвета. Шаблоны представляются матрицами. Размерность матрицы берется 2x2, 3x3, 4x4. Рассмотрим матрицу 2x2. Преобразуем каждый пиксель исходного 24 битного изображения в матрицу пикселей приемного изображения размером 2x2. Затем найдем наиболее подходящий из матрицы пиксель и занесем его в результирующие изображение.

 

Для того чтобы корректно произвести данные операции мы должны знать как составить матрицы и каким образом выбирать из них пиксели.

 

Во - первых такие матрицы составляются из двух цветов адаптивной палитры, которые наиболее близки к исходному цвету. Во -вторых состав матрицы зависит от координат пикселя ( т.е. на изображение накладывается шаблон ). Ниже приводиться способ вычисления для голубой компоненты цвета:

 

Bd = { 0, 1, 2, 3 } - цвет;

Be = { (B-0)*5/(63-0), ... , (B-191)*5/(255-191)} - весовое соотношение.

 

В зависимости от значения исходного цвета:

 

0<=B<63; ... ;191<=B<255,

 

выбирается одно из значений Bd и Bd+1. Результирующий цвет будет равен Bd+1, если Be>Dij, иначе Bd. Где i=x%2, j=y%2,

 а Dij =  [ 3 1 ]

             [ 0 2 ].

X, Y - координаты исходного пикселя.

 

Вычислите таким же образом значения R, G и теперь по ним вычислите номер регистра палитры и занесите его в результирующие изображение.

 

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

 

Алгоритм с распределением ошибок учитывает ошибку возникающую при замене пикселя исходного изображения на пиксель в приемном изображении. Ошибка распределяется на соседние пиксели. Обычно на соседних 4 пикселя. Для каждого пикселя вводится свой весовой коэффициент распределения ошибки. При этом сумма всех весовых коэффициентов должна равняться единице.

 

a + b + c + d =1,

 

где a=7/16, b=3/16, c=5/16, d=1/16 и распределение ошибки происходит так

 

                                      исходный пиксель I  a

                                                 b      I     c     I  d

 

Так же значения весов могут быть a=c=3/8, b=0, d=1/4.

 

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

 

PMG  18 января 2006 (c)  Сергей Анисимов