ランゲーの作り方④ 行く手を阻む障害物を設置する【enchant.js】

第1回:ランゲーの作り方① まずは準備
前回:ランゲーの作り方③ ジャンプさせる

前回ジャンプを作ったので今回はジャンプでかわす障害物を作っていきましょう(・∀・)

今回の完成目標はこちらです

障害物の画像を用意する

では今回はこんな感じで64×64サイズで画像を用意します。

障害物

あ、背景が白くて見えないですが白いトゲがあります(^^;)当たったら死ぬ感じの奴です。

で、画像を読み込むようにASSETSに書き加えます

img_gameover:'img/gameover.png',
img_bg:'img/bg.png',
img_obstacle: 'img/obstacle.png',//これ

障害物は英語でobstacleらしいのでこの名前にしました

障害物クラスを用意する

とりあえず障害物のクラスを用意します。プレイヤークラスを作った時と同様にSpriteクラスを継承して作ります。

var Obstacle = enchant.Class.create(enchant.Sprite, {
    initialize: function(w, h){
        enchant.Sprite.call(this, w, h);
    },
});

で、MainGameScene内のプレイヤークラス生成の前にクラスの生成を行います。

//敵クラス
var obstacle = new Obstacle(64, 64);
obstacle.image = core.assets['img_obstacle'];
obstacle.moveTo(600, GROUND_Y);
screen.addChild(obstacle);

表示位置なんですが、プレイヤーの邪魔にならなければ意味がないのでプレイヤーキャラクターの前に来るように

obstacle.moveTo(600, GROUND_Y);

という感じで配置してみます。

するとですね、

こんな感じに宙に浮いて表示されてしまいます。なんででしょうか?

これはGROUND_Yの指定が間違っているんですね。前回GROUND_Yの値を指定したとき自機が地面の上に乗る丁度いい位置を指定しましたが、これは自機の画像の左上の位置を指しているんですね。

player.yは画像の左上の位置を指すので自機が地面に当たっているかどうかはplayer.yにplayer.height(高さ)を足して判断する必要があります。ってことで修正をします。

var GROUND_Y = 493;//365+128
jump: function(){
    if(this.isJump){//ジャンプ中なら
        this.y += this.vy++;
        if(this.y > GROUND_Y - this.height){
            this.y = GROUND_Y - this.height;
            this.isJump = false;
            this.frame = 0;
        }
    }
},
obstacle.moveTo(600, GROUND_Y - obstacle.height);
player.moveTo(100, GROUND_Y - player.height);

GROUND_Yの位置を実際に画像が地面になっている位置にします(前回365だったのでそこに自機の高さ128を足した値。私が適当に書いた絵なので変な位置になっている(^^;))。

で、ジャンプの判定位置は初期位置はそれぞれのキャラクターの高さ分引いて合わせています。これで大きさの違うキャラクターを出しても正しく地面の上に乗るように表示させることができます。

障害物を画面スクロールに合わせて移動させる

障害物を表示させても止まったままじゃゲームにならないので移動させましょう。で、移動させるなら背景のスクロールに合わせて動かしてみましょう。

確か背景の移動スピードが2だったと思うので障害物も同様に2だけ動かします。なのでとりあえず障害物クラスにmoveメソッドを作ります。

move: function(){
    this.x -= 2;
}

でこれをMainGameSceneの背景の移動処理の下に書きます。

bg.x -= 2;
bg2.x -= 2;
if(bg2.x < 0){
    bg.x = 0;
    bg2.x = GAME_SCREEN_WIDTH;
}
obstacle.move();//ここ
player.jump();

これで実行すると障害物が右から左に移動してきます。

移動スピードを修正したい

さてさて、移動できるようになったのは良いんだけど、どうやら移動量が2だとかなり遅いようですね(^^;)なのでスピードアップをさせましょう。

しかし、そうすると修正箇所が複数出てきますね。こういうところはどうしましたっけ?

そう!変数で管理するんですよね!(・∀・)そうするとその変数だけ修正すれば済みます。というわけで変数に変えて変更しましょう。

var SCROLL_SPEED = 8;

こんな感じで変数を用意してあとは必要な個所を修正してください(背景の移動と障害物の移動のところね)。

さて、ここで細かい話なんですが移動スピードが速くなると自機のアニメーションがなんだか遅い気がしませんか?せっかくなのでここも直しておきましょう。Playerクラスのonenterframeメソッド内の条件式を

if(this.age % 3 == 0){

と変えてやればアニメーションのスピードが速くなります。

これで移動が速くなったのはいいけれど、障害物が一回画面を横切ったらもう何もないですね(´Д`)これじゃゲームにならんですね

障害物の出現管理

というわけで次は障害物が画面の左端で消えてしまったらもう一回右から出してやりましょう。

move: function(){
    this.x -= SCROLL_SPEED;
    if(this.x + this.width < 0){
        this.x = GAME_SCREEN_WIDTH;
    }
}

こんな感じにしてやると左端で消えたらまた右から出てきます。

ただ、これだとずっと同じことを繰り返してるだけでつまらないので出てくる高さを変えてみましょう。

move: function(){
    this.x -= SCROLL_SPEED;
    if(this.x + this.width < 0){
        this.x = GAME_SCREEN_WIDTH;
        this.y = GROUND_Y - random(1, 3) * this.height ;//ここ追加
    }
}

追加した式のrandomは私が作った関数で引数に指定した(最低の数、最高の数)の範囲内でランダムに数字を出してくれます(気になる人はinwan.jsを見てみてね)。

で、この処理では1、2、3の3段階の高さをランダムで出すようにしました。ランダムで出た数にキャラの高さをかけ、それをGROUND_Yから引いた位置に表示させています。

0からでないのは0だと障害物が地面に埋まる位置になってしまうからです。少なくとも障害物の高さ分地面より上にしなければいけないので最低の数が1になっています。

まとめ

とりあえず障害物が表示されるようになりましたね(*´ω`)しかし、今のところ障害物に当たっても何も起こりませんね(´Д`)

ってことで次回はいよいよゲームにとってとても重要な当たり判定をやってみようかと思います(・∀・)
次回:ランゲーの作り方⑤ 当たり判定をつける

同カテゴリー記事

当サイトのオリジナルゲーム(ランダム表示)

空いている一つのマスを利用して並び替えるパズルゲーム。
餌を全部食べて巣に帰るゲーム。食べる順番が大事。全10ステージ。
enchant.jsでこんなのもできるのか?と試したテストゲーム。
同じ色で複数くっついているタイルをタッチすると消すことができます。一度にたくさん消すと...

記事の感想・コメント

※コメントはまだありません※

コメントを残す

メールアドレスが公開されることはありません。

ゲームジャンルタグ

新着技術ブログ記事

新着開発日記