fix: loadFont and loadBitmapFont not working with loadRoot (#320)

examples/audio.js

@@ -7,7 +7,7 @@ kaplay({
 });
 
 loadSound("bell", "/examples/sounds/bell.mp3");
-loadSound("OtherworldlyFoe", "/examples/sounds/OtherworldlyFoe.mp3");
+loadMusic("OtherworldlyFoe", "/examples/sounds/OtherworldlyFoe.mp3");
 
 // play() to play audio
 // (This might not play until user input due to browser policy)

examples/text.js

@@ -1,19 +1,21 @@
 kaplay({
-    background: [212, 110, 179],
+    background: "",
 });
 
+loadRoot("/examples");
+
 // Load a custom font from a .ttf file
-loadFont("FlowerSketches", "/examples/fonts/FlowerSketches.ttf");
+loadFont("FlowerSketches", "/fonts/FlowerSketches.ttf");
 
 // Load a custom font with options
-loadFont("apl386", "/examples/fonts/apl386.ttf", {
+loadFont("apl386", "/fonts/apl386.ttf", {
     outline: 4,
     filter: "linear",
 });
 
 // Load custom bitmap font, specifying the width and height of each character in the image
-loadBitmapFont("unscii", "/examples/fonts/unscii_8x8.png", 8, 8);
-loadBitmapFont("4x4", "/examples/fonts/4x4.png", 4, 4);
+loadBitmapFont("unscii", "/fonts/unscii_8x8.png", 8, 8);
+loadBitmapFont("4x4", "/fonts/4x4.png", 4, 4);
 
 // List of built-in fonts ("o" at the end means the outlined version)
 const builtinFonts = [

src/assets/asset.ts

@@ -8,6 +8,7 @@ import type { FontData } from "./font";
 import type { ShaderData } from "./shader";
 import type { SoundData } from "./sound";
 import type { SpriteData } from "./sprite";
+import { fixURL } from "./utils";
 
 /**
  * An asset is a resource that is loaded asynchronously.
@@ -144,7 +145,7 @@ export function loadRoot(path?: string): string {
 }
 
 export function loadJSON(name: string, url: string) {
-    return assets.custom.add(name, fetchJSON(url));
+    return assets.custom.add(name, fetchJSON(fixURL(url)));
 }
 
 // wrapper around image loader to get a Promise

src/assets/bitmapFont.ts

@@ -5,6 +5,7 @@ import type { Quad } from "../math/math";
 import type { TexFilter } from "../types";
 import { type Asset, loadImg } from "./asset";
 import { makeFont } from "./font";
+import { fixURL } from "./utils";
 
 export interface GfxFont {
     tex: Texture;
@@ -33,9 +34,11 @@ export function loadBitmapFont(
     gh: number,
     opt: LoadBitmapFontOpt = {},
 ): Asset<BitmapFontData> {
+    const fontSrc = fixURL(src);
+
     return assets.bitmapFonts.add(
         name,
-        loadImg(src)
+        loadImg(fontSrc)
             .then((img) => {
                 return makeFont(
                     Texture.fromImage(gfx.ggl, img, opt),

src/assets/font.ts

@@ -12,6 +12,7 @@ import { Quad } from "../math/math";
 import type { LoadFontOpt, Outline, TexFilter } from "../types";
 import { Asset, loadProgress } from "./asset";
 import { type BitmapFontData, getBitmapFont, type GfxFont } from "./bitmapFont";
+import { fixURL } from "./utils";
 
 export class FontData {
     fontface: FontFace;
@@ -97,16 +98,17 @@ export function loadFont(
     src: string | BinaryData,
     opt: LoadFontOpt = {},
 ): Asset<FontData> {
+    const fontSrc = fixURL(src);
     const font = new FontFace(
         name,
-        typeof src === "string" ? `url(${src})` : src,
+        typeof src === "string" ? `url(${fontSrc})` : fontSrc,
     );
     document.fonts.add(font);
 
     return assets.fonts.add(
         name,
         font.load().catch((err) => {
-            throw new Error(`Failed to load font from "${src}": ${err}`);
+            throw new Error(`Failed to load font from "${fontSrc}": ${err}`);
         }).then((face) => new FontData(face, opt)),
     );
 }

src/assets/sound.ts

@@ -76,8 +76,9 @@ export function loadMusic(
     name: string | null,
     url: string,
 ) {
-    const a = new Audio(url);
+    const musicUrl = fixURL(url);
+    const a = new Audio(musicUrl);
     a.preload = "auto";
 
-    return assets.music[name as keyof typeof assets.music] = fixURL(url);
+    return assets.music[name as keyof typeof assets.music] = musicUrl;
 }