TOPページに戻ります

■物理actionチュートリアル■
--
製作系blogはコッチ
--


 ■このゲームの目標
 ・enchant.jsとbox2dを使って、横スクロールアクションゲームを作る
 ・スタート地点から前進してゴールに辿り着くだけのゲーム
 ・背景は、box2dスプライトで並べる
 ・playerは、box2dスプライトで制御。今回は前進とジャンプ(浮遊)のみ
 ・playerは、コインを取得することが出来る
 ・ステージセレクト出来るようにする
 ・playerをカスタマイズする画面を用意する

■前提
 ・なにか参考書やサイトなりでemchant.jsがどんな感じのなのかを把握している人向け
 ・私の場合、はじめて学ぶ enchant.jsゲーム開発 という書籍を一通り勉強してみた
 

■01_背景を作ろう
ACT_tutorial00.zip用意
game.jsにソースを記述しています

[実際にプレイ]→クリックで別窓起動

[データのDownLoad]→ACT_tutorial01.zip

 

enchant();            //[オマジナイ]

//■ページが読み込まれたときに実行される関数
window.onload = function() {
    //コアオブジェクトを作成する
    core = new Core(320, 320);                //[オマジナイ]320*320のゲーム画面を作る[オマジナイ]
    //ゲームの初期化
    core.fps = 24;                            //fps設定
    //ゲームで使用するファイルを読み込む
    core.preload('map.png');
    core.preload('start.png');
    core.preload('end.png');
    core.preload('clear.png');

    // ■ゲームのメイン処理
    core.onload = function() {
        //======================================================================================//
        //▼物理用仮想空間を作る
        physicsWorld = new PhysicsWorld(0, 9.8);    //[オマジナイ]y軸方向に重力加速度
        //=======================================================================================
        //▼stageグループを作る
        stage = new Group();            //groupオブジェクト
        //=======================================================================================
        //▼tileを配置する
        for(var i = 0; i < tiles.length; i++){            //配列の要素数だけ繰り返す(縦)
            for(var j = 0; j < tiles[i].length; j++){    //配列の要素数だけ繰り返す(横)
                if(tiles[i][j] != -1){                    //パターン値が-1じゃなかったら
                    if(tiles[i][j] < 10){                //mapのフレーム数が10未満なら
                        //横、縦、静的なオブジェクト設定、密度、摩擦、反発、最初から物理起動
                        var tile = new PhyBoxSprite(32, 32, enchant.box2d.STATIC_SPRITE, 1.0, 0.5, 0.2, true);
                    }else if(tiles[i][j] >= 10 && tiles[i][j] < 18){            //それ以外なら
                        //横、縦、動的なオブジェクト設定、密度、摩擦、反発、最初から物理起動
                        var tile = new PhyBoxSprite(32, 32, enchant.box2d.DYNAMIC_SPRITE, 1.0, 0.5, 0.2, true);
                    }
                    tile.image = core.assets['map.png'];                //使用する画像の設定
                    tile.frame = tiles[i][j];                            //表示するフレーム設定
                    tile.position = {x: j * 32 + 16, y: i * 32 + 16};    //spriteの中心座標
                    stage.addChild(tile);                                //stageグループにtileを追加
                }
            }
        }
        core.rootScene.addChild(stage);                //roootSceneにstageグループを追加
        //======================================================================================//
        //▲rootsceneの処理
        core.rootScene.addEventListener('enterframe',function(e){    //フレーム開始時に発生する定期イベント
            //====================================================================================//
            physicsWorld.step(core.fps);    //[オマジナイ]物理の時間を進める
        });
    }
    // ゲームスタート
    core.start();
}
//===========================================================================================
//▼マップデータ定義
var tiles = [
    [ 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1],
    [ 1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1, 1],
    [ 1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1, 1],
    [ 1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1, 1],
    [ 1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1, 1],
    [ 1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1, 1],
    [ 1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1, 1],
    [ 1,-1,-1,-1,-1,-1,10,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1, 1],
    [ 1,-1,-1,-1,-1,-1,10,10,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1, 1],
    [ 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1],
    [ 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
    [ 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
    [ 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
];



▼補足
 ■core = new Core(320, 320);                    //[オマジナイ]320*320のゲーム画面を作る[オマジナイ]
  ネット検索で出てくる説明サイトではgameとなっているものがありますが、あれは古いversionの時の書き方らしいです
  今はcoreって事になっているみたいなので、変更しないで使っています

 ■physicsWorld = new PhysicsWorld(0, 9.8);     //[オマジナイ]y軸方向に重力加速度
  box2dで使う重力設定をする場所。現実世界と同じ重力加速度にとりあえず設定してあります
  1/6にすれば月面ですね〜

 ■physicsWorld.step(core.fps);     //[オマジナイ]物理の時間を進める
  これを描くことで、box2d物理挙動のための処理が動き始めます

 ■マップデータ定義…マップデータの設定
  プログラムをかじったことがある人であれば、「あぁ〜なんて古典的な書き方」と言われるぐらいお約束的なデータだそうです
  本当は、別ファイル読み込んで〜とかするのですが、動けばいいのでローテクで行きます
  -1は、何も配置しないという意味
  その他の数字は、map.png画像のframe数を示しています
  例えば、10であれば、木の箱に当ります。図を参照
  

 ■tilesを配置する…マップデータ読み込み部分
  これも古典的手法で、こういうものだそうです
  便利なのは、上述したマップデータを書き換えるだけで、サイズの変更とか勝手にやってくれる書き方になってます
  [i]が縦列、[j]が横列
  図でいう所の、一番上の並びは[0][0]→[0][1]→[0][2]・・・ってなります
  

  ソースでは、順々にタイルを判定して行って、tileを順々にstage.addChild(tile);しています
  ここでtilesとtileが混ざっているので注意です
  for文でtilesデータを一つ一つ吟味して、box2dスプライトであるtileに一つ一つ入れているって雰囲気です
  tiles[i][j]で、各タイルのframe数を見て、下のように分岐してます
   ・0〜9、動かないタイル
   ・10〜、四角スプライトで動くタイル

  これで、MAPが表示されているはずです