Intel приобрел у AppMobi набор HTML5 инструментов для разработчиков мобильных приложений


Как сообщает компания Intel, были приобретены следующие программы и компоненты:
  • XDK (Сross platform development kit) IDE – первая основанная на HTML5 среда разработки мобильных приложений. Включает в себя инструменты для создания, отладки и сборки ПО, а также эмулятор устройств на iOS и Android;
  • PhoneGap XDK – среда разработки с полной поддержкой open source фреймворка PhoneGap;
  • GameDev XDK – среда разработки игровых приложений на HTML5. В качестве примера AppMobi уже выпустила HTML5 игру под названием BoomTown;
  • jqMobi и jqUI, теперь называемые вместе Intel App Framework – фреймворк для реализации JQuery на мобильных устройствах;
  • directCanvas – технология ускорения приложений на HTML5 и SDK к ней;
  • Mobius – «Web браузер», позволяющий запускать Web приложения на HTML5 как установленные в ОС.

Подробнее ознакомиться с этиим HTML5 инструментами можно на сайте html5m.com.

Приобрев мощный инструмент разработки ПО для мобильных устройств – Intel делает очередной шаг в обустройстве собственной «мобильной» аппаратной и программной экосистемы. Имея большой опыт в разработке средств для создания приложений, компания, наверняка, будет активно развивать мобильный IDE.

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

Состояние мобильных HTML5 игр в фактах и цифрах.

Игровой HTML5 рынок разрастается, и, несмотря на многие негативные отзывы и события, мобильные web-игры становятся все более привлекательными. Но, сможем ли мы представить это в цифрах, или в фактах, которые продемонстрируют нынешнее состояние отрасли? Давайте попробуем. Przemek в статье в своем блоге пользуется собственным опытом, а также информацией найденной в Интернете. Некоторые из этих фактов смогут превзойти все негативные мнения. Каким же образом обстоят дела на самом деле?

  • Фактически история HTML5 игр началась в 2010 году, с того времени (в течение 2 лет) они проделали длинный путь от простых игр до более сложных 2D (мобильных) и 3D (компьютерных) игр с HD графикой, звуком и анимацией. Вот несколько хороших примеров.
  • Согласно Boostermedia на рынке существует около 1000 мобильных HTML5 игр, и это число может возрасти, так как в скором времени разработчики продолжат производство новых игр.

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

ТОП-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