Анимация спрайтов в HTML5 Canvas.

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

Демонстрация

Если HTML5 элемент Canvas является для Вас новинкой, предлагаем, для начала, прочесть статью “HTML5 Canvas для новичков“.

Мы собираемся использовать следующий PNG файл в качестве спрайта — источника последовательности фреймов:
Читать дальше →

Ejecta: мощная, открытая Javascript реализация канвасов и аудио для IOS

Ejecta – это родная оболочка для IOS с открытым исходником, содержащая специальный аппаратно-ускоряемый Canvas и родные аудио решения для переноса HTML5-игры в Эппловский App Store.

Реализованная Домиником Шаблевски (Dominic Szablewski), создателем Impact.js. Как результат его работы на iOSImpact, Ejecta является многоцелевым инструментом для работы с любым HTML5-движком.

Из сайта:
Ejecta – как браузер без браузера. Она специально создана для игр и анимации, не имеет ни дивов(DIVs), ни тэйблов (Tables), ни форм(Forms) — только Canvas и аудио элементы. Это и делает ее быстрой.

JavaScript код выполняется непосредственно на Javascript VM (JavaScriptCore), HTML5 Canvas API реализован на родном коде с использованием OpenGL, аудио осуществляется с OpenAL. Несколько других API (touch, акселерометр, LocalStorage) ведут себя аналогично как в реальном браузере.

Большинство HTML5-игр переносятся практически идеально или с минимальными модификациями — с более высокой производительностью, лучшей поддержкой звука, интеграцией с Game Center и пр.

Детали смотрим на видео ниже, а также на сайте. Код можно найти на GitHub.

12 инструментов для конвертации Flash-игр в HTML5

Перевод статьи 12 Tools for Converting Flash Games to HTML5

Являясь разработчиками собственных игр, мы заодно конвертируем Flash игры в HTML. После 9-й конвертации, имея немало опыта и извлеченных уроков на этом поприще, хочется поделиться с друзьями-разработчиками полезными советами, любимыми нами инструментами и библиотеками. Надеемся, некоторые из них пригодятся, а если у вас есть что порекомендовать, оставляйте комментарий.

1) Один размер подходит не для всех


Все игры, разработанные нами, конвертируются для мобильного Веба. Среда Flash еще достаточно популярна при создании десктопных игр, и наша работа состоит в переносе таких игр для мобильных браузеров. Как и следовало было ожидать, наиболее проблематичным является то, что чем старее игры, тем значительнее они могут различаться по разрешению. От классического 550х400 до более современного 800х600 и выше. И, разумеется, они не часто дружат с разрешениями экранов мобильных устройств.
Очевидно, что базовым минимумом должно быть разрешение 320х480 (портрет) либо 480х320, если игра ландшафтная. Это разрешение поддерживает iPhone3 и более старые поколения телефонов Android. Однако прежде чем изменять размеры графики, учитывайте, сколько пространства занимает окно браузера. Например, на iPhone3 теряется сверху 20 пикселей на строку состояния, а снизу – 44 пикселя для навигации, которые не могут быть удалены по умолчанию в режиме просмотра. В портретном режиме, если прокрутить адресную строку, это дает 416 пикселей видимой области в портретном режиме, и всего лишь 268 пикселей в ландшафтном режиме. Это даже меньше, чем в 8-летнем Nintendo DS. На iPad-ах, телефонах и планшетах Android, таких как Kindle Fire все состоит опять же иначе.
Короче говоря, нужно планировать игру, так же как вы планируете презентацию для проектора: не размещайте важную информацию или элементы, такие как кнопка «Play» по краям. И что бы вы ни делали, не думайте, что каждый будет играть в вашу игру на одном и том же разрешении. По статистике, к одной из наших собственных разработок применялось более 4000 различных разрешений.
Полезный совет: если вы собираетесь делать скриншоты для заказчиков, убедитесь, что интерфейс браузера полностью видимый. Заказчики могут подумать, что игра будет полноэкранной («как обычное нормальное приложение»), но на самом деле это не так. Это может также сэкономить драгоценное время на дизайн, когда ваши дизайнеры знают наперед, что они не должны использовать разрешения устройства в своем шаблоне.

2) Различная графика для устройств с низким и высоким разрешением.


Я не буду долго останавливаться на этом вопросе, но вне зависимости от игры вы почти наверняка рассчитываете на создание игры в двух разрешениях: SD (низкое разрешение) и HD (высокое разрешение) и динамически загружать их в зависимости от возможностей устройства. Конечно, не желательно, чтобы в середине экрана iPad была «вдавлена» крошечная игра. Поскольку, эти устройства владеют достаточной вычислительной мощностью для использования пикселей по всему экрану, то было бы разумно это использовать. Есть множество способов решить вопросы с изменением размера игры для устройств, и все они зависят от того, как игра построена (канвас или DOM). Как бы вы не недооценивали объем работы в этом аспекте, планируйте ее уже наперед.

Графика и анимация


Одним из самых больших различий между Flash и HTML5 является отсутствие временной шкалы или какой-либо удобной формы векторов. Наиболее распространенный способ решения этой проблемы является преобразование анимированных MovieClips в спрайт-листы или текстурные атласы, а для этого уже существует множество инструментов.

3) Flash CS6 – $ до фига.


ИТАК, он не дешевый, но если вам при любом раскладе нужно использовать Flash, то есть смысл подумать об обновлении до CS6. Щелкнув правой кнопкой мыши на MovieClip, или на несколько MovieClips в библиотеке, вы получите возможность сгенерировать спрайт-лист (как на этом видео). Всплывет диалоговое окно для установки свойств экспорта. Сюда входят следующие упаковочные алгоритмы: «Basic» помещает все кадры в прямоугольники одинаковых размеров и «Max Rects» размещает их в доступном пространстве. Отступы границ и форм не дают кадрам находиться слишком близко друг возле друга, а «Data Format» позволяет выбрать один из нескольких вариантов, включая форматы JSON Hash и JSON Array. На выходе получаем результирующие данные и формат изображения PNG.

Конечно, без украшений, но функционал хорошо работает, и, то, что он встроен непосредственно во Flash, в некоторых случаях экономит время. У нас с ним есть несколько незначительных проблем. Во-первых, созданные PNG не могут быть обрезаны, а всегда используют фиксированную ширину/высоту (то есть много пустого места по бокам листа). А во-вторых, при конвертации графики для мобильного Веба нужно почти всегда изменять размер изображений. При экспорте это сделать нельзя, из чего следует, что тут требуется вручную изменить размер всех MovieClips, прежде чем экспортировать их. В зависимости от количества клипов, это может оказаться трудоемким процессом, особенно если нужно делать дважды для двух разрешений.
Сайт Adobe Flash CS6

4) Texture Packer — $ 25


Texture Packer создана Андреасом Лёу, человеком-группой-компанией Code and Web. Доступный для Mac, Windows и Linux, он обеспечивает понятный интерфейс для создания текстурных атласов с большим количеством опций. Причина, по которой мы включили его сюда, – у него есть возможность импортировать SWF-файлы, хотя и с небольшими проблемами. Когда SWF загружается, кадры представлены по порядку, и вы можете выбрать, как лучше их экспортировать. Пережимая из Basic в Max Rects и даже поддерживая вращение, вы можете быть уверены, что он создаст в итоге подходящий PNG. Поддерживает много форматов данных для экспорта, включая жизненно важные JSON Hash и Array, а также действительно приятные вещи, такие, как обрезка кадра, усовершенствованные опции сглаживания и возможность автоматического создания x2 (HD) версий результирующего файла (при отметке нужного поля). Приложение также имеет дело с форматами PSD (кстати!), PNG и другими графическими файлами, и вы можете сохранить настройки каждого листа для дальнейших действий.

Недостатки использования Texture Packer, с точки зрения Flash, следующие: вы должны убедиться, что исходный SWF тщательно подготовлен заранее. Для этого, как правило, нужно взять MovieClip из библиотеки, скопировать его в новый пустой FLA и опубликовать только этот FLA с клипом, расположенным в нужном месте. После того как получен подготовленный SWF, Texture Packer позволяет быстро упаковать его, но этот процесс по-прежнему проходится вручную. Реально, я бы сказал, на это уходит меньше времени, чем при использовании Flash CS6, потому что вы можете использовать «Scale» и возможности x2 упаковщика Texture Packer для создания различных по разрешению версий. Таким образом, вам не нужно предварительно масштабировать MovieClip во Флэше, как изначально делалось в CS6.
Есть также ряд вопросов в сроках бета-версии упаковщика. Они постоянно истекают в самые неподходящие моменты, что и случилось с нами недавно, когда срок истек на середине крупного проекта, и нам пришлось ждать нового релиза для его завершения. В целом, стоит пробовать, чем черт не шутит.
Сайт Texture Packer

5) ShoeBox


ShoeBox намного больше, чем просто создатель спрайт-листов. Как следует из названия, это набор утилит, завернутый в несколько странный и эзотерический пользовательский интерфейс, который, тем не менее, работает. При запуске вы увидите двигающуюся серую панель с 3-мя вкладками, каждая из которых содержит различные утилиты, такие как «Pack Sprites» («Упаковать спрайты»), «Extract Tiles» («Извлечь тайлы») и многое другое. Использовать их можно, перетаскивая исходные файлы в эти маленькие иконки. Так что если нужно создать спрайт-лист из файла SWF, перетащите его на «Ani 2 Sheet» и он сразу вылетает, как по взмаху волшебной палочки.

Для изменения некоторых важных параметров можно зайти в конфигурацию, просто щелкнув правой кнопкой на любой из иконок. Настройки даже могут быть сохранены в шаблонах, некоторые из них входят в дистрибутив. Одна вещь, которую вы, вероятно, захотите быстро изменить, – это лимит кадров: программа парсит лишь первые 60 кадров любого SWF-файла. И хотя не настолько навороченная, как Texture Packer, она предоставляет отличный набор инструментов, о необходимости которых вы, вероятно, никогда б и не узнали, если б не использовали их. Инструмент JPEGA является, например, довольно умный, и позволяет создать спрайт-листы JPEG формата, извлечь при этом все альфа-данные в альфа-маски для композитинга задней части во время выполнения. На довольно широком тайловом листе мы сжали размер файла от 1.4MB до 450Кб, используя лишь эту функцию.
Одна неприятная особенность ShoeBox – это способ отображения итоговых спрайт-листов. В идеале они могли быть в отдельном окне фиксированного размера, содержимое которого можно прокручивать, но вместо этого приложение пытается отобразить всю вещь внизу экрана с помощью крошечной кнопки «Confirm» для сохранения. Все было бы нормально, пока вы не начнете генерировать лист размером 2048 и он не поместится на вашем мониторе (если у вас конечно нету дисплея Mac Retina). Касательно наших вопросов: подготовленные SWF, применяемые к Texture Packer, также подходят и здесь.
Другие полезные инструменты включают в себя «Cut Out Sprites» — «вырезать спрайты», который в основе может перепроектировать спрайт-лист, извлекая по одному растровые изображения из данного PNG. Есть так же инструмент «Extract Tiles» («Извлечь тайлы»), который будет принимать изображение и формировать из него плитки («тайлы») на основе сопоставления областей. Существуют целые пакеты для создания карт тайлов, такие как DAME, которые предоставляют эту возможность, но лучше конечно отдельное приложение, хотя было бы замечательно, если бы данные карты также успешно экспортировались. Являясь AIR приложением, ShoeBox будет работать на Windows, Mac, и с учетом приемлемой цены его стоит добавить к вашему набору инструментов.

Скачать с сайта ShoeBox.

6) Zwoptex — $ 15


В нашей «облаве» он держится особняком, являясь лишь Mac-приложением и не в состоянии импортировать SWF-файлы. Но я включаю его, потому что у него есть прекрасное свойство, которое позволяет генерировать спрайт-листы сразу для множества мест и в различных масштабах. Похож на функцию Auto x2 упаковщика Texture Packer, но в отличие от нее, создает сколько угодно версий, и, исходя из этого, может быть удобным инструментом, в зависимости от игры.

Больше информации на веб-сайте Zwopple

7) XnView


XnView – это фантастическое бесплатное приложение для Windows, Mac и Linux, в сердце которого лежит пакет для просмотра изображений. Он поддерживает более 400 форматов, в том числе и такие ретро-форматы, как Sinclair Spectrum, C64, Atari ST и Amiga IFF. Несмотря на то, что оно будоражит во мне хакера, это не причина, почему я включил его в список. Будучи замечательным просмотрщиком, приложение имеет кучу полезных инструментов, включая «Strip of Images». Скормите этому плагину любую папку или набор изображений, и вы сможете выяснить, как он строит новое изображение из них. Либо полностью горизонтально, либо вертикально, либо в мозаику (сетка) с оптимальным пространством, шириной, высотой, цветом фона и количеством изображений в строке.

Поскольку он работает на родном движке XnView, – это означает, что вы можете использовать этот плагин для создания спрайт-листов из почти любого формата изображения, какого пожелаете (и, вероятно, сотни других, о каких вы даже и не подозревали).
Будучи родным для XnView, плагин неплохо работает в плане памяти и скорости, и поэтому является одним из самых быстрых инструментов, которые мы используем. Это довольно существенный инструмент для быстрого пакетного преобразования изображений, обработки графики, и нам даже пришлось использовать его для извлечения последовательности кадров из ролика MNG формата!
Скачать с сайта XnView

Zoe, SWF листы, и пр …


Существуют и другие инструменты для конвертации SWF в спрайт-листы. Одним из них является Zoe, часть Adobe backed CreateJS suite. Это AIR приложение, которое позволяет перетащить SWF, установить несколько параметров и на выходе получить спрайт-листы. Тем не менее, параметры экспорта крайне ограничены, и вы по-прежнему столкнетесь с той же проблемой необходимости создания в первую очередь SWF из всех ваших роликов и их масштабирования. Этим приложение, конечно, уступает более мощным альтернативам. Однако, оно бесплатно, и принимая во внимание многообразие и сложность флэш-анимации, Zoe может обрабатывать то, что другой упаковщик не может, так что стоит установить на всякий случай. Скачать Zoe можно с сайта CreateJS. Поиск в Google также выдаст аналогичные приложения, но мы рекомендуем придерживаться популярных альтернатив на данный момент.

Неспрайтовые анимационные листы


До сих пор все вышеперечисленные инструменты подразумевали, что вы хотите создавать спрайт-листы, но это не единственный способ создания анимации. Flash изначально хранит в себе множество анимационных данных, и это крайне полезно для нас вне данного IDE. Все что требуется, это инструмент Silenus:

8) Silenus


Создана замечательными ребятами из Sileni Studios, она работает, забирая анимационные XFL-данные, сохраняемые средой Flash CS5+, и позволяет воспроизводить анимацию без использования Flash Player.

По своей сути Silenus представляет собой библиотеку Java, которая позволяет в секунду считать Java-пакет и сделать флэш-анимацию. Но не спешите отказываться от нее, это еще не все! Она также позволяет экспортировать анимационные данные в формат JSON, который можно воспроизводить в браузере с JavaScript, и еще сюда включен канвас, основанный на рендерере. Очевидно, что он не поддерживает все, что создается средой Flash, пропущены некоторые эффекты, такие как фильтры и код на временной школе, но, все же, он владеет потрясающим инструментарием Flash, в том числе:
  • Несколько сцен
  • Иерархии слоев
  • Перевод, масштабирование, вращение
  • Классическая анимация-трансформация (tweening) с пользовательскими упрощениями
  • Векторная графика: прямые, кривые, окончания линий (Line Caps), соединения (Joints) и т.п.
  • Обрезающие маски (Clipping Masks)
  • Анимация с инверсной кинематикой (IK)
  • Цветовые эффекты: альфа, яркость, тон, улучшенные эффекты, линейные градиенты
  • Автоматическая реконструкция PNG и JPEG изображений из внутреннего двоичного формата Flash (файлы в формате XFL-прежнему хранят изображения в специфическом двоичном формате Adobe).

Silenius разработал инструмент для облегчения создания своих игр CastleQuest на HTML5, таким образом, их аниматоры могут создавать всю анимацию во Flash, а конечный результат будет работать в игре. К приложению нужно привыкать, к тому же вам придется ковыряться в коде, но на данный момент ничего более подходящего для правильного воспроизведения флэш-анимации нету.
Вы можете скачать Silenius из Google Code (Хотелось конечно, чтобы они его на GitHub выложили: больше видимости было бы!)

9) Spriter — $?


Spriter это растровый анимационный инструмент, аналогично среде Flash использующий поход модульной временной шкалы к анимации. Вот как описывает это их веб-сайт:
«Spriter реализует «модульный» метод анимации, в котором каждый кадр не является одним целостным изображением, а построен из многих маленьких, повторно использующихся изображений (например, частей тела). Каждое из этих изображений, составляющих полный кадр, можно масштабировать и вращать, чтобы еще больше увеличить «пробег», который художник может получить от них».
Включение его в наш список возможно немного дерзкое, потому что, хотя мы и долго игрались с ним, поддерживали его в продвижении на Kickstarter и тесно следили за развитием, на самом деле пока не использовали его в наших игровых релизах потому, что он еще немного «зеленый». Однако эта ситуация меняется, и мы активно внедряем поддержку для его открытого файлового формата в нашем новом игровом HTML5 фреймворке. Он не связан непосредственно с процессом работы Flash, если вы конечно не хотите воссоздать оригинальную анимацию внутри Spriter. Смотря вперед, мы легко подмечаем, где анимация несложно создается непосредственно в Spriter и напрямую экспортируем прямо в наши игры.
Узнать больше о Spriter можно на веб-сайте Brash Monkey.

Звук


10) Подготовка звуковых спрайтов


Справедливости ради стоит сказать, что звук по-прежнему остается серьезной проблемой на мобильных браузерах. Ожидается, что скоро он станет лучше, с появлением Web-Audio в iOS6 и Chrome по умолчанию на Android, а пока они приобретают господство, мы имеем дело с такой забавой, как звуковые спрайты. Звуковые спрайты – это по сути один звуковой файл со всеми различными звуковыми эффектами и музыкальными кусками, расположенными последовательно, с промежутками от 1 до 2 секунд тишины. Очень напоминает упаковку изображений в спрайт-лист. Вот как выглядит звуковой файл для одной из наших игр:

Волна в начале – это музыкальное вступление. 2-я и 3-я «пики» – звуковые эффекты в игре, а сэмпл в конце – трек окончания игры («Game over»).
Самое важное при создании звуковых спрайтов то, что нужно совместить все начала сэмплов в полном соответствии с началами секунд на временной шкале. Например, музыка начинается с 0 секунд, эффект – ровно с 25 секунды и «Game Over» – с 35 секунды. Тишина между ними может изменяться по длительности, но убедитесь в выравнивании самих звуков.
Равно как и создать звуковые спрайты, вам также необходимо подготовить файл в нескольких различных форматах. Мы используем следующее:
  • ac3
  • mp3
  • m4a
  • ogg
  • amr
Это позволит удовлетворить любой мобильный браузер. Формат AMR является простеньким кодеком невысокого качества, предназначенным для передачи голоса, который поддерживается практически на любом мобильном. Все как в аптеке, если только качество не на первом месте.
iOS ограничения: На iOS5 нет возможности одновременного воспроизведения звуков. Поэтому вам не удастся, имея музыкальный фон, воспроизводить звуковые эффекты поверху. Мы предлагаем вам обрезать музыку, воспроизвести эффект, а затем вернуться в самое начало музыки. Если вы используете JukeBox (см. ниже), он сделает это автоматически. Другое ограничение для iOS5 в том, что одновременно может загрузиться лишь один mp3-файл (поэтому мы используем звуковые спрайты), а начать играть он может посредством пользовательского события касания. Это означает, что музыка начинается, когда игрок касается кнопки «Play» на титульном листе, например.
Совет: Используйте AIFF контейнер/ IMA4 сжатие. При кодировании на iOS звук, используя формат Core Audio, избежит задержки и проблем декодирования в другие форматы.
Производительность: Звук замедляет игры на мобильном телефоне, и этого не избежать. В зависимости от устройства, он может привести сразу к аварийному завершению игры. При обилии движений или происходящих действий, сброс цикла в лупинговом (цикличном) фоновом треке иногда может убить частоту кадров. Это даже привело к перезагрузке одного из телефонов Android, используемых нами для тестирования. Так что будьте осторожны, и управляйте ожиданиями от вашего устройства. В идеале у вас не должно быть вообще лупинговой музыки в игре, или же кодируйте разумно, по крайней мере, не начинайте ее играть, когда производительности на частоту кадров, возможно, уже еле хватает.

11) JukeBox


JukeBox – это небольшой набор библиотек JavaScript, созданный Кристофом Мартенсом, компания Zynga Germany. После долгого тестирования и обсуждения он стал самым предпочтительным для нас способом воспроизведения звука в HTML5. Имея в составе плэйер и звуковой менеджер, библиотеки поддерживают гибкий, легко настраиваемый и используемый формат для звуковых спрайтов, динамическую загрузку Flash-файлов на Android и, самое главное, все они оптимизированы для игр. Там можно настроить звуковой менеджер для циклического проигрывания во время игры, что идеально подходит для поддержания производительности на мобильных устройствах.
Скачать JukeBox из GitHub

12) Audacity + Lame и FFmpeg


Мы пока не нашли инструмент, который без труда создавал бы звуковые спрайты. Так что сейчас мы делаем их вручную с помощью Audacity. Для большинства работ со звуком мы предпочитаем Adobe Soundbooth, но Audacity со встроенным Lame MP3 Encoder и FFmpeg расширениями способен сохранить звуковой спрайт в любом необходимом формате, чего не может Soundbooth.

Скачать Audacity с официального сайта. Существуют подробные инструкции по установке Lame MP3 Encoder и FFmpeg Encoder. Среди множества баннеров будет немного затруднительно найти нужные файлы, но уже после настройки у вас будет аудио-редактор, экспортирующий в любой нужный формат.

Пока все на данный момент


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