Как создать спрайт: — , Pixelart Photoshop tutorials, ,

Основы создания спрайтовой графики в играх OTUS

Компьютерные игры в 21 веке имеют тщательно проработанную графику с элементами 3D. Но некоторые из них до сих пор обладают 2D-видом. Огромной популярностью в двухмерной графике игр пользуются так называемые спрайты.

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

Определение и появление

Спрайты – это двухмерные картинки в играх. Из них состоят:

• персонажи;
• монстры;
• объекты, которые будут двигаться на экране;
• иные составляющие игрового мира.

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

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

• птичьего полета;
• огня после отдаленного взрыва;
• передвижений животных;
• колыхание деревьев и растений.

Это – только начало. Спрайты 21 века – это качественные и детализированные 2D-изображения. Из-за высоких требований их бывает весьма проблематично использовать в играх и иных приложениях. 3D-модель можно «покрутить», чтобы доработать со всех сторон, а спрайт – нет.

Актуальность

Sprites – 2D-картинки. Они пользуются спросом в игровом программном обеспечении не просто так. Существуют различные причины популярности спрайтов:

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

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

Часто спрайты ассоциируются с 90-ми годами. Опытные пользователи ПК с радостью запускают такие игры.

Принцип работы

Один спрайт – это неподвижная картинка в 2D. Несколько таких элементов, которые быстро сменяют друг друга, но относятся к одной серии, называют спрайтовой анимацией. Это – распространенный вариант создания движения в консолях (пример – Sega).

Спрайтовой графикой (анимацией) пользовались в основном в 90-х. Самая узнаваемая из них – 8-битный Марио. Его анимация состоит из 12 картинок:

• левый прыжок – 2 штуки;
• правый прыжок – 2 штуки;
• передвижение влево и вправо – по 4 штуки соответственно.

Если посмотреть на этого Марио сейчас, можно сделать вывод о том, что анимация при помощи спрайтов выглядит примитивно. К таким элементам сегодня выдвигаются более жесткие и серьезные требования. Sprite 21 века выглядит максимально реалистично. Если в «Марио» использовались 4 цвета, то в современных играх – намного больше.

Особенности

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

Если провести параллель, то спрайт в игре – это тот же небольшой «фильм», но в масштабах конкретного игрового объекта/персонажа. И не на телевизоре, а в компьютере.

Стоит обратить внимание на то, что количество спрайтов может быть любым – не только 24. Анимация возможна минимум с двумя «кадрами».

Принцип создания

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

1. Сначала создается изображение. Это – стартовая картинка.
2. Создать несколько измененных изображений. Они должны отличаться друг от друга положением «главного объекта».
3. Объединить получившиеся графические элементы в одной кадре.
4. Наладить анимацию. Для этого нужно использовать встроенные настройки и инструменты редактора.

Теперь остается развернуть результат на устройстве. Стоит запомнить – чем больше кадров, тем более плавной окажется анимация в игре.

Способы создания

Спрайты и соответствующие анимационные элементы создаются различными методами:

• в компьютерных игрушках 2D-типа можно использовать специальные движки;
• для браузерного программного обеспечения – HTML, CSS и JavaScript;
• универсальный вариант – различные языки программирования вроде C++ или Java.

Не обязательно пользоваться представленными ЯП, подойдет любой другой вариант. Новичкам рекомендуется обратить внимание на язык Scratch. В нем заложено визуально-оболочное программирование, благодаря которому анимационные эффекты настраиваются в несколько кликов.

Редакторы

Чтобы создавать sprite-объекты, можно использовать совершенно разные редакторы. К ним относят:

1. Paint. Бесплатный и самый примитивный вариант. Несмотря на простоту, приложение имеет все необходимое для создания 2D-изображений.
2. Piksel. Еще одно бесплатное программное обеспечение. Работает через браузеры. Поддерживает импорт в png и gif, а также сохранение результата в интернет-обозревателе.
3. GraphicsGale. Это еще один бесплатный редактор. Раньше его дистрибутив требовал финансовых вложений, но с 2017 года ситуация изменилась. Доступен исключительно для Windows.
4. Aseprite. Наиболее популярный современный редактор. Обладает огромным количеством полезных функций, возможностей, инструментов. Поддерживает регулярные обновления. Доступен для Linux, Windows и MacOS. Сгодится как для обучения, так и для серьезной работы с пиксельными изображениями.
5. GameMaker Studio 2. Это не просто редактор, а полноценный движок для работы с двухмерными играми. В ней есть функции, помогающие создавать и корректировать sprites.

Еще один вариант – Photoshop (любой версии). Он не приспособлен для пиксельной графики, но воспользоваться данным приложением все равно можно. Отличный вариант для статических спрайтов. Единственный существенный минус – это размер приложения. Photoshop весит намного больше, чем Aseprite или GraphicsGale.

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

Интересует GameDev-направление? Обратите внимание на авторские курсы в Otus!

Работа со спрайтами (Unity3d) / Хабр

Введение

Всем привет.
Вначале небольшой экскурс.
Эта статья является своеобразным переводом обучающей программы от Jesse Freeman. Ему спасибо за мою теперешнюю возможность получить инвайт. Остальным спасибо за понимание, что это моя первая статья.
В утопическом мире населенном только хабралюдьми, я постараюсь сделать так, чтобы за этой статьей последовало еще 9, но мир не идеален, так что пока не известно как всё пойдет. Вроде всё, тогда поехали.

Импортирование спрайтов

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

GIF

Как видите всё до безобразия просто. Теперь давайте на примере какого-нибудь спрайта рассмотрим настройки. Перейдем к Assets\Artwork\Sprites\Player и кликнем по текстуре игрока. В инспекторе откроется меню. Если по каким-либо причинам в открывшемся меню напротив вкладки Texture Type указано Texture, то у вас сейчас используется 3D-проект, это легко исправить просто создав новый проект, не забыв переключить на 2D. Внизу иллюстрация.

Как исправить

Если всё правильно

Отлично, теперь перетащим спрайт игрока на сцену, и что мы видим спрайт стал gameobject’ом.

Следующее свойство спрайтов о котором я расскажу называется Pixels To Units. Как вы видите спрайт игрока 80×80 пикселей, а в Unity 100×100 пикселей соответствуют одному квадратному метру, поэтому перейдя к настройкам импорта спрайта в строке Pixels To Units вы увидите значение 100 и это означает, что спрайт отображается корректно.Давайте изменим значение на 80, в таком случае вы увидите, что спрайт игрока увеличился, теперь он занимает равно один юнит квадратный.

GIF

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

Следующее свойство спрайтов о котором я расскажу называется Pivot. Если кратко — это точка привязки. По умолчанию установлена на центр. Вы можете изменить ее в случае необходимости, но в большинстве случае привязка в центре подходит. Здесь обойдемся без иллюстраций.
Едем дальше.

Поле Filter Mode по умолчанию имеет значение Bilinear, но так как у нас Pixel Art нам нужно изменить его значение на Point, после применения изменений вы видите, что спрайт стал выглядеть лучше, но при приближении видны аномалии, для того чтобы избавиться от них изменим значение поля Format на TrueColor.
Теперь спрайт не имеет никаких аномалий. Запомните такие настройки, поскольку их нужно применять каждый раз при работе с Pixel Art’ом.

GIF

Внимание:

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

GIF

Возможно следующие уроки будут объемнее, а пока всё.

That is all folks.

Scratch Sprites: создавайте крутые пользовательские спрайты

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

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

Что такое Scratch-спрайт?

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

Образы спрайтов Scratch в библиотеке

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

Как получить больше спрайтов на Scratch?

Если вы не можете найти нужный спрайт в библиотеке, вы можете создать свой собственный. Если в библиотеке есть спрайт, близкий к тому, что вы хотите, вы можете внести изменения, перейдя на вкладку «Костюмы». Там у вас будет возможность изменить цвет спрайта и стереть или добавить функции. Вы также можете сделать свой собственный спрайт!

Как легко создать пользовательский спрайт в Scratch

Вариант 1.

Создайте самостоятельно

Один из вариантов — начать с чистого холста. Просто выполните следующие простые шаги:

1. Нажмите, чтобы добавить спрайт

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

2. Выберите кисть

Появится еще несколько вариантов, и вы хотите выбрать третий сверху, который выглядит как кисть.

3. Проявите творческий подход с формами и цветами

Откроется пустой экран, на котором вы можете использовать различные цвета, формы и текст, чтобы создать спрайт своей самой смелой мечты!

Вариант 2: на основе вашего собственного изображения

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

1. Выполните быстрый поиск в Google объекта, предмета или персонажа

Нажмите на вкладку «Изображения», чтобы просмотреть результаты поиска. Затем нажмите «Инструменты» и в раскрывающемся списке откройте «Права на использование», а затем выберите лицензии Creative Commons. Теперь вы сможете увидеть все изображения, не защищенные авторскими правами, которые вы можете использовать для своего забавного проекта. Сохраните один на свой компьютер.

2. Избавьтесь от фона

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

3. Загрузите его в Scratch

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

Как вы управляете спрайтами в Scratch?

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

1. Анимировать спрайт. Многие спрайты поставляются с дополнительными костюмами. Вы можете увидеть, есть ли у вашего спрайта костюмы, перейдя на вкладку «Костюмы». Если вы неоднократно используете блок «следующий костюм» Looks , ваш спрайт будет иметь анимированное движение.
2. Переместить спрайт. В разделе Motion вы можете заставить свой спрайт двигаться, используя блоки «поворот» и блок «шаги перемещения».
3. Изменить цвет спрайта. Если вы хотите, чтобы ваш спрайт менял цвет, вы можете использовать блок «эффект изменения цвета» Looks . Когда вы используете этот блок внутри цикла, цвет спрайта будет медленно меняться, создавая эффект радуги.
4. Заставьте спрайт говорить. Чтобы создать речевые пузыри спрайтов, используйте блоки «say» Looks . Вы можете настроить речь вашего спрайта.
5. Заставьте спрайт издавать шум. Для добавления звука можно использовать кнопку «воспроизведение звука» Звуки блок. Если вы перейдете на вкладку «Звуки» вверху, внизу есть возможность просмотреть уже доступные звуки. Или вы можете записать свой собственный!

Создатель спрайтов Scratch

Существуют различные проекты Scratch, такие как Sprite Maker Studio, где люди делятся созданными ими спрайтами. Некоторые из них доступны для использования в программе Scratch coding for kids. Просто не забудьте сначала нажать на спрайт и проверить авторские права!

Скретч-спрайты и фоны

Спрайты — это персонажи вашей программы Scratch, которыми вы управляете. Фон — это фон для вашего проекта. Вы можете просмотреть их библиотеку, используя другую круглую кнопку в правом нижнем углу со значком портрета со знаком плюс. Точно так же, как вы загружаете изображения для спрайтов, вы также можете делать это для фонов. Если вы хотите отобразить несколько фонов, вы можете использовать блок «следующий фон» Looks .

Крутые спрайты Scratch

Исследуйте потрясающие спрайты Scratch, созданные разными пользователями, для вдохновения!

1. Foxcopter: желтая лиса, у которой есть множество костюмов, таких как ходьба и полет, чтобы оживить ее
2. Music Tour: классный проект со звуком, который показывает некоторые способы использования спрайтов инструмента
3. Шесть пользовательских спрайтов: этот проект показывает шесть пользовательских спрайтов которые выглядят как дружелюбные существа
4. Органы тела: Здесь вы можете найти спрайты для различных органов человеческого тела, таких как легкие и мозг
5. Могучие рейнджеры: Удивительная коллекция могучих рейнджеров для использования в вашем проекте. Обязательно отдайте должное создателю!

Начните создавать потрясающие Scratch-спрайты

Теперь вы знаете все способы добавления пользовательских спрайтов в вашу Scratch-программу! Покажите свои анимированные спрайты и найдите несколько забавных спрайтов в нашей библиотеке проектов для детей. Затем ознакомьтесь с этим учебным пособием по Scratch для детей или создайте геометрическую черту в Scratch.

Автор Софи Эндрюс, инструктор Create & Learn. Софи Эндрюс — студентка Стэнфордского университета, изучающая математику и вычислительные науки. Она любит преподавать и работает ассистентом на вводных занятиях по информатике в Стэнфорде. Ее работа посвящена науке о данных. В прошлом году она создала онлайн-систему отслеживания голосов для политического отчета Кука, а в настоящее время возглавляет группу данных в The Stanford Daily. Она также стажировалась в FCC и Национальной лаборатории возобновляемых источников энергии.

Создание спрайтов — настоящий 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 см.