Найкращий спосіб дозволити гравцям «фарбувати» зображення, не втрачаючи кольорової якості?

Я створюю 2.5D ізометричну (2D зображення) гру.

Я хочу, щоб гравці могли «фарбувати» свої броню, одяг та інші речі. Я вважаю, що сіре масштабування всього призводить до втрати деяких більш "природних" забарвлень. Наприклад, виготовлення дракона з червоним / жовтим відтінком сірого і потім нанесення накладного кольору призводить до чисто-червоного дракона з усією втратою вторинного кольору. Тим часом, вмираючи той же Червоний / Жовтий Драконовий блакитний, він робить його синім / білим, що виглядає чудово.

Персонажі моєї гри не мають величезної різноманітності обладнання. Гра ближче до того, як League of Legends обробляє символи та графіку. Для персонажа може бути один тип персонажа (колишній герой), але кілька нарядів для персонажа. Я хочу, щоб гравці мали можливість максимально налаштувати обмежену кількість «нарядів» та персонажів.

Тому я хочу, щоб гравці могли вибрати персонажа, вибрати одну з декількох видів зброї, чергувати жменю вибору костюма (напластованого на персонажів), а потім пофарбувати більшу частину всього (вибрати конкретний металевий колір для зброї, вибрати будь-який колір взагалі для одягу).

Якби я мав змогу використовувати відтінки сірого, не втрачаючи частину забарвлення, я б.

Ось приклад того, про що я говорю:

Неможливо навіть "пофарбувати" Дракона, незалежно від того, що я використовую у параметрах "Кольорове накладення" Photoshop. Очевидно, я роблю це неправильно, якщо можна краще розфарбувати його за допомогою відтінків сірого. Для такого кольору, як зелений або жовтий або світліший фіолетовий, це добре. Для будь-якого іншого кольору це руйнує мистецтво.

Однак, це виглядає набагато краще, якщо я НЕ відтінок його в градаціях сірого, а замість цього просто застосувати колір "HUE" до оригінального (червоного / жовтого) зображення.

Червоний відтінок

Фіолетовий відтінок

Тепер гравці могли пофарбувати колір Дракона будь-який, і він би все ще виглядав чудово! (Жовтий стає білим, тоді як червоний перетворюється на будь-який колір веселки.)

Чи означає це, що БІЛИЙ або ЧЕРНИЙ найкращий вторинний колір? Тоді використовуйте якийсь метод або шейдер, щоб змінити білий (вторинний) колір на щось інше?

Чи є статті про цей складний метод зйомки одного зображення і на основі забарвлення фарбувати різні пікселі?

Для Дракона це найкраще спрацює як Білий / Чорний Контрастний Дракон? Червоний / жовтий найкращий набір кольорів? Виходить набагато краще для зображень, ніж кілька інших кольорів, які я спробував. Чи відтінки сірого все ж вищі?

Чи не містить "Параметри змішування" Photoshop не метод, який належним чином "фарбує" зображення для відеоігри? Чи є складні шейдери / методи, які дозволяють мені досягти кращого успіху?

Примітка: Якщо GrayScale дозволяє мені зменшити об'єм оперативної пам’яті моїх зображень або запобігти втраті якості під час стиснення втрат, це було б серйозно розглянути.

Зміна відтінку - це одна можливість, яка дозволить вам отримати палітру кольорів, не втрачаючи кольорових деталей. Основна ідея полягає в перетворенні кожного пікселя з RGB в простір HSV, потім зміщення відтінку на визначену користувачем суму, а потім перетворення в RGB. Власне, це можна зробити більш ефективно, застосувавши матрицю обертання до значень RGB: створити матрицю, яка обертається навколо осі (1, 1, 1) на визначений користувачем кут відтінку. Тоді ви можете просто застосувати цю матрицю до кожного значення RGB у вашому піксельному шейдері.

Це дозволить перевести червоно-жовтого дракона на жовто-зеленого, зелено-блакитного, блакитно-синього, синьо-пурпурного або пурпурно-червоного дракона. Це трохи обмежує, оскільки два кольори не можна змінювати самостійно при такому підході. Вони зберігатимуть свій відносний відтінок, оскільки вони є автором оригінального зображення. Також є деякі кольори, до яких ви не можете отримати доступ, наприклад, ви не можете зробити чорно-білого дракона таким чином. Однак цього може бути достатньо для ваших цілей.

Інша можливість, якщо у ваших моделей є два або три "ключових кольору" (тут червоний і жовтий), ви можете надати оригінальне зображення, використовуючи окремий кольоровий канал для кожного ключового кольору. У цьому випадку ви б написали дракона червоно-зеленим замість червоного та жовтого, а якби у вас був третій колір, ви могли б написати його синім кольором. Потім ви можете дозволити користувачеві вибрати три основні кольори та використовувати червоний, зелений та синій значення на зображенні як кількість тих, визначених користувачем кольорів, щоб їх поєднати. Отже, ваш піксельний шейдер буде виглядати приблизно як

finalColor = image.r * userColor1 + image.g * userColor2 + image.b * userColor3;

Це дозволить користувачам вибирати будь-яку кольорову комбінацію, яку вони хотіли, включаючи такі речі, як чорно-білий або фіолетовий та золотий.

Проблема, з якою ви стикаєтесь, полягає в тому, що ви не можете просто «підфарбувати» все зображення, а зовнішній вигляд, який ви бачите, є не просто базовим кольором. Для одного ви маєте тонкі градієнти від одного матеріалу до іншого, але що важливіше, у вас є також відбиття, світлі відтінки та тіні, на які не впливає базовий колір. (Вони в основному додаються зверху.)

Тому вам потрібно розкласти зображення на його компоненти.

Приклад :

У цьому випадку ми маємо 3 шари:

• Фон - містить елементи, які не повинні бути кольоровими.
• Частина, яка повинна бути кольоровою - Це множиться на колір. (OpenGL множиться за замовчуванням, якщо вказати інший колір, ніж білий.)
• Основні моменти - вони додають добавку до всього зображення. Це не біле, а жовте, щоб імітувати зміну відтінку. Об'єкти - це не один колір, відтінок змінюється разом із яскравістю.

Я особисто рекомендую використовувати текстури масок, щоб досягти того, що ви хочете. Це гарантує, що ваша основна текстура RGB24 збереже свою первісну кольорову якість, не пошкоджуючи жодної точності. Це також дасть вам багато художньої свободи для поєднання основної текстури з кольоровою маскою.

Кожну маску можна розглядати як текстуру сірого кольору, яка буде лінійно інтерполювати колір основної текстури з вашим власним кольором. Скажімо, ви дозволяєте користувачам налаштовувати два кольори, піксельний шейдер буде виглядати приблизно так:

входи: MainTexture (RGB), Mask1Texture (A), Mask2Texture (A), Colour1 (float), Colour2 (float)

вихід: (Mask1Texture + Mask2Texture) -MainTexture + Colour1 * Mask1Texture + Colour2 * Mask2Texture

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

Я використовував цю техніку для мобільних ігор, і це не вплине на вашу загальну продуктивність. Це може коштувати вам на 33% більше оперативної пам’яті за текстуру, але компроміс за якість, мабуть, того вартий.

Ps Якщо ви думаєте використовувати лише один спеціальний колір, ви можете просто використовувати альфа-канал основної текстури RGBA32 як маску.

ви можете використовувати кольорову палітру і дозволити гравцеві редагувати палітру. Якщо ви використовуєте шейдери, ви можете використовувати 1D текстури як палітри, а вихідне сіре значення - як індекс.

Щоб перетворити справжнє кольорове зображення у зображення з 255 кольорами, ви можете взяти всі свої значення піксельних кольорів та згрупувати їх у 3d кольоровому просторі до 255 кластерів за допомогою алгоритму k-означає. Або використовувати загальні засоби перетворення зображень. Тоді важливо згадати, що інтерполяція текстури сірого значення буде інтерполяцією показників у ваших кольорових текстурах. Це може призвести до того, що у вас є кілька кольорів між двома текстилями вашого початкового зображення. Це можна вирішити, відключивши інтерполяцію (я думаю, ви цього не бажаєте) або сортуючи палітру кольорів корисним чином.

ви можете перетворити зображення в сіре зображення, але все ж зберегти його за допомогою каналів rgba. зберігайте значення ваги в альфа-каналі, а потім використовуйте це, щоб визначити, скільки барвника нанести на піксель. цю вагу можна обчислити, виходячи з того, наскільки близький колір до білого. чим ближче до білого пікселя, тим менше наноситься барвника чи менша вага. це дозволить залишити більшість виділень з їх первісною легкістю, але нанесіть на неї трохи барвника. остаточний колір пікселів може бути знайдений шляхом обчислення кожного каналу Ro + (Rd * Ao), де Ro - початковий червоний, Rd - червоний у кольорі барвника, а Ao - альфа оригіналу. тому всі білі пікселі не отримують нового кольору, а всі чорні пікселі передбачають колір барвника.