こんばんは、脇保です。
今回は、久しぶりに、enchant.jsに触れてみました。
ブログ内では初ですが、4年程前にenchant.jsをいじったことがあり。
因みに、その作品というのがこちら。
http://9leap.net/games/1527
その懐かしさから、久しぶりにゲームでも作ろうかと。
その前に、「enchant.js」とは何？？
で、作ったゲームを、この９Leapってところに投稿できます。
http://9leap.net/
因みに、「enchant.js」は、JavaScriptで記述されています。
ほかにも、HTML5や、CSS3をふんだんに使っています。
資料やサンプル、様々なブログ等で扱われているので、
サンプルには困らないと思います。
また、実際問題、JavaScriptを簡単に記述できると思います。
（特に、プログラム初心者には。）
さて、話は戻って・・・。
ゲームエンジンですので、まずは本体となるライブラリが必要です。
公式サイトhttp://enchantjs.com/ja/から、
「Dwonload」をクリックして、「enchant.js」をゲットします。
ダウンロードしたら、解凍し、
「enchant.js-builds-「バージョン番号」examplesbeginnerhellobear」
と、辿っていきます。
今回は、感覚慣らしも含めて、「hellobear」という、
一番簡単なサンプルに手を付けます。
で、「index.html」を実行します。
index.htmlを開くと、しろくまが、左から右へ、歩いて消えていったと思います。
これに、色んなモーションを付けて行きます。
さて、お次は編集用エディタ。
エディタは人それぞれお好きなものを。
私、脇保は自作エディタを使ってたりしますが、
が、本格的に何かするときは、やっぱりエディタは必要です。
そんな時は取り合えず、MicroSoft Visual Studio Codeを使ってます。
https://www.microsoft.com/ja-jp/dev/products/code-vs.aspx
Mac、Windows、Linuxでも動くので、まぁ、便利です。
もっとも、Linuxでは、geditが好みだったりしますが。
エディタは、本当にいろんな種類があるので、探してググってみると、
いいと思います。
例えば、サクラエディタとか、有料だけどWebStormだとか。
少々重たいけど、javaで有名な「ecripse」も、
JavaScriptに対応したのが、あった筈。
Linuxだと、Vimとか、そこら辺が有名だったりしますね。
私は使いこなせませんが・・・。
（いや、gedit・・・（マテ））
さて、本題。お好みのエディタが見つかったら、
早速、エディタに慣れながら、コードを開いていきます。
開くのは、「index.html」と、「main_nocomment.js」、「main.js」、
計３つです。
「main.js」は、コメントが豊富にあるので、理解がしやすいです。
これを参考にしながら、
「main_nocomment.js」は、その名の通りコメントなしバージョン。
こちらを編集します。
編集した結果は以下になります。
やった事は、
・開始時、ランダムな箇所に出現させる。
・ダッシュの際の加速具合を付けた
・往復させる
・往復したらキャラを反転させる
・壁にぶつかったら、泣く
・ある程度走ったら、疲れて止まる
・疲れそうになったら減速しだす
です。
これで、キャラ移動の基本は（物凄い粗削りだけど）出来たと思う。
あと、省略とか、短縮しないて、業とかなり長めのコードにしました。
他、技術不足で長くなった箇所もあるかと思いますが・・・。
何分、久しぶりなので、すいませんです、ハイ。
時間があったらこれをクラス化して、
敵キャラとか、自キャラとかに、流用できるようにします。
以下のコードが、サンプルに手を食わえたものになります。
これを、「main_ouhuku.js」と命名して、同自フォルダに保存します。
それに合わせて、HTMLもいじります。下参照。
この2ファイルを編集し、解凍し、上で指定した、
フォーカスがあるフォルダに保存し、「index.html」を実行すれば、
ユーモラスなくまさんがちょこまかと往復して走っていると思います。
参考にしたサイト
[enchant.js]往復移動処理(キャラクターの画像反転)
http://d.hatena.ne.jp/nakamura001/20110503/1304432316
JavaScriptでランダムの数(乱数)を作る方法
https://syncer.jp/javascript-reverse-reference/create-random-number
それでは。
以下、ソース。
//main_ouhuku.js
enchant();
window.onload = function(){
kabe = 320;//追加
//var game = new Core(320, 320); //コメントアウト
var game = new Core(kabe, kabe); //追加
game.fps = 15;
game.preload(“chara1.png”);
game.onload = function(){
var bear = new Sprite(32, 32);
var speed = 1; //追加 加速度変数
var mothion = true; //追加 モーション管理変数
var moving_x = true; //追加 移動向き管理変数
var itai_flg = false;//追加 壁にぶつかった？痛いよ変数
var itai_timer = 0; //追加 壁にぶつかって泣いている時間
var tukareta_timer = 0; //追加 疲れるまでの時間をカウント
var tukareta = 60; //追加 疲れた変数。この値に達すると疲れる
var kaihuku = 70; //追加 回復変数。この値に達すると走り出す
var tukaresou = 8; //追加 疲れそうな雰囲気を示す値
var kuma_stop = 5; //追加 止まっているくま
var kuma_run = 6; //追加 走るくま
var kuma_itai = 8; //追加 泣いているくま
bear.image = game.assets[“chara1.png”];
//bear.x = 0; //コメントアウト
//bear.y = 0; //コメントアウト
//bear.frame = 5; //コメントアウト
bear.x = Math.floor( Math.random() * kabe ) +1; //追加
bear.y = Math.floor( Math.random() * kabe ) +1; //追加
bear.frame = kuma_stop; //追加
game.rootScene.addChild(bear);
bear.addEventListener(“enterframe”, function(){
//this.x += 1; //コメントアウト
//ここから
tukareta_timer++; //疲れるたタイマーをカウント
//壁にぶつかってない 又は 疲れてない 状態の時に運動動作
if ( ( itai_flg == false ) || ( tukareta_timer <= tukareta ) ) {
//TrueとForseを繰り返し、値（mothion）に０と１を交互に入れる
if ( mothion == true ) {
mothion = false;
} else {
mothion = true;
};
};
//疲れそうになったら減速
if ( tukareta_timer >= tukareta -tukaresou ) {
if ( moving_x == true ) {
speed += -1;
} else {
speed += 1;
}
};
//疲れたら回復するまで停止
if ( ( tukareta_timer >= tukareta ) && (tukareta_timer <= kaihuku ) ) {
this.x = this.x;
bear.frame = kuma_stop;
} else {
if ( tukareta_timer >= tukareta ) {
tukareta_timer = 0;
speed = 0;
}
this.x += speed;
this.frame = kuma_run + mothion;
};
//壁にぶつかったら泣きながら方向転換
if ( this.x > kabe ) {
bear.x = kabe -5;
speed = 0;
moving_x = false;
this.scaleX *= -1;
itai_flg = true;
itai_timer = 1;
} else if ( this.x < 0 ) {
bear.x = 5;
speed = 0;
moving_x = true;
this.scaleX *= -1;
itai_flg = true;
itai_timer = 1;
};
//移動する方向を管理
if ( moving_x == true ) {
speed++;
this.x = this.x + speed;
} else {
speed–;
};
//痛いとなったら、泣き止むまで泣き続ける。
if ( ( itai_flg == true ) && ( itai_timer > 0 ) && ( itai_timer < 10 ) ) {
itai_timer++;
this.frame = kuma_itai;
} else {
itai_timer = 0;
itai_flg == false;
};
//ここまで追加
//this.frame = this.age % 2 + 6; //コメントアウト
});
bear.addEventListener(“touchstart”, function(){
game.rootScene.removeChild(bear);
});
};
game.start();
};