html, body {
  height: 100%;
}

body {
  margin: 0;
  padding: 0;
  background: #111;
  color: #eee;
  font: caption;
}

.dg {
  font: caption !important;
  text-shadow: none !important;
}

.dg .property-name {
  font: small-caption !important;
  line-height: 27px !important;
}

console.clear();

var colors = window.colors;

var game = new Phaser.Game({
  
  antialias: false,
  crisp: true,
  // renderer: Phaser.AUTO,
  renderer: Phaser.CANVAS,
  scaleMode: Phaser.ScaleManager.USER_SCALE,
  scaleH: 4,
  scaleV: 4,
  width: 192,
  height: 160,
  
  state: {

    preload: function() {
      this.load.baseURL = 'https://cdn.jsdelivr.net/gh/samme/phaser-examples-assets@v2.0.0/assets/';
      this.load.crossOrigin = 'anonymous';
      this.load.image('dude', 'sprites/phaser-dude.png');
      this.load.image('grid', 'tests/debug-grid-1920x1920.png');
      this.load.bitmapFont('desyrel', 'fonts/bitmapFonts/desyrel.png', 'fonts/bitmapFonts/desyrel.xml');
    },

    create: function() {
      this.add.image(0, 0, 'grid');
      this.add.image(144, 120, 'dude');
      this.add.bitmapText(0, 0, 'desyrel', 'Hamburgerfont 70', 70);
      this.add.bitmapText(0, 80, 'desyrel', 'Hamburgerfont 35', 35);
      this.add.bitmapText(0, 120, 'desyrel', 'Hamburgerfont 15', 15);
      
      // <https://github.com/samme/phaser-view-cache/>
      // game.debug.cache();
      
      console.log('font', this.cache.getBitmapFont('desyrel').font);
    },

    render: function() {
      var debug = this.game.debug;
      
      // debug.scale(0, 10);
    }

  }
});