Bitmap font engine problem

Started by
21 comments, last by Jason Z 11 years, 1 month ago

Hello.

I'm trying to create my own text-rendering engine based on Rastertek's tutorial. The steps I did to make it work:

1. Created my own .png file, containing common ASCII symbols divided by spaces. PNG file had not been compressed.

2. Successfully parsed PNG file so that each symbol has it's own texture coordinates and width/height in pixels. The height is the same for each letter and equals to texture height.

3. Created DDS file from PNG font file.

4. Loaded texture from DDS file.

5. Created squares for each letter according to their width/height in pixels and texture coordinates.

6. Created orthogonal projection matrix to project them on the screen within pixel shader without any changes.

Everything seems well, but the result looks bad:

[attachment=13749:game.png]

As you can see, the letters look dirty and unprecise. Thats how DDS file looks in DX texture tool for comparison:

[attachment=13750:font_dds.png]

Advertisement

What kind of filtering are you using for your sampler state when you draw it?

Perception is when one imagination clashes with another
Thank you for response. I use this sampler state:


    D3D11_SAMPLER_DESC samplerDesc;
    samplerDesc.Filter = D3D11_FILTER_MIN_MAG_MIP_LINEAR;
    samplerDesc.AddressU = D3D11_TEXTURE_ADDRESS_WRAP;
    samplerDesc.AddressV = D3D11_TEXTURE_ADDRESS_WRAP;
    samplerDesc.AddressW = D3D11_TEXTURE_ADDRESS_WRAP;
    samplerDesc.MipLODBias = 0.0f;
    samplerDesc.MaxAnisotropy = 1;
    samplerDesc.ComparisonFunc = D3D11_COMPARISON_ALWAYS;
    samplerDesc.BorderColor[0] = 0;
    samplerDesc.BorderColor[1] = 0;
    samplerDesc.BorderColor[2] = 0;
    samplerDesc.BorderColor[3] = 0;
    samplerDesc.MinLOD = 0;
    samplerDesc.MaxLOD = D3D11_FLOAT32_MAX;

    mpDevice->CreateSamplerState(&samplerDesc, &mpSamplerState);
 

Out of curiosity, why don't you use the sprite fonts that are part of XNA.

Anyways, I took a look at more detail. I thought it might have been a slightly reduced image, but the final image and the original font both show the Capital 'M' at 10 pixels tall.

However, this looks like compression artifacts. I.e. when it was saved, it may have included a small decompression like PNG/JPG would use. Or it could be from the loading process. I haven't used DX font loading of any type, so I'm not sure exactly how it should work, but that really looks like compression artifacts.

Moltar - "Do you even know how to use that?"

Space Ghost - “Moltar, I have a giant brain that is able to reduce any complex machine into a simple yes or no answer."

Dan - "Best Description of AI ever."

Are you sure of your texture coordinate and your vertex coordinates ? I had a similar issue with OpenGl, and I had to correct the texture coordinates. It was years ago though, so I cannot be more accurate.

Space Zig-Zag, a casual game of skill for Android by Sporniket-Studio.com

Thank you for response, guys.

Out of curiosity, why don't you use the sprite fonts that are part of XNA.

Anyways, I took a look at more detail. I thought it might have been a slightly reduced image, but the final image and the original font both show the Capital 'M' at 10 pixels tall.

However, this looks like compression artifacts. I.e. when it was saved, it may have included a small decompression like PNG/JPG would use. Or it could be from the loading process. I haven't used DX font loading of any type, so I'm not sure exactly how it should work, but that really looks like compression artifacts.

I'm creating my own C++ rendering engine for the sake of learning DX11. Not sure if XNA sprite fonts can be used in such application.

I don't think it is caused by image compressing in my case, since DDS file, generated from image (which I receive uncompressed) looks precise and has no artefacts. However, It is possible that this behavior is caused by loading mechanism. In my engine, I use DDS loader, provided by new Microsoft D3D11 tutorials. I'll create plane with size of the font texture and check if this behavior keeps bubbling up even for sole plane mesh, thanks for pointing that out.

Are you sure of your texture coordinate and your vertex coordinates ? I had a similar issue with OpenGl, and I had to correct the texture coordinates. It was years ago though, so I cannot be more accurate.

Well, I'm absolutely sure about generated vertex coordinates and that I load and set correct texture coordinates from font description file, generated by one of my tools. At first glance, texture coordinates and width of every character, obtained from this tool are legit. The whole mechanism of generating data from PNG file in this tool is just about getting start pixel and end pixel of each symbol and dividing those values by width of the file, so it's pretty clear and simple.

So you have startPixel/width and endPixel/width OR startPixel/width and (endPixel + 1)/width ?

Space Zig-Zag, a casual game of skill for Android by Sporniket-Studio.com

If you paste your two images on top of each other and align the letters it's clearly visible that the rendered characters are wider than those in the texture. Perhaps you scale horizontally somewhere. Also, if you manually specify the back-buffer size, double-check that it matches the window client area.

So you have startPixel/width and endPixel/width OR startPixel/width and (endPixel + 1)/width ?

If you paste your two images on top of each other and align the letters it's clearly visible that the rendered characters are wider than those in the texture. Perhaps you scale horizontally somewhere. Also, if you manually specify the back-buffer size, double-check that it matches the window client area.

Yeah, I just checked font description generation program and it seems that it was (endPixel+1)/width that caused result letters look wider. Anyway, I fixed it, and result text still looks bad:

[attachment=13758:update.png]

Back-buffer's size is okay. By the way, letters on this new screen are 32 pixels tall, so pay no attention to that.

Out of curiosity, why don't you use the sprite fonts that are part of XNA.

OOPS, a title near this one when I posted had said something about XNA and I confused it slightly with this one, presuming XNA, which as I recall allows the use of DX components.

I'm creating my own C++ rendering engine for the sake of learning DX11. Not sure if XNA sprite fonts can be used in such application.

Yeah, same issue as prior, and I don't think XNA fonts would be usable in DX

Moltar - "Do you even know how to use that?"

Space Ghost - “Moltar, I have a giant brain that is able to reduce any complex machine into a simple yes or no answer."

Dan - "Best Description of AI ever."

This topic is closed to new replies.

Advertisement