キャラ位置を変える | Game Programming Begin

(ゲームイメージ)

別窓表示

キャラの位置を変える

「キャラを変える」では、「絵を出してみる」で見たことがあるコードを思い出しながらサンプルコードに変更を加えてみました。今度は同じサンプルコード内で見比べながら改造してみようと思います。

キャラのグラフィックを変えた次はキャラの動きを変えてみたいと思います。目標とするゲームは、画面右側がプレイキャラで画面左から敵が迫ってきますが、この動きはサンプルコードと左右逆になってしまっています。

まずはじっくり現時点のコードとゲーム実行の画面を眺めてみます。

今から変えていきたいところは、

プレイキャラ
敵キャラ
武器であるリンゴの部分

になります。（リンゴは敢えて変えなくてもいいかもしれませんが）ですので主にこの部分を比較してみます。

プレイキャラクター）

var Player = enchant.Class.create(enchant.Sprite, {
    initialize: function(){
        enchant.Sprite.call(this, 32, 32);
        this.image = game.assets['chara7.png'];
        this.frame = 10;                   // set image data
        game.rootScene.addChild(this);     // add to canvas
    }
});

敵）

var Enemy = enchant.Class.create(enchant.Sprite, {
    initialize: function(){
        enchant.Sprite.call(this, 32, 32);
        this.image = game.assets['chara6.png']; // set image
        this.moveTo(320, Math.floor(Math.random() * 320)); // set position
        this.scaleX = -1;
        this.tl.moveBy(-360, 0, 160);      // set movement
        this.frame = 9;                   // set image data
        game.rootScene.addChild(this);     // canvas
    }
});

りんご）

var Apple = enchant.Class.create(enchant.Sprite, {
    initialize: function(){
        enchant.Sprite.call(this, 16, 16);
        this.image = game.assets['icon0.png']; // set image
        this.moveTo(16, player.y + 8);       // move to the position
        this.tl.moveBy(320, 0, 30);        // set movement
        this.frame = 15;                   // set image data
        game.rootScene.addChild(this);     // add to canvas
    }
});

プレイキャラと敵・りんごとの違いは「動き」です。後者二つは画面の右（左）から逆サイドへ移動していきます。この特徴に注目して上記のコードを見比べると、違いが見えてきます。具体的にはこの2つの部分がプレイキャラにはありません。

this.moveTo
this.tl.moveBy

ということは、恐らくこの2つが動きを表しているのでしょう。ここで確認のために、グーグル先生や書籍の索引の出番です。検索サイトなら、moveToやmoveByをenchant.jsというキーワードとともにお問い合わせしてみましょう。書籍なら「moveXXX」や「アニメーション」のあたりに載ってそうです。

グーグル先生のご回答例）

予想が当たってそうでしたね（☞はい）。よかったよかった。

わからない間は斜め読みで流しましょう。なにやらmoveToやmoveByの括弧の中の値は走ってくる起点・終点・速度を設定するものらしいとか。それで、敵キャラとリンゴで値が違うのか…という程度が見えてこれば今は十分です。

ここまで見えてきたので、実際に変更作業をしてみます。

プレイキャラを右に

もともと画面の左上（x座標、y座標ともに0。デフォルト）に出ていたのを、右上にします。とりあえずy座標はいいとして、x座標だけ。画面の大きさが320、キャラが32なので、単純計算でいくと、x座標は288の位置がいいでしょうか。表示位置を変えるのは、確かSpriteのx座標の値を変更するのでしたね。デフォルトの位置が0なのでサンプルでは記載がありませんでしたが、今回はデフォルト値を使わないので、新たに書き足します。

var Player = enchant.Class.create(enchant.Sprite, {
    initialize: function(){
        enchant.Sprite.call(this, 32, 32);
        this.image = game.assets['chara7.png'];
        this.x = 288;// add:右側に表示。320-32の位置
        this.frame = 10;                   // set image data
        game.rootScene.addChild(this);     // add to canvas
    }
});

敵キャラの走る向きを左から右に

さっきの調べによると、moveXXXというのがポイントになっているようです。というわけで、変えてみます。

ここでまた見たことないものがあります。「Math.floor(Math.random() * 320)」。random…ランダム…。言葉から何となく推測してみましょう。今回のゲームの敵は、敵ごとに表示されるy座標が違います。しかも法則性なくバラバラに。括弧の中も、y座標の値を決める位置ですし、おそらくこれがランダムな値を発生させているのでしょう。

という程度にしておいて。今回この値は変えないのでこれ以上深くは話しません。

変更した後のEnemyのあたりはこういう感じです。変更前の状態も確認できるように変更前はコメントアウトしています。

var Enemy = enchant.Class.create(enchant.Sprite, {
    initialize: function(){
        enchant.Sprite.call(this, 32, 32);
        this.image = game.assets['chara6.png']; // set image
//            this.moveTo(320, Math.floor(Math.random() * 320)); // set position
        this.moveTo(0, Math.floor(Math.random() * 320)); // 変更
        this.scaleX = -1;
//            this.tl.moveBy(-360, 0, 160);      // set movement
        this.tl.moveBy(360, 0, 160);      // 変更
        this.frame = 9;                   // set image data
        game.rootScene.addChild(this);     // canvas
    }
});

リンゴの飛んでいく向きも変える

味方・敵のみを位置変えした状態では、迫ってくる敵を背後から飛んでくるリンゴで撃ち落とす、ややシュールなゲームになっています。

これはこれで面白いのですが、せっかくなのでリンゴの飛び方も変えておきましょう。moveToのyの値がplayer + 8 となっているのは、playerのyそのままだとオーバースローっぽくなるので調整しているのだと思います。好みで「player.y + 30」「player.y - 10」など極端な値をいれてみると面白いかもしれませんが、ここではそのままにしています。

// make new class for apple
var Apple = enchant.Class.create(enchant.Sprite, {
    initialize: function(){
        enchant.Sprite.call(this, 16, 16);
        this.image = game.assets['icon0.png']; // set image
//            this.moveTo(16, player.y + 8);       // move to the position
        this.moveTo(300 , player.y +  8);       // 変更
//            this.tl.moveBy(320, 0, 30);        // set movement
        this.tl.moveBy(-320, 0, 30);        // 変更
        this.frame = 15;                   // set image data
        game.rootScene.addChild(this);     // add to canvas
    }
});