[Solved] CEGUI Text Coloring/Blurring

[thomas]

So it looks like through LookNFeel that text can be given a gradient color by setting topLeft, topRight, bottomLeft, bottomRight colors for the text.

My question is, is it possible to do effects like blur the text? Maybe not in XML but in code, like through custom rendering?

[Ident]

Blurring text requires post-processing. You could blur the whole contents of a window. This is however a quite heavy task for your GPU, because you need to access a lot of texels to calculate the blurred fragment. CEGUI cant do this out of the box, but CEGUI allows you for example to use a Label window and set AutoRenderingSurface to true. This means that it will render to a texture. You can access this texture and then apply a blurr filter on it. For this you should have solid graphics programming knowledge. This should also be doable using the RenderEffects of CEGUI, but again it would require graphics programming skills (you will need to be able to program your own shader) and I am not sure how easy it is to connect this to a CEGUI RenderEffect. Overall it is quite complicated but if you think you can do it and you manage to make progress on it we would be glad to integrate this rendereffect into CEGUI. We can definitely help you with questions that you have regarding CEGUI but you will have to do most of the work on your own.

In the end it might be better to just use an alpha-blending animation on the text, to fade it out. This comes at no costs for the GPU.

[thomas]

All right, thanks for the response.

Graphics programming is not my thing; but my friend who is also working on this project with me is a graphics programmer so he might be able to get it done. I'll let him know it might be a lot of work but that you guys would be willing to offer assistance where possible. If we figure it out, we'll give you the details to integrate it.

By doing it through the RenderEffects; is that something we have to put directly into the CEGUI source or can this be done externally within our own system, like a plugin (not in the sense of a .dll)?

[Ident]

You can use it directly in your own code without having to change anything about CEGUI. One of the examples uses RenderEffects. I am not even sure if we support Shaders with it though because we only recently improved the rendering system a lot. But in either case, you can grab the texture from it with the text and do whatever you want with it (for example blurring it and rendering it into a new texture and then displaying this new texture). However, I would actually advise you not to do this. Like I said I am not sure to what extent we support usage of shaders, and to use the texture directly you need extensive knowledge about rendering.

Unless you really really really want this and you are really proficient with graphics programming, c++ , and willing to do extra work for this, i dont advise doing this.
If you want to do it, go for it, we wil ltry to help as much as we can. However, I can definitely not help you with anything graphics-programming related, i can only help you to get stuff from cegui (texture) and put it back in (the blurred texture)

[thomas]

So after discussing it with my friend, we've decided it would probably be too much work for what we need. So we will just find a way to "cheat" like making a blurred font to use or something else.

So thank you Ident for taking the time to explain this and advising us not to do it

[Ident]

No problem I think there is things to spend your time more wisely on. Also consider that CEGUI supports bitmap fonts so you can create an image for each character and use that as Font. I am not sure how up-to-date it is, but there was a font-builder mentioned in the forums. Here is a link: https://github.com/andryblack/fontbuilder . As far as I remember it should still work 100% with CEGUI.

[thomas]

Oh awesome, we will check that out since we were wondering how to go about doing that. Thanks again.

In case someone comes looking, multicolored text in the LookNFeel XML can be accomplished via:

Code: Select all

<TextComponent>
    <Colours topLeft="FFFF7000" topRight="FFFF7000" bottomLeft="FFFFFF00" bottomRight="FFFFFF00" />
</TextComponent>