Основы спрайтовой анимации


Спрайтовая Анимация

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

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

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

С увеличением мощности компьютеров спрайты росли, становились полноцветными, всё более похожими на настоящих персонажей из мультфильмов. Пик распространения спрайтовой анимации пришёлся на девяностые годы: как на компьютерах, так и на игровых приставках тогда расцвёл жанр «файтингов», где каждый мог почувствовать себя Брюсом Ли. Способствовал этому популярный тогда жанр «боевиков» в кинематографе. Кто из нас не играл в Mortal Kombat, по мотивам которого был даже снят фильм! Такие «файтинги» были полностью основаны на спрайтах.

На рубеже тысячелетий традиционная анимация начала уступать место 3D-анимации. То же самое происходило и в мире компьютерных игр — спрайтовые персонажи стали вытесняться полигональными. Однако спрайтовая анимация ещё не собирается уходить со сцены. Она продолжает широко использоваться в оформлении (вспомните «помощников» из более ранних версий Office), в обучающих программах, а также в играх — главным образом, для мобильных устройств. Кроме того, в наши дни спрайты используются во Flash и gif-анимации, только хранятся не в виде битмэпа, а в формате многослойного графического файла, где каждый кадр анимации расположен на отдельном слое. В Adobe After Effects можно поместить в сцену анимацию, созданную из последовательности графических файлов. Строго говоря, это тоже спрайтовая анимация, только источником спрайтов является не многослойная картинка или битмэп, а отдельная папка на компьютере. Так что спрайты, как волшебные феи, всегда готовы прийти на выручку аниматору, особенно при создании игр!

Спрайты из игры Angry Birds(2009 г.)

Основные виды анимационных роликов. Принципы их использования в презентации дизайн-проекта

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

Мультипликация (от лат. multiplicatio – умножение, увеличение, возрастание, размножение) — технические приёмы получения движущихся изображений, иллюзий движения с помощью нескольких или множества неподвижных изображений и сцен.

Анимация (от фр. animation – оживление, одушевление) – вид киноискусства и его произведение – анимационный фильм, а также соответствующая технология.

Компьютерная анимация– последовательный показ (слайд-шоу) заранее подготовленных графических файлов, а также компьютерная имитация движения с помощью изменения (и перерисовки) формы объектов или показа последовательных изображений с фазами движения.

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

Трансформационная анимация сразу задает поведение того или иного примитива, чем и отличается от покадровой, что не описывает каждый кадр последовательности отдельно. Для создания трансформационной анимации создаются два кадра, определяющие начальное и конечное состояние изображения. Эти кадры – ключевые. Остальные кадры – промежуточные, будут сформированы программой проигрывателем на основе заданных ключевых кадров. Трансформационную анимацию проще всего создавать на основе векторной графики. Фактически трансформационную анимацию создал пакет Flash. Если до него и существовали какие-то аналогичные разработки, то они остались неизвестными широкой публике.

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

Более подробное разделение видов анимации:

  1. Классическая (традиционная) анимация представляет собой поочередную смену рисунков, каждый из которых нарисован отдельно.
  2. Стоп-кадровая (кукольная) анимация. Размещенные в пространстве объекты фиксируются кадром, после чего их положение изменяется и вновь фиксируется.
  3. Спрайтовая анимация реализуется при помощи языка программирования.
  4. Морфинг– преобразование одного объекта в другой за счет генерации заданного кол-ва промежуточных кадров.
  5. Цветовая анимация – при ней изменяется лишь цвет, а не положение объекта.
  6. 3D-анимация создается при помощи специальных программ (3D MAX). Картинки получаются путем визуализации сцены, а каждая сцена представляет собой набор объектов, источников света, текстур.
  7. Захват движения (Motion Capture) – первое направление анимации, которое дает возможность передавать естественные, реалистичные движения в реальном времени. Датчики прикрепляются на живого актера в тех местах, которые будут приведены в соответствие с контрольными точками компьютерной модели для ввода и оцифровки движения. Координаты актера и его ориентация в пространстве передаются графической станции, и анимационные модели оживают.

Особенности WEB-анимации. Практически все форматы, кроме формата Shock-wave/Flash, обеспечивают сохранение только покадровой анимации. Все они, за небольшим исключением, поддерживают Flash.

В отличие от графических форматов GIF, JPEG, PNG, ни один видео-формат не поддерживается веб-обозревателем напрямую (единственное исключение — анимированный GIF, но это не совсем видео). Чтобы просмотреть помещенный на веб-страницу фильм, придется использовать дополнительную программу. Эти программы включены в состав поставки всех современный веб-обозревателей.

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

Продукты для создания анимации:

Adobe ImageReady (сейчас Adobe FireWorks) был растровым графическим редактором, поставлявшимся вместе с Adobe Photoshop, разработанным и распространяемым фирмой Adobe Systems. ImageReady. ImageReady имела меньше возможностей, чем Photoshop и была предназначена для быстрого редактирования веб-графики. Для этого, ImageReady имеет специальные функции, такие как создание анимированных GIF, оптимизация изображения, нарезка изображения и генерация HTML. В 2007 году Adobe FireWorks заменил ImageReady из-за покупки Macromedia компанией Adobe.

Adobe Flash (ранее Macromedia Flash) — мультимедиа платформа, используемая для создания векторной анимации и интерактивных приложений (в том числе, игр), а также для интеграции видеороликов в веб-страницы. Adobe Flash позволяет работать с векторной, растровой и ограниченно с трёхмерной графикой.

3ds Max(3D Studio MAX) – полнофункциональная профессиональная программная система для работы с трёхмерной графикой, разработанная компанией Autodesk. Позволяет создавать 3D анимацию.

Форматы видео:

QuickTime – Разработанный фирмой Apple в начале 80-х годов. Позволяет хранить видео и аудиоинформацию в одном файле с расширением mov.

Формат AVIразработан компанией Microsoft в начале 90-х для использования в пакете Microsoft Video for Windows – мультимедиа расширении операционной системы Windows. Позволяет хранить видео и аудиоинформацию в одном файле с расширением avi.


Формат MPEG разработан в начале 90-х одноименной группой программистов для сохранения фильмов на компакт-дисках CD и DVD. Файл формата MPEG может хранить видео и аудиоинформацию и имеет расширение dat, vob,mpg, mpe, mp1, mp2, mp4. Для сжатия данных чаще всего используются алгоритмы MPEG I, MPEG II, MPEG IV, DivX. В веб-дизайне практически не применяется.

Формат WMV (Windows Media Video) – это дальнейшее развитие формата AVI. Разработан компанией Microsof в конце 90-х. Файлы WMV могут хранить видео и аудиоинформацию и имеют расширение wmv и asf. Для сжатия информации использует собственный кодек. Существует особая разновидность формата, предназначенная для хранения звука. Файлы такого расширения имеют расширение wma (Windows Media Audio). В веб-дизайне практически не применяется.

Формат RealMedia разработан компанией RealNetwork в середине 90-х специально для распространения видео через Интернет. Позволяет хранить видео и аудиоинформацию в одном файле с расширениями rm и smil. Для сжатия данных используется одноименный алгоритм. Степень сжатия весьма велика, и достигаемое при сжатии качество фильма также достаточно высоко. В веб-дизайне практически не применяется. Формат RealMedia не поддерживается Flash.

Формат анимированный GIF используется для хранения мультипликации. Позволяет записывать в один файл несколько изображений, которые станут кадрами фильма. Поддерживается веб-обозревателями напрямую. Недостаток: такой фильм невозможно остановить. Широко применяется в веб-дизайне. В нем создают рекламные баннеры и элементы оформления страниц.

Программы для работы с аудио и видео анимацией:

Adobe Premiere — программа нелинейного видеомонтажа компании Adobe Systems. Позволяет создавать видео клипы с аудио, поддерживает множество видеоформатов.

Windows Movie Maker – программа для создания/редактирования видео. Включается в состав клиентских версий Microsoft Windows, начиная с Windows ME, обновлённая версия программы включена в Windows XP/

Здесь же Adobe Flash и 3DS MAX

Алгоритмы сжатия видео:

Intel Indeo – разработан компанией Intel в начале 90-х. Обеспечивает слабое сжатие, но без проблем работает на старых компьютерах. Используется для сжатия совсем коротких видеороликов.

MPEG I – самый первый из этого семейства, разработанный в начале 90-х группой MPEG для записей дисков VideoCD. Обеспечивает среднюю степень сжатия и довольно высокое качество изображения. Существует разновидность этого алгоритма для сжатия звука – MPEG I level 3 (MP3).

MPEG II – был разработан во второй половине 90-х для записи дисков DVD-Video. Обеспечивает более высокое качество и степень сжатия изображения, чем MPEG I.

MPEG IV – был разработан во второй половине 90-х специально для распространения фильмов через Интернет. Обеспечивает более высокую степень сжатия, чем MPEG II, а также поддерживает различные дополнительные возможности.

DivX – был разработан в конце 90-х группой независимых программистов как бесплатная альтернатива коммерциализированному MPEG IV. Использовался для распространения пиратских копий фильмов, но потом сам коммециализировался.

Xvid (ранее «XviD») – библиотека сжатия видео стандарта MPEG-4. Xvid является основным конкурентом кодека DivX Pro (Xvid это DivX наоборот). Xvid это свободная программа, основанная на некогда открытом исходном коде другого кодека – DivX.

Принципы их использования в презентации дизайн-проекта:

Например: облет камеры по помещению при дизайне интерьера, анимация в презентации логотипа, анимированный баннер в рекламном проекте или презентации WEB-сайта и др.

Не нашли то, что искали? Воспользуйтесь поиском:

Лучшие изречения: Для студентов недели бывают четные, нечетные и зачетные. 9438 — | 7438 — или читать все.

Спрайтовая анимация

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

Нажатие на кнопку A приводит к изменению цвета спрайта – новый цвет выбирается случайным образом. Нажатие на кнопку S приводит к уменьшению параметра scale , который отвечает за размер спрайта, выводимого на экран, нажатие на кнопку W приводит к увеличению параметра scale , и, соответственно, к уменьшению размера спрайта.

Параметр origin задает начало координат для спрайта. По умолчанию координата позиции спрайта соответствует его левому верхнему углу. Относительно левого верхнего угла, в таком случае, осуществляется и вращение спрайта. Для того, чтобы вращение происходило вокруг центра спрайта мы записываем в переменную Origin результат от деления длины и ширины спрайта на 2. В итоге спрайт , во-первых, выводится на экран с учетом нового для него начала координат, а во-вторых – при вращении спрайта оно осуществляется вокруг центра спрайта, а не вокруг его левого верхнего угла. Рассмотрим подробнее команду Draw , которую мы использовали для вывода спрайта на экран. В табл. 10.1. описан каждый из ее параметров.

Таблица 10.1. Описание параметров команды Draw
Элемент Описание
MySprite Текстура спрайта
position Позиция спрайта
spRec Прямоугольник, ограничивающий спрайт в текстуре, может применяться для вывода различных участков текстуры
color Оттенок спрайта
rotation Угол поворота спрайта
origin Начало координат спрайта, относительно которого осуществляется поворот и вывод спрайта на экран
scale Размер спрайта.
SpriteEffects.None Эффект вывода спрайта – позволяет поворачивать спрайт на 180 градусов или, если установлен параметр None – никак не влияет на положение спрайта
(float) 0 Глубина спрайта. Может изменяться от 0 до 1
Илон Маск рекомендует:  xmp в HTML

На рис. 10.1. вы можете видеть игровой экран проекта P6_1.

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

На этой странице


Обзор

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

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

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

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

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

Атлас текстур — это коллекция текстур в виде одного большого изображения. Можно оптимизировать игру, создав атлас текстур и используя его в игровом приложении.

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

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

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

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

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

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

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

Щелкните выделенные объекты правой кнопкой мыши и выберите пункт «Создать лист спрайта».

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

Способ размещения изображений на листе спрайтов. Этот параметр может принимать два значения:

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

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

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

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

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

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

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

Щелкните этот символ правой кнопкой мыши и выберите в меню Создать атлас текстур . Откроется окно Создание атласа текстур .

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


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

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

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

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

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

Animation.json

Этот файл содержит сведения об анимации.

spritemap.json

Этот файл содержит сведения о файле spritesheet.png .

spritemap.png

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

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

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

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

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

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

Создайте две вложенные папки в разделе Активы как Ресурсы и Редактор .

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

Архив unity-plugin.zip состоит из файлов Plugin.cs , WrapperPlugin.cs , AnimateEditor.cs и Effect.shader .

Загружая образец, вы принимаете Условия использования и Политику конфиденциальности в сети Интернет.

Переместите файлы атласа текстур, такие как Animation.json, spritemap.json, spritemap.png, и файлы подключаемого модуля Unity, например Plugin.cs и Effect.shader, в папку Активы > Ресурсы .

Переместите файлы AnimateEditor.cs и W rapperPlugin.cs в папку Активы .

В Unity выберите файл AnimateEditor.cs и перетащите его в область главной камеры .

Воспроизведите проект. Воспроизведение проекта приводит к разделению карты спрайтов на разные спрайты.

Переместите файл AnimateEditor.cs в в редактор .


В Unity выберите файл WrapperPlugin.cs и перетащите его в область Главная камера . Кроме того, отмените выбор или удалите файл AnimateEditor.cs из области главной камеры .

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

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

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

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

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

1. Создайте документ Canvas. Выберите пункт меню Файл > Создать для вывода окна «Новый документ».

2. Щелкните вкладку Дополнительно в верхней части экрана и выберите параметр HTML5 Canvas. Откроется новый FLA-документ.

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

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

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

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

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

Делаем 2D анимации для игры на Unity

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

Игра была разработана на удивление быстро, и сейчас уже доступна в Google Play. Но пост не совсем об этом.

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

Кроме, собственно, Unity, нам понадобится Adobe Photoshop. Для нашей задачи версия программы не так важна, но у меня, например, CS6. В более поздних версиях интерфейс немного другой, но суть не меняется.

Для начала создаём новый документ (File/New…).

Здесь сразу стоит задать размер спрайта. Главное условие – высота и ширина должны равняться степеням двойки (например, 32 или 64). Чем крупнее спрайт, тем больше возможностей для детализации, но при этом сложнее рисовать и анимировать.

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

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

Когда персонаж нарисован, пора приступать к самому главному: к созданию анимации. Начать стоит с открытия окна временной шкалы (Window/Timeline).

Прямо под кадром можно поменять его длительность. При переносе анимации в Unity данное значение роли играть не будет, но задать его бывает очень полезно для предварительного просмотра анимации в Photoshop. Я обычно ставлю длительность 0.2 секунды для медленных движений (бездействие, ходьба) или 0.1 для быстрых (атаки). Там, где сейчас написано «Once», можно выбрать способ зацикливания анимации. Это также нужно только для предпросмотра.

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

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

Илон Маск рекомендует:  Что такое код swfdisplayitem >move

Итак, копируем кадр нажатием описанной выше кнопки (на которой изображён листок бумаги с загнутым уголком). Затем копируем наш единственный слой, выделив его и нажав Ctrl+J.


Над списком слоёв мы можем заметить галочку с надписью «Propagate Frame 1». Когда она включена, то все изменения, применяемые к первому кадру, автоматически применятся и ко всем последующим.

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

Только никакого движения не происходит, потому что содержимое слоёв одинаковое. Исправим это! Попробуем нарисовать пассивную анимацию (когда персонаж ничего важного не делает, просто стоит и ждёт).

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

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

Создаём третий кадр, скопировав второй, и создаём третий слой, также скопировав второй слой.

К этому моменту вы могли заметить, что вся эта система со слоями и кадрами не особо удобна. Что поделать, искусство требует жертв. Если будете рисовать много анимаций, со временем вы выработаете наиболее удобный для вас порядок действий, позволяющих добавлять к анимации новые кадры куда быстрее. Например, чтобы в выбранном кадре был активен только нужный нам слой, удобно нажать на иконку включения/выключения этого слоя (с изображением глаза), удерживая Alt, вместо того, чтобы вручную выключать все ненужные слои.

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

Веб-анимация на основе спрайтов

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

Спрайт, содержащий кадры анимации, в исходном виде выглядит примерно так:

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

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

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

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

Т.е. если у нас имеется три кадра в ряд, то итератор расчета смещения до следующего кадра будет, примерно, следующей:

Здесь не просто так происходит умножение на -1. В процессе непосредственной реализации фон контейнера будет сдвигаться в обратном направлении от направления динамики, это поможет перемещаться по кадрам в нужном направлении.

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

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

И то же самое проделывается для row.

Техническая сторона смены кадров основана на модификации Css свойства background контейнера, в пределах которого мы будет показывать мультик. Каждый раз новая итерация выдает нам числовые значения от 0 до -2 (в данном конкретном случае), вот такие:

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

Результат трансформации background-position для каждой итерации будет следующий:

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

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

В завершении должен сказать, что в трансформациях background-position кроется серьезный дефект: если пытаться подгонять спрайт к размерам контейнера через указание свойства background-size, а размеры контейнера задавать меньшие, чем исходные размеры кадра, то возникает потеря данных из-за неделимости пикселей и итоговая анимация рушиться.

Поэтому если хочется динамически масштабировать спрайтовую анимацию, то лучше обратить свой взор на реализацию через Canvas — которая действует по тому же принципу, но вместо смещения фона, программно копирует на холст необходимую часть спрайта, и позволяет произвольно масштабировать итоговую картинку, без ошибок позиционирования.

12 принципов анимации. Разбираем по косточкам


Привет, друзья! Вы все наверное знаете, ну если не все, то многие, что такое 12 принципов анимации. Только ленивый не писал об этих принципах. На просторах интернета можно найти массу материалов по этой теме. Однако я подумал, что моя совесть будет не совсем чиста, если я не опишу во всех подробностях эти принципы с позиции своего взгляда на них. Естественно герой должен быть полностью готов к воплощению этих принципов. Как подготовить персонаж к последующей анимации, вы можете почитать в этих статьях: риггинг персонажа в 3ds Max и скининг персонажа в 3ds Max.

Эти правила были сформированы аниматорами компании Дисней в 30-х годах прошлого века. Благодаря 12 принципам анимации, мультипликация превратилась из робкого ребенка в настоящее искусство. Меняются и совершенствуются технологии, компьютер уверенно вошел в производственный процесс анимационного кино, но эти принципы остаются неизменными и служат ориентиром для аниматоров всего мира.

12 принципов анимации

  1. Сжатие и растяжение (Squash and stretch)
  2. Подготовка или упреждение. Отказное движение (Anticipation)
  3. Сценичность (Staging)
  4. Прямо вперед и поза за позой (Straight ahead action and pose to pose)
  5. Сквозное движение и захлест (Follow through and overlapping action)
  6. Плавное начало и плавное окончание движения (Slow in and slow out)
  7. Дуги (Arcs)
  8. Второстепенное действие. Выразительная деталь (Secondary action)
  9. Расчет времени – тайминг (Timing)
  10. Преувеличение, утрирование (Exaggeration)
  11. Крепкий профессиональный рисунок (Sol >Вы просмотрели список, а теперь давайте подробно разберем по косточкам каждый из этих принципов. Итак, поехали!

1. Сжатие и растяжение. Используя этот принцип, вы придаете персонажу дополнительную эластичность. Он становиться «резиновым». Это позволяет усиливать образ героя и делает его более ярким и интересным. Кто-то возможно возразит: – так в жизни не бывает! А мы с вами и не стремимся сделать «как в жизни», мы делаем анимацию, мы делаем мультфильм. Наша задача – заставить зрителя позабыть на время просмотра нашего творения обо всем, что выходит за рамки экрана. Зритель должен быть заворожен действом, происходящим перед ним. А для этого все средства хороши! И одним из таких средств являются сжатие и растяжение. Ярким примером применения этого принципа анимации служит фильм «Суперсемейка». Аниматоры студии «Pixar» блестяще воплотили это правило в образе Девушки Эластики.

2. Подготовка и упреждение. Перед тем как персонаж совершает какое-либо действие, он как бы подготавливается к нему. На видео ниже видно, как кот Том, прежде чем начать полет, отбегает назад, готовясь лететь. Это пример упреждающего действия.

Если бы не было этого движения, то вся сцена выглядела бы скучно. А вот еще один пример подготовительного движения. Перед тем, как повернуть голову, Том отводит ее немного назад, упреждая поворот головы. Таким образом поворот становится более выразительным.

3. Сценичность. Название этого принципа говорит само за себя. Это касается композиции кадра. Расположение камеры, окружающая среда, положение персонажа, его поза – все это сценичность. Если говорить проще, это то, что видит зритель на экране. Очень часто, для того чтобы проверить, читается поза персонажа или нет, используют силуэт. Если силуэт позволяет определить характер позы, значит кадр удался.

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

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

6. Плавное начало и плавное окончание движения. Хорошим примером этого принципа может служить скачущий мячик. Когда мяч стремится к земле, он разгоняется, а после отскока снова замедляет движение. Это, своего рода, влияние силы гравитации. Грамотное использование этого правила придает анимации жизненный реализм.

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

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

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

10. Преувеличение, утрирование. Само понятие «мультипликация» подразумевает нечто сказочное. А значит мы не ограничены в своем творчестве. Преувеличение и утрирование привносят в повествование необычность и выразительность. Представьте себе, предположим, такую ситуацию: герой видит удаляющийся от остановки автобус, на который он явно опоздал. В жизни, понятное дело, ничего не останется, как ждать следующий. Но! Мы же делаем мультфильм! Наш герой саркастически улыбнется, приготовится к забегу и бросится за автобусом. И естественно догонит его, а возможно даже перегонит. Конечно это преувеличение, но именно его и жаждет зритель. А иначе зачем он пришел в кинотеатр?


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

12. Привлекательность. Ну, тут сразу все понятно! Любой герой, будь то милый зайчик или законченный негодяй, должен вызывать у зрителя интерес. Возьмем к примеру мистера Грю из мультфильма «Гадкий я». Безусловно он злодей! Но привлекательный злодей. И благодаря этому, зрители сопереживают ему и невольно становятся соучастниками его проделок. Они болеют за него и желают ему удачи.

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

Основы спрайтовой анимации

4.3. Цифровая анимация

Илон Маск рекомендует:  Контроль ввода с помощью JavaScript

Все традиционные формы анимации имеют аналоги в цифровой реальности. Более того, цифровые технологии предлагают новые возможности для создания и использования анимации. Например, используя видеокамеру, подключённую к компьютеру, и традиционные методы анимации, можно в значительной мере облегчить труд аниматора. В каждый момент съёмки записывается цифровая версия единственного кадра. Затем меняется рисунок, положение моделей и т. д. и снимается следующий кадр. Неудовлетворительные кадры можно удалять. Обычно программы позволяют при работе с текущим рисунком видеть полупрозрачное изображение предыдущего захваченного кадра, что помогает выровнять кадры и внести требуемые изменения. После захвата набора кадров, формирующих последовательность, его можно записать как ролик или набор последовательно пронумерованных файлов изображения.

4.3.1. Спрайтовая анимация

Для создания анимации очень удобно использовать уровни (подобно келевой анимации) [10]. С помощью уровней можно создавать отдельные части неподвижного изображения, например, человека и сцену, на фоне которой он перемещается, так что оба образа можно изменять или перемещать независимо. Кадры анимированной поверхности можно создавать, объединяя уровень фона (статичный) с одним или несколькими уровнями анимации, на которых и происходят все изменения.

Рассмотрим простой пример. Предположим, что нужно анимировать движение планеты на фоне звезд (рис. 4.7). Первый кадр может состоять из фонового уровня, содержащего звездное поле, и уровня переднего плана с изображением планеты. Чтобы создать следующий кадр, эти два уровня копируются, и с помощью инструмента движения изображение планеты смещается на небольшое расстояние. Действуя подобным образом, можно сформировать последовательность, в которой планета движется на заданном фоне.

Рис. 4.7. Планета на фоне звездного неба

Итак, анимация, основанная на движущихся объектах, называется спрайтовой анимацией, а объекты именуются спрайтами.

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

Рис. 4.8. Спрайтовые грани цикла ходьбы

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

спрайтовая анимация

все ок, только потом надо стирать еще. а вот как стереть я не знаю нам говорили вроде юзать SRCINVERT, но там все черным закрашивается. и WHITENESS пробовал с тем же эффектом. даже вот так попробовал и то бестолку:

в общем подскажите как мне на hdc затирать не нужные ректы?

Добавлено через 15 часов 25 минут
а все порядок, забыл белый цвет в ргб это же 255,255,255, работает

Добавлено через 5 минут
кто нибудь может подсказать идею? задание такое: вывод фона — домик (рисунок как детский: квадрат, треугольник сверху и труба), анимация дыма (это я вроде бы справлюсь сам, сделал тупо какие то колечки в заданных точках по таймеру появлятся и исчезать будут типа дым ), и анимация открытия окон: вот это я как раз просто не знаю как сделать, подскажите идею в принципе что это может быть? должно быть изображено средствами спрайтовой анимации (ну короче как и дым, вон той функцией сверху пользуюсь), просто я не знаю как это само открытие/закрытие изобразить в фазах.

Основы спрайтовой анимации

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

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

Проблема, поставленная в данной работе, заключается в необходимости использования эффективных и наглядных информационных технологий при создании демонстрационно-обучающих программ, с помощью которых оптимизируются педагогические условия формирования знаний обучаемых [1].

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

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

Изначально под спрайтами понимали небольшие рисунки, которые выводились на экран с применением аппаратного ускорения. В настоящее время понятие спрайта значительно расширилось. Так, в [2] под спрайтами подразумеваются маленькие объекты, которые находятся на игровом поле и могут двигаться.

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


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

Спрайт часто состоит не из одного изображения, а из нескольких, отображение которых одно за другим создает эффект анимации объекта. Именно благодаря этому персонаж шагает, шарик вращается, космический корабль взрывается и т.д. В течение игры спрайты для определенного объекта могут изменяться. (Таким образом, персонаж может видоизменяться, когда он идет налево или направо.) Свои собственные спрайты могут создаваться во встроенных редакторах изображений или загружаться из готовых файлов (например, из PNG-файлов или из анимированных GIF-ов).

Примером таких спрайтов служит набор изображений самолета, приближающегося к наблюдателю (рис.1).

Рис. 1. Три спрайта приближающегося самолета

Обычный плоский спрайт представляет собой набор картинок, соответствующих разным фазам движения или действиям объекта. Для придания объекту трехмерности воспользуемся следующим приемом: для каждой из фаз зададим вид на объект с заданного количества сторон, например с восьми сторон. Тогда такому объекту приписывается определенный угол — направление, куда смотрит (направлен) соответствующий объект.

Картинка выбирается с того направления, которое определяется разностью углов между направлением взгляда объекта и взглядом игрока на объект (рис. 2).

Как нетрудно убедиться: a = p + j — y

Рис. 2. Выбор спрайта в зависимости от направления объекта и взгляда игрока на объект

Путем несложных модификаций программы реально добавить в нее возможность работы со спрайтами. Для этого при трассировании лучей пометим все видимые клетки и для каждого луча запомним расстояние до ближайшей стены, затем составим список всех спрайтов, находящихся в помеченных клетках (можно клетки и не помечать, а использовать полный список спрайтов), отсортируем его по расстоянию до игрока и выведем спрайты в порядке близости к игроку (back-to-front). Каждый спрайт масштабируется и выводится по столбцам, при этом для каждого столбца перед выводом необходимо сравнить расстояние до спрайта с расстоянием до ближайшей стены — своего рода одномерный аналог z-буфера.

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

1) объекты, присутствующие в сцене в большом количестве и которые, будучи трехмерными, имели бы большое количество граней и очень сильно влияли бы на производительность (например, публика, трава и т.д.);

2) удаленные объекты, которые вблизи рисуются полигональными моделями.

Некоторые спецэффекты (например, огонь) также выполняются спрайтами, так как полигональный огонь плохо смотрится.

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

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

Также спрайт — это матрица. При вписывании в квадрат (прямоугольник) сложного объекта остается свободное пространство. Его заполняют цветом, которого нет в изображении самого объекта. При простом копировании этой матрицы (или для простоты BMP или TBitmap) на экран выводятся и персонаж, и фон под ним. Но нам это не всегда (подчеркнем — не всегда) нужно. Если спрайт выводится на фон, то он затирает всю квадратную область.

Тот или иной тип вывода спрайта зависит от способа его выведения. При этом различают следующие способы:

1-й способ основан на простом копировании одной области памяти в другую;

2-й способ — то же копирование, но интеллектуальное. Копирование происходит по следующему алгоритму: если цвет копируемого элемента матрицы (области памяти) соответствует значению цвета Transparent Color, то копирование не происходит, переходим к следующему элементу;

3-й способ также основан на копировании области памяти, но с применением логической операции — маски.

Для создания спрайтов существует целый ряд пакетов прикладных программ. Кроме того, возможность создания, редактирования и использования спрайтов заложена в пакеты программ создания компьютерных игр. Следует отметить, что все эти пакеты предназначены именно для разработки компьютерных игр, т. е. ориентированы на специфические программные среды. Таким образом, коль скоро речь идет об обучающих программах или об иных дидактических материалах, например иллюстративных материалах, выполненных с помощью Power Point, то чаще всего использование продукции, полученной с помощью этих пакетов, в них затруднено.

И, наконец, спрайты незаменимы при передаче артикуляции, когда персонаж анимации говорит с экрана [3].

Для наглядной демонстрации использования спрайтовой технологии [4-5] при артикуляции во время проведения занятий по компьютерной графике нами была разработана программа «Говорящая собака», позволяющая в динамике наблюдать смену спрайтов, отражающих лицевую артикуляцию при анимации головы щенка – типичного героя многочисленных мультфильмов. Интерфейс программы при ее запуске представлен на рисунке 2.

Рис. 3. Интерфейс программы «Говорящая собака» для демонстрации аллитерации

Здесь в левом верхнем углу приводится перечень слов, при произношении которых осуществляется аллитерация. Для запуска демонстрации аллитерации выбирается одно из них.

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

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

Программа допускает управление временем произнесения с помощью горизонтальной линейки. Скорости меняются от 0,5 с на один звук до 1,5 с.

Рис. 4. Спрайты для аллитерации: а) – молчания; б) – буквы «а»; и) – буквы «м»

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

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

Таким образом, само по себе создание спрайтов, особенно малого размера (например, 16х16 пикселей), приобретает весьма актуальный характер. А как сказано ранее, создание таких спрайтов требует специальной дизайнерской проработки, в частности учета цветоразделения и оконтурения.

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

Так, если в Pant Brush и более сложных пакетах BitMap-графики существует понятие прозрачности фона, то в наиболее популярном пакете создания презентаций Power Point оно отсутствует. Поэтому спрайт должен сопровождаться соответствующим фоном.

И, наконец, вопрос синхронизации. Если во Flash MX есть возможность синхронизировать анимацию со звуковой дорожкой, то в том же Power Point она практически отсутствует — Power Point воспринимает анимационные эффекты последовательно, а звуковую дорожку — как один из этих эффектов.

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

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

Рецензенты:

Петросян В. Г., д.п.н., профессор, директор ГОУ «Лицей для одаренных детей», г. Нальчик;

Загаштоков А.Х., д.п.н, профессор, ФГБОУ ВПО КБГУ, каф. методики и дошкольного начального образования, г. Нальчик.

Понравилась статья? Поделиться с друзьями:
Кодинг, CSS и SQL