King, Witch and Dragon. DevLog #10
В предыдущем посте я немного затронул тему создания FX'ов. Перед тем, как окунуться в ИИ врагов и боевую систему, я решил навести немного красоты и сделать FX'ы для всех способностей, чтобы закрыть тему визуала ГГ.
Поиск визуального стиля
На момент начала работы были готовы только FX'ы для анимации атаки (трейл от меча) и анимации для смерти и возрождения.
Трейл в целом зашёл хорошо. Было несколько комментов по поводу яркости блума, но это просто минорный твик, который по сути ничего не меняет. Смерть и возрождение тоже всем понравились, но на мой взгляд они всё ещё были "суховатыми", потому что кроме крыс там ничего не было.
Я начал думать и пробовать разные варианты для способностей персонажа. Сначала я хотел сделать для каждой способности уникальный стиль и уникальную цветовую палитру, которая соответствовала бы способности. Условно, красно-коричневый для щупальца, жёлто-зелёный для змеи, тёмно синий для паучьих лап и т.д.
По факту получился ядрёный пёстрый фейерверк, который вообще никак не сочетал в себе все эти элементы и создавал ужасный визуальный шум на экране.
От этой идеи я быстро отказался и начал думать дальше, как бы сделать так, чтобы всё выглядело интересно, сочно и гармонично.
Я ещё раз присмотрелся к трейлу меча и я решил попробовать взять этот эффект за общую основу для остальных FX'ов способностей персонажа.
Мне в целом понравился контраст голубого свечения на тёмно-синем фоне. Мне также понравились перья, которые создают долгий затухающий след от персонажа.
Изначальная задумка была в том, что перья появляются при атаке, потому что ими декорирован "Коготь", меч главного героя. Но потом мне пришла мысль.
Что если сделать вороньи перья визуальным атрибутом колдовства, окутывающего главного героя? Они не относятся напрямую ни к одной способности, но при этом визуально связывают их всех в единое целое.
То же самое касается и голубого свечения на тёмно-синем фоне.
Итоговый стиль
Таким образом, финальный стиль для способностей главного героя можно описать так:
- Цветовое решение - контраст тёмного синего и ярко-голубого
- Присутствуют тёмные перья в качестве "долгих" частиц, которые оставляют след на уровне
- Присутствуют светящиеся голубые искры в качестве "быстрых" частиц, подчеркивающих магическую суть
- Дополнительные контекстные элементы, которые выполнены в общем стиле и не ломают целостность картинки (ветер, порталы, искажения пространства и т.д.)
Давайте посмотрим, что из этого получилось.
Эффекты способностей
Так как gif зашакалил качество, особенно там где эффект проигрывается быстро, сначала я покажу gif-превью с описанием, а в конце будет видео Full HD 60fps, чтобы можно было всё нормально рассмотреть и оценить.
Крылья летучей мыши
Формально тут показано 2 FX'а - первый для двойного прыжка и второй для парения на крыльях.
FX двойного прыжка состоит из следующих элементов:
- 2 мини-портала, которые открываются на спине персонажа и из которых появляются крылья.
- Бурст первьев со спины персонажа. Часть из них взмахом крыльев сдувается вниз, а часть утягивается воздушным мешком позади персонажа, подчёркивая направление и траекторию движения.
- Бурст светящихся искр из открывшихся на спине порталов.
- Вихри ветра, созданные взмахом крыльев и также подчёркивающие траекторию движения после активации способности.
- Искажение пространства вокруг крыльев во время взмаха, чтобы подчеркнуть его силу.
Для состояния парения добавляются следующие элементы:
- Порталы на спине остаются открыты пока не убраны крылья.
- Из порталов продолжают лететь искры, оставляя след позади персонажа.
- На концах крыльев появляются воздушные трейлы, который напоминает вихревые жгуты истребителей и в целом часто используется для создания эффекта полёта.
Бросок змеи
По факту тут тоже 2, а точнее даже 3 эффекта.
Превращение в змею
- В момент превращения в змею, персонаж групируется и его обволакивает "кокон/портал", который появляется и пропадает через эффект растворения (dissolve). Из портала появляется змея.
- Вокруг персонажа появляется вихрь перьев, которые тоже засасывает в портал.
- Вокруг портала проигрывается эффект сжимающегося пространства, чтобы подчеркнуть, что он засосал в себя персонажа и перья.
Превращение в человека
- В противополжность порталу который обвалакивает и сжимается, тут проигрывается эффект портала, который появляется (также через dissolve), расширяется и "выплёвывает" персонажа. При этом в него залетает змея.
- Из портала также вылетает бурст перьев.
- Из портала также вылетает бурст искр.
- Вокруг портала проигрывается эффект расширения пространства.
Полёт змеи
- На протяжении всего полёта змеи позади неё остаются завихрения ветра, подчеркивающие траекторию движения.
В нашей группе VK было обсуждение этого эффекта и возникли вопросы по поводу кокона/портала. По сути, да, это костыль, чтобы скрыть пропадание персонажа и появление змеи. Есть несколько причин почему я решил делать именно так, а не иначе:
- Форма, а точнее длина змеи. Если бы персонаж превращался во что-то компактное, проблемы бы не было. Но змея длинная. Сразу спаунить всю змею целиком выглядит плохо. Поэтому я сделал так, что змея появляется постепенно в направлении рывка, при этом в процессе появления, часть её, буквально, отрезается и нужно как-то красиво спрятать этот отрезанный торец.
- Напраление рывка. Если бы персонаж мог делать рывок только горизонтально, как, например в Hollow Knight, проблемы бы не было. Можно было бы сделать анимацию, что персонаж "ныряет" вперед и через dissolve или то же самое отрезание clipping plane'ом, превратить его в змею. Проблема возникает при выходе из формы змеи. Например, при рывке вниз (в игре персонаж может делать рывок в 8 направлениях). Персонаж должен, по идее, "выныривать" головой вниз (ну типа голова змеи превратилась в голову ГГ и так далее), а потом резко развернуться, чтобы падать и преземляться ногами вниз. Такие резкие развороты тела на 180 градусов без последующей инерции смотрятся крайне неестественно. Плюс персонаж может в процессе рывка врезаться в землю и должен мгновенно оказаться на ногах. Это тоже бы сломало всю идею трансформации.
В итоге я выбрал меньшее (на мой взгляд) из зол и сделал трансформацию через blink-портал и в целом результатом доволен.
Паучьи лапы
Появление паучьих лап
- На спине персонажа открывается портал, аналогичный как для крыльев летучей мыши, из которого появляются паучьи лапы.
- При этом спаунится бурст перьев.
- И бурст искр.
Передвижение по стене
- Во время перемещения по стене портал на спине остаётся открытым.
- Из портала летят искры, оставляя след за персонажем.
- При каждом шаге паучьей лапы, в месте контакта появляется клуб пыли и горсть отколотых камней, которые осыпаются вниз.
Привязку паучьих лап к телу персонажа я тоже решил сделать через портал. Механика этой способности реализована таким образом, что персонаж всегда находится вертикально, а лапы подстраиваются под угол наклона поверхности, по которой персонаж ползёт. Это не никак не вяжется с анатомией и я решил предствить это как-будто лапы вылезают из портала и таким образом могут крутиться как угодно, не влияя на ориентацию персонажа в пространстве. Мне кажется, это немного сглаживает визуальный диссонанс, хотя могу ошибаться. Пишите в комментариях, что думаете по этому поводу.
Щупальце
При выпускании щупальца проигрываются следующие эффекты:
- Бурст искр в том месте где щупальце появляется и обвивает руку персонажа.
- Темные частицы-капли, со светящейся обводкой, которые щупальце разбрызгивает вокруг во время полёта. Хотелось сделать отсылку к чернилам (хотя я прекрасно понимаю, что чернильные облака выпускают не через щупальца, а через другое физиологическое отверстие).
- Воздушный след, который повторяет спиралевидную форму щупальца и плавно растворяется, даже после того как персонаж втянул щупальце обратно.
Также, для этой способности было сделано 2 дополнительных эффекта:
- Эффект, который проигрывается в точке контакта щупальца и цели. Использует те же самые "чернильные" частицы и быстро вращающиеся и сжимающиеся кольца, которые символизируют "связывание" или "обматывание" объекта.
- Эффект на персонаже в момент, когда он начинает подтягиваться за щупальцем. Включает в себя ветер и перья.
Эффекты перемещения
Помимо эффектов способностей я сделал эффекты, которые проигрываются при:
- беге
- прыжке
- приземлении
Они специально сделаны неяркими и неброскими, чтобы не оттягивать на себя внимание и чтобы ощущался контраст между "обычными" эффектами перемещения и эффектами способностей.
Доработка эффектов смерти и спауна
Имея на руках готовый единый стиль эффектов персонажа, я решил применить его к уже имеющимся эффектам смерти и возрождения. Я писал в начале статьи, что они мне казались "суховатыми" и я решил попробовать их обогатить с помощью моей новой формулы.
Смерть
Возрождение
Демонстрация и ваше мнение
Теперь, как и обещал, небольшая демострация всех эффектов в действии.
Народный джем
Небольшое лирическое отступление.
В конце октября состоялся первый на DTF народный джем и я решил тряхнуть стариной и поучаствовать (последний раз я принимал участие в подобном мероприятии году в 2014-2015).
Темой джема была "Изоляция". В итоге я сделал процедурный point & click escape room от первого лица, в котором комната, из которой нужно выбраться, каждый раз генерируется на старте. Мне хотелось проверить, насколько сложно сделать подобную вещь и насколько интересно в такое будет играть.
Если вам интересно, можете более подробно почитать о проекте по ссылке. Там же можно скачать билд и поиграть.
Что дальше?
Ну всё, теперь все отмазки кончились, придётся делать ИИ врагов и полноценную боёвку.
Но, возможно, перед этим я напишу ещё одну статью для подсайта Gamedev. Может даже небольшой цикл статей, зависит от объема информации, которую получится собрать и подготовить. Stay tuned...
Чтобы поддержать разработку игры, добавляйте King, Witch and Dragon в вишлист на Steam, это важно не только для моей мотивации, но и для алгоритмов Steam. Чтобы принять участие в обсуждении, вступайте в группу ВК, а также подписывайтесь на меня в Twitter и Instagram.
Спасибо за внимание!
да но одежда гг на его фоне смотрится как очень плохо сори
Спасибо! А можно чуть подробнее, чем именно плохо? Слишком яркая, слишком плоская, ещё что то? Просто чтобы понимать?
Само по себе конечно добавляет динамизма, но:
- Свечение способностей лучше сделать разными цветами. Змея - зеленое, паук - красное и т.п. Единство стиля хорошо, но в данном случае лучше сделать как можно разнообразнее. Все таки способности разные.
- Перья и крысы как-то не вяжутся, лучше наверно просто дым. Да и вообще стоит подумать о разных партиклях под разные способности. От крыльев перья, от змеи чешуйки и т.д.
- По идее визуально можно связать красные глаза крыс и собирающиеся и улетающие в верх искры (тоже сделать красными).
- Отлетающее свечение при полете выглядит странно, какая-то пыльца от феи. И остающиеся "шлейфы ветра" коротковаты.
- У комбо-атаки не хватает движения ног! Либо должен стоять на месте, либо шагать. И разлетающиеся перья должны быть "по движению меча", а не как после удара подушкой во все стороны.
P.S. Пили ИИ и боевку! Начнешь собирать и внезапно окажется, что во время боя эффекты слишком размашистые и опять придется менять.
Свечение способностей лучше сделать разными цветамиПисал про это в статье. Попробовал так сделать и не зашло прям совсем.
По идее визуально можно связать красные глаза крыс и собирающиеся и улетающие в верх искры (тоже сделать красными).Пробовал красный. Слишком агрессивно. Лучше оставить это для врагов или для получения урона.
У комбо-атаки не хватает движения ног! Либо должен стоять на месте, либо шагать.Взял старую гифку из предыдущего поста. Сейчас уже убрал проскальзывание.
Пили ИИ и боевку! Начнешь собирать и внезапно окажется, что во время боя эффекты слишком размашистые и опять придется менять.Пилю. Там ещё много раз выяснился что нужно что-то твикать и менять. То в бою лишний шум создаёт, то с фоном не сочетается (это сейчас однородный тесный фон на котором все хорошо читается, а когда будет детальный задник, там хз как оно будет). В общем ещё предстоит куча итераций, это без вариантов, но нужна какая-то отправная точка.
Спасибо за фидбэк!
Ещё раз тебе пишу: выглядит хорошо, но меняй cell шейдер - он отвратный, будто дети против волшебников.
Над цветовой гаммой поработай. Если сам в цвете шаришь не очень, поищи пикселяртные палитры или разбей какой-нибудь арт.
Если это и делать, то точно не раньше того момента когда появятся фоны и более менее цельная картинка, а не однотонные заглушки. Сейчас чем больше визуальных элементов добавляется, тем сильнее картинка разъезжается по цветам, это я прекрасно понимаю. Потом буду все это сводить, когда уберу плейсхолдеры.
Воздушные эффекты выглядят потрясно, а вот блёстки совсем не зашли .–.
Мы ж не за девочку-волшебницу играем.