Add colors demo

samme · samme · commit 85c0bb72d853 · 2024-07-27T08:33:53.000-07:00
diff --git a/demo/demo-colors.html b/demo/demo-colors.html
@@ -0,0 +1,32 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+  <meta charset="utf-8">
+  <meta name="viewport" content="initial-scale=1">
+  <style>
+    html,
+    body {
+      height: 100%;
+    }
+
+    body {
+      margin: 0;
+      padding: 0;
+      font: caption;
+    }
+
+    canvas {
+      display: block;
+    }
+  </style>
+  <title>Demo of Phaser 3 Debug Game Scale Plugin</title>
+</head>
+
+<body>
+  <script defer src="../node_modules/phaser/dist/phaser.js"></script>
+  <script defer src="../dist/phaser-plugin-debug-game-scale.umd.js"></script>
+  <script defer src="./demo-colors.js"></script>
+</body>
+
+</html>
diff --git a/demo/demo-colors.js b/demo/demo-colors.js
@@ -0,0 +1,49 @@
+const scene = {
+  init: function () {
+    const cat = [
+      '....443...443.',
+      '...4433..4433.',
+      '..44333.48333.',
+      '88888888244444',
+      '44444444433333',
+      '44444444433333',
+      '44044404433333',
+      '44488844433333',
+      '44400044433333',
+      '44F202F4433333',
+      '44202024433333',
+      '44F222F4433333',
+      '44444444433333',
+      '4433...4433.33',
+      '4433...4433.33'
+    ];
+
+    this.textures.generate('cat', { data: cat, pixelWidth: 10 });
+  },
+
+  create: function () {
+    const { centerX, centerY, width, height } = this.cameras.default;
+
+    this.add.image(centerX, centerY, 'cat');
+    this.add.image(0, 0, 'cat').setOrigin(0, 0);
+    this.add.image(width, height, 'cat').setOrigin(1, 1);
+
+    this.input.on('pointerup', function () {
+      this.scale.startFullscreen();
+    }, this);
+  }
+};
+
+new Phaser.Game({
+  type: Phaser.CANVAS,
+  backgroundColor: 0xB2DCEF,
+  plugins: {
+    global: [
+      { key: 'PhaserDebugGameScalePlugin', plugin: PhaserDebugGameScalePlugin, start: true, data: { color: 'black', shadowColor: 'white', font: '24px ui-rounded', lineHeight: 32, width: 1024, height: 256 } }
+    ]
+  },
+  scale: {
+    mode: Phaser.Scale.FIT
+  },
+  scene: scene
+});
