Как пиксель арт анимацию в unity

Обновлено: 05.07.2024

Визуальный стиль моей находящейся в разработке игры LAUNDRY GAME (да, это бессовестная реклама) основан на больших чётких пикселях в 3D. Я обожаю 3D в низком разрешении. Мне задавали много вопросов о том, как я это сделал, поэтому я решил написать туториал.

Примечание: это только моё решение! Существуют способы с применением шейдеров, блиттингом графики и другими трюками, но для моего небольшого соло-проекта такого решения оказалось вполне достаточно.

Дополнение 1: умный парень Пит Брисбёрн отправил сюда скрипт на случай, если вам не понравится трюк с «quad в небе» (этапы 4–6)!

Для начала нужно подготовить сцену! Я создал этот небольшой куб с моим другом-птицей Oscar J. Ruffles. Он бегает по кубу и постоянно кричит. (Это всего лишь соединённые вместе контроллер персонажа и аниматор.)

Но взгляните на эти отвратительные линии сглаживания! Фу, давайте избавимся от них.

Увеличиваю масштаб я (чтобы получить огромные чёткие пиксели) при помощи RenderTexture и рендеринга Main Camera в эту текстуру. Это позволит нам использовать эту RenderTexture как любую обычную текстуру!

Вот параметры, которые я буду использовать для своей RenderTexture. Size — это размер, с которого мы увеличиваем масштаб. Чем меньше число, тем больше пиксели. Я для обоих значений обычно использую числа в интервале от 300 до 600 (превосходная Celeste, например, выполняет увеличение масштаба с 320x200).

Filter Mode — это способ выполнения увеличения/уменьшения масштабирования (up/downscaling). Режим «Point» не добавляет сглаживания, то есть сохраняет чёткость пикселей, которая нам так нужна.

Но что произошло?

Теперь мы рендерим Camera не на экран, а в RenderTexture, поэтому на экране ничего не рендерится!

Начнём с того, что создадим в сцене новую камеру (назовём её QuadCamera) и как дочерний объект прикрепим к ней 3D quad.

Затем нам нужно взять QuadCamera и засунуть её куда-нибудь. Не важно, куда, главное, чтобы её никогда не было видно из Main Camera. Я обычно поднимаю её высоко в небо или опускаю глубоко вниз.

Затем мы берём quad. Я задал для него материал “Sprites-Default” (стандартный материал Unity, на который не действует освещение), чтобы на него не влияло никакое случайное освещение в сцене. Затем перетащим RenderTexture на quad. Теперь quad показывает нашу сцену! Затем мы перемещаем quad так, чтобы он находился перед QuadCamera (камерой, которая теперь рендерит целевой экран).

Как видите, теперь масштаб рендеринга увеличен! Оскар может постоянно щёлкать своим пиксельным клювом! Но в то же самое время мы стали намного ближе к его голове.

На последнем этапе вернёмся к моей Main Camera и настроим её так, чтобы мы видели примерно то же, что и раньше. Здесь можно увеличить размер render texture, чтобы пиксели стали немного меньше, или уменьшить его,, чтобы на экране помещалось всего 7 пикселей. Это время для экспериментов, найдите то, что подходит лично вам.

Как мы видели, текстура модели (большой глаз Оскара) всё это время была размытой. Так получилось потому, что при импорте текстур в Unity выбираются стандартные параметры для генерации mip-текстур и плавного масштабирования. Но нам этого не нужно. Поэтому при импорте текстур необходимо отключить Generate Mip Maps и выбрать для Filter Mode режим Point.

На этом пока все, надеюсь, вам было очень интересно проследить за мной и научится работать с пикселями в Unity. Я очень люблю 3D в низком разрешении, в этом есть своя изюминка. Успехов!

После создания проекта в 2D, перейдите в Edit -> Project Settings -> Quality и затем Edit -> Project Settings -> Quality (Если у вас есть более одного уровня качества (Низкий, Высокий, Ультра…), проверьте что вы отключили сглаживание на каждом из них).

Настройки импорта спрайта

Перейдите к каждому из спрайтов и измените следующие настройки:

Filter Mode -> Point (фильтр отсутствует)

Пиксели на точку (PPU)

Вы можете использовать любое PPU, но для игр с пиксельным артом часто советуют, чтобы размер тайла был выражен в пикселях (с точки зрения дизайна). В этои примере мы будем использовать PPU 16. Поэтому для настроек каждого спрайта: PPU -> 16

Размер ортографической камеры

Привязка к пиксельной сетке

Теперь ваша игра красиво смотрится в базовом разрешении. Но если ее открыть в увеличенном разрешении, появятся суб-пиксели! Чтобы этого избежать, вам всего-то нужно привязать индивидуальные спрайты к сетке пикселей.

Для этого используется дочерний объект, который содержит средство отображения спрайтов, и прикрепляя скрипт, который округляет положение спрайта в LateUpdate():

С помощью этого пошагового руководства вы сможете самостоятельно создать игру в жанре RPG в Unity.

Создание игрового мира с помощью тайловых карт.
Базовая анимация для игрового персонажа.
Простое взаимодействие объектов.
Создание меню.

Посмотреть демо готовой игры можно здесь.

Начало работы

Создайте проект 2D Unity.

Добавьте образцы пользовательского интерфейса Unity из Asset Store. Этот актив будет использоваться для создания сцены меню.

Создайте в окне проекта следующее дерево папок (на русском или английском языке, в зависимости от вашей версии программы):

►Animals
►OtherCharacters
►Plants
►Players

Вы можете скачать любые бесплатные шрифты, которые вам нравятся и использовать их при работе с проектом (добавьте их в папку Шрифты/Fonts).
Что касается спрайтов, то вы можете воспользоваться этим сервисом для их создания, если у вас нет готового набора.
Объекты не должны превышать размер 64 на 64 пикселя
Персонаж и его экипировка могут быть созданы с помощью еще одного простого онлайн создателя спрайтов.
Большинство спрайтов размещено на листах спрайтов, которые вам необходимо предварительно нарезать в Unity 3D.

Выберите лист спрайтов в окне проекта, как показано на изображении ниже:

В инспекторе измените параметр Sprite Mode на Multiple и нажмите кнопку Sprite Editor:

Теперь в меню Slice выберите значение Type.

После закрытия окна Slice, справа от листа спрайтов в окне проекта появляется небольшая кнопка; это позволяет видеть и получать доступ ко всем нарезанным вами спрайтам:

Создание карты

Для быстрой прорисовки базовых карт пиксельных RPG используется специальная палитра.

Откройте меню Window ⇒ 2D ⇒ Tile Palette.

Теперь создайте новую палитру и добавьте спрайты.

При необходимости можно добавить несколько палитр.

Теперь вам нужно выбрать нужные плитки:

И установите тип коллайдера в инспекторе.

Теги и слои
Создайте недостающие теги:

Создайте несколько слоев для хранения объектов.

Определите также порядок сортировки слоев в разделе Sorting Layers:

Создание анимации

Добавьте все типы имеющихся анимаций в один и тот же GameObject:

1.выбирайте все спрайты движения в одну сторону (на север)
2.перетаскивайте выбранные спраты в меню их в Hierarchy, чтобы добавить GameObject и сохранить анимационный клип
3. выбирайте оставшиеся спрайты движения и перетащите их на созданный GameObject
4. сделайте то же самое со всеми другими анимациями
5. Проверьте анимационные клипы в окне Animation (меню Window ⇒ Animation ⇒ Animation).

Добавьте камеру как дочерний элемент персонажа.

Это позволит перемещать камеру во время движения персонажа.

В инспекторе в разделе Sprite Renderer установите для параметра Sorting Layer значение Player.

Добавьте 2D-компонент Rigidbody.

Установите Gravity Scale = 0 и в разделе Constraints заморозьте вращение по Z.

Добавьте 2D-компонент Collider для взаимодействия с другими GameObject, такими как предметы или животные.

Прямо сейчас у нашего персонажа есть анимационные клипы, но он не воспроизводит никакой анимации или движений. Для этого нам нужно использовать Animator и написать скрипт.

Откройте меню Window ⇒ Animation ⇒ Animator.

Добавьте два параметра: DirectionX и DirectionY.

Для каждого перехода определите в Инспекторе следующее:

►снимите галочку с Has Exit Time
►в разделе Settings снимите флажок Fixed Duration
►в разделе Settings установите Transition Duration на 0.
►определить условия (например, EastIdle ⇒ WalkNorth ≡ DirectionY ⇒ 0, WalkNorth ⇒ IdleNorth ≡ DirectionX = 0 & DirectionY = 0)

Создайте новый скрипт PlayerMovement и прикрепите его к GameObject.

Добавьте этот код:

Вернувшись в Инспектор, установите значения:

После чего создайте префаб персонажа.

В окне Project удалите Animation Controller, созданный при добавлении клипов анимации.

Создайте новый, используя контекстное меню Create ⇒ Animation Controller, и назовите его.

В окне Animator создайте два новых состояния из Blend Trees.

Переименуйте объекты в окне Inspector, IdleTree и MoveTree, как показано на изображени ниже.

В этом случае вам нужно будет обработать только два перехода: между режимом ожидания и движением. Чтобы определить их, нужен новый логический параметр:

Создайте два перехода и установите настройки и условия, как показано на изображениях ниже.

Создайте 4 новых параметра float:

►DirectionX
►НаправлениеY
►LastDirX
►LastDirY

Параметр LastDir будут использоваться, чтобы узнать, какой неактивный клип вы должны использовать.

Теперь дважды щелкните IdleTree:

установите Blend Type на 2D Simple Directional
установите Parameters в LastDirX и LastDirY
в разделе Motion добавьте 4 элемента.
для каждого движения добавьте параметр idle clip (вверх, вниз, вправо, влево) и установите значения PosX и PosY

Вернитесь к Base Layer и сделайте то же самое с MoveTree.

Вернувшись в окно Scene, проверьте, есть ли у GameObject игрока компонент Animator.

Если он существует, удалите его.

Перетащите вновь созданный контроллер из окна проекта в инспектор.

Создайте новый скрипт PlayerBlendMovement и добавьте его в плеер.

Добавьте этот код:

Создание карты

Для начала рекомендуется создать несколько тайловых карт:

►карта мира
►тайловая карта помещений
►карта растений
►Карта дорог и скал

Таким образом вы сможете быстрее работать с фоновыми изображениями на ваших локациях.

Карта тайлов мира содержит информацию о мире, такую как вода, песок, трава, и т.п.

Прежде всего, создайте новую карту в меню Hierarchy с помощью контекстного меню 2D Object ⇒ Tilemap.

Это добавляет сетку и карту тайтлов, которую нужно переименовать в Tilemap_Map.

Установите значение Grid’s Layer на MapBackground.

Далее в Grid под Grid установите размер ячейки равным размеру вашего спрайта, как показано на изображении ниже.

В Tilemap Map в разделе Tilemap Renderer установите Sorting Layer на Map Background.

Откройте окно Tile Palette, выберите Active Tilemap и палитру.

Попробуйте нарисовать свой игровой мир, на рисунке ниже наш вариант, в качестве примера.

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

Чтобы это исправито вам нужно выполнить несколько действий:

убедитесь, что у плитки с водой есть коллайдер
добавить новый Tilemap Collider 2D в тайловую карту
добавить Composite Collider 2D на карту
указать Tilemap Collider 2D использовать Composite Collider 2D
добавьте Edge Radius в Composite Collider 2D, чтобы сгладить границы

Теперь персонаж может перемещаться только по мелководью.

В Иерархии выберите существующую сетку и создайте новую карту листов с именем Tilemap_Indoor.

На этот раз вы будете рисовать Tilemap_Indoor, используя несколько палитр (например, стены, полы).

Добавим несколько деревьев на нашу локацию.

В меню Hierarchy выберите существующую сетку и создайте новую карту листов с именем Tilemap_Plants.

Создайте новый слой, как дочерний элемент сетки.

Таким же образом вы можете добавить дороги или другие объекты на карте.

Создание интерактивных объектов

Для начала поместите префаб персонажа в исходное местоположение игрока.

Теперь вы сможете бегать по миру с помощью клавиш со стрелками.

Согласитесь, пока выглдит пустовато.

Давайте поставим несколько зданий.

Поместите спрайт дома в нужное место, затем установите Sorting Layer и добавьте Polygon Collider 2D.

Все внутренние объекты хранятся как дочерние по отношению к дому GameObject.

Таким же образом, добавьте дополнительные объекты на локации, а также деревья и животных.

так как это RPG, персонажу нужен инвентарь и древо умений.

Создайте новый UI Text и назовите его MessageBox, пока не заполняйте эту область.

Создайте еще один UI Text и назовите его CounterBox, также оставьте это поле пустым.

Создайте новую сцену, содержащую стартовое меню вашей игры, как показано на изображении ниже.

Используйте для этого следующий скрипт:

Далее нужно настроить кнопку Player Setup, используя следующий код:

Далее приступим к созданию меню для основных действий:

►Инвентарь: когда игрок собирает/обменивает вещи.
►Загрузка: когда игра запускается (запуск или изменение уровня).
►Сохранение игрового процеса.

Для этого вам понадобится следующий скрипт:

В Unity назначьте префабы трех игроков и текстовое поле Counter, как показано ниже.

Создание дорожных знаков

Создайте новый SignScript и добавьте его к знаку.

Вернувшись в Unity3D, свяжите MessageBox и добавьте текст для отображения.

Добавление звуковых эффектов

Фоновая музыка добавляется к объекту Grid.

Чтобы иметь возможность включать и выключать музыку, добавьте этот код в функцию Grid’s Update:

Меню выбора языка

Создайте обычный шаблон с фоновым изображением и флажком и кнопкой для каждого языка, как показано ниже.

Добавьте новый GameObject и назовите его LocalizationManager.

Добавьте сценарий LocalizationManager.cs.

Добавьте еще один GameObject и назовите его StartupManager.

Добавьте сценарий StartupManager.cs.

Перетащите LocalizationManager GO в область OnClick каждой языковой кнопки и установите локализованный файл JSON.

Сцена меню

Содержание пользовательского интерфейса (включая названия кнопок и области прокрутки) переводятся путем добавления LocalizedText.cs к объекту Text и ввода ключа перевода.

Для DropDown нужен сценарий DropDownOverwrite, который воссоздает параметры перехода с нуля.

Текст вызывается с помощью этой команды:

Далее ипользуйте следующий код:

Реализация WebGL

WebGL не принимает папку StreamingAssets, и ее файлы не входят в состав приложения.

Чтобы иметь возможность скомпилировать сборку WebGL, вам нужно загрузить папку StreamingAssets и ее файлы.

Необходимый код уже реализован в сценарии LocalizationManager, но перед компиляцией его необходимо раскомментировать.

Как создать анимацию в 2d игре.

Доброго времени суток друзья, в этой статье я хочу показать вам, как использовать анимацию в Unity 5 при создании 2d игры.

Итак, начнем. Откроем Unity и создадим новый 2d проект

Далее создадим две папки с названием Sprite и Animation

Перенесли спрайт и теперь выделим его. Справа появится его свойства. В свойствах нам пока понадобится только одно свойство Sprite Mode. Установим режим Multiple, так как наше изображение имеет несколько элементов, и нажмем кнопку Apply.

Далее, для того чтобы разделить наш спрайт на несколько элементов перейдем в редактор спрайта Sprite Editor в том же свойстве этого спрайта.

Перед нами откроется редактор, в котором мы просто выделяем наши 2 элемента по отдельности.

Примечание. Старайтесь выделять элементы одного размера, чтобы при проигрывании анимации картинка не прыгала из-за не точных расположений.

Вырезали элементы и далее просто закрываем редактор, на что он спросит вас сохранить изменения или нет.

Итак, наша птица готова, переходим к анимированию. Перенесем спрайт на сцену и Unity спросит у нас куда сохранить файл .anim, в котором будут хранится все последующие анимации данного объекта. Выберем папку Animation и сохраним туда этот файл.

Далее на сцене выберем нашу «Птицу» и откроем для нее новое окно Animation во вкладке Window.

В окне создания анимации выберем наш файл Ptica.anim и создадим новую анимацию Create a new Clip…

Когда наша новая анимация будет выбрана, рядом в параметре Sample укажем количество кадров 2 , так как у нас всего 2 элемента Спрайта.

Затем перенесем наши 2 элемента в окно редактора анимации, нажмем кнопку записи и кнопку Play.

На этом окно редактора анимации можно закрыть. Если вы запустите игру сейчас, то увидите что наша птица начала махать крыльями. Но, на мой взгляд, скорость анимации очень велика. Ее можно отредактировать.

Перейдем в папку Animation и откроем файл Ptica.anim

Здесь вы увидите все те анимации, которые будут использовать наш объект. Для изменения скорости выделим анимацию, которая проигрывается первая по умолчанию (она будет оранжевым цветов) и справа в окне свойства анимации изменим параметр Speed на другое значение.

Теперь при запуске игры птица выглядит более реалистичней (конечно не на сто %, но мне нравится). Далее можно создать скрипт, который будет двигать нашу «Птицу» в каком-нибудь направлении, но об этом в других уроках. Удачных проектов!

Читайте также: