Добавление уведомлений в вашу игру для Windows 8

Подключение к облаку

Неудивительно, что вам понадобится какой-то централизованный репозиторий для управления игровыми активами, которые являются общими для всех пользователей, например таблица лидеров. Облако, в частности Windows Azure , является отличным местом для размещения общих данных без малейших усилий с вашей стороны: облачный провайдер, в данном случае Microsoft, управляет всеми аппаратными ресурсами и обеспечивает гарантированное время безотказной работы, поддерживаемое соглашениями об уровне обслуживания . А с помощью недавно запущенных мобильных служб Windows Azure вы можете настроить возможности хранения и push-уведомлений с минимальным кодированием с вашей стороны, что позволит вам сконцентрироваться на своей игре!

Чтобы воспользоваться преимуществами и изучить возможности, приобретите бесплатную 90-дневную пробную учетную запись Windows Azure и обязательно активируйте функцию мобильных служб Windows Azure, как показано ниже. В настоящее время эта функция находится в режиме предварительного просмотра, поэтому она не отображается автоматически при просмотре различных служб на портале управления.

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

Ключевые элементы, которые необходимо предоставить для создания нового сервиса, выделены на двух экранах мастера ниже. Каждый сервис будет иметь общедоступную конечную точку — моя — simplegame.azure-mobile.net . Существует также база данных Windows Azure SQL, поддерживающая эту службу с помощью предоставленной мной учетной записи администратора. База данных и службы расположены в центре обработки данных в восточной части США, который в настоящее время является единственным центром обработки данных, доступным на данном этапе предварительного просмотра.

После создания службы запишите ключ приложения, который доступен через строку меню в нижней части портала. Это понадобится вам и уникальный URL-адрес конечной точки службы ( * .azure-mobile.net ) позже.

Настройка примера игры HTML 5

Чтобы сосредоточить статью на теме уведомлений, вместо самой игры, я решил начать с образца HTML5-игры JavaScript в Центре разработки Windows 8 . Это довольно просто: вы просто видите, сколько раз вы можете дотронуться до прыгающего мяча до того, как истечет время, и он поддерживает локальную таблицу лидеров, которую мы расширим в облако.

После того, как вы скачали и установили Mobile Services SDK , добавьте ссылку на него в примере приложения.

Вы также захотите вставить ссылку на компонент среды выполнения Windows в файл default.html следующим образом:

<!-- WinJS references -->

   <link rel="stylesheet" href="//Microsoft.WinJS.1.0/css/ui-dark.css" />

    <script src="//Microsoft.WinJS.1.0/js/base.js"></script>

     <script src="//Microsoft.WinJS.1.0/js/ui.js"></script>

      <script src="/MobileServicesJavaScriptClient/MobileServices.js"></script>



<!-- App references -->

      <link rel="stylesheet" href="/css/default.css" />

      <script src="/js/assetManager.js"></script>

      <script src="/js/movingAverage.js"></script>

Пример реализации игры использует игровой JavaScript-шаблон, который вы также можете адаптировать для своих игр. Ключевым компонентом шаблона является класс GameManager , объявленный в конце файла default.js . Это удобный одноэлементный объект, к которому можно добавить ссылку клиента на мобильные службы Windows Azure, как показано ниже:

 WinJS.Namespace.define(<span class="str">"GameManager"</span>, {
     navigateHome: navigateHome,
     navigateGame: navigateGame,
     navigateRules: navigateRules,
     navigateScores: navigateScores,
     navigateCredits: navigateCredits,
     showPreferences: showPreferences,
     onBeforeShow: onBeforeShow,
     onAfterHide: onAfterHide,
     game: game,
     state: state,
     assetManager: assetManager,
     scoreHelper: scoreHelper,
     gameId: gameId,
     touchPanel: touchPanel,
     <font style="background-color: rgb(255, 255, 0);">mobileService: <span class="kwrd">new</span> Microsoft.WindowsAzure.MobileServices.MobileServiceClient</font>
         <font style="background-color: rgb(255, 255, 0);">(<span class="str">"https://simplegame.azure-mobile.net/"</span>, “<<<---- REDACTED ---->>><span class="str">"</span>)</font>
    });

Добавление таблицы лидеров

Предпосылка уведомления, которое я хочу реализовать, заключается в том, что когда вы выбиваете из первого места в таблице лидеров другого игрока, будет инициировано уведомление, информирующее вас и побуждающее вас занять свою позицию наверху. Для этого необходимо внедрить хотя бы элементарную таблицу лидеров, поэтому для этого я буду использовать функцию данных в мобильных службах Windows Azure . На портале управления Windows Azure будет настроен серверный компонент, а в существующий пример приложения будет добавлен некоторый код.

Серверный компонент

Этот список лидеров довольно прост и отслеживает только имя игрока, счет и уровень. В этой игре нет системы регистрации игроков, поэтому игроки будут идентифицироваться по имени, указанному в разделе «Параметры игры» во всплывающем окне «Настройки» (см. Справа).

Вы можете решить включить собственную систему регистрации игроков или подключиться к существующим поставщикам удостоверений, таким как учетные записи Microsoft, Facebook или Twitter, чтобы подтвердить подлинность личности игрока.  Службы Windows Azure Mobile также могут помочь с этим, но это тема для другого поста!

Чтобы сохранить результаты, я создал таблицу в своем мобильном сервисе, которая называется таблицей лидеров . Я не предоставил схему, потому что по умолчанию схема будет создаваться динамически, когда я добавляю данные в таблицу; однако для меня генерируется уникальный столбец кластерного индекса с именем id . В производственной среде вы бы отключили функцию динамической схемы (через вкладку КОНФИГУРАЦИЯ мобильного сервиса), но пока это довольно удобно.

На вкладке DATA мобильного сервиса я создал таблицу с именем лидеров . Вы заметите, что есть опции для контроля прав доступа для различных операций CRUD ; Здесь вы можете заблокировать доступ только для аутентифицированных пользователей или даже разрешить доступ, например, к списку лидеров из других приложений. Как упоминалось ранее, для этого сценария доступ к данным таблицы осуществляется через ключ приложения, который ранее использовался для инициализации клиента мобильной службы в классе GameManager .

Я также создал вторую таблицу с именем users, которая будет содержать дополнительную информацию, необходимую для реализации push-уведомлений, как вы увидите позже.

Клиентский компонент

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

Здесь мне просто было интересно отправить счет на мобильный сервис. Создание пользовательского интерфейса для второй «глобальной» таблицы лидеров выходит за рамки этой статьи, но если вы посмотрите на функциональность примера приложения (в частности, в ScoresPage.js ), вы увидите, что там есть некоторая инфраструктура для нескольких высоких таблицы результатов.

   <font class="rem">// Check if a newly achieved score should be added to the score table, ...</font>
    <font class="rem">// Return value of 0 indicates the submitted score was not good enough to ...</font>
    newScore: <font class="kwrd">function</font> (score) {

        <font style="background-color: #ffff00">scoresTable = GameManager.mobileService.getTable(<font class="str">"leaderboard"</font>);</font>
        <font style="background-color: #ffff00">scoresTable.insert(</font>
            <font style="background-color: #ffff00">{</font>
                <font style="background-color: #ffff00">player: score.player,</font>
                <font style="background-color: #ffff00">score: score.score</font>
                <font style="background-color: #ffff00">skill: score.skill</font>
            <font style="background-color: #ffff00">});</font>


        <font class="kwrd">var</font> newScoreRank = 0;

        // TODO: Update <font class="kwrd">this</font> <font class="kwrd">function</font> to match the sort of your score table

Если бы вы добавили этот код и играли в игру несколько раз, вы бы увидели новые записи, добавленные в таблицу через меню BROWSE таблицы лидеров, как показано ниже.

    Windows.Networking.PushNotifications.PushNotificationChannelManager.
       createPushNotificationChannelForApplicationAsync().done(
           <span class="kwrd">function</span> (c)
           {
               GameManager.notificationChannel = c.uri;
           }
       );

        if (GameManager.usersSeen[score.player] === undefined) {
            userList = GameManager.mobileService.getTable(<span class="str">"users"</span>);
            userList.where({ user: score.player }).read().done(
                <span class="kwrd">function</span> (results) {
                    <span class="kwrd">for</span> (<span class="kwrd">var</span> i in results) userList.del(results[i]);
                    userList.insert(
                        {
                            user: score.player,
                            uri: GameManager.notificationChannel
                        });

                    GameManager.usersSeen[score.player] = <span class="kwrd">true</span>;
                }
            );
        }

 function insert(item, user, request) {

      mssql.query("select player, score, uri " +
                  "from leaderboard l, users u " +
                  "where (l.player = u.[user]) and " +
                  "(l.player != ?) and " +
                  "(l.score = (select max(score) from simplegame.leaderboard))",
                  [item.player],
                  {
                     success: function(results) { 
                       if (results.length > 0 && results[0].score < item.score)
                        {
                          notify(results, item);
                        }
                        request.execute();
                    },
                    error: function(err) {
                        console.log(err);
                         request.execute();
                    }
                  }
     );
  }
  function notify(results, item)
  {
      for (var i in results)
      {
          push.wns.sendToastText02(results[i].uri, 
          {
              text1: "HTML 5 Sample has a new champ!",
              text2: "Hey, " + results[i].player + ", " + item.player + 
                  " just took high score with " + item.score + " points. " +
                  "Time for revenge?!"
          });
      }
 }