feat: use only one source of scale (kaplayjs#786)

lajbel · web-flow · commit 04222899c7c9 · 2025-05-19T20:29:45.000-03:00
diff --git a/src/app/appEvents.ts b/src/app/appEvents.ts
@@ -41,10 +41,10 @@ export function initAppEvents() {
             );
             _k.gfx.width = _k.gfx.ggl.gl.drawingBufferWidth
                 / _k.gfx.pixelDensity
-                / _k.gfx.gscale;
+                / _k.globalOpt.scale;
             _k.gfx.height = _k.gfx.ggl.gl.drawingBufferHeight
                 / _k.gfx.pixelDensity
-                / _k.gfx.gscale;
+                / _k.globalOpt.scale;
         }
     });
 
diff --git a/src/core/engine.ts b/src/core/engine.ts
@@ -18,7 +18,12 @@ import { createFrameRenderer } from "./frameRendering";
 export type Engine = ReturnType<typeof createEngine>;
 
 export const createEngine = (gopt: KAPLAYOpt) => {
-    const canvas = createCanvas(gopt);
+    // Default options
+    const opt = Object.assign({
+        scale: 1,
+    }, gopt);
+
+    const canvas = createCanvas(opt);
     const { fontCacheC2d, fontCacheCanvas } = createFontCache();
     const app = initApp({ canvas, ...gopt });
 
@@ -37,24 +42,24 @@ export const createEngine = (gopt: KAPLAYOpt) => {
     const gl = canvasContext;
 
     // TODO: Investigate correctly what's the differente between GFX and AppGFX and reduce to 1 method
-    const gfx = initGfx(gl, gopt);
-    const appGfx = initAppGfx(gfx, gopt);
-    const assets = initAssets(gfx, gopt.spriteAtlasPadding ?? 0);
+    const gfx = initGfx(gl, opt);
+    const appGfx = initAppGfx(gfx, opt);
+    const assets = initAssets(gfx, opt.spriteAtlasPadding ?? 0);
     const audio = initAudio();
     const game = createGame();
 
     // Frame rendering
     const frameRenderer = createFrameRenderer(
         appGfx,
         game,
-        gopt.pixelDensity ?? 1,
+        opt.pixelDensity ?? 1,
     );
 
     // Debug mode
-    const debug = createDebug(gopt, app, appGfx, audio, game, frameRenderer);
+    const debug = createDebug(opt, app, appGfx, audio, game, frameRenderer);
 
     return {
-        globalOpt: gopt,
+        globalOpt: opt,
         canvas,
         app,
         ggl: gfx,
@@ -74,7 +79,7 @@ export const createEngine = (gopt: KAPLAYOpt) => {
                 app,
                 game,
                 assets,
-                gopt,
+                opt,
                 frameRenderer,
                 debug,
             );
diff --git a/src/gfx/canvas.ts b/src/gfx/canvas.ts
@@ -1,8 +1,7 @@
-import type { KAPLAYOpt } from "../types";
+import type { KAPLAYOpt, MustKAPLAYOpt } from "../types";
 
-export const createCanvas = (gopt: KAPLAYOpt) => {
+export const createCanvas = (gopt: MustKAPLAYOpt) => {
     const root = gopt.root ?? document.body;
-    const gscale = gopt.scale ?? 1;
     const pixelDensity = gopt.pixelDensity || 1;
 
     // If root is not defined (which falls back to <body>) we assume user is on a clean page,
@@ -31,8 +30,8 @@ export const createCanvas = (gopt: KAPLAYOpt) => {
         // check if isFixed
         gopt.width && gopt.height && !gopt.letterbox
     ) {
-        canvas.width = gopt.width * gscale;
-        canvas.height = gopt.height * gscale;
+        canvas.width = gopt.width * gopt.scale;
+        canvas.height = gopt.height * gopt.scale;
         styles.push(`width: ${canvas.width}px`);
         styles.push(`height: ${canvas.height}px`);
     }
diff --git a/src/gfx/gfxApp.ts b/src/gfx/gfxApp.ts
@@ -6,10 +6,11 @@ import {
     MAX_BATCHED_VERTS,
     VERTEX_FORMAT,
 } from "../constants/general";
+import { go } from "../game/scenes";
 import { type Color, rgb } from "../math/color";
 import { Mat23 } from "../math/math";
 import { Vec2 } from "../math/Vec2";
-import type { KAPLAYOpt } from "../types";
+import type { KAPLAYOpt, MustKAPLAYOpt } from "../types";
 import type { FontAtlas } from "./formatText";
 import { FrameBuffer } from "./FrameBuffer";
 import { BatchRenderer, type GfxCtx, Texture } from "./gfx";
@@ -32,8 +33,6 @@ export type AppGfxCtx = {
     postShaderUniform: Uniform | (() => Uniform) | null;
     renderer: BatchRenderer;
     pixelDensity: number;
-    /** This is the scale factor that scales pixel "kaplay({ scale })" */
-    gscale: number;
     transform: Mat23;
     transformStack: Mat23[];
     transformStackIndex: number;
@@ -66,10 +65,9 @@ export type Viewport = {
     scale: number;
 };
 
-export const initAppGfx = (gfx: GfxCtx, gopt: KAPLAYOpt): AppGfxCtx => {
+export const initAppGfx = (gfx: GfxCtx, gopt: MustKAPLAYOpt): AppGfxCtx => {
     const defShader = makeShader(gfx, DEF_VERT, DEF_FRAG);
     const pixelDensity = gopt.pixelDensity ?? 1;
-    const gscale = gopt.scale ?? 1;
     const { gl } = gfx;
 
     // a 1x1 white texture to draw raw shapes like rectangles and polygons
@@ -82,8 +80,8 @@ export const initAppGfx = (gfx: GfxCtx, gopt: KAPLAYOpt): AppGfxCtx => {
     const frameBuffer = (gopt.width && gopt.height)
         ? new FrameBuffer(
             gfx,
-            gopt.width * pixelDensity * gscale,
-            gopt.height * pixelDensity * gscale,
+            gopt.width * pixelDensity * gopt.scale,
+            gopt.height * pixelDensity * gopt.scale,
         )
         : new FrameBuffer(
             gfx,
@@ -174,7 +172,6 @@ export const initAppGfx = (gfx: GfxCtx, gopt: KAPLAYOpt): AppGfxCtx => {
         postShaderUniform: null as Uniform | (() => Uniform) | null,
         renderer: renderer,
         pixelDensity: pixelDensity,
-        gscale,
 
         transform: new Mat23(),
         transformStack: transformStack,
@@ -185,9 +182,9 @@ export const initAppGfx = (gfx: GfxCtx, gopt: KAPLAYOpt): AppGfxCtx => {
         bgAlpha: bgAlpha,
 
         width: gopt.width
-            ?? gl.drawingBufferWidth / pixelDensity / gscale,
+            ?? gl.drawingBufferWidth / pixelDensity / gopt.scale,
         height: gopt.height
-            ?? gl.drawingBufferHeight / pixelDensity / gscale,
+            ?? gl.drawingBufferHeight / pixelDensity / gopt.scale,
 
         viewport: {
             x: 0,
diff --git a/src/types.ts b/src/types.ts
@@ -6012,6 +6012,12 @@ export type KGamepad = {
  */
 export type GameObjInspect = Record<Tag, string | null>;
 
+export type MustKAPLAYOpt =
+    & {
+        [K in keyof Pick<KAPLAYOpt, "scale">]-?: KAPLAYOpt[K];
+    }
+    & KAPLAYOpt;
+
 /**
  * KAPLAY configurations.
  *
