モチベーション
このブログでは、これまでHTMLとJavaScriptだけでゲームを作成する記事を書いてきました。
基本的にブラウザで動く前提で作っており、UnityとかUnreal Engineとかのツールやゲームエンジンも使いません。開発環境はとてもシンプルです。ブラウザとエディタがあればOKの世界です。
これで作ったゲームがスマホ（iPhone, Android）のアプリとして簡単に動かせるとしたら、素晴らしいと思いませんか？
実際にその方法がありましたので、この記事で紹介します。筆者はiPhoneユーザなのでその環境で話を進めますが、Androidも同じように対応可能だと思います。
Capacitorを使う
HTML/JavascriptのプログラムをiPhoneで動かす方法を調べると、Cordova, React Native, Ionic, Capacitorなど色々ありました。Cordovaは自分のMac環境ではビルドに失敗しました。Ionicは動作しましたがUIフレームワークの使用が前提でしたので、ちょっと面倒さくさそうです。
最終的にはCapacitorを使用して動作させました。CapacitorはIonicが使用する下のレイヤーに位置するプラットホームです。
このプラットホームはシンプルで、Webブラウザで動作するHTMLとJavaScriptのプログラムがそのままiPhone上で動く感じです。ビルド時間も短く、簡単にiOS環境にJavaScriptのゲームを動かすことができるので、かなりいいと思います。
Cacacitor HP: https://capacitorjs.jp
必要な環境
Xcode
iPhoneのアプリを作成するにはXcodeが必要です。App Storeからインストールしてください。PC上のiPhoneシミュレータで動かす分には無料で使用できます。作ったアプリを実物のiPhoneに落とす時や、App Storeに公開する場合は年会費(一万円ほど）を払う必要があります。
Node.js
Capacitorのインストールはnpmコマンドを使用します。npmは Node.js のパッケージ管理ツールなので、まずは Node.jsをインストールしてください。
iPhone上でHello World
Hello Worldを表示するindex.htmlを動かしてみます。
アプリのディレクトリを作成してCapacitorを導入する
まずはアプリのディレクトリを作って、Capacitorをインストールします。Capacitorの環境はは作成するアプリのディレクトリー内に作られます。
(1) 作成するアプリのディレクトリーを作成する
$ mkdir hello(2) Capacitorをインストールする
$ cd hello
$ npm install @capacitor/cli @capacitor/core
・・・
$ npx cap init
[?] What is the name of your app?
This should be a human-friendly app name, like what you'd see in the App Store.
✔ Name … App とりあえずそのまま
[?] What should be the Package ID for your app?
Package IDs (aka Bundle ID in iOS and Application ID in Android) are unique identifiers for apps. They must be
in reverse domain name notation, generally representing a domain name that you or your company owns.
✔ Package ID … com.example.app とりあえずそのまま
[?] What is the web asset directory for your app?
This directory should contain the final index.html of your app.
✔ Web asset directory … www とりあえずそのまま
✔ Creating capacitor.config.json in /Users/huangyenshan/test/capacitor/hello in 4.53ms
[success] capacitor.config.json created!
Next steps:
https://capacitorjs.com/docs/getting-started#where-to-go-next(3) ターゲットにするネイティブプラットホームをインストールします
$ npm install @capacitor/ios
$ npx cap add iosHello Worldのhtmlを作成する
まずは、hello の下に www フォルダーを作成します。
$ mkdir www
$ cd www
$ vi index.html 好きなエディタでファイルを編集します以下のindex.htmlがソースです。
<html>
<center>
<h1>Hello, World!</h1>
<h1>Hello, World!</h1>
<h1>Hello, World!</h1>
<h1>Hello, World!</h1>
<h1>Hello, World!</h1>
<h1>Hello, World!</h1>
<h1>Hello, World!</h1>
</center>
</html>iPhoneエミュレータ上で動作させる
hello/直下で
$ npx cap sync ios
$ npx cap open iosXcodeが起動します。下記図に示す赤枠の再生ボタンを押しビルド＆エミュレータ上で実行します。
iPhoneエミュレータが起動して、Hello, World!が表示されました。位置をまったく考慮していないので、文字の一部が隠れて見えないですが、あっけなく動きました。Capacitorの仕組みはまだよく知りませんが、ブラウザをそのまんま載せた感じがします。
ゲームをiPhone上で動かしてみる
さて、これまでWebブラウザ用に作ったゲームをそのままCapactiroを使ってiPhone上で動かすと、下記のようになります。
一発で動いたのはすばらしいのですがスマホ向けに調整が必要です。
今回動かしたいゲームは、横向きオンリーのものなので横表示固定したいところです。これには、iOSのアプリの設定ファイルを編集する必要があります。
作業フォルダーに生成された、ios/App/App/Info.plistファイルの以下の行を削除します。
・・・
<array>
<string>UIInterfaceOrientationPortrait</string> 削除する
<string>UIInterfaceOrientationLandscapeLeft</string>
<string>UIInterfaceOrientationLandscapeRight</string>
</array>
<key>UISupportedInterfaceOrientations~ipad</key>
<array>
<string>UIInterfaceOrientationPortrait</string> 削除する
<string>UIInterfaceOrientationPortraitUpsideDown</string> 削除する
<string>UIInterfaceOrientationLandscapeLeft</string>
<string>UIInterfaceOrientationLandscapeRight</string>
</array>
・・・下記のとおり横表示固定になりました。
次回：タッチイベントに対応する
これまでこのブログで作ってきたゲームは、レトロゲームということもあり、操作の手段はキーボードとゲームパッドです。スマホもBluetooth対応のもの使えば遊べるかもしれませんが、タッチパネル対応したいところです。
そこで、下図のようにゲームパッドのGUIを用意してタッチパネルでも遊べるようにしました。
これを実現するソースコードの説明は長くなるので、次回の記事に譲ることにします。
コメント