fix(web): keep game at original canvas size
Build TDK Pinball / build (macos-latest) (push) Canceled after 0s
Build TDK Pinball / build (ubuntu-latest) (push) Canceled after 0s
Build TDK Pinball / build (windows-latest) (push) Canceled after 0s
Build TDK Pinball / build (macos-latest) (push) Canceled after 0s
Build TDK Pinball / build (ubuntu-latest) (push) Canceled after 0s
Build TDK Pinball / build (windows-latest) (push) Canceled after 0s
The browser shell previously sized the canvas to the full viewport, causing Macroquad to scale the 640x460 game presentation as the website changed size. Keep the canvas at the original 640x460 CSS-pixel dimensions and center it on a black page instead. A minimum page size and scrolling preserve access to the fixed canvas on viewports smaller than the original presentation. Test Plan: - `just web-build` -- passed - `git diff --check` -- passed - Browser smoke test -- canvas measured 640x460 and was centered at (320,130) in a 1280x720 viewport; the rendered game remained at the intended fixed presentation size with no runtime errors
This commit is contained in:
@@ -6,9 +6,10 @@ Build and serve the browser version from this directory with:
|
||||
just web-serve
|
||||
```
|
||||
|
||||
The game is compiled for `wasm32-unknown-unknown` and loaded into the centered
|
||||
black canvas by `index.html`. Browser settings and high scores are saved in
|
||||
`localStorage`; native builds continue to use their normal per-user save file.
|
||||
The game is compiled for `wasm32-unknown-unknown` and loaded into a fixed
|
||||
640x460 canvas centered on the black page by `index.html`. Browser settings and
|
||||
high scores are saved in `localStorage`; native builds continue to use their
|
||||
normal per-user save file.
|
||||
|
||||
The page uses Macroquad's official browser loader from the miniquad samples
|
||||
site. The web page must be served over HTTP rather than opened directly from a
|
||||
|
||||
@@ -22,7 +22,9 @@
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
margin: 0;
|
||||
overflow: hidden;
|
||||
min-width: 640px;
|
||||
min-height: 460px;
|
||||
overflow: auto;
|
||||
background: #000;
|
||||
}
|
||||
|
||||
@@ -33,8 +35,8 @@
|
||||
|
||||
#glcanvas {
|
||||
display: block;
|
||||
width: 100vw;
|
||||
height: 100vh;
|
||||
width: 640px;
|
||||
height: 460px;
|
||||
background: #000;
|
||||
outline: none;
|
||||
image-rendering: pixelated;
|
||||
|
||||
Reference in New Issue
Block a user