Add responsiveness to the template

src/main.js

@@ -8,8 +8,8 @@ import { Preloader } from './scenes/Preloader';
 //  https://newdocs.phaser.io/docs/3.70.0/Phaser.Types.Core.GameConfig
 const config = {
     type: Phaser.AUTO,
-    width: 1024,
-    height: 768,
+    width: screen.width,
+    height: screen.height,
     parent: 'game-container',
     backgroundColor: '#028af8',
     scale: {

src/scenes/Boot.js

@@ -13,6 +13,7 @@ export class Boot extends Scene
         //  The smaller the file size of the assets, the better, as the Boot Scene itself has no preloader.
 
         this.load.image('background', 'assets/bg.png');
+        this.load.image('logo', 'assets/logo.png');
     }
 
     create ()

src/scenes/Game.js

@@ -9,15 +9,34 @@ export class Game extends Scene
 
     create ()
     {
+        const canvas = this.game.canvas;
+        const vw = canvas.width * 0.01; // 1% viewer width
+        const vh = canvas.height * 0.01; // 1% viewer height
+        const vmax = vw > vh ? vw : vh;
+
         this.cameras.main.setBackgroundColor(0x00ff00);
 
-        this.add.image(512, 384, 'background').setAlpha(0.5);
+        let background = this.add.image(50 * vw, 50 * vh, 'background').setAlpha(0.5);
+        background.scaleX = 100 * vw / background.width;
+        background.scaleY =  100 * vh / background.height;
 
-        this.add.text(512, 384, 'Make something fun!\nand share it with us:\[email protected]', {
-            fontFamily: 'Arial Black', fontSize: 38, color: '#ffffff',
-            stroke: '#000000', strokeThickness: 8,
-            align: 'center'
-        }).setOrigin(0.5);
+        this.add.text(
+            50 * vw, 
+            50 * vh, 
+            'Make something fun!\nand share it with us:\[email protected]', 
+            {
+                fontFamily: 'Arial Black', 
+                fontSize: 38, 
+                color: '#ffffff',
+                stroke: '#000000', 
+                strokeThickness: 8,
+                align: 'center',
+                wordWrap: {
+                    width: 100 * vw,
+                    useAdvancedWrap: true,
+                }
+            }
+        ).setOrigin(0.5);
 
         this.input.once('pointerdown', () => {
 

src/scenes/GameOver.js

@@ -9,15 +9,28 @@ export class GameOver extends Scene
 
     create ()
     {
+        const canvas = this.game.canvas;
+        const vw = canvas.width * 0.01; // 1% viewer width
+        const vh = canvas.height * 0.01; // 1% viewer height
+        const vmax = vw > vh ? vw : vh;
+
         this.cameras.main.setBackgroundColor(0xff0000);
 
-        this.add.image(512, 384, 'background').setAlpha(0.5);
+        let background = this.add.image(50 * vw, 50 * vh, 'background').setAlpha(0.5);
+        background.scaleX = 100 * vw / background.width;
+        background.scaleY =  100 * vh / background.height;
+
 
-        this.add.text(512, 384, 'Game Over', {
-            fontFamily: 'Arial Black', fontSize: 64, color: '#ffffff',
-            stroke: '#000000', strokeThickness: 8,
-            align: 'center'
-        }).setOrigin(0.5);
+        this.add.text(
+            50 * vw, 
+            50 * vh, 
+            'Game Over', 
+            {
+                fontFamily: 'Arial Black', fontSize: 64, color: '#ffffff',
+                stroke: '#000000', strokeThickness: 8,
+                align: 'center'
+            }
+        ).setOrigin(0.5);
 
         this.input.once('pointerdown', () => {
 

src/scenes/MainMenu.js

@@ -9,15 +9,37 @@ export class MainMenu extends Scene
 
     create ()
     {
-        this.add.image(512, 384, 'background');
+        const canvas = this.game.canvas;
+        const vw = canvas.width * 0.01; // 1% viewer width
+        const vh = canvas.height * 0.01; // 1% viewer height
+        const vmax = vw > vh ? vw : vh;
 
-        this.add.image(512, 300, 'logo');
+        let background = this.add.image(50 * vw, 50*vh, 'background');
+        background.scaleX = 100 * vw / background.width;
+        background.scaleY =  100 * vh / background.height;
+
+        // Show our "Phaser" title
+        const title = this.add.image(
+            50 * vw,
+            40 * vh,
+            'logo'
+        )
+        if (vmax == vw) {
+            title.scale = 15 * vh / title.height;
+        } else {
+            title.scale = 90 * vw / title.width;
+        }
 
-        this.add.text(512, 460, 'Main Menu', {
-            fontFamily: 'Arial Black', fontSize: 38, color: '#ffffff',
-            stroke: '#000000', strokeThickness: 8,
-            align: 'center'
-        }).setOrigin(0.5);
+        this.add.text(
+            50 * vw, 
+            66.66 * vh, 
+            'Main Menu', 
+            {
+                fontFamily: 'Arial Black', fontSize: 38, color: '#ffffff',
+                stroke: '#000000', strokeThickness: 8,
+                align: 'center'
+            }
+        ).setOrigin(0.5);
 
         this.input.once('pointerdown', () => {
 

src/scenes/Preloader.js

@@ -9,20 +9,58 @@ export class Preloader extends Scene
 
     init ()
     {
+        const canvas = this.game.canvas;
+        const vw = canvas.width * 0.01; // 1% viewer width
+        const vh = canvas.height * 0.01; // 1% viewer height
+        const vmax = vw > vh ? vw : vh;
+
         //  We loaded this image in our Boot Scene, so we can display it here
-        this.add.image(512, 384, 'background');
+        const background = this.add.image(
+            50 * vw,
+            50 * vh,
+            'background'
+        );
+        background.scaleX = 100 * vw / background.width;
+        background.scaleY = 100 * vh / background.height;
+
+        // Show our "Phaser" title
+        const title = this.add.image(
+            50 * vw,
+            40 * vh,
+            'logo'
+        )
+        if (vmax == vw) {
+            title.scale = 15 * vh / title.height;
+        } else {
+            title.scale = 90 * vw / title.width;
+        }
 
         //  A simple progress bar. This is the outline of the bar.
-        this.add.rectangle(512, 384, 468, 32).setStrokeStyle(1, 0xffffff);
+        const rect = this.add.rectangle(
+            50 * vw,
+            66.66 * vh,
+            90 * vw,
+            5 * vh,
+        );
+        rect.setStrokeStyle(0.25 * vmax, 0x000000);
+        rect.setDepth(3);
 
         //  This is the progress bar itself. It will increase in size from the left based on the % of progress.
-        const bar = this.add.rectangle(512-230, 384, 4, 28, 0xffffff);
+        const bar = this.add.rectangle(
+            rect.x - rect.width / 2,
+            rect.y - rect.height / 2,
+            0,
+            rect.height,
+            0xffffff
+        );
+        bar.setOrigin(0, 0);
+        bar.setDepth(2);
 
         //  Use the 'progress' event emitted by the LoaderPlugin to update the loading bar
         this.load.on('progress', (progress) => {
 
-            //  Update the progress bar (our bar is 464px wide, so 100% = 464px)
-            bar.width = 4 + (460 * progress);
+            //  Update the progress bar
+            bar.width = rect.width * progress;
 
         });
     }
@@ -31,7 +69,6 @@ export class Preloader extends Scene
     {
         //  Load the assets for the game - Replace with your own assets
         this.load.setPath('assets');
-
         this.load.image('logo', 'logo.png');
     }