how to create gui buttons with DirectX 11?

Started by
6 comments, last by Jason Z 9 years, 4 months ago

I know how to make gui buttons with DirectX 9 with rhw etc, how would you do it for DirectX 11?

Picture of what i mean

http://i.imgur.com/Fik6fhU.png?1

:)
Advertisement

A button is usually nothing more than a virtual rectangle that exists within the client area of a window. As the user moves the mouse just test whether the mouse is inside of each rectangle (perhaps using PtInRect). Now this doesn't help the user much, so you would also have to render some quads on the screen in the same positions using some kind of button texture - perhaps a 'normal' one and a 'mouse over' one. Something like

[sharedmedia=core:attachments:24797]

Here looks an quite good reference though I did never implemented. If the links get down it is not my fault. Remember that for a good UI, an entire dedicated library it is necessary to get good results. Search "Fonts and Glyphs". happy.png

A button is usually nothing more than a virtual rectangle that exists within the client area of a window. As the user moves the mouse just test whether the mouse is inside of each rectangle (perhaps using PtInRect). Now this doesn't help the user much, so you would also have to render some quads on the screen in the same positions using some kind of button texture - perhaps a 'normal' one and a 'mouse over' one. Something like

Yeh i understand you render 2 triangles to make a quad, but can you just specify screencoords for the vertexbuffer and it will understand the vertices are pretransform through the pipeline?

:)

If you have SpriteBatch available, you can use that ...


            if (srvNormal == null) // then render a simple text button
            {
                // set viewport - sprite batch uses full viewport
                Viewport windowViewport = new Viewport(0, 0, UI.Window.ClientSize.Width, UI.Window.ClientSize.Height);
                UI.Window.Device3D.ImmediateContext.Rasterizer.SetViewport(windowViewport);

                // render background
                if (State == States.Down)
                {
                    UserInterface.SpriteBatch.Begin();
                    SpriteBatchDraw.DrawSolidRectangleAA(new RectangleF(absRegion.X + 2, absRegion.Y + 2, absRegion.Width - 4, absRegion.Height - 4), Color.White);
                    SpriteBatchDraw.DrawSolidRectangleAA(new RectangleF(absRegion.X + 5, absRegion.Y + 5, absRegion.Width - 10, absRegion.Height - 10), Color.Black);
                    UserInterface.SpriteBatch.End();

                     // cost [3949-5037 ticks]
                    RenderTarget renderTarget2D = UI.Window.RenderTarget2d;
                    renderTarget2D.BeginDraw();
                    renderTarget2D.Transform = Matrix.Scaling((absRegion.Width - 4) / (float)absRegion.Width) * Matrix.Translation(2, 2, 0);
                    renderTarget2D.DrawText(Text, TextFormat, new RectangleF(absRegion.X, absRegion.Y, absRegion.Width, absRegion.Height), Brush);
                    renderTarget2D.EndDraw();
                }

If you don't have a SpriteBatch facility, then you're right, you can use screen co-ordinates.

One idea, that I have found in the Bee Movie Game.
GUI would be developed and rendered in full 3D.
Stereoscopic effect for GUI is awesome.
You would create more than two triangles in the legacy 2D style.
No more pretransformed vertices with D3D11 indeed. Even if you pass through vertices (in NDC coordinates) you still need a vertex shader, at which point you can grant it a transformation for convenience. For D3D 9 / Windows style pixel coordinates you use something like this:

XMMatrixOrthographicOffCenterLH(0, windowClientWidth, windowClientHeight, 0, 0, 1);


Or use the DirectX Tool Kit's sprite batch, as Gavin suggested.


Yeh i understand you render 2 triangles to make a quad, but can you just specify screencoords for the vertexbuffer and it will understand the vertices are pretransform through the pipeline?

You can do that, but like unbird says, you need a vertex shader no matter what. You can make your vertex shader just pass through your pre-transformed vertices without modification, so you can sort of emulate how it worked in D3D9. As far as creating vertices with 4 coordinates, that isn't an issue at all - you have pretty much free will to create vertex layouts of the size and type that you want.

This topic is closed to new replies.

Advertisement