Tasharen Entertainment Forum

Support => NGUI 3 Support => Topic started by: Nacho on June 28, 2012, 04:49:21 PM

Title: How to set the border for the foreground and background images of a Scrollbar?
Post by: Nacho on June 28, 2012, 04:49:21 PM

Hi! I'm trying to make a vertical scrollbar using my own assets. I have both foreground and background images (see the attachments) that, when drawn by NGUI, get uniformly scaled in the vertical axis. This is not what I want, since the foreground image has a small protuberance that I don't want to get stretched. How can I tell NGUI to only scale the pixels that are in the center of the image? I know that it can be done, since I've attached the debugger to NGUI's example #7 and found out that the scrollbar images from that example have a non-zero border.

Thanks in advance for your help!

--Nacho

Title: Re: How to set the border for the foreground and background images of a Scrollbar?
Post by: JRoch on June 28, 2012, 06:10:36 PM

Have you added your self-made scrollbar images to an atlas?  Once added to the atlas, have to set the border values so that, when used as a slicedsprite, it doesn't scale the border areas of the image?

Title: Re: How to set the border for the foreground and background images of a Scrollbar?
Post by: ENAY on June 28, 2012, 08:31:31 PM

Yep, you need a SlicedSprite. But you also need to set up your image in your atlas to support slices sprites.

Check out the Fantasy Atlas and look at the images in there, you will notice that they have padding at each corner, this is what allows them to restrict certainly pixels only.

Title: Re: How to set the border for the foreground and background images of a Scrollbar?
Post by: JRoch on June 28, 2012, 10:07:26 PM

I'm fairly sure you mean "border" not "padding".

Title: Re: How to set the border for the foreground and background images of a Scrollbar?
Post by: Nacho on June 29, 2012, 12:51:21 AM

Thank you for your replies!  :)

OK, so I've found out that in order to modify the border properties of a sprite inside an atlas I need to select its prefab. The problem I'm having right now is that my foreground image looks quite blurry when I compare it against the one used by the NGUI example (see attachment). When I imported the original PNG sprite before placing it into the atlas, I set its properties to "Texture type = GUI" and "Format = Truecolor". What am I missing here?

Thanks in advance,

--Nacho

Title: Re: How to set the border for the foreground and background images of a Scrollbar?
Post by: ArenMook on June 29, 2012, 03:21:02 AM

NGUI changes the import settings of images you put into the atlas, so it doesn't matter.

Sprite preview will always look blurry if your sprite is small. It's just the effect of resizing a small sprite to a larger size. It's just a visual effect and shouldn't affect how your sprites look at their proper in-game size.

Title: Re: How to set the border for the foreground and background images of a Scrollbar?
Post by: Nacho on July 01, 2012, 10:27:55 AM

Thank you for your reply Aren, everything worked as expected  :)