ランゲーの作り方②　キャラクターと背景の表示【enchant.js】

前回：ランゲーの作り方①　まずは準備

今回はキャラクターと背景の画像を表示させます。サンプルとしてはこんな感じになります。

ここからはenchant.jsの基本的な説明はけっこう割愛しています。enchant.jsの基本的な説明は色んなサイトでされているのでその辺はググって勉強してください(^^;)その辺の説明まですると膨大な量になってしまうので。。

キャラクターの画像を用意する

まずはプレイヤーキャラクターを表示させてみましょう。私はこの画像を使います。

ご自分で用意したい方は128×128の大きさでキャラクターを描くかプログラム内の大きさを用意した画像のキャラクターの大きさに変更してください。また、自身で用意された画像だとアニメーション処理時でも修正が必要になると思うのでご注意ください。

画像はplayer.pngで保存してimgフォルダに入れるか、別名の場合はASSETSオブジェクトのファイル名を変更してください。

それから毎回タイトル画面から始まると面倒臭いので、window.onload内にあるsystem.changeSceneの引数を以下のように変更します。

system.changeScene(SCENE_MAINGAME);

こうすると常にゲーム画面から始まってくれます。

プレイヤークラスを作る

プレイヤークラスはSpriteクラスを継承して使います。継承というのは元となるクラスの機能を引き継いで新しいクラスを生成することを言います。初心者の方はちょっとわからないかもしれませんが、とりあえず継承という便利なものがある、とだけ覚えておいてください。

var Player = enchant.Class.create(enchant.Sprite, {
    initialize: function(w, h){
        enchant.Sprite.call(this, w, h);
        //ここに必要な処理を描く
    }
});

enchant.jsのクラスの継承はこのような感じに書きます。今回はSpriteを継承していますが他のクラスを継承する場合はSpriteのところを変更すればＯＫです。

そして、MainGameScene内の

var player = new Sprite(64, 64);

を

var player = new Player(128, 128);

に変更します。とりあえずこれでプレイヤークラスが出来ました。

プレイヤーをアニメーションさせる

次はプレイヤーをアニメーションさせます。

キャラクターをアニメーションさせるにはSpriteクラスにあるframeプロパティを変更することでアニメーションしているように見せることができます。frameについてはググってもらうとすぐ出てくると思うので割愛します( *´艸｀)

Playerクラスに下のようにonenterframeというメソッドを付け加えます。

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

そうして実行するとパラパラ漫画のようにプレイヤーの画像が切り替わって見えると思います。ただこれだと速すぎるのと画像が全部繰り返されてしまうのでよくありません。なので以下のように変更します。

var Player = enchant.Class.create(enchant.Sprite, {
    initialize: function(w, h){
        enchant.Sprite.call(this, w, h);
        this.walkPattern = [0, 1, 2, 1];
        this.walkIndex = 0;
    },
    onenterframe: function(){
        if(this.age % 5 == 0){
            if(++this.walkIndex >= this.walkPattern.length){
                this.walkIndex = 0;
            }
            this.frame = this.walkPattern[this.walkIndex];
        }
    }
});

this.ageはSpriteにあるクラスが生成させた時からの経過フレーム数が入っているプロパティです。%は除算の余りを出す演算子です。つまり経過フレーム数を５で割った余りが0の時、要するに5フレームに1回だけアニメーションさせるようにします。

あと歩いている画像が3枚しかないため0→1→2→0ではアニメーションがおかしくなるため今回は配列でアニメーションのフレームを管理するようにしました。これで自然に歩いているように見えると思います。

背景を表示する

次は背景を表示させてみましょう。こんな感じの画像を640×900のサイズで用意してください。これをbg.pngの名前で保存してimgフォルダに入れてください。

そしてASSETSオブジェクトにこのように追加してください。

img_bg:'img/bg.png',

MainGameScene内の自機クラス生成の前に以下を記述してください。

//背景を表示
var bg = new Sprite(GAME_SCREEN_WIDTH, GAME_SCREEN_HEIGHT);
bg.image = core.assets['img_bg'];
screen.addChild(bg);

これで背景が表示されます。背景が表示されるとなんとなく雰囲気が出てゲームらしくなってきた感じがあって嬉しいですね( *´艸｀)

背景を動かしてみる

今回背景の移動はMainGameSceneのループ処理内に書いてみます。

//メインゲームシーンのループ処理------------------------------------
this.addEventListener('enterframe', function(){
    //bgm.loop();//BGMループ再生
    if(timer.isTimeUp){//タイムアップ
        //bgm.stop();
        var gameover = new GameoverScene(this);//ゲームオーバーシーンへ
        removeChildren(this);//シーンの子要素を削除
        return;
    }
    bg.x -= 2;//背景の座標を動かす
    label_score.text = ('00000000' + system.score).slice(-8);//得点表示
});

bg.xが背景のｘ座標で、それをループ処理内で毎回2ずつ引いています。こうすることで画像が左にずれていきます。しかしそうすると画面の右側がどんどん空いてきてしまいます。

なのでもう一つ背景画像を用意します。

var bg2 = new Sprite(GAME_SCREEN_WIDTH, GAME_SCREEN_HEIGHT);
bg2.image = core.assets['img_bg'];
bg2.moveTo(GAME_SCREEN_WIDTH, 0);//画面右側に配置
screen.addChild(bg2);

bg2という名前でbgと同様に作成しますが、配置をbgの右側にします。

そしてメインループ内に同様に座標移動処理を書きます。

bg.x -= 2;
bg2.x -= 2;

これでさっきよりはマシになりましたがしばらくするとやっぱり右側が空いてきてしまいます。なので二つ目の画像の左端が画面の左端まで来たときに画像を最初の位置に戻してやります。

bg.x -= 2;
bg2.x -= 2;
if(bg2.x < 0){
    bg.x = 0;
    bg2.x = GAME_SCREEN_WIDTH;
}

これで背景がずっと動き続けているように見せることができます(・∀・)

とりあえずこれでキャラクターが歩いているような雰囲気が出てきましたね！今回までのプログラムはこちらで確認できます→チェックする

次回はキャラクターの操作に挑戦してみましょう！

次回：ランゲーの作り方③　キャラクターをジャンプさせる

☆私が本気で作ったランゲーも見てみてね！(pixi.js製)