"Unity practical Skills" Ngui image Image

Ngui do the UI, there is a very common function, such as:

Such an interface, if a large map of a set of pictures can not put a few, then in order to save resources, art will cut this figure 9 Palace.
But this is still very large, then will be proposed, if the figure is about the same words, left and right only half, the other half of the program to spell, up and down the same only cut above, the next program to spell, up and down about the same words out of the upper left corner, the rest of their own spell.
Like this, it's going to be a picture.

Just out of the left.

Spell not only the egg pain, more important is to spell out the interface will have black edge, and in the adaptation of the different interface when the black edge will always run out.
At this time the General project group will expand the Ngui uisprite, do a mirror function, directly fill out the right.
Like this:

Choose the mirrowtype to feel whether the padding is left or right, padding up or down or up or down.

How to achieve, here is a bit complex, and each Ngui version is not quite the same, here is about to directly send code

1. The first is to change the Inspector file (in fact this should be put last)

Add an image selection box
2. Add the corresponding attributes on the UIBasicSprite.cs

3. Next change on the UISprite.cs, now onfill Riga mirror-like logic, too long, cut part:

The logic here is based on your choice of image mode, such as the left and right words, calculate two times UV information, draw two uirect, here to expand the logic of NGUIMath.cs. is to add the part that calculates the image (see the code here, don't explain it)

4. Finally, on the UISprite.cs, the logic of mirroring on Simplefill and Slicedfill to Simplefill examples:


In fact, the logic here is that if it is a horizontal mirror, calculate the left vertex data, UV data, color data, save, and then calculate the right vertex, UV data, color data, save. Others follow this logic analogy

5. Finally refresh the UI by uiwidget its own updategeometry

Finally, one thing to note is that there may be black edges in such stitching, but you can circumvent this problem by reducing the UV sampling of the one or two images.

Finally, the demo
Https://pan.baidu.com/s/1kRaBY2C85ftXS0_JPe_M-w

"Unity practical Skills" Ngui image Image