Как создавать приложения HTML5 на Windows Phone с PhoneGap

Мы позволяем браузеру позаботиться о сглаживании во время этой операции масштабирования. В зависимости от используемого вами браузера вы также заметите, что производительность может сильно зависеть от размера окна, которое у вас будет. На моей машине IE9 / IE10 кажется относительно безразличным к полноэкранному режиму или небольшим разрешениям, поддерживая стабильную частоту кадров 60 кадров в секунду.

Загрузка уровней с вызовами в файловую систему вместо использования XHR

В исходном коде файлы .TXT, связанные с каждым уровнем, сохранялись на веб-сервере и загружались с помощью вызовов XmlHttpRequest. Поскольку сейчас мы выполняем все на стороне клиента в автономном режиме, локальные вызовы XHR не очень подходят. Затем я заменил исходный код функции PlatformerGame.prototype.LoadNextLevel следующим:

  PlatformerGame.prototype.LoadNextLevel = function () {

     this.levelIndex = (this.levelIndex + 1)% numberOfLevels;

     // Поиск, где мы в настоящее время размещены

     var nextFileName = "app / www / assets / level /" + this.levelIndex + ".txt";

     пытаться {

         var instance = this;

         window.requestFileSystem (LocalFileSystem.PERSISTENT, 0, gotFS, fail);

         function gotFS (fileSystem) {

             fileSystem.root.getFile (nextFileName, null, gotFileEntry, fail);

         }

         function gotFileEntry (fileEntry) {

             fileEntry.file (gotFile, fail);

         }

         function gotFile (file) {

             readAsText (файл);

         }

         function readAsText (file) {

             var reader = new FileReader ();

             reader.onloadend = function (evt) {

 instance.LoadThisTextLevel (evt.target.result.replace (/ [nrt] / g, ''));

             };

             reader.readAsText (файл);

         }

         сбой функции (evt) {

             console.log (evt.target.error.code);

         }

     }

     поймать (е) {

         console.log («Ошибка загрузки уровня:» + e.message);

         // Возможно, доступ запрещен, если вы попытаетесь запустить из файла: // context

         // Загрузка уровня жестко запрограммированной ошибки, чтобы иметь хоть что-то для игры

         this.LoadThisTextLevel (hardcodedErrorTextLevel);

     }

 }; 

Я только что повторно использовал код, доступный в документации PhoneGap: FileReader . Как видите, у вас есть полный доступ к файловой системе Windows Phone из JavaScript с PhoneGap.

Полезный совет: чтобы помочь вам отладить то, что действительно хранится в изолированном хранилище телефона или нет, вы должны взглянуть на этот замечательный инструмент: IsoStoreSpy, написанный Сэмюэлем Бланшаром.

Модификация игрового процесса для использования акселерометра

Ну, а последняя часть — просто смешать все части этой статьи, чтобы получить окончательный результат. Для этого я добавил следующий код в конструктор объекта Player в файле Player.js :

  var options = {частота: 500};

 вар то = это;

 navigator.accelerometer.watchAcceleration (

       function (акселерометр) {that.moveDirectionAccel (акселерометр);  },

       function () {console.log ("Ошибка с акселерометром");  },

       параметры); 

Вот функция, которая будет вызываться при изменениях акселерометра:

  Player.prototype.moveDirectionAccel = function (ускорение) {

     var accelValue = -acceleration.y;

     // Переместить игрока с акселерометром

     if (Math.abs (accelValue)> 0,15) {

          // устанавливаем скорость движения

          this.direction = Math.clamp (accelValue * this.AccelerometerScale, -1, 1);

     }

     еще {

         this.direction = 0;

     }

 }; 

Я также добавил обработчик события onmousedown на холсте, чтобы переходить, когда пользователь нажимает на экран.

Скриншоты результата и FPS на некоторых телефонах

Сначала рассмотрим результат в эмуляторе Windows Phone:

У нас есть частота кадров от 54 до 60 кадров в секунду на моей машине. На реальном устройстве частота кадров логически отличается между моделями. Давайте возьмем первый игровой уровень. На LG E900 частота кадров составляет около 22 кадров в секунду . На HTC Radar скорость составляет около 31 кадра в секунду . На Nokia Lumia 800 он составляет около 42 кадров в секунду .

Игровой процесс может быть не очень убедительным в большинстве случаев. Действительно, я использую полноэкранный холст, чтобы нарисовать всю игру. Это не очень хорошая идея для мобильного процессора с ограниченной мощностью, даже если Nokia кажется достаточно мощной, чтобы справиться с этим подходом. Лучшая методология могла бы заключаться в том, чтобы разрезать экранную сцену на различные маленькие холсты, которые затем будут перемещены путем изменения свойств CSS на них. Это то, что было сделано для HTML5-версии Angry Birds, например. Некоторые игровые платформы JS начинают задумываться о том, как справиться с этой сложностью. Идея заключалась бы в том, чтобы один раз кодировать игру с помощью API высокого уровня, и среда могла переключаться между полнокадровым холстом или различным небольшим холстом, перемещаемым через CSS, на основе производительности.

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

Полное решение Visual Studio для загрузки

Вы найдете полный исходный код HTML5 Platformer для PhoneGap здесь : HTML5GapPlatformer.zip

Другие полезные ресурсы

• Полная поддержка PhoneGap на Windows Phone теперь завершена!
• PhoneGap на Windows Phone Советы от Глена Гардона, который написал несколько очень интересных руководств
• Много хороших руководств в разделе Wiki PhoneGap: http://wiki.phonegap.com/w/page/35501397/Tutorials

Вы также можете подумать о смешении обеих сред для создания гибридных приложений: основная ветка будет написана с использованием «HTML5», а некоторые конкретные части — в нативный код. Используя эту идею, были созданы некоторые плагины, чтобы немного продвинуть интеграцию в Metro UI: плагины PhoneGap для Windows Phone . Например, вы найдете один из них, позволяющий коду JavaScript обновлять тайлы.

Наконец, PhoneGap и HTML5 могут позволить относительную переносимость на другие платформы … с некоторыми ограничениями. Но это обширная тема со страстными дебатами, которая потребует полной специальной статьи.

Эта статья была первоначально опубликована в блоге автора MSDN . Переиздано с разрешения.