UI windows with multiple border elements

[ron2812]

Hello everyone!

I made a couple of small sprites a wanna use as border-elements of a window (corners, lines, splitter-elements etc.)
and a seamless tile for creating the window's background.

Since i made splitter elements for the border (T-shaped) i can create a window with various smaller panels on it.
This gives me some flexibility when designing the UI.

The thing is, that when I create multiple widgets for the border - containing the various border parts - they don't align perfectly.
I tried using the pixel-perfect feature, but i still have gaps between the parts sometimes. Don't know how to get rid of this.


Is there a standard-procedure when creating these kind of windows with NGUI?
The 9-sliced technique isn't really what i'm looking for, since i need more complicated windows with more separate panels.
And i need the window background to be tiled.

Thanks for your help in advance!

[ArenMook]

The "gaps" you see are likely just the result of texture filtering. Have you tried simply overlaying them by 1 pixel?

Also keep in mind for the tiled sprite you will want to specify a border of 1 pixels, or you will notice the edges.

[ron2812]

Hey!

Thanks. Yeah, I overlapped the border-elements. So this shouldn't be the problem. Actually overlapped them for 1+ pixel each widget.
Still i get a very small black line between some of the sprites. On some it works, on some it doesn't. Looks like it could be a perspective thing, or something like that.
But i'm using a 2D cam for the UI.
I'm using the border of 1 pixel for the tiled sprite already - had that problem too, but found the fix here on the forum :-)


I bet there are more people using a technique like that - using multiple sprites to draw the border with corners, lines and splitters.
So i wonder if there's  a special solution for this.

[ArenMook]

If you add a pure white square sprite to the atlas, the pixels around this sprite will be black, so when you zoom in on it in any way, you will see it. The key is to make sure it's all pixel-perfect.

[ron2812]

Ok! Thanks. I will fool around with it a little bit more!