2
\$\begingroup\$

I'm currently building a game that utilizes many of its own 'windows' to display various information and dialogue to the user. Since there are multiple sizes and proportions these windows must be displayed at, we need a consistent way to draw the frame around the window itself so that it does not become stretched as we change the default size/proportion of the art asset during runtime.

The solution we have currently come up with is drawing the frame in pieces, and the background of the windows separately. We would have the background, a 'corner piece', and a 'connector piece'. The background would be drawn and resized to whatever size and proportion not caring about if this particular piece was stretched . The corner would be drawn and rotated to fit at each corner of the window. Finally the connectors would be 1 pixel wide pieces that would be drawn and rotated/stretched to fill the gap between the 4 corner pieces.

While I feel this is an adequate solution to the problem I am not sure if this is the solution most games use when they have windows they would like to keep consistently framed. Is there a more commonplace solution for this issue, or does what we've come up with pretty much nail it on the head?

\$\endgroup\$
2
\$\begingroup\$

This is a common pattern; in Flash it is called 9-slice scaling, and in Unity it is called 9-slicing. If you ever implement it in 3D as opposed to 2D, 27-slice scaling is the appropriate term. It is undoubtedly implemented in countless other UI APIs across all known languages / platforms.

So yes, you are on exactly the right track, although you may wish to check if there is a UI library that already does this for you, rather than you having to do it yourself, given what a common pattern it is.

\$\endgroup\$

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.