0.00
2 читателя, 17 топиков

Поддержка устройств с Retina дисплеем.



Введение

Сегодня на рынке доступны устройства с экранами с широким диапазоном пиксельной плотности. Отличительной особенностью некоторых устройств, таких как iPhone 5, iPad, MacBook Pro, являются дисплеи с высокой разрешающей способностью. Как веб-разработчики или дизайнеры, мы должны гарантировать качественный внешний вид нашего веб-сайта или веб-приложения на устройствах с высокой пиксельной плотностью. Чтобы избежать размытия изображения на устройствах с высокой пиксельной плотностью, мы должны обеспечить более высокое разрешение изображений на нашем веб-сайте или веб-приложении, используя последнюю CSS функцию Webkit, названную — “Image Set“. Используя функцию Image Set, браузер может определить пиксельную плотность устройства пользователя и показать пользователю подходящую версию изображений.

Использование CSS Image Set

Вот пример использования CSS Image Set:

.myImage {
    background: -webkit-image-set( url(images/bg.jpg) 1x, url(images/bg_2.jpg) 2x);
    height: 300px;
    width: 300px;
}


Читать дальше →

О пользе асинхронности в пошаговых мобильных играх

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

Как играют игроки

Многопользовательские игры можно поделить на две категории: синхронные и асинхронные. В синхронных играх все участники подключены к интерфейсу одновременно. Если игра пошаговая, им могут быть недоступны какие бы то ни было действия в конкретный момент, но они все равно будут привязаны к интерфейсу. В асинхронных играх пользователь использует игровую среду инкрементно; он выполняет все действия своего хода, после чего может выйти из пространства игры и вернуться после того, как противник сделает свой ход.
Ни в одной пошаговой игре два противника не могут действовать одновременно. Когда семья собирается за столом, играя в настольную игру, — это здорово, все общаются, вы можете наблюдать за игроком, чей ход сейчас, разговаривать с ним и наслаждаться игрой в реальном времени (синхронной).
«Постоянное вовлечение заставляет пользователей возвращаться к игре снова и снова — а разве не это главный признак хорошей игры?»

Мобильные игры vs. настолки

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

Мобильные игры: расширение горизонтов

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



Chicktionary Coop™ для iPad (запускается осенью 2012) – прекрасный пример мобильной асинхронной пошаговой игры, которая вдохновляет и развлекает юзеров.

Асинхронность + Мобильность = довольный юзер

На другой чаше весов — асинхронный геймплей, который идеально подходит для пошаговых игр на мобильной платформе. Нужно убить минут 10? Откройте свое любимое приложение и запустите игру. Поиграйте пару минут, сделайте свой ход, передайте ход партнеру и можете забыть об игре до тех пор, пока ход не вернется к вам. Вам не придется сидеть и ждать своей очереди, вы можете запросто переключиться на другую игру и сделать ход там. К тому времени ваш противник в первой игре может уже завершить свой ход, и вы сможете вернуться и продолжить.
Получаем непрерывный процесс с постоянным вовлечением – ни единой минуты пользователь не проводит в бесплодном ожидании, борясь с соблазном закрыть ваше приложение и потратить свое драгоценное свободное время на что-то другое. Ведь всегда можно найти что делать; есть и другие игры, и друзья в конце концов.

Снова и снова

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

Источник

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.

Brainworth: игры, которые учат создавать HTML5-игры

Brainworth — это проект, который учит вас программированию HTML5-игр. Особенность в том, что обучение происходит в виде самой игры. Не правда ли, отличное решение для тех, кто собирается постичь секреты разработки HTML5-игр.
Цель Brainworth – охватить программу 13-недельного университетского курса, но в форме видео-игры. Команда проделала огромную работу над проектом, и уже есть целый ряд техно-демоверсий:

От команды Rockit: как строить Behavior Trees (деревья поведений)
От Batman: Изучаем искусственные нейронные сети
От Brainworth: Snakepit: Алгоритмы поиска путей (техно-демо требует базовых навыков Python)
Все подробности смотрите на видео ниже, а также на странице Kickstarter.

ТОП-5 лучших практик по созданию HTML5 игр, в действии!

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

Возьмем эти два свойства HTML5 – универсальность и повсеместность – и становится абсолютно ясно, почему так много разработчиков находят в нем вдохновение.И, как говорится в поговорке: «Когда разработчик вдохновлен, он пишет игры». (Ну или может я просто придумал это).

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

Что вы узнаете из этой статье? Я расскажу об игровых HTML5 фреймворках для разработчиков, как достигнуть более широкой аудитории, используя смартфоны и планшетные устройства, как необходимо управлять внутриигровыми компонентами, как справляться с проблемами производительности, и как максимально использовать платформу – ваш браузер.
Итак, без лишних предисловий, вот 5 лучших советов по производству HTML5 игр, в действии! («в действии» я добавил для большего драматического эффекта).

Совет №1: Используйте фреймворк

Писать простые игры на HTML5 просто, но когда вы повышаете ставки, вам необходимо делать конкретные вещи, чтобы ваша игра воспроизводилась плавно.
К примеру, когда вы используете много изображений, звуковых эффектов и других ресурсов, вашему браузеру понадобится какое-то время, чтобы загрузить все это с вашего веб-сервера. Вас ждут сюрпризы, если вы это не принимаете во внимание, когда пишете вашу игру. Из-за того, что изображения и звуковые файлы загружаются асинхронно, JavaScript будет начинать выполняться до того, как все ресурсы будут загружены. Это часто приводит к «выскакиванию» (картинки появляются посреди голубого экрана), а звуковые эффекты не проигрываются в то время, в которое должны были бы.
Хороший фикс для этого – создать прелоадер, который бы задерживал выполнение скрипта до тех пор, пока все ресурсы не будут загружены.

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

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

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

1. ig.module( 
2.	'monster' 
3. )
4. .requires(
5.	'impact.game',
6. )
7. .defines(function(){
8.	
9. Monster = ig.Entity.extend({
10.	eyes: 42
11. });
12.	
13. });


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



Ascend Arcade производят по 3 игры в течение 3 месяцев, используя фреймворк ImpactJS.

Хотя много HTML5 игр полагаются на фреймворки, многие разработчики до сих пор идут тернистыми дорогами, стараясь сделать все самим. И хотя это может быть отличным опытом, но если вы хотите создавать игры в разумных временных рамках, то использование фреймворка станет правильным решением. Хорошим примером этому служат работы Ascended Arcade, которые смогли выпустить 3 приятных (и в какой-то степени громко анонсируемых) игр всего за 3 месяца, используя фреймворк ImpactJS.

Совет №2: Принимайте во внимание небольшие тач-скрин устройства

Возможно, одним из самых убедительных аргументов в пользу HTML5 является то, что он работает на ПК, ноутбуках, планшетах и даже смартфонах (если вы не видели, как работает ИЕ9 на Windows Phone 7 Mango – смотрите видео).

Эта уникальная кросс-платформенность присуща HTML5 и часто требует от разработчиков немного дополнительной работы. Тем не менее, существует парочка моментов, которые вы должны учитывать…



SpyChase, запущенный на Windows Phone 7 Mango.

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

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

Также, поскольку мобильным устройствам не хватает размера экрана, чтобы сразу отрендерить всю веб-страницу, они часто применяют сложные техники масштабирования и панорамы, которые могут быть преградой на пути к продуктивности во время написания игры. Это может быть отключено программно при помощи мета-тега viewport. Этот фрагмент кода поможет видимой области вашей игры занять все доступное горизонтальное пространство экрана. Установка параметра “user-scalable“ со значением “no“ говорит мобильному браузеру отключить пинч-масштабирование, которое в противном случае часто приводит к конфликту в играх, которые используют управление при помощи пальцев.

1.	<meta name="Viewport" 
2.	content="width=device-width; user-scaleable=no; initial-scale=1.0" />


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

Совет №3: Автоматически запоминайте прогресс игрока.


С такими возможностями, как «пин» сайта, веб-браузер старается придать веб-приложениям такой же статус, как у обычных десктопных приложений. Тем не менее, идея работы сайта как приложения достаточно нова, как и понятие отслеживания клиентских состояний. Вы подумаете дважды, прежде чем закрыть открытый документ Microsoft Word, но вы можете быть не так осторожны с закрытием веб-странички. По большей части это – не проблема, большинство веб-страниц ведут учет ваших данных на сервере.

А браузерные игры же слегка отличаются. Поскольку JavaScript выполняется на стороне клиента, HTML5 игры обычно хранят состояние игры в переходной памяти (RAM). Закройте окно браузера, и ваши тяжко заработанные рекорды будут навсегда потеряны.

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

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

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

Намного более работоспособным решением является хранилище HTML5 DOM. Хранилище DOM позволяет вам сохранять несколько мегабайт данных на 1 вебсайт при помощи интерфейса, который напоминает хранилище ключевых значений (или JavaScript объект expando). Это очень удобно, но в контексте HTML5 вы также можете захотеть запоминать сложные структурные данные, чего хранилище DOM не поддерживает.

К счастью, современное применение JavaScript имеет встроенные механизмы, которые позволяют совершать сериализацию объектов в компактную запись известную как JSON. Используя этот подход, хранилище DOM может также использоваться для запоминания произвольной информации. Следующие две вспомогательные функции иллюстрируют, как состояние игры может быть сохранено и возвращено, используя хранилище HTML5 DOM и особенности JSON, встроенные в ECMAScript5:

1.	function saveState(state) {
2.	window.localStorage.setItem("gameState", JSON.stringify(state));
3.	}
4.	
5.	function restoreState() {
6.	var state = window.localStorage.getItem("gameState");
7.	if (state) {
8.	return JSON.parse(state);
9.	} else {
10.	return null;
11.	 }
12.	}


Совет №4: Используйте профайлер

Одно из главных испытаний при разработке игры – поддерживать высокий фрейм рейт при добавлении все большего количества фич.

Хорошая новость состоит в том, что браузеры в целом стали намного быстрее в последние пару лет, и HTML5 игры, которые воспроизводятся с 60 FPS – это уже реальность.

Это было не просто. Для Internet Explorer 9 это означало написание полностью нового JavaScript движка, который может использовать многоядерные процессоры и полностью аппаратное ускорение рендеринга, основанное на Direct2D. Другими словами, если вы потратили большие деньги на ваше игровое оборудование, то Internet Explorer сможет его использовать с толком.



Интегрированный в IE9 JavaScript профайлер поможет вам определять проблемные места в производительности.

Для простых игр это означает, что вам не нужно беспокоиться о производительности. Но поскольку HTML5 – платформа агностиков, то потенциально вы будете вести разработку для целого ряда устройств и браузеров, не все из которых будут такими быстрыми, как вам бы хотелось. И даже если вы будете нацелены на высокопроизводительные ПК (то, чего мы делать не собираемся, помните?), то производительность все равно может стать камнем преткновения.

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

К счастью, существуют инструменты, которые вам помогут. В Internet Explorer 9 (ну или если уже на то пошло, то и в 10), нажмите F12, чтобы открыть инструменты разработчика. Выберете вкладку «Профайлер» и нажмите «Начать профилирование».

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

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



Игры становятся социальными: Warimals – игра основанная на HTML5, которая позволяет вам играть вместе с вашими Facebook друзьями.

Совет №5: Будьте творческими!

Иметь возможность писать игры, которые изначально работают в браузере – это круто, но еще круче то, что HTML5 позволяет вам писать игры, которые РАБОТАЮТ В ВАШЕМ БРАУЗЕРЕ! Не только HTML5 интересен с точки зрения технологии, но и сам браузер также является прекрасной платформой для игр.

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

Если вы новичек в разработке HTML5 игр, вам вероятно захочется написать клоны игр, в которые вы играли в оффлайне. В этом подходе нет абсолютно ничего неправильного. Но если подумать о том, что ваша игра может идти внутри «коммуникационного приложения», то велик шанс того, чот вы в итоге прийдете к новым креативным игровым идеям. Интересным примером может служить игра Warimals, одна из первых HTML5 игр для Facebook. В Warimals вы можете играть за собак или котов, можете приглашать ваших друзей из Facebook для совместной игры. Как это может не понравиться?

И напоследок…

Благодаря хорошей работе разработчиков и пионеров JavaScript, HTML5 уже стал достаточно зрелой платформой для написания игр. Это отличные новости, так как Веб является единственной вездесущей платформой для приложений разного рода. При помощи правильных инструментов (многие из которых удобно интегрированы в Internet Explorer 9 и 10 или могут быть скачаны бесплатно) и правильных фреймворков, опыт разработки HTML5 игр может быть приятным и вознаградится сполна, особенно работая в сферах со смежным опытом с интересными и инновативными подходом.

Инструменты для старта:

  • Красивые HTML5 кейсы
  • Учим HTML5
  • ImpactJS – игровой HTML5 движок
  • EaselJS – игровой HTML5 движок
  • Загрузите предпросмотр платформы IE10

Об авторе:

Kai Jäger – веб-девелопер со стажем, JavaScript энтузиаст, автор книг и теперь разработчик-евангелист в Microsoft в Германии. Когда он не говорит со студентами о добродетелях HTML5, он работает над своими проектами или же наслаждается прекрасными видами Баварии.

Источник:
http://msdn.microsoft.com/en-us/hh563503.aspx

Современные аспекты разработки HTML5 игр и как на этом можно зарабатывать



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

Разработка HTML5 игр и собственно возможности веб-браузеров на данный момент находятся в состоянии быстрого развития. На сайте HTML5 Game Devs заметно увеличились темпы публикаций нового контента, релизов игр, туториалов, бизнес-новостей и технологий. Высокопрофильные и высококачественные игровые релизы, такие как Cut the Rope, спонсируемый Microsoft, широко освещаются во всем мире, привлекая к себе общественность больше, чем когда-либо прежде. Но в чем же суть разработки HTML5 игры сегодня? Это вопрос важен особенно для тех, кто переходит из другой платформы. И что еще более важно – возможно ли на этом зарабатывать деньги?

HTML5 это всего лишь стандарт языка разметки!


Расслабьтесь:) Дальше под HTML5 будем подразумевать тренд, употребляемый мировыми СМИ. На техническом уровне HTML5, конечно, всего лишь спецификация языка разметки. Но средства массовой информации решили использовать этот термин как зонтик, охватывающий множество браузерных платформ и технологий, таких как WebGL, JavaScript, Web Sockets, GLSL, веб-Audio, NaCl, Canvas, DOM, CSS3 и многое другое. В целом эти вещи не составляют «HTML5», к тому же, у них есть свои собственные стандарты, и, надеясь сохранить рассудок обывателя и журналистов, заявляю, что все это совсем не то, что на самом деле являет собой HTML5.

Что такое HTML5 игра?


Этот, безобидный на первый взгляд, вопрос на самом деле имеет множество ответов, и может оказаться довольно сложным. Пока я могу сказать, что на базовом уровне HTML5 игры создаются на языке JavaScript в среде браузера, но это не совсем так, поскольку на самом деле можно делать полноценные (хотя и простые) игры с использованием чисто CSS3. Итак, давайте рассмотрим существующие технологии для разработчиков HTML5 игр, и что они предлагают:

CSS3

Большинство разработчиков знают, что CSS – это инструмент для стилизации внешнего вида веб-сайта. CSS3 – эволюция этой технологии, которая включает поддержку встроенных трансформаций и анимации. Вам больше не нужно использовать JavaScript, чтобы заставить что-то передвигаться на веб-странице. Мощь CSS3 позволяет создавать даже игры. Некоторые современные браузеры поддерживают аппаратное ускорение CSS. Да, вы прочитали правильно — CSS рендерится через графический процессор (GPU), а отсюда следует, что существуют даже CSS-шейдеры. Но огранились бы Вы, серьезный разработчик игр, лишь одним CSS для создания игры? Конечно же, нет. Это все-таки скорее среда для веб-разработчиков и вы, вероятно, столкнулись со скоростными ограничениями в CSS. Тем не менее, не исключайте его как вариант, при соответствии проекту.



DOM (Объектная модель документа)

DOM – знакомая территория для веб-разработчиков, но в гораздо меньшей степени для всех остальных. Это способ определения того, как элементы в HTML должны взаимодействовать друг с другом. Он предоставляет средства JavaScript для инспектирования браузера и HTML-кода, загружаемого в него. «Игры на основе DOM» – способ, которым разработчиками принято обозначать HTML5 игры, построенные преимущественно с использованием элементов HTML и CSS3, а не отрендеренные в канвас (см. ниже). Такой подход имеет свои преимущества. Благодаря аппаратному ускорению можно писать продуктивные «DOM-игры». Неплохой пример – игра Sumon. На некоторых браузерах, и в зависимости от типа игры, DOM даже лучше подходит, чем канвас.



Канвас

Канвас, вероятно, наиболее известный подход к созданию HTML5 игр. Это HTML элемент, определяющийся с помощью тегов <canvas>. Его можно воспринимать как большой контейнер для дампа графических данных. На веб-странице вы можете управлять им как угодно через JavaScript. Те, кто перекочевал из Flash, могут сравнить его с Bitmap объектом. В нем можно считывать и записывать данные на уровне пикселей, вставлять изображения, устанавливать композитные режимы, альфа-канал, преобразования, масштабировать и рисовать простые фигуры: линии, кривые и прямоугольники. Будучи достаточно долго используемым, канвас хорошо поддерживается в браузерах, как десктопных так и мобильных, правда при этом сильно варьируется скорость рендеринга.



WebGL (Библиотека веб-графики)

WebGL позволяет видеокарте ускорять графику в браузере. Основан на OpenGL ES 2.0 (так же, как Adobe Flash Stage3D), он предлагает прямой путь к API для 3D-графики, в том числе поддержку шейдеров через GLSL. Поскольку эта библиотека работает на графическом процессоре, то производительность зависит от аппаратного обеспечения, но обычно значительно выше, чем канвас. На WebGL вы безусловно можете писать 3D игры, так например, как выдающийся SKiD Racer и GT Racing, сделанные именно с помощью этой библиотеки. Все проблемы 3D разработок на других платформах, существуют и в WebGL. Это, например, память/пропускная способность, необходимая для текстуризации и моделирования данных, многообразие и скорость графических процессоров, и эволюционный характер этой технологии. Немаловажным фактом есть то, что у Microsoft еще нет публичных планов на поддержку WebGL. Вы не найдете его в Internet Explorer или новой Windows 8 Metro, но, хотя это и может отразиться на продажах игры, не исключайте его из инструментария. Плюсом есть то, что он набирает обороты в мобильных устройствах. Встроенный WebGL есть в iOS5, хотя в настоящее время отключен. Поддерживает его и Firefox на Android.



SVG (Scalable Vector Graphics)

SVG изначально является средством для отображения векторной графики и анимации в среде Веб. Это формат, основан на XML, которому уже более десяти лет, но лишь недавно получил широкое употребление в браузере. Сейчас у него всеобъемлющая поддержка и он включен в современные мобильные браузеры. Производительность на различных устройствах значительно отличается. На десктопах он вполне подходит для графического рендеринга, а для мобильных устройств он полезен во многих смыслах. Также доступен ряд комплексных SVG библиотек. Google разработал инструмент под названием Swiffy, который преобразует векторную Flash-анимацию в SVG анимацию, что было недавно успешно продемонстрировано на сайте «One hour per second». Я бы также сделал ставку на будущую версию Adobe Flash с функцией экспорта в SVG или на аналогичный продукт от них. Вы не сделаете игру чисто на SVG, поскольку она должна работать в паре с JavaScript, но это, безусловно, жизнеспособное решение для рендеринга.

Native Client (NaCl)

Native Client (NaCl для краткости) специальная технология Chrome, которая позволяет разработчикам на C/C++ программировать и создавать скомпилированный родной модуль в виде файла с расширением .nexe. Он работает внутри песочницы NaCl в Chrome. Почему вам стоит его использовать? Основная причина – в скорости. Он работает на скорости близкой к родной скорости ОС, что имеет решающее значение для интенсивных игр. Здесь у Вас в распоряжении многоядерность/поточность, 3D, аудио с низкой латентностью, шейдеры и в скором времени – сеть. Возможность портировать C/C++ код делает его интересным для разработчиков игр, уже работающих в этой области. Хорошим примером является игра Bastion компании Super Giant. NaCl работает только под Chrome, но он кросс-платформенный и может оказаться полезным, если вы уже писали C/C++ игры и хотите иметь готовые браузерные демо (ну или полные игры) без перекодирования с нуля на другом языке.



WebSockets

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

Node.js

Node.js, в свою очередь, является серверной технологией. И хотя можно утверждать, это она не имеет ничего общего с HTML5, так как написана на JavaScript и позволяет эффективно использовать WebSockets, но, все же, ее классифицируют как таковую. Разработанную специально для масштабируемых сетевых приложений библиотеку можно запустить на сервере в асинхронном событийно-управляемом режиме. Node.js может по необходимости создавать HTTP и WebSocket серверы, что есть почти противоположностью традиционному комплексу, в котором веб-сервер (такой как Apache) находится в основе вместе с языком PHP или Ruby, выполняя скрипты и отдавая HTML. Эти технологии не являются требованиями для HTML5-игр, но WebSockets, теперь уже с родной поддержкой во всех основных браузерах, включая Mobile Safari (но не на Android!), рекомендую взять во внимание. А с Node.js вы можете создавать серверные модули без изучения нового языка, так как все написано на JavaScript.



JavaScript (JS)

JavaScript – это де-факто язык-стандарт, осуществляющий взаимодействие со всеми из вышеперечисленных технологий, являясь, по сути, связывающим звеном. Когда JavaScript код выполняется в браузере, он разбирается движком JavaScript Engine. Различные браузеры имеют различные движки: Chrome использует движок V8, Mozilla Firefox – SpiderMonkey, Safari – Nitro, Internet Explorer 9 и выше использует Chakra и Opera – Carakan. Хотя браузеры относительно соответствуют производительности JavaScript, самый простой способ проверить это – тесты SunSpider. Где-нибудь держите в голове, что каждый движок выполняет тот же код немного по-разному. Что может быть оптимизировано для одного, не подходит для других.

Что касается самого языка, Википедия неплохо резюмирует: «JavaScript – это прототипно-ориентированный скриптовый язык программирования, который является динамическим, имеет слабую типизацию и функции как объекты первого класса. Он мультипарадигменный: поддерживает объектно-ориентированное, императивное и функциональное программирование». В зависимости от вашего опыта в программировании это может отпугнуть вас, а может и нет. Я знаю довольно много разработчиков, которые борются в поте лица с переходом от строгого языка, такого как AS3, до чего-нибудь более «размытого», но реальность такова, что если вы хотите создавать HTML5 игры, вам действительно нужно учить JS. Лично у меня было совсем немного проблем с ним, и я нахожу в нем красоту и динамику быстрого развития. Но все работают по-разному. Заблуждения вокруг JavaScript («это грязно!», «Нет IDE!»), по моему мнению, в значительной степени необоснованные, но на это – отдельная статья. Единственный мой простенький совет: не ищите сложностей. Не пытайтесь его использовать там, где не нужно, со строго типизированными конвенциями и структурами. Примите язык таким, каким он есть, и позвольте ему очертить пути вашего программирования.



Если вы действительно не хотите иметь дело с JavaScript, не спешите отказываться от мечты создать HTML5-игру. Существуют языки, которые конвертируют код в JavaScript, такие как Google Dart. Если ваш конек – Java, то следует обратить внимание на преимущества GWT. Стоит рассмотреть и программные средства для создания игр WYSIWYG, такие как Game Maker и Construct2, которые экспортируют свои окончательные сборки в JavaScript. Но, тем не менее, вам безусловно необходимо быть ближе к основам, особенно при разработке на мобильных устройствах, так что будьте готовы попачкать ваши руки.

Это были технологии. Теперь немного о платформах...


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

Десктопный браузер

Под десктопным браузером будем подразумевать браузер, из которого вы, по всей вероятности, читаете эту статью, один из большой пятерки: Chrome, Firefox, Safari, Internet Explorer и Opera. На данный момент, в настольный компьютер пялится большинство глаз, делая его наибольшим «рынком». Преимуществами выбора десктопного браузера есть то, что у вас доступен GPU (необходимый для WebGL), к тому же эти браузеры, как правило, быстрее при обработке, у них больше памяти и больше разрешения. Пропускная способность и скорость сети не являются особо важной проблемой, и у вас есть возможность сочетать мышь и клавиатуру, или даже подключить геймпад, к которому можно получить программный доступ через новые GamePad API.

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

Facebook

Технически, платформа Facebook – это, по сути, только расширение платформы десктопного браузера, но я рассматриваю ее, поскольку в ней намного легче создавать HTML5 игры для Фейсбука. Платформа имеет полную систему сборки, тестирования и распределения. И на HTML у них высокие приоритеры. К тому же есть доступ ко всем API, и развернута платежная система Facebook Credits.

Мобильный веб-браузер

Владея возможностью загружать и устанавливать приложения на телефон, мобильный веб-браузер становится все более важной платформой для таргетинга. Он быстро догоняет десктопный, и по некоторым прогнозам перекроет его уже в 2014 году. Отнесемся к этой цифре с долей скептицизма, конечно же, но, безусловно, быстрый рост здесь. Это отчасти подтверждается недавними достижениями в области мобильных технологий. Платформа предполагает, что игрок находится онлайн и обращается к игре через браузер, установленный на телефоне или планшете. К слову, в Интернете рынок мобильных игр растет очень быстро, наряду с серьезными игровыми порталами, уже скупающими их, а дальше – еще больше.
При разработке для мобильного браузера вам подойдет либо DOM, либо канвас. Большинство смартфонов содержат специализированные GPU, а Mobile Safari уже будет использовать его для рендеринга DOM элементов также и под iOS5. На горизонте и WebGL. Библиотека уже включена в Firefox на Android и, как скрытая опция, в Mobile Safari, так что вскоре ждем от нее дальнейшего продвижения.
Самая большая проблема мобильного интернета – это скорость и различие устройств. Например, разница в скорости рендеринга между iOS4 и iOS5 на iPhone – драматична. А между iPhone и недорогим телефоном Android еще более поразительная. Прибавьте различные разрешения и ограничения памяти для устройств – и вас ждет целый мешок головной боли от контроля качества. Особенно, когда нужно учитывать, что устройства Android, как правило, предпочитают DOM с точки зрения скорости.

Мобильные приложения

Мобильное приложение это своего рода то, что вы обычно устанавливаете на свой телефон. Они часто платные и загружаются из App Store или Android Marketplace. HTML5, безусловно, способен создавать мобильные игры, но для их упаковки вам понадобится еще одна технология, такая как PhoneGap, DirectCanvas компании App Mobi или Game Closure. Они способны также ускорять игры почти до родной скорости рендеринга и выявлять пропущенные или недоработанные проблемы, например, аудио с низкой задержкой. Преимущества очевидны: вы можете продавать игры в мобильных магазинах, что есть уже проверенной бизнес-моделью(методом проб и ошибок зачастую!), и в дальнейшем процессе вы можете использовать тот же исходный код. Недостатком является то, что вы теперь конкурент таким гигантам, как Angry Birds, Jetpack Joyride и Infinity Blade, поскольку делите с ними общий рынок, часто называемый «самой маленькой витриной в мире».



Специализированные платформы для планшетов (BlackBerry PlayBook, Nook, Kindle Fire)

Крупнейшие производители планшетов также предоставляют средства для разработки HTML5 игр для своих устройств. В BlackBerry неплохо представлен Web Works SDK. Для Nook вы можете использовать такие фреймворки, как Titanium или PhoneGap. Kindle Fire, хотя и смутно поддерживает HTML5, все же неплохо работает с канвасами, и, скорее всего, может справиться с простыми или низкоинтенсивными играми.

Windows 8 Метро / Mac App Store

Windows 8 с интерфейсом Metro выйдет в 2012 году. Метро – это на самом деле больше дизайнерское направление, чем технология, но фактически это новый стиль пользовательского интерфейса для Windows 8, в котором присутствуют панели и оформление контента. И он создан с помощью HTML5 технологий. В Windows 8 вполне возможно создавать игры как приложения, и Microsoft будет рекламировать это через свой магазин Windows 8 Marketplace. Windows 8 будет также поставляться с Internet Explorer 10. И хотя большинство технически продвинутых людей избегали IE, причин для этого становится гораздо меньше, начиная с IE9. Браузер имеет невероятную поддержку канвасов с ускоренным рендерингом GPU и очень быстрый движок JavaScript. Все сильно изменилось со времен IE6. Также стоит отметить возможность продавать HTML5 игры в Mac App Store, как сделали эти ребята.

Intel AppUp

Intel AppUp является магазином-витриной Intel, в котором вы можете приобрести приложения и игры. На многих ноутбуках, нетбуках и ультрабуках он по умолчанию уже установлен. Вы можете создавать AppUp игры с использованием технологии HTML5, и программа Intel Developer предоставляет все необходимые инструменты для этого. Здесь вы имеете дело с различными аппаратными конфигурациями и разрешениями, но в целом производительность достаточно высока, чтобы провести веселую игру без каких-либо заморочек.

Connected TV (Opera TV Store)

Магазин Opera TV Store – «полноценный магазин на основе HTML5 для умного TV (Connected TV)». Так же как вы устанавливаете приложения на свой смартфон, Connected TV устанавливает их на самого себя. Opera выпустила SDK и TV-эмулятор для разработок, и не за горами появление аналогичных SDK от других производителей. В середине 2011 года по Интернету гуляла история про разработчика, который взломал свой Apple TV и, обнаружив, что тот поддерживает HTML5, быстренько сварганил игру Blackjack. Появление Apple TV в App Store – также всего лишь вопрос времени.



Вас ожидает кросс-платформенный ад!


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

Первое, что нужно сделать, это выбрать наиболее важную платформу и уже исходить от этого. Например, если ваша опора – мобильный Веб, то исключайте сразу WebGL. Если вас волнует только десктопный рынок и вам нужно сделать «вирусную» игру, отложите HTML5, здесь в первую очередь подходит Flash.

Я не из тех, кто считает, что существует реальная «кросс-платформенная» технология, когда речь идет об играх. Если развернуть код, написанный для десктопов, на мобильное устройство, вы почти наверняка столкнетесь с проблемой производительности. Ваши игровые ресурсы должны создаваться с кучей различных разрешений, и скорее всего вам придется создавать несколько пользовательских интерфейсов. В зависимости от типа игры, вполне возможно, вы закончите десктопной версией с явными ограничениями, наложенными на нее версией для Mobile Web. Начав с десктопной версии, в итоге может оказаться, что игра вообще не переносится на мобильный Web.

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



Так как же все это монетизировать?


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

Google Ads

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

In-app и мобильные системы платежей

Для HTML5 разработчиков существуют несколько систем для in-app платежей (платежи внутри приложения). Ищите, изучайте, прежде чем выбрать что-то одно: этот список далеко не исчерпывающий. Компания Fortumo недавно объявила о выпуске мобильных платежных решений в виде HTML5 API, с помощью которых игроки могут подключаться непосредственно к своему телефонному счету. Google имеет платежную систему in-app, которая обеспечивает простой API для приема платежей при покупке виртуальных и цифровых товаров. LevelUp предоставляет API, позволяющий игрокам делать покупки через свои личные QR коды.

Платежная система Facebook Credits

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

Мобильные игровые порталы

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

Мобильные приложения

Apple App Store и Android Marketplace являются двумя крупнейшими, но не единственными магазинами, куда вы можете выложить в программной обертке свою HTML5 игру. Этот процесс безболезненный и проходит относительно без всяких трудностей. Каков доход в итоге? Ну, надеюсь, вы осведомлены в современных реалиях. Хотелось лишь добавить, что выпускать игры на этих рынках стоит, и если вы не сделаете этого, это сделает кто-то другой. Время от времени я нахожу переделанные игры на App Store, а с HTML5 все еще проще. Код просто загружается, помещается в обертку и публикуется. Так что, заботьтесь о том, чтобы быть первыми, если вам не безразлично.

Браузерные магазины от производителя

Это новый и развивающийся рынок. Google запустил Chrome Web Store, а Mozilla сейчас в процессе бета-тестирования своего нового App Store для HTML5.

Мобильные и планшетные магазины от производителя

И еще один развивающийся рынок. На выставке CES в прошлом году AT&T; объявила о новом HTML5 API для In-App биллинговой системы FierceWireless. В своей презентации они показали график ожидаемого общего объема рынка в размере 1,5млрд смартфонов к 2016 году. Microsoft уже открыл свой магазин Windows Phone Marketplace для представления приложений и, конечно, уже выставили на обозрение свой IE с HTML5. Motorola также объявила о Webtop – возможности запуска HTML5 приложений на своих новых мобильных и планшетных устройствах. Презентации и документация по этой теме находится на Motodev, их портале по разработке. Также вы можете выложить свою HTML5 игру на BlackBerry App World PlayBook store, Intel AppUp Center, Nook Apps и Kindle Fire через Amazon. Изучите в первую очередь, поскольку многие из них дадут вам гроши, если правильно не провести маркетинг. Хотя, вполне возможен и неожиданный успех.

Windows 8 Marketplace для Metro приложений

Я уже упоминал об этом в статье. Прибавлю лишь, что Microsoft встроит свой магазин приложений Marketplace непосредственно в Windows 8. Для магазина существуют мощные средства разработки, поэтому не исключайте его, даже если вы яростный поклонник Apple.

В заключение ...


Если вы независимый разработчик игр, вам может показаться, что вы вступили в войну с подавляющим множеством платформ и технологий. Так оно и есть. Unity, Corona и Flash/AIR могут без каких-либо препятствий перекрыть большинство из перечисленных выше платформ. Но есть платформа, которая растет быстрее всех, и является сегодня наиболее приоритетной. Это мобильный Веб с укрепляющейся технологией HTML5.

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

Если вы работаете в компании, и ваш не слишком далекий босс, весь возбужденный из-за такой новомодной вещи, как HTML5, спросит вас о ней, то, по крайней мере, теперь у вас есть некоторое понятие об огромной сфере технологий и платформ. Люди обычно говорят: «Я хочу, чтобы игра работала на моем iPhone". Для вас же это, по сути, значит «Не использовать Flash», и теперь вы видите – это не так просто. Мысли должны сосредоточиться на выборе правильной платформы, количестве версий и на какие компромиссы вы готовы пойти в процессе разработки.

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

Хочу поблагодарить Seb Lee-Delisle из CreativeJS и Rob Hawkes из Mozilla для проверки вменяемости этой эпической статьи!

Источник: www.photonstorm.com/archives/2759/the-reality-of-html5-game-development-and-making-money-from-it

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. Среди множества баннеров будет немного затруднительно найти нужные файлы, но уже после настройки у вас будет аудио-редактор, экспортирующий в любой нужный формат.

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


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