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:-

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:-

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.

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 :)

Sorry for the long post.

Thank you

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.

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?

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.

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.

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?

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.

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.

I see. I just heard that some people used SVG to scale game UI. anyways, its sounds too complex for me. I will just expand on my method for now.

thank you guys