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

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

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

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

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

Завершена работа над спецификациями HTML 5.0 и Canvas 2D!

17 декабря в среде Web-разработки состоялось важное событие — W3C объявил о публикации Candidate Recommendation (CR) версии спецификаций HTML 5.0 и Canvas 2D.

Это означает, что спецификации являются функционально законченными и к финальным рекомендациям HTML 5.0 или Canvas2D не будут добавлены новые опции. Небольшое количество функций все еще остается под вопросом, но разработчики и компании смогут теперь опираться на все остальные функции, находящиеся в финальных рекомендациях HTML 5.0 и Canvas 2D для реализации и планирования задач. Любые новые функции будут воплощены уже в HTML 5.1 или следующей версии Canvas 2D.

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

Работа в фазе “Candidate Recommendation” будет фокусироваться на анализе текущих реализаций HTML 5.0, установлении приоритетов для тестовой разработки, и на работе с сообществом разработчиков. Рабочая группа также изучит функции, обозначенные как «группа риска», которые могут быть перемещены в HTML 5.1 или следующую версию Canvas2D, в случае если они не покажут удовлетворительный уровень функциональной совместимости к концу Candidate Recommendation периода.

В то же время, идет работа над HTML 5.1 и следующей версией Canvas2D и W3C объявили в первую очередь о рабочих проектах, которые включают медийные и графические функции. Эта работа производится гораздо быстрее, чем это было с HTML5, поэтому рекомендации по версии 5.1 ожидаются в 2016 году. Рабочая группа HTML рассмотрит несколько предложенных новых функций для HTML 5.1. Кроме того, HTML 5.1 мог бы объединить результаты различных Сообществ W3C, таких как Responsive Images Community Group или WHATCG. HTML 5.1 будет использовать успешный подход, уже примененный семейством спецификаций CSS 3.0 для определения модульных спецификаций, которые расширяют возможности HTML, не требуя изменений в базовом стандарте. Например, Рабочая группа HTML уже работает над стандартизацией APIs для расширений шифрования медиа, которые позволили бы таким сервисам, как Netflix, передавать поток контента браузерам без плагинов и расширений источников медиа для упрощения потокового контента с целью адаптации к характеристикам сети и устройства.

Источник

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.