• Advertisement

DX11 How can i correctly render a character from a bitmap using dynamic vertex buffer?

Recommended Posts

I'm trying to render the characters of a bitmap texture that i generated with stb_truetype.h.

Currently i have the texcoords and the longitude of each character, my DirectXTexture2D is 512x512 normilized from -1 to 1.

So, i send to render the character "C", creating my triangulation starting from coords (0,0) -> (X0,Y0).

Then i get my X1 adding X0 + longitude. NOTE: I transformed my longitude to screen space coordinates dividing out of 512 (texture width size) before.

This is my bitmap texture:

Capture.PNG.703c279bef997c6c31ce5efc35c978bf.PNG

This is my vertex buffer:

float sizeX = static_cast<float>(tempInfo.longitude) / 512;	
float sizeY = 0.0625f; //32/512 (32->height of font)

    spritePtr[0].Pos = XMFLOAT3(0.0f + sizeX, 0.0f + sizeY, 1.0f);
	spritePtr[1].Pos = XMFLOAT3(0.0f + sizeX, 0.0f, 1.0f);
	spritePtr[2].Pos = XMFLOAT3(0.0f, 0.0f, 1.0f);

	spritePtr[3].Pos = XMFLOAT3(0.0f, 0.0f, 1.0f);
	spritePtr[4].Pos = XMFLOAT3(0.0f, 0.0f + sizeY, 1.0f);
	spritePtr[5].Pos = XMFLOAT3(0.0f + sizeX, 0.0f + sizeY, 1.0f);

	spritePtr[0].Tex = XMFLOAT2(tempInfo.Tex_u1, tempInfo.Tex_v0);
	spritePtr[1].Tex = XMFLOAT2(tempInfo.Tex_u1, tempInfo.Tex_v1);
	spritePtr[2].Tex = XMFLOAT2(tempInfo.Tex_u0, tempInfo.Tex_v1);

	spritePtr[3].Tex = XMFLOAT2(tempInfo.Tex_u0, tempInfo.Tex_v1);
	spritePtr[4].Tex = XMFLOAT2(tempInfo.Tex_u0, tempInfo.Tex_v0);
	spritePtr[5].Tex = XMFLOAT2(tempInfo.Tex_u1, tempInfo.Tex_v0);

NOTE: spritePtr is the pointer to my dynamic buffer that i map and unmap.

And this is my result:

Capture2.PNG.6b210d0ba3754bb8042be88bca436c71.PNG

I don't understand why it is too small compared to my bitmap and if i expand the triangulation i get a pixelated character.

Edited by RubenRS

Share this post


Link to post
Share on other sites
Advertisement

Grasping at straws here, but to me it just looks like your sizeX/sizeY might be wrong. In the results image your C looks like its a little distorted

I think you really just need to have sizeX = 32 and sizeY = 32 assuming the size for a letter is 32x32. As long as your tex coords are creating the right clipping rectangle on your texture I think you should be good

 

Share this post


Link to post
Share on other sites

I believe, font height isn't actually height of capital letters, it's the entire vertical extent of the font (consider, eg. glyphs "Ć" and "g"). So the height of glyph "C" will be less than 32, in your bitmap it's roughly 18 pixels. If you set the height to 18, it should fix the vertical stretching.
Then, there's the problem of the rendering being to small. Will it help, if I point out, that it's exactly half the size of what you expect?:)

Share this post


Link to post
Share on other sites
1 hour ago, dietrich said:

I believe, font height isn't actually height of capital letters, it's the entire vertical extent of the font (consider, eg. glyphs "Ć" and "g"). So the height of glyph "C" will be less than 32, in your bitmap it's roughly 18 pixels. If you set the height to 18, it should fix the vertical stretching.
Then, there's the problem of the rendering being to small. Will it help, if I point out, that it's exactly half the size of what you expect?:)

That have sense for me thanks.

Capture2.PNG.f32daf2261d559ca83c7332a248e8eaa.PNG

Edited by RubenRS

Share this post


Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now


  • Advertisement
  • Advertisement
  • Popular Tags

  • Advertisement
  • Popular Now

  • Similar Content

    • By LifeArtist
      Good Evening,
      I want to make a 2D game which involves displaying some debug information. Especially for collision, enemy sights and so on ...
      First of I was thinking about all those shapes which I need will need for debugging purposes: circles, rectangles, lines, polygons.
      I am really stucked right now because of the fundamental question:
      Where do I store my vertices positions for each line (object)? Currently I am not using a model matrix because I am using orthographic projection and set the final position within the VBO. That means that if I add a new line I would have to expand the "points" array and re-upload (recall glBufferData) it every time. The other method would be to use a model matrix and a fixed vbo for a line but it would be also messy to exactly create a line from (0,0) to (100,20) calculating the rotation and scale to make it fit.
      If I proceed with option 1 "updating the array each frame" I was thinking of having 4 draw calls every frame for the lines vao, polygons vao and so on. 
      In addition to that I am planning to use some sort of ECS based architecture. So the other question would be:
      Should I treat those debug objects as entities/components?
      For me it would make sense to treat them as entities but that's creates a new issue with the previous array approach because it would have for example a transform and render component. A special render component for debug objects (no texture etc) ... For me the transform component is also just a matrix but how would I then define a line?
      Treating them as components would'nt be a good idea in my eyes because then I would always need an entity. Well entity is just an id !? So maybe its a component?
      Regards,
      LifeArtist
    • By nickyc95
      Hi.
      I'm kind of late to this party but I thought I would ask anyway as I haven't found a concrete answer.
       
      When creating a game engine, when should you choose one methodology over another (more specifically OOP and DOD)? Which areas benefit from DOD? Which areas benefit from OOP? Do people typically mix multiple methodologies throughout a project? I.e. certain sub-systems created in one, and others in the another?  
      DOD - Data Oriented Design
      OOP - Object Oriented Design
       
      Pretty simple
      Thanks
    • By Estra
      Memory Trees is a PC game and Life+Farming simulation game. Harvest Moon and Rune Factory , the game will be quite big. I believe that this will take a long time to finish
      Looking for
      Programmer
      1 experience using Unity/C++
      2 have a portfolio of Programmer
      3 like RPG game ( Rune rune factory / zelda series / FF series )
      4 Have responsibility + Time Management
      and friendly easy working with others Programmer willing to use Skype for communication with team please E-mail me if you're interested
      Split %: Revenue share. We can discuss. Fully Funded servers and contents
      and friendly easy working with others willing to use Skype for communication with team please E-mail me if you're interested
      we can talk more detail in Estherfanworld@gmail.com Don't comment here
      Thank you so much for reading
      More about our game
      Memory Trees : forget me not

      Thank you so much for reading
      Ps.Please make sure that you have unity skill and Have responsibility + Time Management,
      because If not it will waste time not one but both of us
       

    • By mike44
      typedef struct FontInfo_t* FontHandle;
      MichaelNS::FontMgr m;
      MichaelNS::FontHandle FontGeladen;
      const char *FontPtr;
      start:
      InFileFont.append("Ubuntu-B.ttf");
      FontPtr = InFileFont.c_str();
      FontGeladen = m.loadFont(FontPtr, NULL, NULL, 14, 0);
      stop:
          m.unloadFont(FontGeladen);
          delete FontPtr;
      delete causes a crash. How to unload the class correctly?
      Thanks
    • By Stewie.G
      Hi,
       
      I've been trying to implement a basic gaussian blur using the gaussian formula, and here is what it looks like so far:
      float gaussian(float x, float sigma)
      {
          float pi = 3.14159;
          float sigma_square = sigma * sigma;
          float a = 1 / sqrt(2 * pi*sigma_square);
          float b = exp(-((x*x) / (2 * sigma_square)));
          return a * b;
      }
      My problem is that I don't quite know what sigma should be.
      It seems that if I provide a random value for sigma, weights in my kernel won't add up to 1.
      So I ended up calling my gaussian function with sigma == 1, which gives me weights adding up to 1, but also a very subtle blur.
      Here is what my kernel looks like with sigma == 1
              [0]    0.0033238872995488885    
              [1]    0.023804742479357766    
              [2]    0.09713820127276819    
              [3]    0.22585307043511713    
              [4]    0.29920669915475656    
              [5]    0.22585307043511713    
              [6]    0.09713820127276819    
              [7]    0.023804742479357766    
              [8]    0.0033238872995488885    
       
      I would have liked it to be more "rounded" at the top, or a better spread instead of wasting [0], [1], [2] with values bellow 0.1.
      Based on my experiments, the key to this is to provide a different sigma, but if I do, my kernel values no longer adds up to 1, which results to a darker blur.
      I've found this post 
      ... which helped me a bit, but I am really confused with this the part where he divide sigma by 3.
      Can someone please explain how sigma works? How is it related to my kernel size, how can I balance my weights with different sigmas, ect...
       
      Thanks :-)
  • Advertisement