diff --git a/index.html b/index.html index a5692ce..3c8f57b 100644 --- a/index.html +++ b/index.html @@ -1,13 +1,17 @@ - - - - - rogue - - -
- - - + + + + + + + rogue + + + +
+ + + + \ No newline at end of file diff --git a/src/main.ts b/src/main.ts index a9b8ffb..7f93770 100644 --- a/src/main.ts +++ b/src/main.ts @@ -6,8 +6,11 @@ import { StartScene } from "./scenes/StartScene"; new Phaser.Game({ type: Phaser.AUTO, parent: "app", - width: 960, - height: 540, + scale: { + mode: Phaser.Scale.RESIZE, + width: window.innerWidth, + height: window.innerHeight, + }, backgroundColor: "#111", pixelArt: true, roundPixels: true, diff --git a/src/scenes/SplashScene.ts b/src/scenes/SplashScene.ts index c5fb150..5d4a331 100644 --- a/src/scenes/SplashScene.ts +++ b/src/scenes/SplashScene.ts @@ -16,7 +16,13 @@ export class SplashScene extends Scene { // Background (Placeholder for Image) // If we successfully load the image 'splash', we use it. if (this.textures.exists('splash')) { - this.add.image(width / 2, height / 2, 'splash').setDisplaySize(width, height); + const splash = this.add.image(width / 2, height / 2, 'splash'); + + // Scale to cover the screen while maintaining aspect ratio + const scaleX = width / splash.width; + const scaleY = height / splash.height; + const scale = Math.max(scaleX, scaleY); + splash.setScale(scale); } else { this.add.rectangle(0, 0, width, height, 0x110022).setOrigin(0); this.add.text(width/2, height/2, "ROGUE LEGACY", { diff --git a/src/style.css b/src/style.css new file mode 100644 index 0000000..bc1eafe --- /dev/null +++ b/src/style.css @@ -0,0 +1,24 @@ +* { + margin: 0; + padding: 0; + box-sizing: border-box; +} + +html, body { + width: 100%; + height: 100%; + overflow: hidden; +} + +#app { + width: 100%; + height: 100%; + display: flex; + justify-content: center; + align-items: center; + background: #111; +} + +canvas { + display: block; +}