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