Use full screen
This commit is contained in:
26
index.html
26
index.html
@@ -1,13 +1,17 @@
|
||||
<!doctype html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<link rel="icon" type="image/png" href="/favicon.png" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<title>rogue</title>
|
||||
</head>
|
||||
<body>
|
||||
<div id="app"></div>
|
||||
<script type="module" src="/src/main.ts"></script>
|
||||
</body>
|
||||
</html>
|
||||
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<link rel="icon" type="image/png" href="/favicon.png" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<link rel="stylesheet" href="/src/style.css" />
|
||||
<title>rogue</title>
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<div id="app"></div>
|
||||
<script type="module" src="/src/main.ts"></script>
|
||||
</body>
|
||||
|
||||
</html>
|
||||
@@ -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,
|
||||
|
||||
@@ -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", {
|
||||
|
||||
24
src/style.css
Normal file
24
src/style.css
Normal file
@@ -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;
|
||||
}
|
||||
Reference in New Issue
Block a user