company_banner

Разработка HTML5-игр в Intel XDK. Часть 1. Знакомство с XDK

https://software.intel.com/en-us/xdk/articles/developing-html5-games-with-the-intel-xdk-articles
  • Перевод

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


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

image

Для того, чтобы претворить планы в жизнь, воспользуемся игровым движком 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 // Конец )
Intel 110,15
Компания
Поделиться публикацией
Комментарии 13
  • 0
    Хабра-кат, пожалуйста поставьте.
    • 0
      Почему админы не сделают хабра-кат обязательным к использованию? Чтобы без него нельзя было опубликовать статью. Столько хороших статей было заминусовано из-за того, что авторы забывали про хабра-кат.
      • +3
        Да! И чтобы все ошибки исправляли, и не только грамматические! Бездельники…
        • +1
          У нас есть проверка на наличие ката, другой вопрос, что этот кат может находиться где угодно в посте ) Но в данном случае был баг на сайте, что вчера не сохранялись изменения в посте, поэтому компания не смогла вставить кат — это наш косяк, но уже исправили всё.
      • НЛО прилетело и опубликовало эту надпись здесь
        • +1
          О! Наконец-то затронули тему создания игр в таком замечательном инструменте как Intel XDK. А почему не упомянули про App Preview? Ждемс второй статьи.
          • 0
            Ура! В рунете начали писать про Intel XDK! Давно уже было желание даже самому написать хоть пару постов про данную IDE что бы хоть что-то было на просторах интернета с практическими примерами. Правда меня больше не для игровых приложений интересует, а для бизнес-задач.
            • 0
              Вопрос к знатокам: как заставить игру, сделанную через Intel XDK работать быстро? Пробовал делать демку (на pixi.js), в мобильном хроме скорость нормальная, а варианте через XDK — слайд шоу с фпс 10-12.
              • 0
                Из чего состояла демка? Я как-то проводил тест с отображением 96 анимированных спрайтов, было стабильно 60 фпс на lumia 435. Но я сознательно не использовал никакие движки, чтобы оценить быстродействие самого canvas'а.
                • 0
                  Демка состояла из «катящихся» шариков. Делалась с помощью PIXI.js (в XDK, кстати, входит как один из вариантов). Возможно тормозит из-за того, что рендер идет через WebGL (хотя звучит как нонсенс), или аз-за того что был не полноценный билд, а через превью.

                  Попробую восстановить эксперимент.
                  • 0
                    WebGL должен ускорять графику вроде. Читал где-то, что собирать под Android лучше с Crosswalk, т.к. штатный WebView у Android'а тормознутый.
              • 0
                Подскажите пожалуйста, почему у меня нет шаблонов Games image?
                • 0
                  Видимо, Intel теперь рассматривает XDK как IDE только для IoT, а не для gamedev

                Только полноправные пользователи могут оставлять комментарии. Войдите, пожалуйста.

                Самое читаемое