12 replies to this topic

[riuthamus]

So, we just got done converting our project to SharpDX so that we can utilize some DX11.1 support. In the process of doing this we converted our UI to be rendered with direct2d, doing so increased our performance greatly but we are having issues with resizing of elements and animations.

Normally, we would use a sprite sheet to setup basic animations of the elements but in doing so we have caused one frame to bleed into the other. We want something like the Dragon Age UI or Dragon Age 2... these were both very clean and very powerful. Any thoughts on how best we can achieve this?

[Xanather]

I recently did this for my game and made a re-sizable window class. This window class was the base class for other classes (i.e. the WindowChat class).

I created a set of textures that the window will use. Including

• The top-left corner border
• The top-right corner border
• The bottom-left corner border
• The bottom-right corner border
• Horizontal border (for the top and bottom parts of the window)
• Vertical border (for the left and right parts of the window).

After that I just draw all them textures based on a rectangle object (with x,y,width,height fields). If the window re-sizes some of these textures may change position, some may not. The only textures which are stretched are the horizontal/vertical border textures (think about it logically).

I'm not completely sure this it what you want but anyway.

Xanather.

[riuthamus]

I very much appreciate that information. Sadly, i dont think that would work for circle type of elements or oddly shaped ones. We want to create something that has the ability to dynamical change the shape of the UI element. For example, say i have a background and i anchor everything to specific locations on that bg, we need to modify the sub elements that are linked to that bg as well as the bg when we resize it via Sreen resolution modification or from just general UI control. WoW had something that worked like this.

[Xanather]

Oh ok, well that's probably beyond anything I have ever done before. Try create events and handle them events for such changes. If your talking about moving elements within a bigger element (i.e. a button in a window) I just updated all the Rectangle positions of the elements within that window every update, considering the Rectangle class is only 16 bytes long I thought why not.

Your UI seems to be a bit more sophisticated though, and creating events instead of updating the elements within a other element every update would probably be more efficient.

[Burnt_Fyr]

I think most people would recommend CEGUI, though I have no experience with it, so I can't say if it is the tool you are looking for.

As Xanather mentioned, box 9 or 9 quad or what ever it is called is a very nice method for ui window construction, allowing windows to stretch without distortion. I'm sure something similar could be done for basic circles, but i have a feeling you want something more organic than that.

Resizing from a control is as easy as calling window.resize(), howeve, implementing resize() that will work in multi resolutions, will require a layer of abstraction, using a virtual coordinate system(or just make the entire thing in NDC space).

There was a really good article on here a while back, about making a custum ui... I'm sure you can still find it here somewhere. Basically all windows and controls are decendents of a base class, and each is a node in a linked list of windows/controls that are drawn from bottom up. When you resize your window, it can pass the resize info down to it's children, as well as to it's siblings, so that they maybe adjusted in turn.

[riuthamus]

I guess our major concern is really scaling of the images when you increase or reduce the resolution size. For the most part, that is.

[nox_pp]

I guess our major concern is really scaling of the images when you increase or reduce the resolution size. For the most part, that is.

Unless you generate the graphics on the fly, you're not going to be able to scale them infinitely. What Xanather mentioned is the standard way of achieving scalability for rasterized rectangles. Other than that, I would render to an OpenGL surface or image file using Cairo (or similar):

So why would you want to mix vector-graphics rendering, provided by cairo, with OpenGL in the first place?...

- Create pristine texture-maps, which are resolution-independent and combine those with your custom mip-mapping.
- Have animated vector-graphics as head-up-displays or overlays in your OpenGL-program.

Edited by nox_pp, 30 October 2012 - 08:23 AM.

[riuthamus]

Thanks for the comments, we tried one of these methods already and it seems to work. We will be doing some testing today and I will notify you guys here if it ends up being the result. Thanks again.

[web383]

I guess our major concern is really scaling of the images when you increase or reduce the resolution size. For the most part, that is.

You mentioned WoW, which even has a slider bar for 'Adjust UI Scale'. I'm pretty sure they have a set of fixed resolution UI elements (something fairly large), and just scale them in game with some standard texture filtering. Unless you a need pixel perfect UI, I think this is completely acceptable.

Upscaling is probably the biggest concern, so you can create fairly large resolution widgets and keep them in memory, and downscaling those images shouldn't lose too much visual fidelity. If you're really concerned with supporting ranges of say 800x600 to 1920x1080 (and if a single resolution UI set isn't acceptable), you could create multiple sets of your UI with varying resolutions, and apply the appropriate one when the user chooses their screen resolution.

Xanather has the correct solution for applying textures to scaleable windows.

[riuthamus]

Well the main concern is more or less for lower resolution. We are designing the UI for the 1280x720 range, when you resize to 1920x1080 you get a smaller and cleaner looking UI. The issue is the lower resolutions cause the elements to look odd and blotchy. I dont think we should or would support much lower than the 1024x768 but who knows.... 800x600 seems very very very outdated.

[Olof Hedman]

Just a note on 9-patch, even though stretching of the borders is the simplest, and looks good in many (most?) situations, you can also chose to repeat or clip them.
Might be a better idea if the borders have lots of intricate detail.
Can look a bit weird for the user if windows are dynamically resizable by the user though.

UIs generally does not play nice when scaled down, so if your problem is the low end of the resolutions, you might have to think about having different, lower res, decorations at lower resolution. (or just accept it doesn't look "perfect" and realize not many of your customers will have that experience anyhow, so maybe not so important to spend time on)

If the UI is very complicated, you might need different layout too, but as long as the screen has roughly the same apect ratio (doesn have portrait mode or such like mobile devices), you probably can create a layout that works for all.

Edited by Olof Hedman, 30 October 2012 - 10:27 AM.

[riuthamus]

Sounds like what we concluded to. There are certain things you must learn to accept and having slightly less appealing UI on ultra low end seems like one of them. Thanks for the advice and help.

[dougbinks]

One potential for low performance systems is to render the UI at a high resolution (res of the monitor) and the 3D scene at another resolution. This doesn't solve the issue completely as some systems ship with pretty low resolutions these days, but it can help. There's an example of this in the Dynamic Resolution Rendering sample I wrote, and though it's in C++ the basic principle should be easy enough to port.

You may also want to check out Signed Distance Fields (nice video here, original article here). Compositing several distance fields together with effects like gradients could give a fairly wide range of scalability at low runtime cost.