added automatic scaling and implemented Menu Scene

Signed-off-by: Pascal Syma <pascal@syma.dev>

src/index.js

@@ -1,32 +1,22 @@
 import Phaser from "phaser";
-import logoImg from "./assets/logo.png";
+import Menu from "./scenes/Menu";
+
+const ratio = 16 / 9; // any ratio you want, 16/9 landscape or 9/16 portrait
+const DEFAULT_HEIGHT = 1080; // any height you want
+const DEFAULT_WIDTH = ratio * DEFAULT_HEIGHT;
 
 const config = {
   type: Phaser.AUTO,
+  scale: {
+    mode: Phaser.Scale.FIT,
+    autoCenter: Phaser.Scale.CENTER_BOTH,
+    width: DEFAULT_WIDTH,
+    height: DEFAULT_HEIGHT
+  },
   parent: "phaser-example",
-  width: 800,
-  height: 600,
-  scene: {
-    preload: preload,
-    create: create
-  }
+  scene: [Menu],
+  // pixelArt: true,
+  // roundPixels: true
 };
 
 const game = new Phaser.Game(config);
-
-function preload() {
-  this.load.image("logo", logoImg);
-}
-
-function create() {
-  const logo = this.add.image(400, 150, "logo");
-
-  this.tweens.add({
-    targets: logo,
-    y: 450,
-    duration: 2000,
-    ease: "Power2",
-    yoyo: true,
-    loop: -1
-  });
-}