FIX - keep camera game view resolution sharp

This commit is contained in:
Eichenholz
2026-08-06 15:00:02 +02:00
parent c30c6ae51e
commit 4452a6de69
2 changed files with 7 additions and 6 deletions
+6 -5
View File
@@ -223,13 +223,14 @@ function toggleOrientation(): void {
)
}
function resizeGameView(): void {
function resizeGameView(entry?: ResizeObserverEntry): void {
if (!gameCanvas.value || !gameView) return
const bounds = gameCanvas.value.getBoundingClientRect()
const width = entry?.contentRect.width ?? gameCanvas.value.offsetWidth
const height = entry?.contentRect.height ?? gameCanvas.value.offsetHeight
const renderScale = Math.min(window.devicePixelRatio, 2)
gameView.resize(
Math.max(1, Math.round(bounds.width * renderScale)),
Math.max(1, Math.round(bounds.height * renderScale)),
Math.max(1, Math.round(width * renderScale)),
Math.max(1, Math.round(height * renderScale)),
window.innerWidth,
window.innerHeight,
)
@@ -238,7 +239,7 @@ function resizeGameView(): void {
function startGameView(): void {
if (isDevelopment || !gameCanvas.value) return
gameView = createGameView(gameCanvas.value)
resizeObserver = new ResizeObserver(resizeGameView)
resizeObserver = new ResizeObserver((entries) => resizeGameView(entries[0]))
resizeObserver.observe(gameCanvas.value)
resizeGameView()
const render = () => {
+1 -1
View File
@@ -4,7 +4,7 @@
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Sky Phone</title>
<script type="module" crossorigin src="./assets/sky-index-BOhoXWEA.js"></script>
<script type="module" crossorigin src="./assets/sky-index-CrHpIbKG.js"></script>
<link rel="stylesheet" crossorigin href="./assets/sky-index-BKoDphER.css">
</head>
<body>