[SOLVED] BMFont is blurry and its size/position are incorrect in-game

Questions
1

Hi everyone,
I’m developing a low-resolution retro game (180×360), and I decided to create a custom pixel art font. The font is 5×3 pixels, which is exactly the size I want to use in the game.

After generating the .fnt and .png files, I imported them into Defold. I assigned the builtins/fonts/font-fnt.material material as described in the documentation, then created a Label component and assigned my custom font to it.

.font Resources
.font Resources805×397 18.3 KB

The first thing I noticed is that the font appears very blurry in the editor. The difference is especially obvious when I compare it side by side with a sprite created using the exact same font at the same size. I’m not sure if I made a mistake while importing the font or if the editor simply has trouble displaying fonts this small.

.font label in editor
.font label in editor852×847 32.6 KB

I also tried running the game, and I noticed two additional issues:

  • the font is rendered much smaller than expected;
  • its position is completely different from what I see in the editor.

In game screen
In game screen639×1311 9.98 KB

I’m starting to suspect that the positioning issue may be caused by a script in my project that modifies the camera projection and the window size:

function init(self)
	window.set_size(640, 1280)
	window.set_position(1000, 80)

	msg.post("@render:", "use_fixed_fit_projection", { near = -1, far = 1 })
end

To make things easier to investigate, I created a minimal project containing the font, the sprite, and the script so you can reproduce exactly what I’m seeing: font_test.zip (75.3 KB)

Thanks a lot in advance for your help!

2

After spending a few hours researching and experimenting, I think I finally solved my issue. I’m replying to my own post in case someone else runs into the same problem in the future.

The main issue was caused by assigning the wrong material to the Label component.

The Bitmap Font itself was using the correct material (/builtins/fonts/font-fnt.material), but the Label component (which was using that font) also needed to use /builtins/fonts/label-fnt.material, which is the material specifically intended for .fnt labels.
Using the wrong material caused rendering issues, while switching to the correct one made the Label render properly in the same coordinate space as the rest of my sprites.

One more tip: if you’re working with pixel art labels, don’t forget to disable Subpixels in game.project under the Label section. This helps keep the text crisp.

Just to be clear, I’m still new to Defold, so don’t take my explanation as absolute truth. This is simply what solved the problem in my case.

5 Likes