Часть 1 » Часть 2 » Часть 3 » Часть 4 » Часть 5 » Часть 6 » Часть 7 // Конец )


Хотите создать собственную кросс-платформенную игру на HTML5? Перед вами – первая часть руководства, которое посвящено разработке в среде Intel XDK. Здесь мы будем делать игру про голодную змейку, вариант всем известной Snake.



Для того, чтобы претворить планы в жизнь, воспользуемся игровым движком Cocos2d-JS. Предполагается, что вы, приступая к чтению, знаете, что такое HTML5 и JavaScript. Предварительного знакомства с Cocos2d-JS и XDK не требуется. Предлагаем начать с рабочей среды – с Intel XDK.

Краткий обзор и создание проекта

Intel XDK – это интегрированный набор инструментов для кросс-платформенной разработки приложений. Он позволяет быстро создавать HTML5-приложения для устройств, работающих под управлением iOS, Android и Windows. Здесь можно найти подробную документацию по XDK. Мы начнём с самого начала, с создания нового проекта.

1. Запустите Intel XDK
   
   
2. Войдите в свою учётную запись. Если у вас ещё её нет – зарегистрируйтесь.
   
   
3. На стартовом экране можно выбрать шаблон для проекта или посмотреть примеры приложений. Для этого, соответственно, нужно воспользоваться списками Templates или Samples в левой части окна.
   
   
   
   Стартовое окно Intel XDK
   
   
4. На панели Создать новый проект (Start A New Project) пройдите по пути Шаблоны > Игры (Templates > Games).
   
   
5. В панели, которая появится справа, будет список шаблонов. Нас интересует шаблон Cocos2d 3.7, в его выпадающем меню нужно выбрать Стандартный HTML (Standard HTML). По умолчанию здесь установлен вариант HTML5 + Cordova.
   
   
6. При щелчке по шаблону или при выборе варианта, его заголовок подсвечивается. Убедившись в том, что заголовок нужного шаблона выделен, нажмите на кнопку Продолжить (Continue).
   
   
   
   Создание нового проекта по шаблону Cocos2d 3.7
   
   
7. В появившемся диалоговом окне укажите название проекта (поле Project Name) и его рабочую директорию (Project Directory) и нажмите кнопку Создать (Create).
   
   
   
   Настройка названия проекта и рабочей директории
   

Знакомство с Intel XDK

После того, как проект создан, вы можете начать работу над ним. В частности, остановимся на вкладке Разработка (Develop).

Вкладка Разработка (Develop)

Это, без преувеличения, сердце XDK. Здесь можно найти встроенный редактор кода, панель навигации по файлам проекта (её заголовок – Working Files), интерактивные инструменты (Live Development Tasks), менеджер ресурсов игры (Game Asset Manager).Здесь сосредоточены многие из основных инструментов, которыми вы будете пользоваться при создании игры.

Эмуляция

Эмулятор – очень важный инструмент. Он позволяет быстро тестировать приложение в ходе разработки. Конечно, периодически проект надо испытывать на реальных устройствах, а на последних стадиях разработки – так и вовсе почти исключительно на них, но эмулятор – вещь необходимая, серьёзно экономящая время и силы.

Переключитесь на вкладку Эмуляция (Emulate) и подождите, пока загрузится эмулятор. После загрузки и запуска проекта должно получиться примерно то же, что показано на рисунке ниже.

Новый проект, открытый во встроенном эмуляторе

Конечно, пока на экране эмулятора ничего, кроме логотипа Cocos2d и традиционного «Hello World», нету, но, если только что состоялось ваше самое первое знакомство с XDK, это – уже результат. Это значит, что у вас всё заработало и вы готовы продолжать. Приглядимся поближе к вкладкам главного окна программы.

Вкладка Проект (Project)

Вкладка Проект (Project) – это место, где можно настраивать параметры сборки приложения, значок запуска, экран-заставку, просматривать метаданные. Щёлкнув по этой вкладке в верхней части окна программы, вы увидите соответствующий экран. Обратите внимание, здесь мы уже работаем с новым проектом, который называется Snake. Из него вырастет наш вариант игры про змейку.

Вкладка Проект (Project)

В выпадающих меню можно найти параметры сборки проекта для различных платформ. В меню Настройки сборки (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). Такое случается, если разрешение экрана слишком мало. Для того, чтобы это исправить, нужно либо свернуть панель, нажав на значок минуса в её правом верхнем углу, либо, переместив указатель мыши к верхней границе панели и дождавшись, когда он превратиться в двунаправленную стрелку, уменьшить размеры панели, перетащив её границу вниз.

Проблема с панелью Веб-сервисы (Web Services), которая перекрывает список файлов

Вкладка Эмуляция (Emulate)

Вкладка Эмуляция (Emulate), как мы уже говорили, используется для того, чтобы быстро проверить работу приложения на различных виртуальных устройствах.

Вкладка Эмуляция (Emulate)

Она поддерживает всё необходимое для того, чтобы всесторонне протестировать приложение. Например – способна имитировать показатели акселерометра, GPS-приёмника. Её средствами можно управлять состоянием батареи виртуального устройства и тем, как оно взаимодействует с сетью.

В верхней левой части окна расположено выпадающее меню, в котором находится список профилей различных эмуляторов. Здесь можно найти много всего – от различных моделей iPhone, до планшета Microsoft Surface Pro, есть здесь и профили Android-устройств.

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

Просмотр экрана эмулятора в масштабе 50%

Просмотр экрана эмулятора в масштабе 100%

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

Четыре кнопки в верхней части меню управления эмуляторами

Обратите особое внимание на кнопки Перезагрузить приложение (Reload App) и Остановить эмулятор (Stop Emulator). Они, соответственно, расположены с левого и правого края панели. С их помощью можно перезапускать приложение или останавливать эмулятор, если возникает такая необходимость.

Поэкспериментируйте с ползунком для изменения масштаба окна эмулируемого устройства, попробуйте остановить эмулятор соответствующей кнопкой, перезапустить приложение. Загляните в настройки эмуляторов. Если всё получается – значит, вы уже чувствуете себя в XDK довольно уверенно и готовы идти дальше.

Выводы

Подведём итоги сегодняшнего занятия. Вот, что вы сегодня узнали и чему научились.

• Вы научились создавать проекты в Intel XDK.
• Узнали, какие файлы связаны с шаблоном проекта.
• Выяснили назначение вкладок окна XDK
• Узнали, как пользоваться окном свойств проекта (Project) для настройки параметров сборки проекта, значков и экрана-заставки.
• Разобрались с назначением вкладки Разработка (Develop)
• Научились пользоваться эмулятором и вкладкой Эмуляция (Emulate)

В следующий раз поговорим о Cocos2d-JS.


Часть 1 » Часть 2 » Часть 3 » Часть 4 » Часть 5 » Часть 6 » Часть 7 // Конец )