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:               true,
  // backgroundColor:         0x000000,
  // disableVisibilityChange: false,
  // enableDebug:             true,
  // height:                  600,
  // renderer:                Phaser.AUTO,
  // resolution:              1,
  // scaleMode:               Phaser.ScaleManager.NO_SCALE,
  // transparent:             false,
  // width:                   800,
  state: {

    init: function() {
      
    },

    preload: function() {
      // This is equivalent to <https://examples.phaser.io/assets/>.
      this.load.baseURL = 'https://cdn.jsdelivr.net/gh/samme/phaser-examples-assets@v2.0.0/assets/';
      this.load.crossOrigin = 'anonymous';
      this.load.bitmapFont('desyrel', 'fonts/bitmapFonts/desyrel.png', 'fonts/bitmapFonts/desyrel.xml');
    },

    create: function() {
      game.add.bitmapText(20, 20, 'desyrel', 'Phaser & Pixi\nrocking!', 20);
      game.add.bitmapText(20, 100, 'desyrel', 'Phaser & Pixi\nrocking!', 50);
      game.add.bitmapText(20, 240, 'desyrel', 'Phaser & Pixi\nrocking!', 100);
    },

    update: function() {

    },

    render: function() {
      var debug = this.game.debug;
      debug.phaser(10, 580);
    },

    shutdown: function() {
      
    }

  }
});

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

  1. https://cdn.jsdelivr.net/npm/phaser-ce@2.11.1/build/phaser.js
  2. https://cdn.jsdelivr.net/npm/phaser-debug-object@0.2.3/index.js
  3. https://cdnjs.cloudflare.com/ajax/libs/colors/3.0.0/js/colors.js