Создание спрайтов: Спрайтовая графика: руководство по созданию спрайтов от А до Я

Содержание

Спрайтовая графика: руководство по созданию спрайтов от А до Я

Спрайтовая графика — одна из старейших технологий для анимации персонажей. Спрайтами называют картинки в 2D-играх, из которых состоят игровые персонажи, монстры, движущиеся объекты и др.

Первая спрайтовая графика датируется началом 80-х годов. Но самое интересное, что она до сих пор пользуется популярностью при создании 2D-игр, браузерных игр, а иногда и в 3D-играх, когда нужно анимировать удаленный объект или создать анимацию, на которой не зациклено внимание игрока. Например:

огонь после отдаленного взрыва,

полет птицы,

передвижение животных,

колыхание деревьев,

и др.

Почему спрайтовая графика до сих пор актуальна? — спросите вы.
На это есть несколько причин:

с технической стороны спрайты имеют меньший вес, чем 3D-объект;

создать спрайт легче, чем 3D-объект;

при помощи спрайтовой графики можно достаточно быстро анимировать любой нарисованный объект с меньшими усилиями;

и др.

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

Спрайтовая графика

Один спрайт — это неподвижная картинка. Несколько быстро сменяющихся картинок из одной серии создают анимацию, то есть спрайтовую анимацию. Самой узнаваемой спрайтовой анимацией является 8-битный Марио; в состав его анимации входило всего 12 картинок:

2 для левого прыжка,

2 для правого прыжка,

4 для передвижения влево,

4 для передвижения вправо.

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

Спрайтовая анимация действует по принципу кинематографа. Многие пользователи знают, что кино состоит из множества кадров, есть даже цифра (24 кадра в секунду), которую способен уловить человеческий глаз. Фильм показывается на всем экране телевизора. А спрайтовая анимация — это такой же небольшой «фильм», только в масштабах одного персонажа на большом экране, то есть это как отдельный «экран с кино» на большом экране устройства. А в этом небольшом «кино» крутятся изображения одного персонажа, создавая анимацию. Причем количество спрайтов в спрайтовой анимации не обязательно должно быть равно 24. Зацикливают любое количество изображений, начиная от 2-х.

Создание спрайтов

Спрайтовая графика создается в три этапа:

Необходимо создать изображения для анимации.

Далее эти изображения нужно объединить в одном кадре и наладить из них анимацию.

Расположить анимацию на экране.

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

Спрайт — это 2D-изображение. Спрайтовая анимация часто используется именно в 2D-играх, поэтому анимировать свои спрайты можно по-разному:

для полноценных 2D-игр можно использовать соответствующие игровые движки;

для браузерных игр используют HTML5, JavaScript и CSS;

можно использовать знания Java или C++;

и др.

В каком языке программирования есть познания, в том и создается спрайтовая анимация. Если сильно хочется экспериментировать со спрайтами, но знаний в программировании недостаточно, тогда можно попробовать язык Scratch. В его основе лежит визуально-блочное программирование, где вам нужно будет только «перетаскивать» блоки, анимируя свои спрайты.

Заключение

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

Создание спрайтов — фото и картинки: 67 штук

156 Спрайты 2-12-2022

АССЕТ для 2d платформера

Персонаж для Construct 3

Спрайты в Blender

Пиксельное поле

Тайлсет травы 2d

Super Mario World спрайты

Tileset 2d platformer

Фон для пиксельного платформера

2д пиксель арт игры

Задний фон для платформера

Спрайты для Unity 2d

Фон для 2д игры

2d спрайты на Юнити

Фон для пиксельных игр

Спрайты космических кораблей ТДС

Трава 2д спрайт

Спрайты для 2d игр

2д спрайты космос

Спрайт травы 2d

2d спрайт дерева покадрова

Пиксельные персонажи с анимацией

Ассеты для 2d игр Jumper

Спрайты космических кораблей для 2d игр

Пиксель арт вид сбоку

Фон леса 2д

Бэкграунд для платформера

Sprite Sheet персонаж 2d

Пиксельная Графика для игр платформер

Pixel Tileset Desert

Задний фон для игры 2d

YTTD спрайты

Фон для пиксельных игр

Мегамен 2 спрайты

Спрайт 2д игрок

Sprite 2d ГШ

Фрайдей Найт Фанкин бойфренд спрайты

Sprite Sheet персонаж 2d

Пещера пиксельная 2d stardewalley

Тайлсет лес

2д спрайты персонажей

Справйты спрозрачным фоном

Сталкер 2d спрайты

Пиксельные объекты

2д спрайты персонажей

Пиксельные спрайты

Jsab спрайты

Спрайт фон для головоломки

Пиксель арт

Спрайты сервенты

Pixel Tileset platformer

Спрайты мега Мэн

Бег спрайты

Спрайт героя 2д

Спрайт bf

Friday Night Funkin Whitty Sprites

Пиксельный для платформера

Tileset 32×32 бег

2d Sprite противник

Спрайт шипов 2д

2д спрайт мк3

Хоумстак спрайты база

Спрайт 2l теней

Фон игры Angry Birds

Спрайт Дилюка

Гретчин 2 спрайт

Создание спрайтов

Оцени фото:

Комментарии (0)

Оставить комментарий

Жалоба!

Другие фото по теме::

Аниме
Спрайты
Обои
Поделки
Арт
Картинки
Фоны
Острова
Небо
Деревья
Природа
Водопады
Горы

Озера
Реки
Лес
Море
Цветы
Растения
Времена года
Дизайн
Вкусняшки
Стиль

Создание спрайтов — настоящий Python

В этом уроке вы создадите игрока в виде спрайта . Вот как вы используете Sprite объектов с текущей игрой для определения игрока. Вставьте этот код после строки 18:

 16# Определите константы для ширины и высоты экрана.
17SCREEN_WIDTH = 800
18SCREEN_HEIGHT = 600
19
20# Определите объект Player, расширив pygame.sprite.Sprite
21# Поверхность, отрисовываемая на экране, теперь является атрибутом игрока.
Игрок 22 класса (pygame.sprite.Sprite):
23 по определению __init__(сам):
24 super(Игрок, сам).__init__()
25 self.surf = pygame.Surface((75, 25))
26 self.surf.fill((255, 255, 255))
27 self.rect = self.surf.get_rect()
28
29# Инициализировать pygame
30pygame.init()

Вам необходимо удалить строки с 59 по 72, которые включали создание предыдущего объекта серфинга и его отображение. Эти строки будут заменены отображением спрайта нового игрока. Вы также измените фон экрана на черный. Вот все изменения, которые вы сделаете на этом уроке:

 1# Импорт модуля pygame
 2импорт pygame
 3
 4# Импортируйте pygame. locals для более удобного доступа к ключевым координатам
 5# Обновлено для соответствия стандартам Flake8 и Black.
 6из импорта pygame.locals (
 7 К_УП,
 8 К_ВНИЗ,
 9К_ЛЕВО,
10 К_ПРАВО,
11 К_ESCAPE,
12 КЛЮЧ,
13 ВЫЙТИ,
14)
15
16# Определить константы для ширины и высоты экрана
17SCREEN_WIDTH = 800
18SCREEN_HEIGHT = 600
19
20# Определите объект Player, расширив pygame.sprite.Sprite
21# Поверхность, отрисовываемая на экране, теперь является атрибутом игрока.
Игрок 22 класса (pygame.sprite.Sprite):
23 по определению __init__(сам):
24 super(Игрок, сам).__init__()
25 self.surf = pygame.Surface((75, 25))
26 self.surf.fill((255, 255, 255))
27 self.rect = self.surf.get_rect()
28
29# Инициализировать pygame
30pygame.init()
31
32# Создать экранный объект
33# Размер определяется константами SCREEN_WIDTH и SCREEN_HEIGHT
34screen = pygame.display.set_mode((SCREEN_WIDTH, SCREEN_HEIGHT))
35
36# Создать экземпляр игрока. Сейчас это просто прямоугольник.
37player = Игрок()
38
39# Переменная для поддержания работы основного цикла
40работ = Истина
41
42# Основной цикл
43во время работы:
44 # Посмотреть каждое событие в очереди
45 для события в pygame.  event.get():
46 # Пользователь нажал клавишу?
47, если event.type == KEYDOWN:
48 # Это была клавиша Escape? Если это так, остановите цикл.
49если event.key == K_ESCAPE:
50 работает = Ложь
51 # Нажал ли пользователь кнопку закрытия окна? Если это так, остановите цикл.
52 elif event.type == ВЫЙТИ:
53 работает = Ложь
54
55 # Заливаем экран черным
56 screen.fill((0, 0, 0))
57
58 # Рисуем игрока на экране
59 screen.blit(player.surf, player.rect)
60
61 # Обновить дисплей
62 pygame.display.flip()

Для получения дополнительной информации о классе Sprite из pygame документации, а также дополнительную информацию о спрайтах и использовании наследования с super() , ознакомьтесь со следующими ресурсами:

Класс Sprite из pygame документации
Статья о спрайтах в Википедии
Усовершенствуйте свои классы с помощью Python super()

Дополнительные сведения о цветовой модели RGB см. в следующих источниках:

Цветовая модель RGB
Веб-цвета

Экспорт анимации для мобильных приложений и игровых движков

Руководство пользователя Отмена

Поиск

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

Обзор

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

Лист спрайтов

Лист спрайтов — это файл растрового изображения, который содержит несколько меньших графических объектов в мозаичной сетке. Собрав несколько графических изображений в один файл, вы позволяете Animate и другим приложениям использовать графику, при этом вам нужно загрузить только один файл. Такая эффективность загрузки может быть полезна в таких ситуациях, как разработка игр, где особенно важна производительность.

Лист спрайтов, содержащий спрайты в покадровой анимации.

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

Атлас текстур

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

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

Разница между листом спрайтов и атласом текстур

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

Особенность	Спрайт-лист	Атлас текстур
Производительность в мобильных приложениях
Эффективность загрузки приложения	Высокий, так как нет вычислений	Низкий, так как выполняется вычисление файла JSON
	Занимает больше размера	Занимает меньше размера
Качество анимации	Средний
Количество сгенерированных файлов	Два файла: один растровый и один json	Переменная: На основе размера изображения.
Количество сгенерированных растровых изображений	В зависимости от количества кадров, используемых в листе спрайтов, количество файлов растровых изображений также может увеличиваться, что приводит к увеличению размера листа спрайтов	В спрайте генерируются только уникальные растровые изображения, что уменьшает общий размер.

Создание листа спрайтов

Чтобы создать лист спрайтов, выполните следующие действия:

Выберите один или несколько символов в Библиотеке или экземплярах символов на Сцене. Выбор также может содержать растровые изображения.
Щелкните выделенный фрагмент правой кнопкой мыши и выберите «Создать лист спрайтов».

В диалоговом окне «Создать лист спрайтов» выберите необходимые параметры и нажмите «Экспорт».

Опция экспорта	Описание
Размер изображения	Общий размер листа спрайтов в пикселях. По умолчанию используется параметр «Авторазмер», при котором размер листа соответствует всем включенным вами спрайтам.
Формат изображения	Формат файла экспортируемого листа спрайтов. Поддержка 8-битного PNG и 32-битного PNG с прозрачным фоном (альфа-канал). PNG 24 бит и JPG не поддерживают прозрачный фон. Как правило, визуальная разница между 8-битным PNG и 32-битным PNG невелика. 32-битные файлы PNG в четыре раза больше, чем 8-битные битовые файлы PNG.
Заполнение границ	Отступы по краям листа спрайтов в пикселях.
Подкладка формы	Отступ между каждым изображением на листе спрайтов в пикселях.
Алгоритм	Техника, используемая для упаковки изображений в лист спрайтов. Есть два варианта: Базовый (по умолчанию) Максректс
Формат данных	Внутренний формат, используемый для данных изображения. Выберите формат, который лучше всего подходит для предполагаемого рабочего процесса для листа спрайтов после экспорта.
Повернуть	Поворачивает спрайты на 90°. Эта опция доступна только для некоторых форматов данных.
	Этот параметр экономит место на листе спрайтов, обрезая неиспользуемые пиксели из каждого кадра символа, добавляемого на лист.
Рамы стека	Выбор этого параметра предотвращает дублирование кадров внутри выбранных символов в результирующем листе спрайтов.

Экспорт анимации в мобильные приложения или игровые движки

Animate помогает экспортировать анимацию в игровые платформы и мобильные приложения. Хотите просмотреть анимацию на своих мобильных телефонах или игровом движке? Посмотрите руководство в конце этого примера и выполните следующие действия.

В библиотеке щелкните правой кнопкой мыши клип.
Выберите Создать лист спрайтов .
В диалоговом окне Sprite Sheet выберите необходимые параметры.
Нажмите Экспорт .

Как экспортировать анимацию для мобильных приложений или игровых движков

Посмотрите видео, чтобы узнать о других вариантах экспорта анимации.

Создание атласа текстур

Разработчики игр могут использовать Animate для управления анимацией и экспортировать ее в виде атласа текстур в игровой движок Unity или любые другие любимые игровые платформы.

Процесс создания атласа текстур в Animate и его импорта в Unity показан на следующей схеме:

Иллюстрация, показывающая рабочий процесс создания атласа текстур и его импорта в Unity.

Чтобы создать атлас текстур анимации, выполните следующие действия:

В Animate можно создать атлас текстуры для выбранного символа из Библиотеки или экземпляра символа в рабочей области.
Щелкните символ правой кнопкой мыши и выберите в меню пункт «Создать атлас текстур». Появится окно «Создать атлас текстур».
Создать атлас текстур

Выберите соответствующие параметры экспорта для атласа текстур.

Опция экспорта	Описание
Размер изображения	Общий размер текстурного атласа в пикселях. По умолчанию используется параметр «Авторазмер», при котором размер листа соответствует всем изображениям, которые вы добавляете.
Оптимизация размеров	Когда установлен флажок «Оптимизировать размеры», он удаляет пустые пиксели из растровых изображений, а размеры не являются степенью двойки (параметр по умолчанию). Это применимо ко всем сгенерированным растровым изображениям. Если флажок «Оптимизировать размеры» не установлен, растровые изображения создаются на основе выбранных размеров.
Формат изображения	Формат файла экспортируемого листа спрайтов. Поддержка 8-битного PNG и 32-битного PNG с прозрачным фоном (альфа-канал). Как правило, визуальная разница между 8-битным PNG и 32-битным PNG невелика. 32-битные файлы PNG в четыре раза больше, чем 8-битные битовые файлы PNG.
Разрешение	Выберите любое значение в диапазоне от 0,3 до 3,0
Бордюрная прокладка	Отступы по краям атласа текстуры, в пикселях
Прокладка формы	Отступы между каждым изображением в атласе текстур, в пикселях.
Алгоритм	Техника упаковки изображений в атлас текстур. Есть два варианта: Базовый MaxRects (по умолчанию)
Формат данных	Внутренний формат, используемый для данных изображения. По умолчанию используется формат JSON.
Поворот	Поворачивает изображения на 90°. Эта опция доступна только для некоторых форматов данных.
Свести наклоненные объекты к растровому изображению	Выберите этот параметр, если вы используете искаженные преобразования для ваших объектов. Animate преобразует эти объекты в растровые изображения, поскольку некоторые игровые движки неправильно интерпретируют наклонные преобразования.
Оптимизация файла Animation.json	Если установлен флажок Оптимизировать файл animation.json, этот параметр удаляет отступы, разложенную матрицу и сокращает используемые имена (параметр по умолчанию). Если флажок Оптимизировать файл animation.json не установлен, этот параметр экспортируется с отступом и значимыми именами.

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

Созданная выходная папка для атласа текстур содержит следующие файлы:

Animation.json

Этот файл содержит информацию об анимации. Идентичные кадры по умолчанию оптимизируются и объединяются в файле Animation.json.

spritemap.json

Этот файл содержит информацию о файле spritesheet.png.

spritemap.png

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

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

Импорт атласа текстур в Unity

Вы можете импортировать созданные Animate файлы атласа текстур в ваши любимые игровые движки. Чтобы импортировать файлы атласа текстур, вы можете создать плагины, соответствующие вашим игровым движкам. Образец подключаемого модуля импорта предоставляется для инструмента Unity.

Импортируйте атлас текстур в Unity, выполнив следующие действия:

В Unity создайте проект в любом месте. В этом месте создается папка с подпапкой Assets.
Создайте две вложенные папки в разделах «Активы» как «Ресурсы» и «Редактор».
Щелкните здесь, чтобы загрузить образец подключаемого модуля импорта для Unity. Выберите плагин Unity на вкладке «Загрузки» и выберите соответствующую версию для загрузки.
Файл unity-plugin.zip состоит из файлов Plugin.cs, WrapperPlugin.cs, AnimateEditor.cs и Effect.shader.
Загрузка образца означает ваше согласие с Условиями использования и Политикой конфиденциальности в Интернете.
Переместите файлы атласа текстур, такие как Animation.json, spritemap.json, spritemap.png, и файлы подключаемых модулей Unity, такие как Plugin.cs и Effect.shader, в Assets > Resources.
Переместите файлы AnimateEditor.cs и WrapperPlugin.cs в папку Assets.
В Unity щелкните файл AnimateEditor.cs и перетащите его на основную камеру.
Играть. При воспроизведении вашего проекта карта спрайтов разделяется на разные спрайты.
Переместить AnimateEditor.cs в редактор.
В Unity щелкните файл WrapperPlugin.cs и перетащите его на основную камеру. Кроме того, отмените выбор или удалите AnimateEditor.cs из основной камеры.
Воспроизведите или опубликуйте выходные данные в соответствии с вашими требованиями.

Вы даже можете настроить подключаемый модуль, изменив файл WrapperPlugin.cs в соответствии с вашими требованиями.

Подключаемый модуль Unity поддерживает цветовые эффекты для файлов атласа текстур, созданных Animate. Также плагин поддерживает маскирование через слои. Функция маскирования применима только для выпуска Unity 2017 и более поздних версий.

Публикация текстур

Как аниматор, вы можете продолжать создавать контент в векторном формате и экспортировать его в векторный или растровый формат для платформ HTML 5. В настройках публикации добавлена возможность экспортировать анимацию в виде атласа текстур, чтобы повысить производительность анимации.

1. Создайте документ на основе холста. Выберите File>New , чтобы отобразить окно New Document.

2. Выберите вкладку Advanced и нажмите HTML5 Canvas. Открывается новый FLA-документ.

3. Нажмите Файл > Настройки публикации . Если на вкладке «Основные» включен параметр « Экспорт документа в виде текстуры », на вкладке « Настройки изображения» отображаются параметры публикации текстуры. По умолчанию все символы включены в публикацию текстур. Чтобы выборочно выбрать символы для текстур, щелкните значок настроек рядом с ним.

Хотя эта опция может увеличить размер активов, она повышает производительность. Кроме того, вы можете увеличить разрешение изображений в 2 и 3 раза по сравнению с исходным разрешением изображений для целевых дисплеев HiDPI . Чтобы изменить настройки разрешения, щелкните значок гаечного ключа рядом с параметром Экспортировать документ как текстуру , как показано на снимке экрана ниже. Перетащите числа рядом с разрешением, чтобы получить значения, кратные 2x и 3x.

По умолчанию для публикации текстур установлено разрешение 2X. Кроме того, диапазон разрешения может быть изменен от 0,3 до 3X.

Публикация текстур применима только к типу документа HTML5 Canvas.

Экспорт документа как текстуры включен

Выбор векторного или растрового файла подобен выбору между размером файла и производительностью. Платформы HTML5 оптимизированы для растрового контента. Так, для некоторых сложных фигур лучше предварительно конвертировать векторные изображения в растровые. Для некоторого базового контента вы по-прежнему можете использовать векторный контент. Animate предоставляет эту возможность через диалоговое окно выбора частичного символа. Частичный выбор символов позволяет вам выбрать символы, которые должны быть преобразованы в растр, сохраняя при этом остальные в виде векторов.

Чтобы открыть частичный выбор символа, нажмите Изменить в диалоговом окне Настройки публикации и выберите символ из списка. По умолчанию выбраны все символы.

Изменить выбор частичного символа

Выберите нужные символы из списка.

Частичный выбор символа

Повышение производительности графики с помощью растровых текстур

В Animate растровые текстуры улучшают производительность анимации на разных платформах. Хотите уменьшить сложность векторов с помощью растровых текстур? Посмотрите руководство в конце этого примера и выполните следующие действия.

На панели Инспектора свойств нажмите Параметры публикации.
На вкладке Basic , выберите значок гаечного ключа рядом с Экспортировать документ как текстуру .
На вкладке Настройки изображения нажмите Изменить и выберите нужные символы.

Штирлиц — Сеть печатных салонов в Перми