Asial Blog

Recruit! Asialで一緒に働きませんか?

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

カテゴリ :
Monaca
タグ :
Tech
enchant.js
Monaca
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
  1. <!DOCTYPE HTML>
  2. <html>
  3.     <head>    
  4.         <meta name="viewport" content="initial-scale = 1, user-scalable=no">
  5.         <meta charset="utf-8">
  6.         <title>RPG sample on Monaca</title>
  7.         <script type="text/javascript" src="enchant.js"></script>
  8.         <script type="text/javascript" src="ui.enchant.js"></script>
  9.         <script type="text/javascript" src="game.js"></script>
  10.         <style type="text/css">
  11.             body {
  12.                 margin: 0;
  13.             }
  14.         </style>
  15.         <script type="text/javascript" charset="utf-8" src="plugins/plugin-loader.js"></script>
  16.         <script type="text/javascript">
  17.     monaca.viewport({width : 320});
  18.         </script>
  19.     </head>
  20.     <body data-role="page"></body>
  21. </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を使ったゲームも多数アップされてるので参考になりますよ!

コメント

  • sofu

    はじめまして。
    Monacaを使用させていただいているのですが、Androidではネットワークインストールのボタンが出ないのですが、何かやり方が間違ってるのでしょうか?

  • monacaの人

    sofu様

    Monacaをご利用いただき、ありがとうございます。

    > Androidではネットワークインストールのボタンが出ない

    とのことですが、端末にインストールされているデバッガは最新のものでしょうか?
    もしも古いバージョンのものでしたら、最新版に更新していただければと思います。

  • sofu

    デバッガのバージョンは0.1.2で、端末はGALAXY S(Android2.3)です。
    デバッガは下記ページからダウンロードしました。
    http://docs.monaca.mobi/manual/debugger/install_android/

    デバッガのメニュー項目は
    ・Preview
    ・HTML
    ・Debug Log
    ・Reboot
    ・Close
    の5つだけです。Rebootをしても、項目は変わりませんでした。

  • monacaの人

    sofu様

    ご確認いただきありがとうございます。

    大変申し訳ありません、確認したところ
    http://docs.monaca.mobi/manual/debugger/install_android/
    のページのデバッガが最新版に更新されておりませんでした。

    先ほど最新版に更新いたしましたので、お手数ですが、再度こちらから更新してご確認いただければと思います。

    ご不便をおかけして申し訳ありませんでした。

  • sofu

    最新版に更新したら、インストールできました。
    早急に対応していただきありがとうございます。
    Monacaはかなり便利なので、これからの発展に期待&応援しています!

  • ネットワークインストール

    デバッガーのバージョンが0.2.5で、端末はLEGZA(Android 2.1)です。
    ネットワークインストールが出来るようになったら、突然レイアウトがWebサイトのようになってしまったのですが、phonegapのファイルが使えなくなってしまったということでしょうか?
    元々のファイルは何も変更していないので、原因が全く分かりません。
    ご返信よろしくお願いします。

  • monacaの人

    ネットワークインストール様

    Monacaをご利用いただき、ありがとうございます。

    現在の状況を詳しく調査したいので、もしよろしければMonacaのフィードバック画面から詳細を教えていただけませんでしょうか。

    お手数をおかけいたしますが、よろしくお願いいたします。

  • ネットワークインストール

    返信が大変遅れて申し訳ありません。
    ご返信ありがとうございます。
    フィードバックにて少し質問内容が変わってしまっているのですが、詳細をお送りしました。
    ご確認宜しくお願い致します。

  • kaminaga

    もし教えていただければよろしくお願いいたします。

    本記事を参考に、
    enchant.js v0.6.2 /examples/expert/action
    の Monaca 開発にトライしています。
    このアプリケーションでは、
    <script type="text/javascript" src="../../../plugins/nineleap.enchant.js"></script>

    <script type="text/javascript" src="../../../plugins/ui.enchant.js"></script>
    の記述の通り、プラグインを利用するようなのですが、
    Monaca では、外部のプラグインをインストールできませんね。
    このケースでは、どのような対策を行えばよいでしょうか。

  • Monacaサポート

    kaminaga様

    コメントありがとうございます。
    アシアルのMonacaサポート担当でございます。

    enchant.jsをダウンロードしていただき
    <script> タグのsrcでenchant.jsをインストールしていただくと
    enchant.jsを利用することができます。対策は不要でございます。

    Monacaへのお問い合わせをこちらの以下のメールアドレスで承っております。
    このコメントへの返信はお手数ですが、こちらへいただけますでしょうか。

    info@monaca.mobi

    何卒よろしくお願い申し上げます。

  • kaminaga

    <script> タグの src への記述では、
    実行時にエラーとなってしまったため、
    Monaca の plugin ディレクトリに入れておくのが仕様なのかな
    とおもった次第です。
    そうではないようなので Monaca 対応のコードの問題ですね。
    ありがとうございました。
     

コメントフォーム



captcha_key

アシアルの会社情報

アシアル株式会社はPHP、HTML5、JavaScriptに特化したWebエンジニアリング企業です。ユーザーエクスペリエンス設計から大規模システム構築まで、アシアルメンバーが各々の専門性を通じてインターネットの進化に貢献します。

会社情報詳細

最近の記事