Phina.jsでRPGを作る(1) マップの敷き詰め

#はじめに
phina.jsは簡単なものから複雑なものまで幅広いゲームが作れるJavascriptライブラリです。今回は簡単なRPGのようなものを作ろうと思いました。
まずはマップの敷き詰めです。

"use strict";
phina.globalize();

let main = {
    FPS:60,
    settings:{
        "MapChipSize":100
    },
    Assets:{
        image:{
            black:"img/mapchips/black.png",
            white:"img/mapchips/white.png",
        },
    },
    Maps:{
        start:[
            [0,1,0,1,0,1,0,1,0,1],//マップ　0が黒で1が白
            [1,0,1,0,1,0,1,0,1,0],
            [0,1,0,1,0,1,0,1,0,1],
            [1,0,1,0,1,0,1,0,1,0],
            [0,1,0,1,0,1,0,1,0,1],
            [1,0,1,0,1,0,1,0,1,0],
            [0,1,0,1,0,1,0,1,0,1],
            [1,0,1,0,1,0,1,0,1,0],
            [0,1,0,1,0,1,0,1,0,1],
            [1,0,1,0,1,0,1,0,1,0],
        ]
    },
    MapChips:[
        {
            image:"black"
        },
        {
            image:"white"
        }
    ]
};


const Scenes = [
    {
        label:"main",
        className:"MainScene"
    }
];

phina.define("MapChip",{
    superClass:"Sprite",
    init:function(options){
        this.options = (options || {}).$safe(MapChip.defaults);
        this.superInit(main.MapChips[this.options.no].image);
        this.setOrigin(0,0);
        this.setPosition(this.options.x,this.options.y);
        this.setSize(main.settings.MapChipSize,main.settings.MapChipSize);
    },
    _static:{
        defaults:{
            no:0
        }
    }
});

phina.define("MainScene",{
    superClass:"DisplayScene",
    init:function(options){
        this.superInit(options);
        this.backgroundColor = "gray";
        this.grid = [];
        let self = this;
        this.map = [[]];
        (main.Maps.start.length).times(function(i){
            (main.Maps.start[i].length).times(function(ii){
                MapChip({
                    x:ii*main.settings.MapChipSize,
                    y:i*main.settings.MapChipSize,
                    no:main.Maps.start[i][ii]
                }).addChildTo(self);
            })
        });
    }
});

phina.main(function() {
    const app = GameApp({
        startLabel:"main",
        assets:main.Assets,
        //width:2813,
        //height:960,
        width:1000,
        height:1000,
        scenes:Scenes
    });
    app.fps = main.FPS;
    app.run();
});

#解説

(main.Maps.start.length).times(function(i){
    (main.Maps.start[i].length).times(function(ii){
        MapChip({
            x:ii*main.settings.MapChipSize,
            y:i*main.settings.MapChipSize,
            no:main.Maps.start[i][ii]
        }).addChildTo(self);
    })
});

この部分でマップチップを敷き詰めています。
多次元配列を回していて、iが横軸、iiが縦軸になっています。マップチップは配列で管理していて、他のプロパティ(例えば通り抜けられるか)を追加できるようにしました。

phina.define("MapChip",{
    superClass:"Sprite",
    init:function(options){
        this.options = (options || {}).$safe(MapChip.defaults);
        this.superInit(main.MapChips[this.options.no].image);
        this.setOrigin(0,0);
        this.setPosition(this.options.x,this.options.y);
        this.setSize(main.settings.MapChipSize,main.settings.MapChipSize);
    },
    _static:{
        defaults:{
            no:0
        }
    }
});

マップチップクラスです。setOrigin(0,0)で座標を指定するときに左上を基準として設定できるようになります。デフォルトではx軸,y軸ともに0.5なのでsetPosition(0,0)としたときに見切れてしまっていましたが、それを考えずに配置できるようになりました。

#実行結果

マップでの0が黒に、1が白に対応しています。