今回は製作過程を簡単に書いてみたいと思います。
ちなみに使用端末は
htc EVO3D Android4.0
iPhone4s iOS6.1.2
windows7
です
まずはユーザー登録をしてHerlockIDEにログイン。
・新規プロジェクト作成
・プロジェクト名(Eclipseのパッケージネームみたいなものでしょうか)を付ける
・テンプレート(defaultでいいんでないでしょうか)を選ぶ
するとmain.jsのタブが開きます。
後はそこにひたすらゴリゴリJavascriptを書いていくだけです。
簡単・お手軽です。
リファレンスをチェック
まずはドキュメンテーションをチェック。
正直Spriteってなに？って感じからのスタートです。
FLASH使ったことある方なんかはスラスラいけちゃう感じでしょうか？
FLASH未経験ですがリファレンスとサンプルコードみながらいけば
特にわかりづらい部分はありませんでした！
日本語はありがたい。
躓いた部分として
○アニメーション時の基準点の設定
というのでしょうか？
Spriteをアニメーションさせる時デフォルトの基準点はやはりSprite内左上(0, 0)に
設定されてるわけですが、たとえばこれを中心からアニメーションさせたい時
sprite.transformationPoint = (sprite.width / 2, sprite.height / 2);
みたいになぜか普通に数値ぶち込めばいいと思いこんでしまい悩む。ホントは
var point = new Point(sprite.width / 2, sprite.height / 2);
sprite.transformationPoint = point;
という感じでpointをインスタンス化してそのオブジェクトをtansformationPointに入れると。
結構悩んでしまいました。
○localStorageに値が保存できない
これはどーやっても保存できない。
一度アプリを落とすと値がクリアされます。
サンプルどおり書く、というかサンプルアプリさえも
一度アプリを落とすとベストスコアが残っていないようです。
恐らく端末の設定とかではないと思うのですが、、、
これは解決できませんでした。バグか何かであることを祈ります。
○広告が入れられない
これは別に躓いたというわけではないのですが、
なんか頭のどこかでダウンロードしたapkファイルをEclipseで編集して
広告とか入れれるのかなとか、XMLとか弄れるのかなとか
考えていたんですが、よく考えたらそんなことが簡単にできたら
Androidのアプリがいろんなことされちゃうわけですよね？
まぁいろいろやればできるみたいですが、
そもそもiPhone、Androidの面倒なアプリ内課金を5行でやっつけるHerlockの新機能
こちらのブログの今後の開発予定の部分に広告連携とか書いてあるし。
無料で提供いただいてるのに広告入れたいとか！欲張りすぎでしたね。
ただ現状とても販売とか課金とかできるレベルのアプリではないので
どのような形かわかりませんが今後広告連携も開発予定とのことで期待してます。
○普通にリンクをブラウザで開きたい
笑われちゃいそうですがどーやったらブラウザでリンク開けるの？
て感じで結構悩んじゃいました。
今までWEBVIEWアプリでは普通にアンカータグでリンク張っとけば
ブラウザ立ち上がったんで。
Herlockでは
app.openURL('http://www.yahoo.co.jp');
これでOKなんですね。
twitterアプリも正しいのかわかりませんが
app.openURL('twitter://post?message=' + text);
これでiPonoeもAndroidも起動できました。
ちなみにテキストのエンコードも
var text = encodeURI('わらわらわら');
これでOKでした。
○AudioAPIの仕組みがわからん!!
とりあえずこちらの記事
Herlockの内部的な仕組みと開発コンセプト
読んでみましたが、正直よくわかりません！
どのような仕組みでAudioを鳴らしてるのか、
AudioのループがiPhoneはばっちりきれいにループするのですが
Androidのほうがループがぶちって途切れるんです。
というか繋ぎ目で半拍くらい遅れるというか、、、
これは以前はまったHTML5のaudio状態です。
iOS6以降のweb audio apiは素晴らしいループだったので
audio辺りはこの機能を使用しているのでしょうか？
とりあえずaudioインスタンスを作成する時
2種類のタイプSEとMUSICとあるようで、
Audio.MUSIC ・・・ BGM,楽曲
Audio.SE ・・・ 効果音（10秒程度の音声）
と説明があります。そんで
var audio = new Audio( url, Audio.SE );
こんな感じでインスタンスを作って操作するんですが、
Androidは6秒くらいのSEもMUSICとしてインスタンス化しないと
音がなりませんでした。
更にAndroidはMUSICでインスタンス化しないとループもしませんでした。
逆にiPhoneはSEだろうがMUSICだろうがループもするし長めの音もSEで鳴りました。
そもそもゲームBGMをみなさんどのように作成してるのかわかりませんが、
自分は今回単純な四つ打ち1小節をループすればいいやと考えてたんですが、
Androidはそうもいかず、setTimeoutで繋げたりしてみましたがかなり不自然。
結局8小節でフェイドアウトして最後の半拍位をトリムしてなんとか
多少の違和感で繋げループさせました。
ちなみに今回BGMとSEはiELECTRIBEとnanostudioにて作成！
それと和風SE素材は「くらげ工匠」様からお借りしました。
しかしこのDTMアプリはほんと素晴らしい。
この値段でこのクオリティ。
大体いつも流れとしてはiELECTRIBEでSEとかループ作ってnanostudioにオーディオコピペ、
サンプルを読み込んだPADでトリムしたりリサンプルしたりしています。
iPadのみで完結。
○対応ライブラリ
ねこ穴のサンプルコードを初めて見たとき、
何これ？ホントに普通のjavascriptで書いてるの？
って感じで戸惑いましたが、
これはrequire.jsというライブラリの書き方、
というか文法みたいで、
当然使ったことないので結構とまどいました。
ライブラリは最近良く見るrequire.jsとかbackbone.jsとか
色々対応しているようです。
なんかこーゆーの使って書いてます、って聞くと
カッコいいですね、はい。
まぁどちらもどっちかつーと大規模な開発に向いているようですので
あまり自分には縁がなさそうですが、、、。
ただrequire.jsとかこれまた最近良く見るangular.jsとか少し気になります。
それとCreate.js!!これは学習したい。
ま、今回はどれも分からなかったし、
何もライブラリは使いませんでした。
この辺使いこなせばもっと効率的な開発ができるのでしょうね。
まとめ
いままでWebViewを使用していたのでデザイン的な部分やアニメーションは
できるだけCSSを使用していて、ポジションもできるだけ
幅広い端末に対応できるようパーセント指定していたのですが、
Herlockではとりあえず
全てPNGを作成してがっちり数値で配置して、、、
って感じの部分が少々違和感というか、感じました。
ただ、わかりやすいです。
デバッグからビルド、リリースまで簡単・お手軽でした。
なんかカジュアルゲームみたいのを個人でバンバン作成するには
かなり有用なのではないでしょうか？
大規模なものなどは、どーでしょう？
作ったことないのでわかりませんが、、、。
とりあえずアプリを作ってみたい！
そんでPhoneGapとか使ってWebViewアプリ作って
Androidのもっさり感でがっかりした方なんかは
javascriptでこのパフォーマンスは
かなり魅力的ではないでしょうか？
Herlock様今後とも無料提供お願いします！！
