PWAのゲームアプリをCocos2d-x(JS)で実現する

前回「新しいスマホアプリの形態PWAの開発環境について」でProgressive Web Apps (PWA) について紹介しました。よく利用されているのはTwitterやInstagramのような一般アプリですが、JavaScriptを利用したゲームでも開発することができます。
例えば、バンダイナムコ社が提供している「アイドルマスターシャイニーカラーズ」はゲームですがPWAに対応しています。
https://shinycolors.idolmaster.jp/

Android端末で上記URLにアクセスし、「今すぐゲームを始める!」をタップすると別の画面に遷移し、少し待つと画面下部に「ホーム画面にシャニマスを追加」と表示されます。折角ですのでぜひインストールし遊んでみてください。PWAであってもGoogle PlayやAppStoreなどからダウンロードしたアプリと変わらないクオリティのゲームであることが判って頂けると思います。
このようにゲームであってもPWA対応は可能です。しかしゼロからJavaScriptでゲームを開発するのは骨の折れる作業です。そこでJavaScript用ゲームエンジンの出番です。例えば、以前に「Cocos2d-x(JS)で始めるゲーム開発の手引き」で紹介したCocos2d-x(JS)を利用することもできます。
今回は、このCocos2d-x(JS)を用いPWA対応のアプリを作成してみましょう。

Cocos2d-x(JS) のダウンロード

今回はCocos2d-x(JS) v3.13 Lite Versionを利用します。
https://cocos2d-x.org/filecenter/jsbuilder/

上記にアクセスしたら、

  • Current Version … v3.13
  • Mode … Lite Version
  • Compressor … Compressed

とし、「DOWNLOAD」ボタンをクリックしてください。「cocos2d-js-v3.13-lite.zip」がダウンロードされますので任意のフォルダに展開します。これをベースにPWA対応します。

Cocos2d-x(JS) テンプレートをPWA対応

前回紹介したように

  1. index.htmlのスクリプト追記
  2. manifest.jsonの配置
  3. service_worker.jsの配置
  4. icon.pngの配置

が必要です。2, 3, 4は前回作成したものをそのまま利用します。1は対応が必要ですので、既存のindex.htmlに次の2点を施します。

  • manifest.jsonの読み込み
  • service_worker.jsの読み込み

またテンプレートのままでは、ゲーム画面がスマートフォンの画面に収まりません。そのため、次の対応も行います。

  • 画面に合わせた表示を行うための設定

具体的には次のようなindex.htmlにしました。

6行目がmanifest.jsonの読み込み。41 ~ 49行目がservice_worker.jsの読み込み。15 ~ 17行目が画面に合わせた表示を行うための設定となっています。

GitHub Pagesにアップロード

では全てのソースコードをサーバにアップロードしますが、今回も前回と同様GitHub Pagesを利用します。そしてページにアクセスしてみてください。次のように表示されるでしょう(下画像では縦画面ですが、横に回転もします)。

そしてホーム画面に追加し、デスクトップからもアクセスしてみて下さい。ブラウザに表示したときと同じように動くことがわかるでしょう。

まとめ

今回はCocos2d-x(JS)のゲームエンジンを利用しましたが、JavaScriptで開発されたゲームエンジンであればどれでもPWA対応可能です。ぜひPWA対応ゲームアプリを開発して下さい。

» お仕事のご依頼はこちら