Sign in to follow this  

How to scale UI without losing image quality?

This topic is 1107 days old which is more than the 365 day threshold we allow for new replies. Please post a new topic.

If you intended to correct an error in the post then please contact us.

Recommended Posts

Hello everyone,

 

So I have been making my own UI library for my game engine in XNA and I have been having a lot of fun with it. Anyway, I have been looking for a better way to scale UI in real time just like Windows or QT, and I have found a nice simple solution to scale UI without losing much or any image quality for that matter. However it works only on specific kind of UI. I will show you what I mean.

 

So in my UI library, I load the window or button (or whatever I want to scale) UI image which would be in a PNG format and would look something like this.

 

UI image:-

WmbQBUg.png?1

 

 

 

 

 

I take the image and cut it into nine separate pieces and save each peace in a separate texture:-

  • I cut the four corners which will never be scaled.
  • I cut the four lines of the image that are on the Top, Left, Bottom and right which they will be scaled.
  • I cut the background image which will be scaled.

 

 

 

How I cut it:-

cVAMbXv.png

 

 

 

After that I just resize the background and the four lines on the sides. By doing that I can scale the UI perfectly to any resolution I want without losing the UI image quality.

 

Now that works great for simple UI image like the one above. However if I have something more complicated like this UI image, its not possible to scale it using this method. Because there is a lot of details on that image and it will not scale correctly.

 

TrvTx9i.png

 

 

So my question is. Is there another way to take something like the image above and scale it without losing any quality?

 

 

Here is my UI library working in action :)

 

http://www.youtube.com/watch?v=K6-ymbY1PHk&feature=youtu.be

 

 

 

Sorry for the long post.

 

Thank you happy.png

Edited by FantasyVII

Share this post


Link to post
Share on other sites
Depending on the number of resolutions you will support, you could straight forward make a hires texture for each resolution. Unless you're going for windowed in your final release (where users can resize the window freely), which I wouldn't advice to be honest. This will ask for quite some effort on a lot of other aspects too.

Share this post


Link to post
Share on other sites


So my question is. Is there another way to take something like the image above and scale it without losing any quality?

The 9-slice is a method that is easily controllable. However, it is not impossible to generalize the method. All you need is to define a mesh and write a corresponding routine that knows which portions of the mesh are allowed to scale and which not.

Share this post


Link to post
Share on other sites

 


So my question is. Is there another way to take something like the image above and scale it without losing any quality?

The 9-slice is a method that is easily controllable. However, it is not impossible to generalize the method. All you need is to define a mesh and write a corresponding routine that knows which portions of the mesh are allowed to scale and which not.

 

 

 

Can you please explain more on how I can achieve that?

Share this post


Link to post
Share on other sites

This is really just an extension of what you are doing already.

Take all of the details that don't scale nicely (anything with sharp edges like the little cracks and nicks, the gem inlays, etc) and make each one into a separate texture (with a transparency channel).  Remove all the details from the image so that what is left can be scaled using your existing method.

Then after scaling, apply all of the detail textures (with alpha blending).  Taking some care to place the details appropriately on the scaled image.

Share this post


Link to post
Share on other sites

This is really just an extension of what you are doing already.

Take all of the details that don't scale nicely (anything with sharp edges like the little cracks and nicks, the gem inlays, etc) and make each one into a separate texture (with a transparency channel).  Remove all the details from the image so that what is left can be scaled using your existing method.

Then after scaling, apply all of the detail textures (with alpha blending).  Taking some care to place the details appropriately on the scaled image.

 

I see.

Share this post


Link to post
Share on other sites

I was looking around and I found an image format called SVG. from what I understand, it scales really well with any resolution. What's your opinion about it? and why isn't it replacing PNG as a file format? 

Edited by FantasyVII

Share this post


Link to post
Share on other sites


I was looking around and I found an image format called SVG. from what I understand, it scales really well with any resolution. What's your opinion about it? and why isn't it replacing PNG as a file format? 

Because you're comparing apples and oranges. PNG is a raster image format, and SVG is a vector image format. Present day GPUs are build to work with raster graphics. A vector graphics image does not scale to resolutions, because it is given resolution independent and then rasterized in a given resolution. This rasterization is an additional process necessary for rendering. If you're looking for raster graphics in several resolutions, then search for multi-resolition images (MRI). The MIPmaps of textures are a kind of MRI.

Share this post


Link to post
Share on other sites

I was looking around and I found an image format called SVG. from what I understand, it scales really well with any resolution. What's your opinion about it? and why isn't it replacing PNG as a file format? 

 

Well PNG is for compressed raster/bitmapped images (i.e. a fixed resolution).  I don't know much about SVG but from a cursory look, it seems to be a vector graphics format, where shapes are described with curves and such.  PNG and SVG are really very different.  You wouldn't want to save your raster images as SVG, as much would be lost in the translation (I'm not even sure if SVG can do raster images).  Likewise you wouldn't want to save vector based art in PNG format as that would lose all the scalability.

 

There is software that can convert from a raster format like PNG to SVG, but I wouldn't expect the results to be very good for detailed images like what you are trying to scale.

Share this post


Link to post
Share on other sites


Now that works great for simple UI image like the one above. However if I have something more complicated like this UI image, its not possible to scale it using this method. Because there is a lot of details on that image and it will not scale correctly.

One simple trick to get around this limitation with 9-patch images is to repeat the border regions, instead of stretching them. You have to be a little careful about the handling of fractional repetitions, but it is certainly manageable.

Share this post


Link to post
Share on other sites

This topic is 1107 days old which is more than the 365 day threshold we allow for new replies. Please post a new topic.

If you intended to correct an error in the post then please contact us.

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