Как сделать эффект пикселей в юнити
Добавил пользователь Alex Обновлено: 04.10.2024
Пиксельарт Эффект взрыва в Юнити. Система частиц в Unity
Буум! С вами Арталаски и сегодня мы будем делать взрыв для игры в стиле пиксельарт. Из программ нам понадобится Unity 5 и выше, а также любой графический редактор. Я буду использовать Adobe Photoshop CC 2017 года.
Ну а прежде чем мы начнем делать взрыв, Я порекомендую канал Детрокер, где вы забудете про скучные примитивные видеокурсы и найдете качественные веселые видеоуроки по программированию на Юнити. А также игровые фичи, челленжи и альтернативный взгляд на привычные туториалы и все это с юмором и Иронией. Подписывайтесь!
Окей, начнём с того, что создадим анимированную частицу. Открываем Фотошоп или любой другой графический редактор, создаем новый документ с размером 16 на 128 пикселей и включаем сетку.
Если вы новичок в фотошопе, то обязательно посмотрите вот этот ролик, а если просто не знаете, как включить и настроить сетку, то вот этот.
Теперь самый простой способ – нарисовать в каждой клетке 16 на 16 пикселей ровный круг. Если хотите больше реализма – рисуйте что то вроде облачка. Суть простая – нужно в каждой клеточке рисовать круг или облачко на пару пикселей меньше до тех пор пока не останется одна точка. Восьми кадров для этого должно быть достаточно.
Далее нужно залить внутренности белым цветом и сделать контур светлее, чтобы он не был таким черным. Для этого нажимаем сочетание клавиш Ctrl+U и перетаскиваем вправо ползунок яркости.
Наконец, берем цвет немного темнее белого и подрисовываем тень, таким образом наш взрыв будет объемнее.
Не забудьте отключить слой с фоном или удалить его вовсе.
Частица осколков для взрыва
Так, с первой частицей разобрались, переходим к следующей. При взрыве всякие маленькие кусочки разлетаются в стороны, я рекомендую делать частицы осколков именно из того объекта, который взрывается, например куски бочки или автомобиля.
Здесь мы также создадим документ 16 на 128 пикселей и нарисуем как можно более разные куски. В самом движке Юнити мы будем рандомно создавать каждый из них и это будет выглядеть красиво.
Частица вспышки. Вспышка от взрыва
Осталось еще немного, при взрыве первое что мы замечаем – это яркую белую вспышку, а уже потом всё остальное. Поэтому сейчас мы создаем документ 64х64 и просто сделаем здесь белый круг без обводки. Всё. Изи.
Частицы дыма
Последняя частица – дымовая. Делается точно также как и та частица в начале видео, но здесь все же актуальнее рисовать в виде облачка. Главное сделать их разными.
Сборка в Unity
Подготовительная часть завершена. Переходим в Unity. У меня сейчас открыт пустой 2D проект, на сцене только камера. Если вы первый раз в Юнити, то ставьте на паузу и смотрите это видео, чтобы быстренько разобраться в его основах. Ну а если вы всё это уже знаете, то идем в меню GameObject и выбираем Particle System.
Теперь закидываем все наши спрайты частиц в Юньку. Нажимаем на один из них и в строке Sprite Mode выбираем Multiple, так как наш файл содержит в себе несколько спрайтов. Параметр Pixels for Unit выставляем на 16, потому что каждый кадр в нашем тайлсете имеет размер 16х16 пикселей. Нажимаем применить, открываемSprite Editor – Slice- Grid by Cell Size. Снова нажимаем Apply. Filter Mode ставим на Point (No filter). Рекомендую также убрать компрессию во избежание ненужных артефактов.
Теперь в окне Assets нажимаем правую кнопку мыши и выбираем Create-Material.
Называем его так, чтобы потом было понятно что это вообще такое. Жмем на созданный материал и в строке Shader выбираем Particle – Alpha Blended. Закидываем сюда спрайт и проделываем тоже самое с остальными.
Настройка системы частиц
Осталось настроить саму систему частиц так, чтобы это было похоже на взрыв, который будет состоять из нескольких систем, объединенных в одну.
Для начала создадим основную массу взрыва.
Добавим разлетающиеся осколки.
Создаём новую систему частиц и настраиваем её следующим образом.
Отдельно расскажу про вкладку Trails, она рисует шлейф за каждой частицей. Но мы пойдем простым путем и выберем в Render стандартный Sprite Default. Уменьшим толщину линий и время существования шлейфа. Вернемся в Texture Sheet Animation и включим там параметр SingleRow, проверьте галочку на Random.
Осталась последняя – вспышка. Она самая простая. Про дым мы поговорим в следующем видео, ибо это отдельная тема и не маленькая.
Самое главное что вы должны знать о графике — это то, из чего она состоит.
Графика строится из набора изображений, который смешивается друг с другом по определенному закону, который приближает визуализацию финального изображения к реальному (либо стилизованному, если так задумано). Так устроен любой рендерер(и корона и вирей и редшифт и октан и все все все) и движок Unity работает точно по такому же принципу. Если кратко, то берем базовые цвета поверхностей, перемножаем их с освещенностью, добавляем отражения и спекуляр. Это общеизвестные факты, но без них никуда, любой 3дшник должен это знать и использовать!
Казалось бы всё просто, сел и сделал красиво, но в реальности мало кто может добиться приличных результатов за короткий срок, всё потому что в юнити до сих пор нет некоторых очень важных элементов, которые позволяют это сделать быстро и главное надёжно.
В 2019 году мы имеем стандартные тени такого вида
Справа из ассетстора за деньги, называется NGSS. Речь идет о Реалтаймовых тенях, а не о запеченных.
Объемный свет
Нативного решения у юнити вообще нет, поэтому сравнивать не буду. Просто покажу, что есть несколько вариантов решений в ассетсторе на примере своей игры:
Есть бесплатный вариант AURA, есть платные решения. AURA мне по нескольким причинам не понравилась, в первую очередь из-за своей стабильности, поэтому я пользуюсь платным ассетом: HxVolumetricLighting.
Постобработка
У юнити есть есть PostProcessStackV2 и он в целом справляется со своей задачей, но кое чего всё равно не хватает, это хорошего AO, точнее HBAO+. Это ScreenSpace Ambient Occlusion, который не создает теней на объектах разнесенных по глубине.
Кроме самозатенения тут есть и очень интересная возможность Color Bleeding — эмуляция вторичного отражения света, которое добавляет картинке жизни, в простонародье - вторичка(от Древнегреческого Secondary GI).
Шейдеры
Ну и в конце концов не стандартными материалами едиными живём, шейдеры тоже нужно делать уникальные и для этого совсем не обязательно писать код, потому что есть Amplify Shader Editor, нодовый редактор, который может освоить любой 3дмаксер, майер, блендераст и прочие синемешники. :) без обид, блендер клёвый!
В частности можно сделать вот такой вот шейдер стекла из картинки выше, а на картинке ниже то, как он выглядит в редакторе:
Как вы могли заметить, это мало чем отличается от стандартных материал эдиторов популярных 3д пакетов, и на самом деле переход с них на редактор шейдеров в юнити очень прост, достаточно просто изучить список доступных нод, а принцип всего остально тот же самый. Но вы не представляете насколько классно после часов страданий ожиданий в 3дмаксике результатов настройки материала - видеть всё в режиме реального времени да ещё и вращать всё на одном месте камерой.
Для кого-то это покажется несущественным, но для меня наличие данных возможностей — единственное, что позволяет вообще делать графику на юнити, а не там где вы возможно подумали, потому что главное в Юнити это всё таки удобство и стоимость разработки с малым числом людей и бюджетом, а для нас — инди — это самое главное. Как известно: дьявол кроется в деталях и я перечислил те из них, которые считаю самыми важными. Всё остальное это уже стандартный подход: замоделить модельки, затекстурить модельки, сделать шейдер и т. п. По данной теме итак предостаточно информации.
PS: Покатились астедава! :)))
Интересно! Спасибо! Подскажи, пожалуйста, а почему не UE? Предполагаю, что из-за расходной составляющей. Или нет? Тогда интересно узнать Твоё мнение. Заранее благодарен за ответ!
Геймплей явно страдает, это мне стало ясно из видео. Да и цена для пазла дороговато. Но графика вполне.
Руслан Латыпов Интересно! Спасибо! Подскажи, пожалуйста, а почему не UE? Предполагаю, что из-за расходной составляющей. Или нет? Тогда интересно узнать Твоё мнение. Заранее благодарен за ответ!
Сергей Патюк Геймплей явно страдает, это мне стало ясно из видео. Да и цена для пазла дороговато. Но графика вполне.
это был тестовый проект по принципе сможем или нет сделать игру, но как обычно он затянулся, со дня на день более геймплейный проект затизерим.
По какой-то причине я не могу получить эти фрагменты, чтобы они появились, как они были созданы в Unity…
Искусство пикселя импортируется в Unity из Tiled.
Пиксельное искусство в Tiled:
Тот же самый пиксель, импортированный в Unity:
В соответствии с запросом параметры импорта спрайтов:
Учитывая, что вы уже изменили фильтрацию с Bilinear на Point (no filter) , проблема может заключаться в том, что Unity сжимает вашу текстуру по умолчанию. Вероятно, это текстура POT (мощность двух разрешений).
И не забудьте нажать кнопку “Применить”!;)
РЕДАКТИРОВАТЬ:
После того, как был добавлен снимок экрана параметров импорта, мне кажется, что проблема заключается в настройках SpriteMode .
Насколько я понимаю, используемым образом является Spritesheet в виде фрагмента. Поэтому для параметра SpriteMode должно быть установлено значение Multiple .
Затем вы можете нажать кнопку Sprite Editor и вырезать лист на отдельные спрайты с помощью функции Slice (теперь отдельно от Unity 5.6).
Вероятно, вы захотите использовать метод Grid - By Cell Size , который, как правило, обрабатывается внутри Tiled.
Вы также можете настроить свою настройку Pixels Per Unit в соответствии с разрешением ваших фрагментов (для достижения идеальных результатов).
Опубликовать свой комментарий как ответ в конце концов.
Как я уже сказал, одним из способов избавиться от размытия является установка “Режим фильтра” спрайта на “Точка (без фильтра)” вместо “Билинейная” или “Трилинейная”,
Здесь вы можете увидеть разницу между билинейной и точечной фильтрацией.
Если это не помогает, попробуйте испортить настройки качества в Sprite Import.
Увеличьте “Максимальный размер” и, возможно, отключите “Сжатие” или повысьте качество сжатия.
Здесь вы можете увидеть различия между различными качествами сжатия, начиная от “Низкий” и “Высокий” до “Нет”,
Вы также можете увеличить значение “Максимальный размер” для спрайтов более высокого качества. Он масштабирует размеры вашего спрайта, чтобы он не превышал указанное значение. Если ваш лист спрайтов уже меньше “Максимального значения”, увеличение его не будет иметь никакого эффекта.
На следующем рисунке показаны различия между размерами 512 , 256 , 128 и 64 для спрайта с размерами 423 x 467
Вы можете видеть, что размеры над размерами не будут иметь никакого эффекта, тогда как меньшие значения уменьшат спрайт вниз, уменьшив его визуальное качество.
Обычно вождение с этими значениями должно помочь сделать ваши спрайты более острыми и не размытыми.
EDIT:
Как отметил @NikaKasradze, есть также настройки качества по умолчанию, которые вы можете попробовать. Перейдите к Edit > Project Settings > Quality
Матрица сверху дает вам выбор всех текущих уровней качества для самого редактора, а также для всех целевых платформ. Зеленый галочка показывает, что в настоящее время выбрано как качество по умолчанию. Вы также можете установить “Качество текстуры”, которое определяет общее разрешение текстуры в вашем проекте. Вы можете выбирать между “Full”, “Half”, “Quarter” и “Eight Res”. Вы должны выбрать “Полный Res” для текущих настроек по умолчанию.
После буквально часов возиться, единственным решением, с которым я мог приехать, было открыть Photoshop и экспортировать tilemap на 4000% его первоначального размера.
Когда я увеличиваю масштаб, есть еще небольшое размытие, но, по крайней мере, это не так плохо, как я показал в своем вопросе.
Я пробовал все ответы здесь безрезультатно, я остаюсь с заключением, что это должна быть проблема Tiled2Unity (несмотря на то, что она никогда не делала этого раньше)
Для каждой продвинутой игры очень важна настройка качества графики. В этой статье мы покажем пример настройки качества графики и покажем, как будет изменятся сцена при изменении настроек игры.
Как Вы знаете, качество графики в игре влияет на FPS и на на качество картинки! FPS – с англ. frames per second, – частота кадров в секунду, то есть величина, и показывающая количество кадров, сменяющихся за 1 секунду. Чем больше кадров в секунду будет в Вашей игре, тем плавнее и четче будет итоговая картинка, но тем больше ресурсов потребуется для такой прорисовки. И чтобы учесть возможности разных игроков с разной мощностью устройств, в игре с ледует делать несколько уровней настроек графики. Тогда каждый пользователь вашего приложения сможет выбрать для себя оптимальный уровень графики, то есть такой, при котором Ваша игра у него не будет лагать и подвисать.
Например, игра Witcher 3 имеет довольно высокие требования к ПК и если игрок со слабым компьютером попытается поиграть на высоком уровне графики, то у него могут возникнуть проблемы с картинкой. Ниже приведён пример отображения сцены с низким и высоким количеством FPS.
Как Вы смогли убедится – ч ем больше FPS тем плавнее будет картинка и меньше “фризов”. Стоит отметить, что н астройки графики актуальнее настраивать именно для 3D игр. В них часто используются высокополигональные модели, требующие четкой прорисовки. А в 2D играх, в большинстве случаев, используются спрайты, которые мало нагружают устройство и эти параметры там будут не столь критичны. Но в конечном итоге всё зависит от вашей игры, чем она требовательнее, тем нужнее настройка качества графики в ней!
Для того чтобы открыть настройки Quality заходим в Project Settings -> Quality.
Для создания нового уровня графики жмём Add Quality Level и вводим ему имя в поле Name.
Для выбора дефолтного уровня графики (уровня по умочанию), жмём на значок вниз и выбираем имя нужного уровня графики.
Ниже будут описаны настройки уровня графики.
Rendering
| Pixel Light Count | Количество пиксельных источников. |
| Texture Quality | Низкое или высокое качество отображения текстур |
| AntiAliasing | Уровень сглаживания |
| Soft Particles | Использование частицами мягкого смешивания |
Shadows
| Shadow resolution | Разрешение теней, влияющее на их качество |
| Shadow Projection | Проецирования теней. Close Fit тень рендерится в высоком разрешении. Stable Fit тень рендерится в низком разрешении. |
| Shadow Cascades | Многопоточность теней. Чем больше потоков теней, тем больше качество самих теней |
| Shadow Distance | Расстояние, больше которого тени не будут обрабатываться |
Other
| Blend Weights | Количество костей, которые влияют на отдельно взятую вершину анимации |
| VSync Count | Синхронизация с частотой обновления монитора, которое может избавить пользователя от артефактов и разрывов изображения |
| LOD Bias | Детализация моделей. Чем больше число, тем модели становятся более детализированные |
| Maximum LOD Level | Наибольший уровень LOD, который может быть в игре |
| Particle Raycast Budget | Использование метода столкновения частиц |
Различие настроек графики
Как видно в приведенном примере, с увеличением уровня графики растёт качество текстур, теней, освещения, моделей и уровня сглаживания. Если на самом маленьком уровне настройки графики качество теней и дальность их прорисовки низкая, текстуры мыльные и модели не имеют сглаживания, то на высоком уровне графики тень отрисовывается максимально далеко и чётко. Модели имеют сглаживание и свет, выглядит реалистичнее.
Но нельзя забывать, что чем более высокий уровень графики настроен, тем больше игроку требуется ресурсов компьютера для стабильного FPS. Так что не лишним будет дать возможность игроку выбирать тот уровень, который ему подходит.
Выбор качества графики во время игры
После настройки уровней качества графики, надо дать возможность пользователю нашей игры выбрать качество графики самостоятельно. Для этого будем использовать Dropdown, который может вмещать в себя все наши уровни графики и нам не придётся делать много кнопок для выбора определенного уровня графики.
Создаём dropdown, нажимаем на + и вводим названия уровня графики.
Далее создадим скрипт, который будет менять уровень графики в зависимости от нашего выбора. Для получения значения dropdown будем использовать UnityEngine.UI. Создаем переменную с типом Dropdown. Далее прикрепляем скрипт к объекту в редакторе и привязываем к скрипту Dropdown.
using System.Collections;
using System.Collections.Generic;
using UnityEngine;
using UnityEngine.UI;//Обязательно импортируем для работы с UI
public class qualty : MonoBehaviour
<
public Dropdown dropdown;
>
Для того, чтобы наш скрипт смог определить изменения dropdown, в dropdown жмём на + в поле On value changed и добавляем туда объект с нашим скриптом, где создадим функцию, которая меняет уровень графики с помощью функции QualitySettings. SetQualityLevel, где первый аргумент – это номер уровня графики, а второй аргумент это его активация, если true – активация уровня графики, а false – деактивация этого уровня графики.
using System.Collections;
using System.Collections.Generic;
using UnityEngine;
using UnityEngine.UI;//Обязательно импортируем для работы с UI
public class qualty : MonoBehaviour
<
public Dropdown dropdown;
public void checkdropdown()
<
QualitySettings.SetQualityLevel(dropdown.value, true);//Изменяем уровен графики
>
>
Теперь игрок может выбрать уровень графики. Вот как это выглядит:
В этой статье мы кратко пробежались по основным опциям в настройках уровней качества графики 3D игры и увидели, как меняется картинка при разных настройках FPS игры, а также рассмотрели простой способ, как настроить возможность выбора уровня качества графики для игрока.
Читайте также: