perf: only refresh texture once after a batch add (#1044)

Author: dragoncoder047

src/assets/font.ts

@@ -136,6 +136,7 @@ export function makeFont(
             ),
         );
     }
+    _k.assets.packer.refreshIfPending();
 
     return {
         map,

src/assets/sprite.ts

@@ -164,6 +164,7 @@ export class SpriteData {
                 ? (src => _k.assets.packer.addSingle(src))
                 : (src => _k.assets.packer.add(src)),
         );
+        _k.assets.packer.refreshIfPending();
         return new SpriteData(frames, opt.anims, opt.slice9);
     }
 
@@ -183,11 +184,13 @@ export class SpriteData {
                 opt.slice9,
             );
         }
-        return new SpriteData(
+        const sd = new SpriteData(
             frames.map(frame => _k.assets.packer.add(data, frame)),
             opt.anims,
             opt.slice9,
         );
+        _k.assets.packer.refreshIfPending();
+        return sd;
     }
 }
 

src/assets/spriteAtlas.ts

@@ -90,6 +90,7 @@ export function loadSpriteAtlas(
                 _k.assets.sprites.addLoaded(name, spr);
                 map[name] = spr;
             }
+            _k.assets.packer.refreshIfPending();
             return map;
         }),
     );

src/gfx/TexPacker.ts

@@ -38,7 +38,9 @@ export class TexPacker {
         this._newTexture();
     }
 
+    private _hasPendingRefresh = false;
     private _newTexture(): TexMap {
+        this.refreshIfPending();
         const el = document.createElement("canvas");
         el.width = this._w;
         el.height = this._h;
@@ -51,6 +53,12 @@ export class TexPacker {
         this._texToEntry.set(tex, this._curMap = { tex, el, ctx });
         return this._curMap;
     }
+    refreshIfPending() {
+        if (this._hasPendingRefresh) {
+            this._curMap.tex.update(this._curMap.el);
+            this._hasPendingRefresh = false;
+        }
+    }
 
     // create a image with a single texture
     addSingle(img: ImageSource): Frame {
@@ -186,7 +194,7 @@ export class TexPacker {
             imgHeight,
         );
 
-        curTex.update(curEl);
+        this._hasPendingRefresh = true;
 
         this._used.set(this._last, {
             rect: rectToAdd,

src/gfx/formatText.ts

@@ -3,7 +3,7 @@ import type { BitmapFontData, GfxFont } from "../assets/bitmapFont";
 import { FontData, resolveFont } from "../assets/font";
 import { DEF_TEXT_CACHE_SIZE } from "../constants/general";
 import { Color } from "../math/color";
-import { Quad, vec2 } from "../math/math";
+import { vec2 } from "../math/math";
 import { _k } from "../shared";
 import type { Outline } from "../types";
 import { runes } from "../utils/runes";
@@ -451,6 +451,8 @@ export function formatText(opt: DrawTextOpt): FormattedText {
         th += thisLineHeight;
     }
 
+    _k.assets.packer.refreshIfPending();
+
     return {
         width: tw,
         height: th,