2014年9月5日

JavaScriptでスマホゲームアプリを作る - Herlock編

さて今回はHerlockを使って15パズルを作ってみた。



● Herlockとは


http://herlock.do/faqs/1304
株式会社ソニックムーブが提供するスマートフォンネイティブアプリ開発環境となります。
http://herlock.do/faqs/1338
AndroidとiOSに対応したワンソースでネイティブアプリを同時に開発することができます。
また、Web IDEを使用して開発、デバッグからビルドまで行うことができ、開発時のアプリはクラウド上で保存するだけで簡単に動作確認が可能です。
さらに、JavaScriptでOpenGLによる実装ができ、ゲームのようなハイパフォーマンスのアプリケーションを簡単に開発することが可能となります。




● 作ったもの


PhoneGap編Monaca編と基本的に同じ15パズル。

ただ今回は画像を使ったので見た目が大分違っている。
Herlockのサンプルにあった「ねこ穴」というアプリのソースコードを元にして作ったので、勢いで一部の画像をそのまま使わせて頂いてしまった。


ソースコードはこちら。(とても自慢出来たものではないですが。笑)

tmlib.jsには含まれているシーン管理やアセット管理の部分をHerlockでは自分で作り込まなければならないのが結構大変だった。(結局ねこ穴のソースから大部分をコピペして使った。) 逆に言うと自分で好きなように作りこんだりどこかのライブラリを使ったり、自由度が高いと言えるかも知れない。

アニメーションについてはTweenJSで簡単に出来たので助かった。



● Herlockの素晴らしいところ


WebViewではなくネイティブのOpenGL機能を使っているのでアニメーションのパフォーマンスは申し分ない。JavaScriptだけでこれだけの事が出来るというのは本当に素晴らしい。

サウンドの方もiOS, Androidともに全く問題無しだった。PhoneGapやMonacaではAndroidで音が出ない問題に悩まされただけに、これは嬉しい。

Web IDEが提供されているのでローカルに開発環境を用意する必要が無い。これもさくっとアプリを作りたい時には大変有難い。



● 苦労したところ


1.実行するまでエラーが分からない

これは特にHerlockだからという訳ではないけれども、JavaScriptでの開発は静的型付けのある言語と比べると意外と大変だなあと改めて感じてしまった。ちょっとしたスペルミスや引数の間違いなどでもその箇所が実行されるまでなかなか気付く事が出来ない。この事から感じるストレスは開発が進めば進むほど大きな負担になって来る。
今回Herlockで開発しながら特にこの点が気になったのは、おそらく次に挙げる要因が関係していると思う。

2. Herlock Viewerでアプリのリロードに時間がかかる

Web IDE上でプログラムの変更を保存してから、それを端末上のデバッグ用アプリ(Herlock Viewer)で再読み込みするのに結構時間がかかる。自分の環境(米国からのアクセス)だと最低でも15秒、サーバー側が重くなっている様に感じられる時だと30秒から40秒程度待たされる事もある。

原因は、最初に全ての画像や音声のデータを読み込む様なプログラムになっているからという事もあると思う。ただ、サーバー側が重くなっている時などはプログラムの実行を開始する前にJSファイル(require.jsなど)の読み込みの段階でタイムアウトしてしまう事もよくある。

この辺りは、Herlock Viewerの方でJSファイルや画像・音声などのデータをキャッシュしてくれて、任意のタイミングで開発者がキャッシュの更新を指示出来る様に(もしくは変更されたものだけ自動で読み込む様に)してもらえれば改善される様な気がしないでもない。

また、Android版はまだマシだったが、iOS版のHerlock Viewerではアプリのリロード処理中にタイムアウトしてしまう確率がかなり高かった。(特にサーバー側が重い時)

3. アプリ内でのシーン管理やアセット管理のための標準的な方法が分からない

APIドキュメントには基本的なコードしか載っていないので、最初は戸惑った。
結局サンプルアプリの「ねこ穴」のコードを見よう見まねでいじりながらなんとか形にはなったけれど、シーン管理やアセット管理のためのクラスは標準で存在した方が有難い。その上でtmlib.jsのチュートリアルの様な平易なドキュメントがあればなお嬉しい。




● これからHerlockに期待したいこと


1. TypeScript対応

Web IDEがJavaScriptだけでなくTypeScriptにも対応してくれれば、上に書いた「実行するまでエラーが分からない」という問題はほぼ解決すると思う。


2. Herlock Viewerでの再ロード時間の短縮

キャッシュ対応やサーバー側のスペック向上などでなんとか「数秒程度」でリロードが完了する様にしてもらえないものだろうか。
再実行に15秒以上かかる様だと「すぐに実行して動作確認出来る」というJavaScriptの利点がほぼ相殺されてしまうので、なんとも惜しい気がする。


3. ローカル開発用SDK

コマンドラインのみのSDKで良いので提供してもらえれば、Web IDEを使わずにローカルで好きなエディタを使って開発出来る様になる。もしこれが可能ならぜひ実現してもらいたい。
PhoneGapで言う「phonegap serve」コマンドの様なものを実行するとPCが接続待ち状態になり、そこにHerlock Viewerで同一LAN内から接続出来る様になれば多分リロードに時間がかかるという問題も解消されるだろう。

ローカルにソースコードがあればGitなどでの管理も自由に出来るし、理想的な開発環境になるのではないだろうか。

4. ドキュメントの充実

HerlockのAPIドキュメントは見た目はなかなか良いのだけれど、内容はまだまだ充実させる余地があると思う。



● 今日の結論


- JavaScriptだけでネイティブアプリの開発が出来るHerlockはアプリ開発者ならぜひ試して見る価値あり。

- ただデバッグ実行時のリロード時間の短縮はなんとしても実現して欲しい。

- なんだかんだ言っても結局のところ非常に面白いし将来有望な開発環境だと思うので、これからのより一層の改善に期待!



以上!







 .

2014年8月24日

JavaScriptでスマホゲームアプリを作る - Monaca + tmlib.js編

● Monaca とは


Monacaの機能と特徴 | HTML5を使ったクロスプラットフォーム型モバイルアプリ開発 




● PhoneGap/Apache Cordovaとの違い


内部的にはPhoneGap/Cordovaを使っているので、ソースコードはPhoneGap/Cordova用に作ったものをほとんど変更せずに使える。

一番大きな違いは、Monacaだとローカルに開発環境を用意する必要が無い事だ。ブラウザさえあればどこからでもすぐにプロジェクトを開いて開発を続けられる。


先にPhoneGap用に作った15パズルのソースコードをMonacaのIDEにアップロードすると何の問題も無く実行出来た。

実機でのデバッグ実行は「Monacaデバッガー」というアプリをインストールして行う。


PhoneGap Developerのアプリと同様こちらもとても便利。さらに端末上でログ出力が確認出来たり、開発者のIDEに画面のハードコピーやメッセージを送ったりも出来るみたいだ。





● 結論


開発環境の違いはあるがソースコード的にはPhoneGap/Cordovaと同じものをほぼそのまま動かせる。

なのでAndroidではWebAudioを使うとかなりの確率で音が出ないという問題も同じだ。この問題があるのでゲームアプリを作るのには残念ながらちょっと適さない。 (追記参照)




● 追記


Monacaデバッガーの「ハイパフォーマンス版(4.0以降のみ対応)」というのがあったのでこちらで試した見た所、Androidでも音が鳴った。BGMも効果音も問題無しだ。やったー!
とは思ったものの、デバッガー経由でなくビルドしたものを端末でダウンロードしてインストールしてから動かすと、やっぱり音が鳴らない。これはビルド時の設定か何かで直るものなのだろうか。それともMonaca側がまだ最新の環境に対応していないのだろうか。良く分からないけれども何となく期待は持てそうだ。


Monacaサイトの説明によると、ハイパフォーマンス版のデバッガーは

  • 最新のChromiumベースのブラウザーエンジン(インテルのCrosswalk)を用いており、高速なレンダリングと高度なCSS、JavaScript APIを利用可能です。

との事なので、Chromiumのバージョンに関係がありそうだ。となると、ビルドして配布する場合はユーザーの端末に入っているChromiumブラウザーのバージョンに依存するという事だろうか。



● さらに追記 (2014年9月7日)


下のブログ記事を見つけたのでAndroid用のビルド設定を「ハイパフォーマンス (Crosswalkエンジン)」を使う様に変えて試してみた所、ビルドしたアプリでも問題無く音が鳴る様になった。

Crosswalkエンジンを組み込んでMonacaで作るAndroidアプリを一気に高速化させる。 : アシアルブログ 

APKファイルのサイズが19MBに大きくなったけれども、まあ許容範囲だろう。ともかくこれでAndroidでも音が出る様になったという事で、スッキリした。
Monaca素晴らしい!







 

 

2014年8月23日

JavaScriptでスマホゲームアプリを作る - PhoneGap + tmlib.js編

● tmlib.jsを使ってみた


tmlib.jsが面白そうなので初めて触ってみた。

このチュートリアルを読めば大体の使い方がつかめる。素晴らしい!
tmlib.js で今流行のフラットデザインを使ったタッチゲームを作ろう – Step00 ゲームのひな形を作ろう | TM Life 




● スマホでも結構使えそうな感じ


作ったものは平凡だけれどとりあえずこんな感じの15パズル。
動画はNexus7(2012)上で動かしたもの。




ブラウザ上でPlay出来るバージョンはこちら。



開発環境は、最初はVisual Studio 2013に
Multi-Device Hybrid Apps (Preview) for Visual Studio 
という拡張機能を入れて使おうと思ったのだけれど、入れてみるとまだちょっと使いづらい部分があったので今回はパス。

結局  Brackets というエディタとTerminalだけで十分だった。Bracketsには「ライブプレビュー」というボタンがあってそれを使うとすぐにChromeを開いて実行出来るのでこれがとても役に立った。

実機で実行したい時は、Terminalでプロジェクトのフォルダから

phonegap serve

を実行しておく。そして実機(Android, iOS, Windows Phone)上でPhoneGap Developerアプリを実行し、PCのIPアドレスを入力すればOK。実機とPCが同一ネットワーク内にあれば良いのでUSBケーブルをつなぐ必要が無いのが有り難い。
この状態でソースコードを変更して保存すれば1〜2秒で自動的に実機側のアプリを再起動してくれる。これは実際に使って見るとものすごく便利だ。複数の端末を同時に接続出来るので、Android、iPhone, iPad, Windows Phoneを全て接続してそれらが同時に更新されるのを眺めているとそれだけでも面白い。


ちなみにビルドしてパッケージ化されたものを動かしたい時は、実機をUSB接続した上で、

 phonegap run android --device  または phonegap run ios --device

を実行すればOK。



ソースコードはこちら。
https://github.com/mikehibm/15puzzle-phonegap







● あれ、Androidで音が出ない。。。


iPhone,iPadでは全く問題無くBGMと効果音が再生されるのだけれど、手元のGalaxy S3とNexus7では全く音が出ない。それどころか、ローディング画面が出たまま止まってしまう。デバッグすると、WebAudioのcontextがnullになっている。これは悲しい。色々試したけどAndroidではどうも音声はダメそうなので、tm.sound.WebAudio.isAvailableが trueでない時は一切音を鳴らさない様に変更した。この問題が無ければ十分使えると思っただけに、残念。



● 結論


- アニメーションはあまり複雑な事をやらなければスマホでも結構使える。
- PhoneGap Developerアプリを使えば開発が捗る。
- でもAndroidでは端末によってWebAudioへの対応がまちまちで、かなりの確率で音が出ないのがなんとも残念。
- iOSまたはPCをターゲットにして作るなら十分選択肢の一つになり得ると思う。
- tmlib.jsは便利!これからも使いたい。