update bg

Author: daoauth

public/assets/bg.png

@@ -5,11 +5,11 @@ import { MainMenu } from './game/scenes/MainMenu';
 function App()
 {
     // The sprite can only be moved in the MainMenu Scene
-    const [canMoveSprite, setCanMoveSprite] = useState(true);
+    const [, setCanMoveSprite] = useState(true);
 
     //  References to the PhaserGame component (game and scene are exposed)
     const phaserRef = useRef<IRefPhaserGame | null>(null);
-    const [spritePosition, setSpritePosition] = useState({ x: 0, y: 0 });
+    const [spritePosition] = useState({ x: 0, y: 0 });
 
     const changeScene = () => {
 
@@ -24,26 +24,6 @@ function App()
         }
     }
 
-    const moveSprite = () => {
-
-        if(phaserRef.current)
-        {
-
-            const scene = phaserRef.current.scene as MainMenu;
-
-            if (scene && scene.scene.key === 'MainMenu')
-            {
-                // Get the update logo position
-                scene.moveLogo(({ x, y }) => {
-
-                    setSpritePosition({ x, y });
-
-                });
-            }
-        }
-
-    }
-
     const addSprite = () => {
 
         if (phaserRef.current)
@@ -93,16 +73,24 @@ function App()
         window.open("https://github.com/zktx-io/phaserjs-template-react-ts", "_blank", "noopener,noreferrer");
     };
 
+    const handleClick_4 = () => {
+        window.open("https://phaser.io/", "_blank", "noopener,noreferrer");
+    };
+
     return (
         <div id="app">
             <PhaserGame ref={phaserRef} currentActiveScene={currentScene} />
             <div>
                 <div>
                     <button className="button" onClick={changeScene}>Change Scene</button>
                 </div>
-                <div>
-                    <button disabled={canMoveSprite} className="button" onClick={moveSprite}>Toggle Movement</button>
-                </div>
+                {
+                    /*
+                    <div>
+                        <button disabled={canMoveSprite} className="button" onClick={moveSprite}>Toggle Movement</button>
+                    </div>
+                    */
+                }
                 <div className="spritePosition">Sprite Position:
                     <pre>{`{\n  x: ${spritePosition.x}\n  y: ${spritePosition.y}\n}`}</pre>
                 </div>
@@ -118,6 +106,9 @@ function App()
                 <div>
                     <button className="button" onClick={handleClick_3}>example github</button>
                 </div>
+                <div>
+                    <button className="button" onClick={handleClick_4}>Phaser</button>
+                </div>
             </div>
         </div>
     )

src/App.tsx

@@ -5,7 +5,7 @@ import { EventBus } from '../EventBus';
 export class MainMenu extends Scene
 {
     background: GameObjects.Image;
-    logo: GameObjects.Image;
+    // logo: GameObjects.Image;
     title: GameObjects.Text;
     logoTween: Phaser.Tweens.Tween | null;
 
@@ -18,7 +18,7 @@ export class MainMenu extends Scene
     {
         this.background = this.add.image(512, 384, 'background');
 
-        this.logo = this.add.image(512, 300, 'logo').setDepth(100);
+        // this.logo = this.add.image(512, 300, 'logo').setDepth(100);
 
         this.title = this.add.text(512, 460, 'Main Menu', {
             fontFamily: 'Arial Black', fontSize: 38, color: '#ffffff',
@@ -40,6 +40,7 @@ export class MainMenu extends Scene
         this.scene.start('Game');
     }
 
+    /*
     moveLogo (vueCallback: ({ x, y }: { x: number, y: number }) => void)
     {
         if (this.logoTween)
@@ -73,4 +74,5 @@ export class MainMenu extends Scene
             });
         }
     }
+        */
 }

src/game/scenes/MainMenu.ts

@@ -32,7 +32,7 @@ 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');
+        // this.load.image('logo', 'logo.png');
         this.load.image('star', 'star.png');
         this.load.image('sui', 'sui.png');
         this.load.image('walrus', 'walrus.png');