Jump to content
  • entries
    943
  • comments
    5,899
  • views
    924,357

Improved 2D Drawing Command Set


Josh

4,453 views

 Share

To provide support for advanced GUI rendering, some of the features I implemented in the refactored window class are being brought into the 2D drawing command set. This includes a lot of text rendering features like word wrap, multiline, horizontal and vertical centering, and viewport clipping.

 

A new text drawing function includes additional parameters for better control:

Context::DrawText(std::string text, int x, int y, int width, int height, int style)

 

The style parameter can be a combination of the following options:

Text::Left
Text::Center
Text::Right
Text::VCenter
Text::WordWrap
Text::Multiline

 

Context-based GUIs are now rendered to a texture first, and then the texture is drawn onscreen. This allows GUIs to be partially drawn (only invalidated parts of the GUI are re-rendered). That means if you move the mouse over a button or something, only that button re-renders, and the rest of the UI is just cached in the texture and doesn't have to be redrawn. This makes the GUI performance fast, even when lots of text is shown onscreen. This is perfect for dialog boxes or help screens.

 

The alpha blend drawing mode has also been changed to use a separate blend function for the alpha values. When a primitive is rendered with alpha blending, the maximum alpha value will be left in the rasterizer. This makes it so the resulting GUI rendered image blends correctly when drawn on top of the screen with alpha blending enabled.

 

blogentry-1-0-50299400-1467922776_thumb.jpg

  • Upvote 8
 Share

14 Comments


Recommended Comments

Now that's what I'm talking about. I assume the background color to that is set with context's SetColor() so we can have transparent or any color?

 

Now if you can figure out a way to have the font size be more dynamic because when dealing with different resolutions you'd want different font sizes. Maybe we can determine small/med/large font sizes that this uses or something? I've always thought the font style and the size shouldn't be tied so closely like it is as style is 1 thing and size you'd want more dynamic based on the screen resolution.

Link to comment

By default the background will probably just be transparent. In this case, I am using a script that draws a full-screen rectangle at a random color. I was using this to test the partial screen refreshing, so when you move the mouse over the button in the top-left corner, only that widget's area gets redrawn.

Link to comment

so now we can render text onto anything 3d?

You could before. But yeah, the same GUI will work on 3D panels and things in the game world. You'll just have to set the input manually based on screen picking. A widget script will work the same in a windowed application, a game menu, or an interactive menu in the game world.

 

I'm just going to implement the framework and some basic controls, and I'll let the community extend it however you like.

  • Upvote 2
Link to comment

Yey, this is cool if we can do Draw* on textures instead of just context.

You could before.

But we could already you say? how?

Link to comment

Mack, I think you misunderstand, I want to draw text to a texture. DrawText() is context command which is not a part of Render(), I think?

Show me how to draw text onto a texture using DrawText(), decals are not text. smile.png

Link to comment

Well, yeah its not part of Render - but thats why you draw to a custom buffer/texture then apply it to a model. But its the exact same concept. There really is no difference between drawing a 2D image vs 2D text onto a model. My "decal" is not a LE decal. I was drawing on the texture/buffer being applied to the model as the video shows in the upper left hand corner. But after Josh put out his LE4 decals there was no reason to continue with it. And the first post I showed is a way to perform it. Apply the drawn text in a custom buffer as a texture to a material.

Link to comment

Sorry I missed :

Buffer:SetCurrent(self.mybuffer)

before doing context, I see what you did here. Thanks for the example. I didn't know you could do this.. awesome.

 

Edit: had a chance to run it, works great and I updated your example script slightly.

  • Upvote 1
Link to comment
Guest
Add a comment...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

×
×
  • Create New...