Что такое спрайт в программировании

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

Компьютерные игры в 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 !

Спрайты

Слово «спрайт» часто используется в программировании игр для обозначения фигурок героев и предметов. Такие фигурки – это на самом деле рисунки или фотографии, то есть компьютерная графика.

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

Кот в Scratch – не единственный объект-спрайт. Добавить на сцену другие можно несколькими способами: загрузить картинку с компьютера, нарисовать в самой среде программирования, выбрать из библиотеки. Для всего этого в Scratch предусмотрено специальное меню, которое находится внизу справа на панели спрайтов:

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

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

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

Когда в Scratch мы собираем блоки в программный код, этот код не существует в прострации сам по себе. Чаще всего он относится к какому-то спрайту. Другими словами, у каждого спрайта свой программный код, своя программа, свое предназначение. Герои могут «общаться» между собой через сигналы, которые посылают друг к другу. Но это другая история.

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

Когда выделяется другой спрайт, то код предыдущего становится невидимым.

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

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

Допустим, у нас есть проект под названием «Проект 1», где мы составили программу движения кота туда-сюда. Мы хотим скопировать этот код в «Проект 2». Тогда мы заходим в первый проект, открываем рюкзак и перетаскиваем сюда конструкцию блоков.

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

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

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

Если надо скопировать код в пределах одного спрайта, надо кликнуть по конструкции правой кнопкой мыши и в контекстном меню выбрать «Дублировать».

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

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

В Scratch начало отсчета, то есть точка с координатами (0; 0), находится в центре сцены. Общая ширина сцены составляет 480 точек. Это значит, что координата x может принимать значения от -240 до 240. Общая высота сцены составляет 360 точек. Это значит, что координата y может принимать значения от -180 до 180.

Хотя работу с фонами мы будем изучать позже, добавим на сцену координатную сетку. Это поможет нам сориентироваться в системе координат Скретча. Чтобы выбрать фон из библиотеки, надо нажать на лупу в меню сцены, которое находится в нижнем правом углу окна, на панели «Сцена».

Откроется библиотека фонов, прокрутите ее в самый низ и выберите фон «Xy-grid». На сцене появится координатная сетка.

Давайте уменьшим размер наших спрайтов раза в два, то есть примерно до 50%, чтобы они не занимали большую площадь сцены, а больше походили на точку. Теперь поиграем с их координатами. Для этого можно менять значения x и y на панели свойств и смотреть, где после этого окажется герой. Или просто перетаскивать мышью спрайт на сцене и смотреть как меняются x и y в свойствах.

Например, если x = 0, y = 150, спрайт окажется в центре по горизонтали и вверху по вертикали. Если x = 200, y = 0, то спрайт окажется справа по горизонтали и в центре по вертикали.

На самом деле не обязательно до запуска программы устанавливать спрайты в нужное место с помощью мыши или панели свойств. Обычно это делают программно, с помощью специальных блоков кода, находящихся в разделе «Движение». Одним из управляющих местоположением блоков является команда «перейти в x: … y: …». Вместо точек указываются желаемые координаты.

Эта команда быстро перебрасывает спрайт в заданную точку, поэтому ее часто используют в начале программы:

В приведенном примере, где бы ни стоял на сцене спрайт до запуска программы, как только будет нажат зеленый флажок, герой тут же окажется в точке (0; 50).

Отметим напоследок про слои. Наше пространство не двумерное, как плоскость, а трехмерное. У нас есть высота, ширина и длина. Хотя Scratch позволяет создавать только двумерные анимации, на самом деле даже в 2D-анимации есть своего рода третье измерение. Это слои.

Пусть по сцене перемещаются два спрайта. Что будет когда их координаты совпадут? Ничего. Они не столкнуться и не затормозят друг друга. Один спрайт пройдет как бы позади другого, а другой – поверх первого. Каждый живет на своем слое плоскости и ему нет дела до другого.

Однако бывает важно, слой какого спрайта расположен выше, то есть впереди. Посмотрите на рисунок:

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

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

Блоки изменения очередности слоев находятся в фиолетовой секции «Внешний вид». Это команды «перейти на передний/задний фон» и «перейти вперед/назад на … слоя».

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

Для выполнения задания потребуются две дополнительные команды – «повернуться к указатель мыши», «повернуть по часовой стрелке на … градусов» (вместо слов «по часовой стрелке» на блоке изображена дуговая стрелка).

X Скрыть Наверх

Программирование в Scratch. Курс

Sprite (Спрайт)

2D изображение. Чаще всего представляет из себя 2D массив пикселов.

Все объекты в 2D играх это есть спрайты.

Спрайты бывают анимированные и не анимированные.
Анимированные представляют собой последовательность быстро сменяющих друг друга не анимированных спрайтов.

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

Чаще всего за colorkey берут цвет пиксела из верхнего левого угла спрайта.

Что такое Sprite (Спрайт)?

Как сделать движение в Scratch

Скретч – это современная популярная среда программирования, позволяющая создать анимированных персонажей или видеоигру. В данной программе движение выполняет специальный объект – спрайт. Движение спрайта происходит сразу на экране в рабочей зоне. Скретч активно используется детьми и подростками для создания собственных уникальных анимированных историй и последующем размещении их в Интернете. Запишите ребенка на курс «Скретч программирование для детей» от ITMouse, где он под контролем профессиональных преподователей получить навыки создания программ и знания в популярной и востребованной IT-сфере. Эта программная среда позволяет детям развить творческие и мыслительные навыки.

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

Команда «Движение»

Создание объекта – половина работы. Чтобы он стал реалистичным, необходимо поработать с командой «Движение». Расскажем подробно, какие движения существуют и как их сделать.

Повернуть направо

Созданный персонаж появится в рабочей области программы. Чтобы повернуть изображение направо, нужно перейти во вкладку «Код», далее выбрать раздел «движение» и «повернуть направо на 15 градусов». Это действие позволит вращать персонажа вокруг своей оси.

Повернуть налево

Сделать движение в левую сторону поможет команда «повернуть налево на 15 градусов». Спрайт можно вращать неограниченное количество раз пока вы не найдёте нужное положение.

Повернуть в направлении

Повернуть в направлении – полезная команда, которая помогает в ускоренном режиме изменить расположение объекта. Чтобы это сделать, нужно:

1. Выбрать «повернуться в направлении».
2. Рядом с командой будет установлено стандартное значение «90». Кликнув на нём, можно изменить значение от 0 до 360 («90» – направо, «-90» – налево, 0 – вверх, 180 – вниз).

Перейти к позиции

Действие переместит объект на случайное место, к указателю мыши или ко второму спрайту. Чтобы осуществить действие, нужно выбрать «повернуть в x: y:». «Х» и «y» являются координатами на Сцене. Рассмотрим пример перехода к позиции.

1. Устанавливаем координаты.
2. Листаем бегунок в разделе «Код», «движение» вниз и видим заготовленные фразы для персонажей.
3. Выбираем понравившуюся, также текст можно установить свой, нажав на белое поле.

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

Повернуть к

В скретч движение персонажа можно повернуть к определённому объекту. Для этого необходимо выбрать блок «повернуться к» рядом в поле автоматически будет установлено «повернуться к указателю мыши».

Перейти в курсор или спрайт

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

Плыть в точку

Scratch движение спрайта переместит объект в другое место. Анимация будет плывущей. Чтобы создать такой эффект, нужно выбрать «плыть» и установить координаты. Спрайт будет плавно передвигаться, если выбрать «скольжение». Плыть объект может как в случайном положении, так и в определённое место. Спрайт передвигается только при нажатии зелёного флажка.

Изменить Х – координату спрайта

Действие изменит положение спрайта. Нужно работать с разделом «изменить х на». Рядом будет белое окно, в котором нужно установить число. При отрицательном значении спрайт переместится влево, а при положительном – вправо. Спрайт можно поместить на Сцену или вынести его за Сцену. При координатах от -240 до 240 объект будет находиться на Сцене. Х – координата будет активна, если нажать зелёный флажок.

Если касается края, оттолкнутся

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

Изменить Y-координату спрайта

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

Установить Y-координату

Установка координаты изменит расположение спрайта. В блоке «Движение» требуется выбрать «установить у в» и указать своё значение. Значений «у» будет 3: верх, низ и вертикальное размещение объекта.

Установить стиль вращения

Функция устанавливает стиль вращения объекта. Чтобы спрайт вращался налево и направо, нужно выбрать в пункте «установить вращение» соответствующие стороны. Чтобы спрайт двигался по кругу, следует выбрать «кругом». Действие «не вращать» оставит спрайт в одном направлении.

Примеры использования движения в скретч

Покажем несколько примеров движения персонажей в программе на примере встроенного котика.

Идущий котик

1. Выберите в разделе «Движение» «идти на 10 шагов» (значение можно изменить на совё).
2. Переместите блок в рабочую зону.
3. Чтобы котик начал идти, нужно кликнуть по перенесённому блоку левой кнопкой мыши.

Анимированный говорящий кот

Можно создать движущейся персонаж, который будет говорить установленную фразу, для этого необходимо:

1. В разделе «Движение» выбрать «идти на 10 шагов» для того, чтобы объект двигался.
2. В пункте «Звук» из предложенного перечне выбрать понравившуюся фразу или написать свою и перетащить её в рабочую область.
3. Чтобы котик одновременно шёл и издавал звук, необходимо первое действие соединить со вторым (просто перетащить первый блок ко второму).
4. При нажатии на блок котик идёт и одновременно мяукает.

Два персонажа

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

1. Кликаем на котика и выбираем «идти 15 шагов».
2. Кликаем на летучую мышь и выбираем «идти на 10 шагов».

Для каждого персонажа можно добавить различные действия и звуковые эффекты из раздела «Звук».

Арктический котик

Помимо анимации персонажа можно добавить фон. Чтобы это сделать, необходимо:

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

Спящая красавица

Создадим уютную домашнюю атмосферу со спящей принцессой.

1. Выберите необходимый фон и спрайт.
2. Поместите спрайт в реалистичное положение при помощи клавиши «повернуть на».
3. Чтобы создать обстановку сна, добавьте специальный звук «Zzz…» (выберите «Внешний вид», «Сказать Привет», вместо «привет» напишите свой текст.
4. Перетащите «повернуть на» и «Сказать…» в рабочую область.

Заключение

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