Создание сцены в С2\С3 и работа с цветом

только самые лучшие уроки, мануалы, советы по Construct 2

Сообщение Создание сцены в С2\С3 и работа с цветом
» 15 фев 2019, 00:52

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

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

Их святейшества Soft light, Color и Overlay.

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

В чем же суть? Soft light, Color и Overlay это по сути просто способ наложения спрайта. Есть множество способов их применения и множество других способов наложения, но я рассмотрю самые базовые, часто используемые мной.
Для начала, как это вобще делать? Кликаете на спрайт в констракте, находите параметр "effect" в столбце слева. В окне эффектов находите нужный (Soft light, Color или Overlay), активируете его. Всё. Mission Accomplished.

instr02.png

instr010.png


Часть 1
Soft Light

Soft Light - ваша картинка слишком тёмная или слишком светлая? Вам поможет Soft Light. Почему бы мне просто не использовать чисто белый, полупрозрачный спрайт что бы сделать картинку светлее, спросите вы. Потому что он просто наложит белый цвет поверх вашего изображения, как бы добавляя белый поверх всего, в то время как Soft Light, помимо выстветления картинки, ИЗМЕНИТ ЕЁ ЦВЕТ.
По такому же принципу работает Color и Overlay. Вся суть в ИЗМЕНЕНИИ цвета.

Пример:
а) Базовый спрайт. Чота он какой-то тёмный, меня это не устраивает
01.png

б) Слой с просто наложенным поверх полупрозрачным (50%) белым спрайтом
02.png

в) Тот же самый полупрозрачный белый спрайт с эффектом Soft Light
03.png


Просто, сердито, и не влияет на производительность (как я полагаю). Используйте Soft Light для контроля яркости изображения. Белый = светлее, чёрный = темнее.

Часть 2
Color

"Ой, у меня синий космический кораблик на красном фоне. Он слишком сильно выделяется и смотрится не в тему. Плюс у меня ещё есть зелёный и жёлтый фон... и фиолетовый... што делать?"
Первый шагом будет сделать спрайт с эффектом Color (как и в случае Soft Light, это просто одноцветный спрайт растянутый на весь экран). А может я просто возьму красный спрайт и наложу поверх синего корабля? Нееееет, задай ему эффект Color. Таким образом всё что находится под этим спрайтом ВПИТАЕТ в себя красный цвет и ИЗМЕНИТ его на более красный.

Художники знают, что если посветить на белый шар жёлтым светом, он приобретёт желтоватый оттенок. Зелёным светом - зелёный, и т.д. Color поможет нам частично сделать именно это и он крайне полезен как раз в играх. Почему? Опять же, скажем так ваш рыцарь начинает игру в светлом, солнечном осеннем лесу, вокруг жёлтые и оранжевые листья и всё такое. Вы думаете: "ну ок, сделаю рыцарю доспехи с красным оттенком. Жёлтый, оранжевый, красный... должно хорошо сочетаться!" И верно, сочетаться будет хорошо. Однако на следующем уровне рыцарь попадает на болота. Тёмные, туманные и зелёные. Красный рыцарь, посреди зелёных болот будет смотреться уже не так круто. И что же делать? Вот то что я сверху написал.

Примеры:
а) Серобуромалиновая мешанина из бэков, спрайтов, спецэффектов и всего остального. Это вообще из одной и той же игры?
col01.png

б) Наложим просто красный (тут скорее розово-фиолетвый) спрайт поверх.
col02.png

в) Наложим тот же спрайт с эффектом Color поверх. Стало намного лучше, яркость картинки не изменилась, она просто впитала в себя красный (розово-фиолетовый) цвет и теперь мы можем перейти к завершающему мазку.
col03.png


Часть 3
Overlay

Моя прелесть) Считайте это неким сочетанием Soft Light и Color в одном. Лучше всего подходит для эффектов освещения. Как я уже говорил выше, каким цветом посветим на белый шарик, таким он и будет. Overlay отлично справляется с этой задачей. Он высветляет сильнее Soft Light и меняет цвет покруче чем Color, но в своей определённой манере.

Примеры:
а) Создадим такую себе тёмную сцену
over01.png

б) Добавим оранжевый Color спрайт. Он привёл всю сцену к оранжевому оттенку.
over02.png

в) Врубаем Overlay спрайт. Здесь это радиальный градиент. Overlay и любой вид градиента = лучшие друзья. Выглядит круче!
over03.png

г) Так смотрелись бы кораблики просто поверх бэка (без Overlay и Color слоёв над ними)
over04.png

д) Так смотрятся кораблики ПОД ФИЛЬТРУЮЩИМИ Color и Overlay слоями из пунктов б) и в)
over05.png

Согласитель, они смотрятся более в тему! И констракт обрабатывает все эти изменения цвета в реальном времени! Чем ближе корабли к источнику освещения, тем светлее они становтся и тем больше меняется их цвет!

Хотите сделать всё зелёным? Пожалуйста. Синим? Ноу проблемо. Кораблики будут смотреться в тему не смотря ни на что. Более того, в данном примере спрайты кораблей абсолютно черно-белые (помимо светящихся голубых и жёлтых неоновых элементов) Но внутри уровня они впитывают в себя цвет этого уровня благодаря нашим фильтрующим спрайтам, и становятся красными, синими, зелёными т.д.

Имейте ввиду, что иногда одного Overlay спрайта не достаточно для полноценного освещения. Просто вставьте второй такой же поверх! В данном случае, в пункте в) использовались два одинаковых спрайта наложенных поверх друг друга, что дало более сильное освещение.

Пример из моей последней игры:
Как выглядит вся графика на самом деле:
exmpl01.png

Как выглядит графика в конечном итоге, после нескольких дополнительных фильтрующих спрайтов из примеров выше:
exmpl02.png



Часть 4
WEB цвета

"Окей, бро, но я не хочу что бы мой синий кораблик весь становился прям совсем уж красным. Што делать?" - Спросите вы. В определённых ситуациях вам помогут WEB цвета. Я называю их веб цветами, но на самом деле это просто любой цвет с выкрученными на максимум якростью (brithness) и насыщенностью (saturation). Soft Light и Overlay менять эти цвета НЕ БУДУТ. Color сможет, он сам по себе, но не другие. Иными словами, чем ярче и насыщеннее ваш цвет, тем меньше цвета он впитывает от Soft Light и Overlay! Посмотрите на пример выше, отдельные части кораблей слева всё ещё выглядят голубыми! В данном случае яркость и насыщенность этих частей не выкручены на полную, но близки к этому. Благодаря чему они всё же смогли впитать часть оранжевого от Overlay и при этом сохранить свой голубой оттенок!


Часть 5
Баланс

Вам не всегда придётся использовать Soft light, Color и Overlay одновременно. Где-то будет достаточно одного Overlay спрайта, где-то лишь Soft Light + Overlay, где-то вам понадобится намного больше или меньше. Баланс между ними как раз и является является ключом к созданию необходимой вам сцены.

Рассмотрим примеры ниже:
а) Два Overlay спрайта (100% и 75%) и один Color (30%)
smpl02.png

б) Два Overlay спрайта (100% и 100%) и один Color (35%)
smpl01.png

в) Четыре Soft Light спрайта (100%) и один Color (30%)
smpl033.png




TL:DR
Используйте Soft Light для контроля яркости изображения.
Используйте Color для придания изображению нужного вам оттенка цвета.
Используйте Overlay для эффектов освещения.
Пробуйте делать не просто полностью одноцветный файл, а к примеру градиент уходящий в прозрачность. Особенно для Overlay и Soft Light. Это создаст плавный, перетекающий из одного в другой цвет для изображения на экране.
Для всего выше перечисленного необходим WEBgl :acute: !
Аватара пользователя

Участник
Сообщений: 37
Я тут с 09 июл 2015
Репутация 95 [ ? ]

Сообщение Создание сцены в С2\С3 и работа с цветом
» 15 фев 2019, 01:30

Урок полезный. Но, немного странно, что ты добавляешь эти режимы наложения в С2, когда можешь так же это сделать в фш? Какая бы низкая нагрузка не была с наложениями, но она все равно есть. Я бы все таки больше ориентировался на игровые эффекты с такими вещами (взрывы, выстрелы, движущиеся спрайты)
Изображение
Аватара пользователя

Игродел
Сообщений: 1337
Я тут с 31 авг 2015
Откуда: Нижний Новгород
Двиг: C2, C3
Лицензия: Personal
Репутация 213 [ ? ]

Сообщение Создание сцены в С2\С3 и работа с цветом
» 15 фев 2019, 02:58

В том то и фишка. Я создаю их в ФШ, но вместо того что бы намертво врисовать их в графику, я вместо этого переношу всё это дело в С2 и создаю для них отдельный слой.
В результате я получаю это:
eto3.png

Вместо этого
eto2.png


Ты не сможешь просто сделать это как-то в ФШ и вставить в игру без доп. слоёв. Проще говоря, если у тебя есть спрайт главного героя, он отлично нарисован и покрашен, и он замечательно смотрится на первом уровне, хорошо. Вот только на других уровнях, он будет смотреться уже не очень. Потому что не возможно создать комбинацию цветов (из которых состоит твой главный герой), которая будет замечательно сочетаться с кучей других комбинаций цветов (из которых состоят все прочие уровни в игре). Это практически не реально. Поэтому появляется необходимость придавать цвет всему на экране, в самом констракте, в реал тайме. Об этом и урок.
Аватара пользователя

Участник
Сообщений: 37
Я тут с 09 июл 2015
Репутация 95 [ ? ]

Сообщение Создание сцены в С2\С3 и работа с цветом
» 15 фев 2019, 03:28

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

Для другой задачи - максимального сохранения оригинальных рисунков при наложении динамического освещения выбрал Exposure - он оказался наиболее щадящим к оригиналу на границах засветки/затемнения. В исходнике ниже максимум в центрах объектов, при клике текущая освещённость квадрата фиксируется, при повторном снимается.
Exposure.capx
(174.08 КБ) Скачиваний: 20

Но даже с таким простым эффектом надо быть осторожным при создании общего освещения в несколько источников.
Аватара пользователя

Игродел
Сообщений: 1071
Я тут с 31 май 2017
Репутация 224 [ ? ]

Сообщение Создание сцены в С2\С3 и работа с цветом
» 28 фев 2019, 20:36

Можешь скинуть пример в формате С2.
Аватара пользователя

Участник
Сообщений: 2
Я тут с 21 янв 2019
Репутация 0 [ ? ]



Вернуться в Лучшие уроки по Construct 2

Сейчас эту тему просматривают

Зарегистрированные пользователи: нет зарегистрированных пользователей

Наверх