Cocos2d-html5で TiledMapEditorのデータをもとに当たり判定のある壁を作る

1.TiledMapEditorのレイヤーであたり判定用のレイヤーを作成して書き出す。

ここでは「collidable」という名前で当たり判定用のレイヤーを作成し、そのレイヤーに草を配置しました。
baseレイヤーには土のマップチップが配置されています。（TiledMapEditorの使い方は前回の記事を参照）

2.cocos2d-html5の中であたり判定をつくる。

    init:function () {
        this._super();

        this.obstacles = [];

        //TMXTiledMapでデータを取得するのは前回と同じ
        cc.Director.getInstance().setProjection(cc.DIRECTOR_PROJECTION_2D);
        var tilemap = cc.TMXTiledMap.create("res/test_map.tmx");
        this.mapNode.addChild(tilemap,1);

        var mapWidth   = tilemap.getMapSize().width;
        var mapHeight  = tilemap.getMapSize().height;
        var tileWidth  = tilemap.getTileSize().width;
        var tileHeight = tilemap.getTileSize().height;

        //TiledMapEditorのレイヤーで設定した名前を取得する
        var collidableLayer = tilemap.getLayer("collidable");
        for (i = 0; i < mapWidth; i++){
            for (j = 0; j < mapHeight; j++){

            	//タイルコードを取得できる
                var tileCoord = new cc.Point(i, j);
                
                //タイルコードからgidを取得する。もしgidが存在していれば当たり判定するオブジェクトとして扱う
                var gid = collidableLayer.getTileGIDAt(tileCoord);
                if(gid) {
                    var tileXPositon = i * tileWidth;
                    var tileYPosition = (mapHeight * tileHeight) - ((j+1) * tileHeight);

                    //タイルが存在しているので、あたり判定するための矩形を作成する
                    var square = cc.LayerColor.create(cc.c3b(255,0,0),50,50);
                    square.setPosition(tileXPositon,tileYPosition);
                    this.obstacles.push(square);
                    this.mapNode.addChild(square);
                    square.setPosition(tileXPositon,tileYPosition,3);
                }
            }
        }
    }

    update:function(dt){
        this._super();

        //壁との衝突判定
        for(var i=0;i<this.obstacles.length;i++){
            var obstacle = this.obstacles[i];
            //たとえばplayerというオブジェクトが存在していたとしたら、壁との距離を取得して一定以下の場合は衝突とみなす
            var distance = cc.pDistance(this.player.getPosition(),obstacle.getPosition());
            if(distance < 30){
                //cc.log("hit!!:[" + i + "]");
            } 
        }
    }