Jump to content
  • Advertisement
Sign in to follow this  
Stefan Fischlschweiger

[SharpDX] Draw UI elements to screen as quads

This topic is 1376 days old which is more than the 365 day threshold we allow for new replies. Please post a new topic.

If you intended to correct an error in the post then please contact us.

Recommended Posts

I'm currently trying to get a user interface and Hud working in my game. Text based stuff works via Direct2D/DirectWrite

 

However, when i comes to graphical stuff I'm confused on how I should do that. I tried to to that with Direct2D's DrawBitmap function but somehow this only works when there is no 3D stuff to draw as well.

 

So I'm considering 3 options to do this via Direct3D

 

1. Make textured squares and rectangles in 3dsMax (or any modeller) and load these through my model loader, then draw them to screen.

 

2. Instead of making a model make a Quad class with Vertex and Index buffer and fill these buffers when instancing a Quad, the draw them to screen with another draw function.

 

3. Leave out buffers alltogether and instead have a shader do the heavy lifting, feeding it only the position and size of the quad while calculating vertex position and UVs in the shader, like in that fullscreen triangle code you can find all over the web.

 

I tried #3 and #2, with little to no success. Maybe I implemented it wrong, but maybe the whole approach is wrong.

So how do you guys usually do UIs/HuDs and what should I keep an eye on when making such stuff?

 

I need to be able to move and/or resize some of the UI stuff on the fly.

Share this post


Link to post
Share on other sites
Advertisement

I wrote a really quick and dirty UI module that does sort of #2 above.  I keep a dictionary of "gumps" which are just a quad with a texture, scale, position, and color.  I check a dirty flag every update and rebuild a dynamic vertex buffer with the info from the gump dictionary.

 

I draw each gump one at a time, with an ortho projection matrix, and just identity for the view.  The shader takes a 2d pos and 2d uv, and just multiplies the texture by the color.

 

It works for really basic stuff but there's no concept of draw order so complicated stuff and alphas probably won't work.  I made it just to display some static images really quickly.

 

I can paste some of the code if you'd like, but there's a bit of cruft in there from my material library.

Share this post


Link to post
Share on other sites

What I did for a GUI was just define a quad in screen-size (vertices going from 0,0,1 to whatever size you want your thing to be, keeping z=1) and have a matrix to decide where the quad has to go on the GPU. I then send an orthographic matrix to the GPU as viewProjection (Matrix.OrthoOffCenterLH(0, screenwidth, screenheight, 01f2f);) and I send a translation matrix (the model/world matrix, if you want) to the GPU.

 

Then a very simple GUI shader:

PS_IN VS(VS_IN input)
{
	PS_IN output = (PS_IN)0;

	output.pos = mul(mul(input.pos, world), viewProj);
	output.tex = input.tex;

	return output;
};

float4 PS( PS_IN input ) : SV_Target
{
	return image.Sample(imageSampler, input.tex);
};

Share this post


Link to post
Share on other sites
Sign in to follow this  

  • Advertisement
×

Important Information

By using GameDev.net, you agree to our community Guidelines, Terms of Use, and Privacy Policy.

GameDev.net is your game development community. Create an account for your GameDev Portfolio and participate in the largest developer community in the games industry.

Sign me up!