![](https://habrastorage.org/files/21b/4e4/f80/21b4e4f80e884771bc6508cb0f5b6dbe.png)
Часть 1 » Часть 2 » Часть 3 » Часть 4 » Часть 5 » Часть 6 » Часть 7 // Конец )
![](https://habrastorage.org/files/21b/4e4/f80/21b4e4f80e884771bc6508cb0f5b6dbe.png)
Хотите создать собственную кросс-платформенную игру на HTML5? Перед вами – первая часть руководства, которое посвящено разработке в среде Intel XDK. Здесь мы будем делать игру про голодную змейку, вариант всем известной Snake.
![image](https://habrastorage.org/getpro/habr/post_images/5e4/f87/96b/5e4f8796b546bd036a5902d5009c0b0f.jpg)
Для того, чтобы претворить планы в жизнь, воспользуемся игровым движком Cocos2d-JS. Предполагается, что вы, приступая к чтению, знаете, что такое HTML5 и JavaScript. Предварительного знакомства с Cocos2d-JS и XDK не требуется. Предлагаем начать с рабочей среды – с Intel XDK.
Краткий обзор и создание проекта
Intel XDK – это интегрированный набор инструментов для кросс-платформенной разработки приложений. Он позволяет быстро создавать HTML5-приложения для устройств, работающих под управлением iOS, Android и Windows. Здесь можно найти подробную документацию по XDK. Мы начнём с самого начала, с создания нового проекта.
- Запустите Intel XDK
- Войдите в свою учётную запись. Если у вас ещё её нет – зарегистрируйтесь.
- На стартовом экране можно выбрать шаблон для проекта или посмотреть примеры приложений. Для этого, соответственно, нужно воспользоваться списками Templates или Samples в левой части окна.
Стартовое окно Intel XDK
- На панели Создать новый проект (Start A New Project) пройдите по пути Шаблоны > Игры (Templates > Games).
- В панели, которая появится справа, будет список шаблонов. Нас интересует шаблон Cocos2d 3.7, в его выпадающем меню нужно выбрать Стандартный HTML (Standard HTML). По умолчанию здесь установлен вариант HTML5 + Cordova.
- При щелчке по шаблону или при выборе варианта, его заголовок подсвечивается. Убедившись в том, что заголовок нужного шаблона выделен, нажмите на кнопку Продолжить (Continue).
Создание нового проекта по шаблону Cocos2d 3.7
- В появившемся диалоговом окне укажите название проекта (поле Project Name) и его рабочую директорию (Project Directory) и нажмите кнопку Создать (Create).
Настройка названия проекта и рабочей директории
Знакомство с Intel XDK
После того, как проект создан, вы можете начать работу над ним. В частности, остановимся на вкладке Разработка (Develop).
![](https://habrastorage.org/getpro/habr/post_images/f7a/3dc/4ba/f7a3dc4ba772612108a12cefb62e29f8.png)
Это, без преувеличения, сердце XDK. Здесь можно найти встроенный редактор кода, панель навигации по файлам проекта (её заголовок – Working Files), интерактивные инструменты (Live Development Tasks), менеджер ресурсов игры (Game Asset Manager).Здесь сосредоточены многие из основных инструментов, которыми вы будете пользоваться при создании игры.
Эмуляция
Эмулятор – очень важный инструмент. Он позволяет быстро тестировать приложение в ходе разработки. Конечно, периодически проект надо испытывать на реальных устройствах, а на последних стадиях разработки – так и вовсе почти исключительно на них, но эмулятор – вещь необходимая, серьёзно экономящая время и силы.
Переключитесь на вкладку Эмуляция (Emulate) и подождите, пока загрузится эмулятор. После загрузки и запуска проекта должно получиться примерно то же, что показано на рисунке ниже.
![](https://habrastorage.org/getpro/habr/post_images/47c/e6c/460/47ce6c460e2bf4c39ccd7dbb750d47f4.png)
Конечно, пока на экране эмулятора ничего, кроме логотипа Cocos2d и традиционного «Hello World», нету, но, если только что состоялось ваше самое первое знакомство с XDK, это – уже результат. Это значит, что у вас всё заработало и вы готовы продолжать. Приглядимся поближе к вкладкам главного окна программы.
Вкладка Проект (Project)
Вкладка Проект (Project) – это место, где можно настраивать параметры сборки приложения, значок запуска, экран-заставку, просматривать метаданные. Щёлкнув по этой вкладке в верхней части окна программы, вы увидите соответствующий экран. Обратите внимание, здесь мы уже работаем с новым проектом, который называется Snake. Из него вырастет наш вариант игры про змейку.
![](https://habrastorage.org/getpro/habr/post_images/98e/9cf/c91/98e9cfc91d972c23591465c392f088ff.png)
В выпадающих меню можно найти параметры сборки проекта для различных платформ. В меню Настройки сборки (Build Settings) находятся настройки для Android, Android Crosswalk, iOS и Windows 8. Обратите внимание на параметры Идентификатор приложения (App ID), Описание приложения (App Description), Название приложения (App Name), Автор (Author) и Версия (Version).
Вкладки
Состав и последовательность расположения вкладок, расположенных в верхней части окна, соответствуют процессу разработки. Остановимся на них подробнее.
- Вкладка Разработка (Develop) содержит инструменты для создания программного кода.
- Вкладка Эмуляция (Emulate) даёт доступ к эмулятору, в котором можно запускать и отлаживать программы.
- Вкладка Тестирование (Test) позволяет испытать программу на физическом устройстве.
- Вкладка Отладка (Debug) предназначена для отладки на устройстве.
- Вкладка Профилирование (Profile) нужна для исследования производительности программ.
- Вкладка Сборка (Build) помогает сформировать исполняемые файлы для конкретной платформы.
Рассмотрим подробнее вкладки Разработка (Develop) и Эмуляция (Emulate), с которыми вы уже немного знакомы.
Вкладка Разработка (Develop) и редактор кода Brackets
Основной инструмент, представленный на вкладке Разработка (Develop) – это редактор кода Brackets. Данный редактор с открытым кодом создан специально для веб-разработки. Он особенно хорош для работы с HTML5/CSS/JS. Этому способствуют, в частности, встроенные возможности по кросс-файловому редактированию кода.
Brackets оснащён всеми стандартными возможностями, которые можно ожидать от подобного средства. А именно, редактор поддерживает подсветку синтаксиса и проверку правильности кода с помощью JSHint. Он содержит встроенный диспетчер файлов, привязанный к рабочей папке проекта.
Есть небольшая проблема с диспетчером файлов, когда список файлов перекрывается панелью Веб-сервисы (Web Services). Такое случается, если разрешение экрана слишком мало. Для того, чтобы это исправить, нужно либо свернуть панель, нажав на значок минуса в её правом верхнем углу, либо, переместив указатель мыши к верхней границе панели и дождавшись, когда он превратиться в двунаправленную стрелку, уменьшить размеры панели, перетащив её границу вниз.
![](https://habrastorage.org/getpro/habr/post_images/48e/c8a/067/48ec8a0675d0882d4c51d894a159164f.png)
Вкладка Эмуляция (Emulate)
Вкладка Эмуляция (Emulate), как мы уже говорили, используется для того, чтобы быстро проверить работу приложения на различных виртуальных устройствах.
![](https://habrastorage.org/getpro/habr/post_images/bf1/f6d/500/bf1f6d500158971321d6d97a17390684.png)
Она поддерживает всё необходимое для того, чтобы всесторонне протестировать приложение. Например – способна имитировать показатели акселерометра, GPS-приёмника. Её средствами можно управлять состоянием батареи виртуального устройства и тем, как оно взаимодействует с сетью.
В верхней левой части окна расположено выпадающее меню, в котором находится список профилей различных эмуляторов. Здесь можно найти много всего – от различных моделей iPhone, до планшета Microsoft Surface Pro, есть здесь и профили Android-устройств.
В функционал эмуляции входит воспроизведение экранного разрешения. Если разрешение экрана виртуального устройства оказалось больше, чем разрешение монитора компьютера, рассмотреть эмулируемый экран целиком поможет бегунок для изменения масштаба, расположенный в верхней части окна, по центру. Вот, как выглядит экран одного из смартфонов в масштабе 50% и 100%.
![](https://habrastorage.org/getpro/habr/post_images/e17/269/b53/e17269b53fb3007c58e1b6c4d554b875.png)
![](https://habrastorage.org/getpro/habr/post_images/3b7/2d2/28c/3b72d228c8c64a9c4bb18100c9fa8109.png)
В верхней части выпадающего меню, которое служит для настройки эмуляторов, находится четыре кнопки.
![](https://habrastorage.org/getpro/habr/post_images/66f/3e2/788/66f3e2788260add21c6498e6b4aff1ad.png)
Обратите особое внимание на кнопки Перезагрузить приложение (Reload App) и Остановить эмулятор (Stop Emulator). Они, соответственно, расположены с левого и правого края панели. С их помощью можно перезапускать приложение или останавливать эмулятор, если возникает такая необходимость.
Поэкспериментируйте с ползунком для изменения масштаба окна эмулируемого устройства, попробуйте остановить эмулятор соответствующей кнопкой, перезапустить приложение. Загляните в настройки эмуляторов. Если всё получается – значит, вы уже чувствуете себя в XDK довольно уверенно и готовы идти дальше.
Выводы
Подведём итоги сегодняшнего занятия. Вот, что вы сегодня узнали и чему научились.
- Вы научились создавать проекты в Intel XDK.
- Узнали, какие файлы связаны с шаблоном проекта.
- Выяснили назначение вкладок окна XDK
- Узнали, как пользоваться окном свойств проекта (Project) для настройки параметров сборки проекта, значков и экрана-заставки.
- Разобрались с назначением вкладки Разработка (Develop)
- Научились пользоваться эмулятором и вкладкой Эмуляция (Emulate)
В следующий раз поговорим о Cocos2d-JS.
![](https://habrastorage.org/files/21b/4e4/f80/21b4e4f80e884771bc6508cb0f5b6dbe.png)
Часть 1 » Часть 2 » Часть 3 » Часть 4 » Часть 5 » Часть 6 » Часть 7 // Конец )
![](https://habrastorage.org/files/21b/4e4/f80/21b4e4f80e884771bc6508cb0f5b6dbe.png)
Комментарии (11)
scrutari
12.04.2016 00:31Забавно видеть flash в самой середине на странице фреймворка для создания HTML5 приложений :)
bunnyrock
12.04.2016 13:03+1О! Наконец-то затронули тему создания игр в таком замечательном инструменте как Intel XDK. А почему не упомянули про App Preview? Ждемс второй статьи.
Lorys
12.04.2016 22:32Ура! В рунете начали писать про Intel XDK! Давно уже было желание даже самому написать хоть пару постов про данную IDE что бы хоть что-то было на просторах интернета с практическими примерами. Правда меня больше не для игровых приложений интересует, а для бизнес-задач.
CrazyNiger
13.04.2016 13:14Вопрос к знатокам: как заставить игру, сделанную через Intel XDK работать быстро? Пробовал делать демку (на pixi.js), в мобильном хроме скорость нормальная, а варианте через XDK — слайд шоу с фпс 10-12.
bunnyrock
13.04.2016 14:17Из чего состояла демка? Я как-то проводил тест с отображением 96 анимированных спрайтов, было стабильно 60 фпс на lumia 435. Но я сознательно не использовал никакие движки, чтобы оценить быстродействие самого canvas'а.
CrazyNiger
14.04.2016 05:28Демка состояла из «катящихся» шариков. Делалась с помощью PIXI.js (в XDK, кстати, входит как один из вариантов). Возможно тормозит из-за того, что рендер идет через WebGL (хотя звучит как нонсенс), или аз-за того что был не полноценный билд, а через превью.
Попробую восстановить эксперимент.bunnyrock
14.04.2016 08:03WebGL должен ускорять графику вроде. Читал где-то, что собирать под Android лучше с Crosswalk, т.к. штатный WebView у Android'а тормознутый.
SysCat
Хабра-кат, пожалуйста поставьте.
Vlad_IT
Почему админы не сделают хабра-кат обязательным к использованию? Чтобы без него нельзя было опубликовать статью. Столько хороших статей было заминусовано из-за того, что авторы забывали про хабра-кат.
PapaBubaDiop
Да! И чтобы все ошибки исправляли, и не только грамматические! Бездельники…
Boomburum
У нас есть проверка на наличие ката, другой вопрос, что этот кат может находиться где угодно в посте ) Но в данном случае был баг на сайте, что вчера не сохранялись изменения в посте, поэтому компания не смогла вставить кат — это наш косяк, но уже исправили всё.