2011年11月1日

Monaca + enchant.js でお手軽スマフォゲームアプリ開発

asial

Pocket

2012/12/25
Monacaのアップデートに対応するためにソースコードを一部編集しました。

------------------------------------------------------------------------------

こんにちは。松田です。
今日は弊社で開発しているスマートフォン用アプリ開発環境のMonacaと、JavaScriptベースのゲームエンジンenchant.jsを組み合わせて、スマートフォン用ゲームアプリの開発をしてみたいと思います。

Monacaの公式サイトはここ。
http://monaca.mobi/

enchant.jsの公式サイトはこちらです。
http://enchantjs.com/ja/

MonacaはHTML5ベースのコードからAndroidアプリとiOSアプリを同時に生成できるツールです。
HTML5ベースで実装されているためenchant.jsのようなJavaScriptライブラリとの相性もよく、今回の記事のようにゲームアプリも簡単に実装できます。

1. Monacaアカウントの取得

まずはMonacaのアカウントを取得しましょう。下記URLからアカウントを作成します。
https://monaca.mobi/setup
ニックネームはさほど意味がないらしいので適当に。
ここで登録したメールアドレスがログイン用IDになります。
アカウントを作成したら右上のログインボタンからログインします。

2. プロジェクトの作成

次にダッシュボードからプロジェクトの作成を行います。
「プロジェクトを追加する」ボタンを押してプロジェクト情報を入力してください。
テンプレートは「HelloWorldデモ」にしておきます。

作成が終わると「IDE起動」ボタンが現れるので、ボタンを押してIDEを起動します。

3. debuggerインストール

次はdebuggerのインスールを行います。
Monacaは現状では実機上での確認しかできないため、iPhoneやiPod touch等のiOS端末かAndroid端末を用意し、
その端末にインストールしたdebugger上で動作を確認することになります。

下記のページを参考にデバッガをインストールして下さい。
http://docs.monaca.mobi/manual/debugger/

インストールが成功するとこんなふうにデバッガーアプリが表示されます。

自分はiPod touchで開発しています。

4. enchant.jsのダウンロード

これでMonacaの準備は整ったので、次はenchant.jsの用意です。
下記のページのDownloadリンクからenchant.jsをダウンロードします。
http://enchantjs.com/ja/

ダウンロードしたファイル内のenchant-package.zipを解凍すると、サンプルのアプリが3つ入っているので、今回はこの中のrpgを使います。

5. コーディング

IDEに戻りコーディングを行います。
と言っても今回はサンプルコードを動かしてみるだけなので、index.htmlの編集とファイルのアップだけで完成です。
rpgディレクトリ内の必要そうなファイルをIDEの左側のファイルツリーにアップロードしていきます。
アップロードするには、ツリーの要素を右クリックし、「アップロード」メニューの選択です。

RPGサンプルでは素材ファイルはディレクトリ分けされていないようなので、とりあえずそれに従ってwww直下に全部アップしておきました。
いらないファイルも混じっているような気もしますが放置。

次にindex.htmlの編集です。
RPGサンプルのindex.htmlで読み込んでいるjsファイルを読み込ませ、あとはbodyタグのいらない中身を消してしまえば完成です。

index.html


<!DOCTYPE HTML>
<html>
    <head>    
        <meta name="viewport" content="initial-scale = 1, user-scalable=no">
        <meta charset="utf-8">
        <title>RPG sample on Monaca</title>
        <script type="text/javascript" src="enchant.js"></script>
        <script type="text/javascript" src="ui.enchant.js"></script>
        <script type="text/javascript" src="game.js"></script>
        <style type="text/css">
            body {
                margin: 0;
            }
        </style>
        <script type="text/javascript" charset="utf-8" src="plugins/plugin-loader.js"></script>
        <script type="text/javascript">
    monaca.viewport({width : 320});
        </script>
    </head>
    <body data-role="page"></body>
</html>

最終的には上記のようなコードになりました。
scriptを読み込ませてるだけですね。

6. debuggerで作成したアプリを実行

これで準備は整ったので早速debuggerで実行してみましょう。
debuggerを起動するとIDとパスワードが聞かれるので、Monacaのアカウントに登録したメールアドレスとパスワードを入力してください。
ログインに成功すると下の画像のようにMonacaで作成しているプロジェクトが表示されます。

RPGのプロジェクトを選びます。すると・・・

動きました！
パッドのアイコンをタッチするとちゃんとキャラクターが動きます！
サンプルのコードのままだと画面の長さが足りてませんが、そこはまた後々。

7. アプリのビルド

せっかくなのでアプリをインストールするところまで。
今回はデバッグ版のインストールを行います。
IDEの右上の「Android」「iOS」のうち使用しているOSを選択し、「ビルド設定」の項目をクリック。
ここで下のドキュメントに従って設定を行います。

iOS版ビルド設定
http://docs.monaca.mobi/manual/build/ios/

Android版ビルド設定
http://docs.monaca.mobi/manual/build/android/

iOS版ではAppleの開発者アカウントやら何やらが必要となるため、このあたりはAndroid版のほうが楽らしいです。

設定完了後に「iOS」→「ビルド」を選択すると、ビルドボタンがハイライトされているのでクリック。

あとはビルド完了までしばし待機です。

8. アプリのインストール

ビルドが完了すると「ネットワークインストール」のボタンが表示されますが、とりあえず無視です。
ここでもう一度debuggerを立ち上げます。
RPGプロジェクトを選択し、右下のボタンをクリックすると下のようなメニューが立ち上がります。

ここですかさず「ネットワークインストール」をクリック！

出た！

これでMonaca＋enchant.jsのゲームアプリ開発の基礎は完了です。

肝心のゲームのコードについては一切ふれませんでしたが、下記のブログ等でとてもわかりやすくまとめられているので必見です。
http://www.ideaxidea.com/archives/2011/04/where_to_learn_enchant_js.html
http://www.ideaxidea.com/archives/2011/04/enchant_rgb_undocumented.html

また、MonacaはPhoneGapが組み込まれているため、加速度センサーやカメラも組み合わせてゲームを作ることも可能になります。
どんな機能が使えるかは下記のPhoneGapリファレンスを参照ください。
http://phonegap-fan.com/docs/index.html

デバッグって・・・

Monacaデバッグしづれえよ！！という方は、とりあえずjsdo.it等でコーディングを行い、完成後に移植するという形も可能です。
enchant.js+PhoneGapの機能を使わないもの限定になりますが。。　Monacaチームがんばれっ！
http://jsdo.it/
enchant.jsを使ったゲームも多数アップされてるので参考になりますよ！