'

Разработка игр в HTML5. Опыт портирования Doodle God. Николай Котляров, JoyBits Ltd.

Понравилась презентация – покажи это...





Слайд 0


Слайд 1

Разработка игр в HTML5. Опыт портирования Doodle God. Николай Котляров, JoyBits Ltd.


Слайд 2

О чем поговорим сегодня: Выбор правильного проекта Краткий обзор игры Doodle God Основные сложности портирования Чистый <Canvas> Особенности работы с <Audio> Шрифты, LocalStorage, Браузеры … Вопросы


Слайд 3

Выбор правильного проекта Срок в 2 недели Готовый арт 1 веб-программист на реализацию Технически простой проект Средства разработки


Слайд 4

Зачем портировать? HTML5-версия — промо для генерации трафика. HTML5 в перспективе будет на всех игровых платформах.


Слайд 5

Краткий обзор Doodle God Изначально игра для DOS, The Alchemy, релиз в 1998 Май 2010г. — Элегар Хэлфрид — прототип на JavaScript Июнь 2010г. — JoyBits выпускает версию под iPhone, за 2 недели #2 в TOP PAID Overalll US, #1 в 30+ странах, полгода не вылетает из TOP 200 в AppStore. 20 млн. геймплеев на flash-версии за лето Ноябрь 2010г. — портирована на Windows Phone 7 уже несколько месяцев на #5-7 места в общемировом рейтинге WP7 – приложений (популярнее чем Amazon Kindle App, Netflix App, IMDb App) Средний пользовательский рейтинг 4.7 / 5 и более 20’000 пятизвездочных обзоров. За полгода портирована на 10 платформ (Windows Phone 7, HTML5, Flash, Social Networks, Samsung Bada, Android, Nintendo DS etc) и в данный момент идет портирование на 15+ платформ.


Слайд 6

Основные сложности портирования Чистый <Canvas> Особенности работы с <Audio> Использование нестандартных шрифтов Сохранение состояния в LocalStorage Недостаточная стандартизованность, проблемы браузеров


Слайд 7

Танцы с бубном над <Canvas> Разработка динамических HTML5-игр в настоящий момент – это создание собственного фреймворка Собственный менеджер анимации — по аналогии с Flash — для упрощения создания объектов, изменения координат, отрисовки и удаления из памяти и т.п. Собственный обработчик событий, мыши и т.д.


Слайд 8

У разных браузеров поддерживающих HTML5 различаются поддерживаемые кодеки. Для указания различных источников для аудио можно воспользоваться следующей схемой: Особенности тэга <Audio> var source = document.createElement('source'); source.src = path+extension1; audio.appendChild(source);   Главное не забыть проверить возможность работы с аудио   var f = document.createElement("audio"); audioObjSupport = !!(f.canPlayType); console.log(audioObjSupport);


Слайд 9

Для использования нестандартных шрифтов можно использовать следующий код. Важно, что для использования шрифтов в Canvas необходимо подгрузить их заранее, например для невидимого элемента страницы. Шрифты, LocalStorage, Браузеры … @font-face { /* This declaration targets older versions of Internet Explorer */ font-family: 'NeuchaRegular'; src: url('doodlegod_assets/fonts/neucha-webfont.eot'); } @font-face { /* This declaration targets everything else */ font-family: 'NeuchaRegular'; src: url('doodlegod_assets/fonts/neucha-webfont.woff') format('woff'), url('doodlegod_assets/fonts/neucha-webfont.ttf') format('truetype'), url('doodlegod_assets/fonts/neucha-webfont.svg#webfontrwdzoNv2') format('svg'); font-weight: normal; font-style: normal; }


Слайд 10

Мелочи Offline-тестирование Ограничения безопасности: запуск скриптов, работа с LocalStorage В IE9 нужно включать Developer Tools, иначе содержимое страницы не загружается. Производительность (отрисовка одного кадра) в IE9 — не больше 8 миллисекунд, в Chrome — 20 в FF — 30


Слайд 11

Защита от копирования Фактически распространяем игру в исходниках Обфускация


Слайд 12

Вопросы


×

HTML:





Ссылка: