Phaser Mini Map

// http://phaser.io/examples/v2/tilemaps/csv-map-with-p2

var game = new Phaser.Game(800, 600, Phaser.CANVAS, 'phaser-example', { preload: preload, create: create, update: update, render: render });

function preload() {

    game.load.tilemap('map', 'assets/tilemaps/csv/catastrophi_level2.csv', null, Phaser.Tilemap.CSV);
    game.load.image('tiles', 'assets/tilemaps/tiles/catastrophi_tiles_16.png');
    game.load.image('player', 'assets/sprites/tinycar.png');

}

var map;
var layer;
var cursors;
var player;
var renderTexture;
var renderSprite;
var help;
function create() {

    game.physics.startSystem(Phaser.Physics.P2JS);



    //  Because we're loading CSV map data we have to specify the tile size here or we can't render it
    map = game.add.tilemap('map', 16, 16);

    //  Now add in the tileset
    map.addTilesetImage('tiles');

    //  Create our layer
    layer = map.createLayer(0);

    //  Resize the world
    layer.resizeWorld();

    //  This isn't totally accurate, but it'll do for now
    map.setCollisionBetween(54, 83);

    //  Convert the tilemap layer into bodies. Only tiles that collide (see above) are created.
    //  This call returns an array of body objects which you can perform addition actions on if
    //  required. There is also a parameter to control optimising the map build.
    game.physics.p2.convertTilemap(map, layer);

    //  Player
    player = game.add.sprite(48, 48, 'player');

    game.physics.p2.enable(player);

    game.physics.p2.setBoundsToWorld(true, true, true, true, false);

    game.camera.follow(player);

    //  Allow cursors to scroll around the map
    cursors = game.input.keyboard.createCursorKeys();

    help = game.add.text(16, 16, 'Arrows to move', { font: '14px Arial', fill: '#ffffff' });
    help.fixedToCamera = true;

    renderTexture=game.add.renderTexture(200,200,"rt")
    renderTexture.resolution=0.5


    renderGroup = game.add.group()
    renderGroup.x=650
    renderGroup.y=150


    var bg = game.add.graphics(0,0)
    bg.beginFill(0,1)
    bg.lineStyle(2, 0xFF0000, 1);
    bg.drawCircle(0,0,200,200)
    bg.endFill();
    renderGroup.add(bg)

    renderSprite=game.add.sprite(0,0,renderTexture)
    renderSprite.scale.set(0.25)
    renderSprite.width=200
    renderSprite.height=200
    renderSprite.anchor.set(0.5)
    renderSprite.x=0
    renderSprite.y=0

    var mask = game.add.graphics(0, 0);
    mask.lineStyle(2, 0xFF0000, 1);
    mask.beginFill(0xFF0000,0.1)
    mask.drawCircle(0,0,200,200);
    mask.endFill()
    mask.cacheAsBitmap=true

    renderGroup.add(renderSprite)
    renderGroup.add(mask)
    renderSprite.mask=mask;

    renderGroup.fixedToCamera=true
    renderTexture.render(layer, 0,0,true)


}

function update() {

    if (cursors.left.isDown)
    {
        player.body.rotateLeft(100);
    }
    else if (cursors.right.isDown)
    {
        player.body.rotateRight(100);
    }
    else
    {
        player.body.setZeroRotation();
    }

    if (cursors.up.isDown)
    {
        player.body.thrust(400);
    }
    else if (cursors.down.isDown)
    {
        player.body.reverse(400);
    }


    w = layer.width
    h = layer.height

    // crop layer for render
    layer.setFrame({x:Math.max(0,player.x-game.camera.x)-200,y:Math.max(0,player.y-game.camera.y)-200,width:400,height:400})
    m = new PIXI.Matrix()
    renderSprite.angle=-player.angle

    // reset layer to original dimensions
    renderTexture.render(layer, m, true)
    layer.setFrame({x:0, y:0, width:w, height:h})

}

function render() {
}