• Announcements

    • khawk

      Download the Game Design and Indie Game Marketing Freebook   07/19/17

      GameDev.net and CRC Press have teamed up to bring a free ebook of content curated from top titles published by CRC Press. The freebook, Practices of Game Design & Indie Game Marketing, includes chapters from The Art of Game Design: A Book of Lenses, A Practical Guide to Indie Game Marketing, and An Architectural Approach to Level Design. The GameDev.net FreeBook is relevant to game designers, developers, and those interested in learning more about the challenges in game development. We know game development can be a tough discipline and business, so we picked several chapters from CRC Press titles that we thought would be of interest to you, the GameDev.net audience, in your journey to design, develop, and market your next game. The free ebook is available through CRC Press by clicking here. The Curated Books The Art of Game Design: A Book of Lenses, Second Edition, by Jesse Schell Presents 100+ sets of questions, or different lenses, for viewing a game’s design, encompassing diverse fields such as psychology, architecture, music, film, software engineering, theme park design, mathematics, anthropology, and more. Written by one of the world's top game designers, this book describes the deepest and most fundamental principles of game design, demonstrating how tactics used in board, card, and athletic games also work in video games. It provides practical instruction on creating world-class games that will be played again and again. View it here. A Practical Guide to Indie Game Marketing, by Joel Dreskin Marketing is an essential but too frequently overlooked or minimized component of the release plan for indie games. A Practical Guide to Indie Game Marketing provides you with the tools needed to build visibility and sell your indie games. With special focus on those developers with small budgets and limited staff and resources, this book is packed with tangible recommendations and techniques that you can put to use immediately. As a seasoned professional of the indie game arena, author Joel Dreskin gives you insight into practical, real-world experiences of marketing numerous successful games and also provides stories of the failures. View it here. An Architectural Approach to Level Design This is one of the first books to integrate architectural and spatial design theory with the field of level design. The book presents architectural techniques and theories for level designers to use in their own work. It connects architecture and level design in different ways that address the practical elements of how designers construct space and the experiential elements of how and why humans interact with this space. Throughout the text, readers learn skills for spatial layout, evoking emotion through gamespaces, and creating better levels through architectural theory. View it here. Learn more and download the ebook by clicking here. Did you know? GameDev.net and CRC Press also recently teamed up to bring GDNet+ Members up to a 20% discount on all CRC Press books. Learn more about this and other benefits here.
Sign in to follow this  
Followers 0
riuthamus

Resizing a UI element (Best practice)

12 posts in this topic

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?
1

Share this post


Link to post
Share on other sites
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[list]
[*]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).
[/list]
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.
2

Share this post


Link to post
Share on other sites
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.
0

Share this post


Link to post
Share on other sites
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.
1

Share this post


Link to post
Share on other sites
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.
1

Share this post


Link to post
Share on other sites
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.
0

Share this post


Link to post
Share on other sites
[quote name='riuthamus' timestamp='1351603450' post='4995393']
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.
[/quote]

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 [url="http://www.cairographics.org/OpenGL/"]Cairo[/url] (or similar):


[quote]
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] Edited by nox_pp
1

Share this post


Link to post
Share on other sites
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.
0

Share this post


Link to post
Share on other sites
[quote name='riuthamus' timestamp='1351603450' post='4995393']
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.
[/quote] 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.
0

Share this post


Link to post
Share on other sites
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.
0

Share this post


Link to post
Share on other sites
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
1

Share this post


Link to post
Share on other sites
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.
0

Share this post


Link to post
Share on other sites
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 [url="http://software.intel.com/en-us/articles/dynamic-resolution-rendering-article"]Dynamic Resolution Rendering[/url] 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 [url="http://www.youtube.com/watch?v=CGZRHJvJYIg"]here[/url], original article [url="http://www.valvesoftware.com/publications/2007/SIGGRAPH2007_AlphaTestedMagnification.pdf"]here[/url]). Compositing several distance fields together with effects like gradients could give a fairly wide range of scalability at low runtime cost.
0

Share this post


Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!


Register a new account

Sign in

Already have an account? Sign in here.


Sign In Now
Sign in to follow this  
Followers 0