2015/12/23

Cordovaとenchantjsでクマ軍団ゲーム作成

Cordova環境のセットアップ

 Cordovaの開発環境は、以下のとおりに進めれば構築出来ました。
 一部問題はUbuntu14.04の環境の標準nodeはCordovaの導入は出来ませんでした。
 以下の記事どおりnodeサイトより進めていけば大丈夫です。

 Android SDKにはJDKも必要ですから、そちらも導入しましょう。

環境変数設定

 環境変数の設定は「~/.bash_profile」にする記載がありますが、Ubuntu14.04では、次の３つのどれかで行います。
~/.profile
/etc/profile
/etc/bash.bashrc
/etc/profile.d/*.sh
 まあふつうに考えると、~/.profileへの設定でしょう。
 次のように設定を行います。
export ANDROID_HOME=/opt/android-sdk-linux
export JAVA_HOME=/opt/jdk1.7.0_79
export PATH=$PATH:$ANDROID_HOME/tools:/opt/android-studio/bin:$JAVA_HOME/bin
export PATH=$PATH:/opt/node-v5.1.1-linux-x64/bin:$HOME/.linuxbrew/bin

作ってみましょう

 環境ができたら、作ってみましょう。
 CordovaはJSで作成できるわけですから、JSの2Dゲームフレームワークなんかも使えてしまいます。
 enchantjsを使ってみました。
 といっても「enchant.js」を Cordovaプロジェクトのwww/jsフォルダに入れるだけなので、簡単です。

cordovaプロジェクトを作りましょう

 次のコマンドで、カレントフォルダにworkshopフォルダを作成し、そこにcordovaプロジェクトを生成します。
cordova create workshop
 フォルダが生成されたら、そこにカレントフォルダを移します。
cd workshop
 動作プラットフォームを指定します。androidやiosが指定できますが、今回はUbuntuでの開発のため、androidのみとします。(iosはXcodeを必要とするため、Macでしか開発できません。)
cordova platform add android

enchantjsを導入しよう

 enchantjsからダウンロードしたファイルを解凍し、取り出したenchant.jsを以下フォルダにコピーします。
cp -p enchant.js www/js
 次に、ゲームキャラになるenchantjsにもともと付いている「クマ」の画像もコピーしておきます。
cp -p chara1.png www
 こちらはサブフォルダを切っても良かったのですが、とりあえずindex.htmlと同じ場所への展開としました。

音を鳴らせるようにMediaプラグインを導入します

 ゲームですから、音が鳴らせるようにしましょう。
 cordovaコマンドでmediaプラグインを導入します。
cordova plugin add org.apache.cordova.media
 とりあえず、きちんと入ったか確認します。
cordova plugin ls
 正常動作していれば次の表示となるはずです。
cordova-plugin-console 1.0.2 "Console"
cordova-plugin-device 1.1.0 "Device"
cordova-plugin-file 3.0.0 "File"
cordova-plugin-media 1.0.1 "Media"
cordova-plugin-whitelist 1.2.0 "Whitelist"

ここまでできたらプログラムを打ち込みます

 cordovaは基本web構造なので、index.htmlが最初に読み込まれます。
 そちらに必要なjsを読み込ませ動作させます。
 とりあえず、main.jsでプログラムを定義してみたサンプルが以下のものです。
 効果音として「s-burst01.mp3」(タッチ時の音)、「darkknight.mp3」（BGM）を使用しています。
 音はこちらMusic is VFRフリー素材 Music-note jpのものを使わせてもらいました。
 サンプルと異なる音源を使う場合、プログラム修正するかファイル名変更を行うかいずれかの方法で関連性を持たせれば問題ありません。
FileName:www/index.html
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0">
</style>
</head>
<body>
<style type="text/css">
body{
  margin:0;
  padding:0;
}
</style>
    <script type="text/javascript" src="cordova.js"></script>
    <script type="text/javascript" src="js/enchant.js"></script>
    <script type="text/javascript" src="js/main.js"></script>
</body>
</html>
FileName:www/js/main.js
enchant();
function getPath(){
    var str = location.pathname;
    var i = str.lastIndexOf('/');
    return str.substring(0,i+1);
}

function mediaError(e) {
}
function onSuccess(){
}

window.onload = function(){
 var core = new Core(window.parent.innerWidth,window.innerHeight);
 core.preload(['chara1.png']);
 core.fps = 15;
 var maxcount = 10;
        var audioHit1 = null;
        var audioBG = null;
 document.addEventListener("deviceready",
 function(){
        try{
          audioHit1 = new Media( getPath() + "s-burst01.mp3",onSuccess,mediaError);
   audioBG = new Media( getPath() + "darkknight.mp3",onSuccess,mediaError);
   audioBG.play({numberOfLoops:"infinite"});
        }catch(e){
          window.alert("Media:"+e);
        }
        }
 ,false);
     core.onload = function(){
  var Bear = Class.create(Sprite,{

   initialize:function(x,y){
    Sprite.call(this,32,32);
    this.vscale = 2;
    this.speed = 5;
    this.ss = 1 + this.vscale;
    this.x = x;
    this.y = y;
    this.image = core.assets['chara1.png'];
    this.image.frame = [0,1];
    this.scale(1,1);
    this.rotation = Math.random()*360 ;//* Math.PI/180;
           this.fc = -1;
    core.rootScene.addChild(this);
    maxcount --;
   },
   onenterframe:function(){
    var s = 1;
           this.fc ++;
                                if (this.fc > 3){
        this.fc=0;
    }
           this.frame = this.fc;
    
    if( parseInt(Math.random() * 10) == 5 ){
     if (maxcount >0 ) new Bear(Math.random()*100,Math.random()*100);
    }
    
    this.x += Math.cos(this.rotation * Math.PI / 180 ) * this.speed;
    this.y += Math.sin(this.rotation * Math.PI / 180 ) * this.speed;
    if (this.x >= core.width || this.x <= 0 || this.y >= core.height || this.y <= 0 ){
     this.rotation = Math.random()*360 ;//* Math.PI/180;
    }

   },
   ontouchend:function(){
           audioHit1.stop();                              
           audioHit1.play();
    if (this.scaleX > 50){
     core.rootScene.removeChild(this);
     maxcount ++;
    }
    this.scale(this.ss,this.ss);
   },
  });

  var bear = new Bear(50,50);

 } 
 core.start();
};
Filename:platforms/android/AndroidManifest.xml
     :                   :
    <uses-permission android:name="android.permission.WRITE_EXTERNAL_STORAGE" />
    <uses-permission android:name="android.permission.RECORD_AUDIO" />
    <uses-permission android:name="android.permission.MODIFY_AUDIO_SETTINGS" />
    <uses-permission android:name="android.permission.READ_PHONE_STATE" />
     :                   :
</manifest>

さっそく実機でテスト

 動作環境はjsなのですからブラウザ上でも確かめられますが、やっぱり実機でやってみたいものです。
 androidスマホをUSBデバックモードをONにした状態で、USBにてパソコンと接続します。
 USBデバックモードをONにする方法は、こちらに記事がありました。
 ONにしましたら、USBケーブルでパソコンと接続します。
 接続したら次のコマンドにて実機に転送して動作させます。
cordova run android
 少々画質が悪いですが、以下が動作結果です。

 どうでしょう。結構簡単にゲームっぽいものが作れたとおもいます。
 みなさんも頑張って見られてはどうでしょう？

0 コメント:

コメントを投稿