-1

Just want to ask. How to load fonts not from png? I tried fonts with .woff, .ttf, extensions, but they all give me same error: ERROR: Font not found: undefined.

Here my try:

kaboom({
  width: 900,
  height: 500,
  font: "kenney-blocks",
  background: [117, 193, 255]
})

// load sprite's images and fonts
loadSprite("frog", "sprites/froggy.png");
loadSprite("arrow", "sprites/arrow.png");
loadSprite("waterlily", "sprites/waterlily.png")
loadFont("kenney-blocks", "fonts/Kenney-Blocks.woff", 6, 3)

i tried .ttf by upload into fonts folder same file, but .tff and change load font line to that file.

here my console:

kaboom!

(tip: Cmd + S in editor refresh webview)

ERROR: Font not found: undefined
    -> node_modules/kaboom/src/kaboom.ts:2098:8
    -> node_modules/kaboom/src/kaboom.ts:4097:16
    -> node_modules/kaboom/src/kaboom.ts:4130:3
    -> node_modules/kaboom/src/kaboom.ts:2951:34
signal: interrupt
Hramzhuk
  • 1
  • 1

1 Answers1

0

So, as stated in the documentation for loadFont (emphasis mine):

Load(s) a bitmap font into asset manager...

So you're not going to be able load e.g. a .woff with that method, as it can only load bitmap fonts, e.g .png.

This being said, although there doesn't seem to be much further in the docs about this, there was a PR from a few months ago that was merged into kaboom. It seems to allow for the engine to render font glyphs to an off-screen canvas using the browser's HTML5 canvas APIs, and then stitch those together to dynamically create a PNG font from normal browser fonts.

I had a quick look through the source code and it seems to be quite a promising path: https://github.com/replit/kaboom/blob/master/src/kaboom.ts#L2419

So, how do I use a non-bitmap font?

From what I can gather, you can just set your font styles to either

  1. The name of a bitmap font loaded via loadFont; or
  2. The name of any font that the HTML5 canvas can render

Thus, we could use e.g. font: "sans-serif", font: "arial", etc if we wanted to use any of the system fonts, and if you'd like to use a custom font, you can just load it onto the page using CSS, and then set font: equal to the name you give it in your @font-face rule.

This answer covers loading CSS fonts for HTML5 canvas, but I'll show a brief example here too:

In a CSS file, lets call it fonts.css:

@font-face {
    font-family: 'kenney-blocks';
    src: url('fonts/Kenney-Blocks.woff');
}

In your main HTML file, in the <head> section:

<link rel="stylesheet" href="fonts.css" />

In your Kaboom setup:

kaboom({
  font: "kenney-blocks",
  // ...

Or, you could update Kaboom

Further digging reveals that while they haven't updated their docs, the latest version of Kaboom actually has two loadFont methods, with the old version from the docs being renamed to loadBitmapFont.

If you update to the latest version of the library, you'll be able to use the following (and note that you don't need to pass in the bitmap size parameters as it's not trying to load a bitmap font anymore)

loadFont("kenny-blocks", "Kenney-Blocks.woff");

(see https://github.com/replit/kaboom/blob/master/src/kaboom.ts#L987)

However, since they've clearly renamed some stuff, this could potentially be a breaking change, which might be worth keeping in mind if you've already written quite a lot of your game.

Toastrackenigma
  • 7,604
  • 4
  • 45
  • 55
  • Hi, I code on Replit so, I think it uses latest version of Kaboom. I try your answer when i be have access to my Replit project. – Hramzhuk Jun 27 '22 at 12:40
  • Yeah, its a super interesting problem, the project's source definitely seems to imply that this all exists (and the git blame shows that it was written 5 months ago!), but like the docs aren't updated either. Maybe they haven't released it yet? In any event, I think my first solution should work – Toastrackenigma Jun 27 '22 at 12:48
  • I tried your answer where you say that without bitmap font's size, but it give me same result. I selected in Replit template kaboom, so i only code game js file. – Hramzhuk Jun 27 '22 at 15:44