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?
Resizing a UI element (Best practice)
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
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.
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.
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.
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.
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.
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.
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.
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.
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.
[/quote]
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.
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.
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.
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.
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.
This topic is closed to new replies.
Advertisement
Popular Topics
Advertisement
