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は便利!これからも使いたい。









 

2014年8月14日

JavaScriptでスマホゲームアプリを作るための開発環境いろいろ

● とりあえず何か作ってみないと始まらない


最近、次のスマホアプリを何で作ろうかと真剣に悩んでいる。既にCocos2d-xのC++版で2つほどアプリを作って公開したけど、やっぱり出来ればJavaScriptが使いたい。

悩んでばかりいても仕方がないので、とりあえず下の6つの環境でサンプルゲームを作って試してみようと思う。



PhoneGap (Apache Cordova) 


WebViewをラップしてネイティブアプリとして動作させる。
ゲームを作るならCanvasを簡単に扱うためのライブラリを使うと便利。

ライブラリには CreateJSenchant.jstmlib.jsArctic.js ... などがある。

将来的にはWebGLがもっと普及するとCanvasよりも格段に描画が高速になるらしいけれど、現状ではまだ実アプリで使うには早いみたいだ。
WebGLことはじめ
http://www.slideshare.net/hirumakazuya/webgl-35833170?next_slideshow=1

簡単なパズルゲーム程度であればおそらくCanvasでも大丈夫なのではないかと思う。(やってみないと分からないけれど。)

最近、Visual Studio 2013 (Update 2以上)の拡張機能としてPhoneGap(Cordova)対応が追加されたので、今回はこれを使ってみようと思う。
Multi-Device Hybrid Apps for Visual Studio 2013



Monaca 


PhoneGapをベースにしたWeb上の開発環境。PhoneGap/Cordovaのインストールや設定を一切しなくてもブラウザさえあればすぐに使えるのが素晴らしい。実機でのデバッグもUSB接続不要で簡単に出来て便利。

Monacaのサンプルを見ると Pixi.js を使ったブロック崩しゲームがある。これは、と思って実機で試してみた。結果、Nexus7(2012, Android 4.4.2)ではスムーズに動くもののGalaxy S3(Android 4.4.2)だとカクカクしてほぼプレイ出来ない状態だった。おそらくNexus7ではWebGLが有効になっていてGalaxy S3ではなっていないからだと思うけれど、Canvasだとやっぱりゲームアプリは無理なのか、と不安になる。ただ簡単なパズル系のゲームだったらどうなのか、その辺りを試してみたい。




Herlock 


JavaScriptからネイティブのOpenGLを扱える様にするフレームワーク。
Monacaと同様にブラウザさえあれば開発が出来る環境が用意されているので開発環境をローカルにインストールする必要はない。HerlockViewerというアプリを実機にインストールしておけばネットワーク経由でスクリプトの更新やデバッグログの確認が可能。
個人的にはかなり期待大。



Titanium 


Lanica Platino Engine」という拡張機能(有料・79.99ドル/年)を使うとOpenGLを使って高速に動くゲームアプリの開発が可能になるとの事。少し前までは年間800ドルぐらいしたと思ったけど、それと比べると今はかなり安くなったのでちょっとトライして見ようかと思う。



Cocos2d-JS 


スマホ用ゲームアプリ開発の大本命。
C++版では既にいくつかアプリを作ったので、次はJavaScript Bindingでどこまで開発が速くなるのか試してみたい。



Unity 


こちらも言わずと知れた超有名ツール。C#のイメージが強いけれど、JavaScriptでも開発出来るという事なので今回初めてじっくりと触ってみようかと思う。




以上、実際にサンプルアプリを作ってみてどうだったかは、これから少しづつ書いて行こうと思う。
またそれぞれの環境で下記の点についてもざっと調べておきたいと思う。

  • 多国語対応の方法(端末の言語設定によって画像や文字列を切り替える)
  • 広告(主にAdMob)の挿入方法
  • アプリ内課金の実装方法







 .

2014年6月4日

iOSのアプリ内課金の設定で失敗...

う〜ん、これはハマる。

「Ready to Upload」ボタンを押すにアプリ内課金の対象プロダクトを選択しないと行けない。


iPhone - 申請したいアプリ内課金の状態がWaiting For ReviewになってないのでDeveloper Rejectした - Qiita

In App Purchaseを組み込み申請するときの正しい順番 - BAD_ACCESS 



結局バージョン番号だけ上げてまた申請し直す羽目になってしまった。