Unity как сделать прозрачный спрайт

Unity как сделать прозрачный спрайт
Unity как сделать прозрачный спрайт
Unity как сделать прозрачный спрайт

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

В общем, в эти весенне-дождливые деньки я наконец-то расскажу об освещении в новой игре.

Динамический свет

Переход с Flash на Unity, конечно же, сразу открывает массу новых и невероятных возможностей. И, пожалуй, самая красочная и эффектная возможность — это сделать динамическое освещение в игре. Конечно и во Flash были попытки создать динамическое — смотрится эффектно, но как правило все упирается в производительность, поэтому многие наработки в этом плане так и остались в запасниках.

Одним из таких запасников стала наработка под названием Living Lights, которая была сделана как расширение для Anthill Framework. О ней я уже рассказывал давным давно и публиковал все необходимые исходники. Почитать и попробовать это дело можно здесь.

Ох, как я мечтал использовать подобное освещение в Zombotron! Но использование столь требовательного эффекта во Flash версии игры, конечно же, было настоящим самоубийством, поэтому этого так и не случилось. Этого не случилось ни в одной из моих игр, потому что результат во всех играх был бы печальным. Даже использование динамической воды мне дорого обошлось в итоге. Но зато я знал, что первым делом сделаю, когда доберусь до аппаратной поддержки в своих играх — динамический свет!

Свет в Unity

Первое, что я сделал в Unity, когда начал работать с ним — я начал разбираться с тем, как там устроено освещение. И тут, пожалуй, особо рассказывать нечего. С освещением у Unity все в порядке: отличные тени с разными настройками, разные источники света. В общем для 3D освещения каких-то особенных знаний совершенно не нужно.

А как же обстоят дела с 2D освещениям? Ха-ха… Какое-такое освещение может быть в 2D!? Это же 2D — там нет никакого освещения! Впрочем, то, что 2D спрайты могут отбрасывать тени по своему альфа каналу в 3D мир — это уже отлично, но как это можно использовать для 2D игр? Не очень понятно. Хотя, я попытался поискать применение стандартным теням Unity в 2D проекции.

Идея 1: Если стандартные тени Unity смогут сформировать какое-то темное пятно под персонажем — это уже хорошо, тогда ведь не придется делать какое-то свое решение. Хотя, что-то мне сразу подсказывало что это хоть и простое решение, но весьма и весма не красивое с точки зрения реализации и производительности. Но начинать же нужно с чего-то, верно?

Задача: какую-нибудь приемлемую тень для 2D игры стандартными средствами Unity.

Делаем кусок земли Ставим персонажа Включаем тени  

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

Варианты решения этой задачи:

1. Сделать 3D пол с текстурой, по которому будут бегать картонные персонажи.

Этот вариант сразу усложняет весь процесс разработки, так как дополнительно нужно рисовать еще и текстуру пола в нужной проекции и… вообще сразу возникает вопрос: «А почему бы сразу все окружение не сделать в 3D, как на картинке выше!?». Вроде быстрее и главное, честнее получится. Только по факту создание всего окружения в 3D не получится быстрее, кто бы и чего там не говорил, 3D окружения — это кропотливая работа, на которую требуется в разы больше времени, чем на простой двухмерный спрайт. Но есть вариант и по-проще!

2. Сделать прозрачный 3D пол, на который будут проецироваться только тени..

Этот вариант мне понравился больше, и главное выглядит все просто и понятно. Делаем что-то вроде «стеклянного» пола, на котором остаются только тени, а за ним просвечивает задний план. Пару вечеров я, конечно, грохнул в вопросы создания шейдеров и кое-как получил нужный результат, который работал до первого обновления Unity, а потом мой шейдер сломался! Но я совершенно не унывал по этому поводу, так как еще до поломки шейдера стало понятно, что такой прозрачный пол будет большой головной болью для меня. Ведь для каждого уровня придется делать уникальную сетку для пола. Впрочем, это не критично, ну подумаешь дополнительные 2-3 часа работы на каждый уровень, главное что Unity легко расширяется, и редактор сетки можно сделать прям в Unity!

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

Идея 2: Вспоминая о мечтах сделать динамический свет в Zombotron я понял, что нужно отказываться от стандартных теней в Unity и двигаться к такому свету, как я делал для Anthill — то есть, создавать плоские 2D тени в плоском мире.

К сожалению, стандартной реализации в Unity для создания 2D теней нет и неизвестно, будет ли когда-нибудь. Но такие тени не сложно написать и самостоятельно. Правда для этого нужны уже некоторые знания.

Забегая вперед, хочу сказать, что к этому моменту я уже успел сделать первые скетчи игровой графики с небольшой изометрической проекцией полов и объектов. И берясь за работу над 2D тенями, я еще совершенно не представлял, как это все можно совместить, но начинать то с чего-то нужно! :)

Особенности создания 2D теней.

Теория моделирования 2D теней не несет в себе каких-то уникальных знаний, все достаточно просто: предположим, у нас есть некоторый источник света, который испускает лучи в разные стороны.

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

Работая с динамическим светом во Flash, я работал с попиксельной проверкой — это было наиболее простым и понятным приемом. Конечно, проверять каждый пиксель на непроницаемость (на прозрачность) — это не самое оптимальное решение, поэтому я делал различные настройки: проверять каждый пятый или десятый пиксель при движении луча. Конечно, такой подход давал погрешности в точности освещения, но учитывая огромный прирост производительности — на это можно было смело закрывать глаза.

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

С аппаратной поддержкой о понятии «непрозрачный пиксель», конечно же, пришлось сразу забыть: пикселей на этапе просчета картинки не существует, они получаются как результат рендера. Так что, их невозможно использовать как основу для расчета освещения. В общем, весь упор ставится исключительно на геометрию. Проще говоря, в место пиксельной маски для расчета 2D теней нужно использовать дополнительную геометрию — полигоны, позволяющие задавать непроницаемые формы для объектов.

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

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

В противном случае получатся так, что свет будет перекрывать объект там, где этого быть не должно. Можно конечно увеличить количество лучей для повышения точности, но тогда и ресурсов больше понадобится для просчета каждого луча. А если источников света будет много!?

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

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

Зачем изобретать велосипед, тем более когда я еще толком не знаком с технологией, надо же где-то подглядеть как делаются те или иные вещи, верно? В общем, я решил не бросаться в бой, а сходить в Unity Asset Store и посмотреть, какие решения на эту тему уже есть там, попутно копаясь в форумах по 2D освещению.

2D тени для вашего проекта

Посмотрев Unity Asset Store, я пришел к выводу, что не обязательно писать что-то свое, можно скачать какие-то бесплатные или платные наработки, и при необходимости доработать их для своего проекта, благо выбор есть!

Готовых библиотек для 2D теней много, одни навороченные с кучей возможностей, другие - бесплатные и простые. Я не стал приводить список всех отсмотренных мною, только самые интересные:

 

Отсмотрев несколько, я взял один из ассетов, где уже все отлажено и работает, и начал заниматься тем, чтобы адаптировать его под свой проект. Что рекомендую сделать и вам, если вы хотите сделать красивые 2D тени для своего проекта. В крайнем же случае можно взять уже готовую библиотеку и на её основе написать свою — это в любом случае будет лучше, чем что-то пытаться сделать с нуля, особенно если с Unity вы еще не достаточно хорошо знакомы.

Особенности адаптации

Сами тени я трогать не стал, ведь в теории все просто и если кто-то реализовал выше описанную мной теорию в коде и оптимизировал результат — туда лезть уже не нужно. Тут встает немного другая задача: органично вписать проделанную кем-то работу непосредственно в свой проект. А именно крутить настройки и искать оптимальный внешний вид и хорошую производительность.

Но в моем случае стояла еще одна небольшая задача: вписать 2D тени в изометрический вид! И тут пришлось думать о тенях немного в другом ключе. Мне сложно это описать, но я просто решил задавать маски вручную для каждого отдельного объекта с определенными допусками, чтобы получить весьма интересный 3D эффект без потери 2D окружения.

Таким образом, эффект объема достигается за счет того, что полигон, задающий непроницаемость для света задается не для всего объекта, а для определенной его части, тем самым какая-то часть объекта остается светлой (высветляется источником света), а другая часть остается в тени — таким образом получается интересный объем в 2D игре. Конечно тени при этом рассчитываются не очень верно, так как мир плоский… Но кого это волнует?! Ведь никто не будет смотреть под правильным ли углом падает тень от ящика в том углу или там угол падения тени должен быть на 45 градусов больше или меньше?

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

Заключение

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

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

[23 Апреля]

Бонус!

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

 


Индикаторы: Уроки, Zombotron3
Постоянная ссылка

 

 

Unity как сделать прозрачный спрайт Unity как сделать прозрачный спрайт Unity как сделать прозрачный спрайт Unity как сделать прозрачный спрайт Unity как сделать прозрачный спрайт Unity как сделать прозрачный спрайт Unity как сделать прозрачный спрайт Unity как сделать прозрачный спрайт

Изучаем далее:



Схема холостого хода инжектора

Причёски молодёжные на парней фото

Гитара из шпагата своими руками

Как сделать детское фото из взрослого

Как сделать так чтобы morphvox pro работал в скайпе
Читать новость Unity как сделать прозрачный спрайт фото. Поделитесь новостью Unity как сделать прозрачный спрайт с друзьями!