Author Topic: Sliced sprites  (Read 7226 times)

QuantumMechanic

  • Newbie
  • *
  • Thank You
  • -Given: 0
  • -Receive: 0
  • Posts: 7
    • View Profile
Sliced sprites
« on: November 05, 2012, 07:01:30 PM »
Hi all,

My company is new to using NGUI so please forgive me if this has been answered before.  (I did a search for sliced sprites but didn't come up with anything that helped). My understanding of a sliced sprite is that the border region should not be scaled.  However, this doesn't appear to be the way it is working for me.  My case is:

I have a UI Root setup with a manual height of 640, minimum height of 320 and a maximum height of 1080.

I have an 8x32 sprite which is a solid blue except for a 1 pixel wide bar on the left and right edge of the sprite.  I have set the 9 slice sprite to have a 1 pixel border on the left and right. 

When I scale this sprite, in its native resolution (960x640 iOS wide) everything works fine.  But when I render this sprite in (480x320 iOS wide) and scale it the left and right edges flicker on and off.  This seems contrary to the behavior I would expect.  I would expect the left and right edge not to scale (remain 1 native resolution pixel wide) and the center to scale.

This leads me to the following questions:

1) Is what I am seeing a bug or is it intended behavior?
2) Is there a way I can set things up to get the behavior I am interested in?

ArenMook

  • Administrator
  • Hero Member
  • *****
  • Thank You
  • -Given: 337
  • -Receive: 1171
  • Posts: 22,128
  • Toronto, Canada
    • View Profile
Re: Sliced sprites
« Reply #1 on: November 06, 2012, 04:51:20 AM »
Corners don't get scaled. Sides get scaled in 1 direction (left/right only get scaled vertically for example). The middle gets scaled in all directions. Also note this useful community-added script: http://www.tasharen.com/forum/index.php?topic=857.msg7373#msg7373

QuantumMechanic

  • Newbie
  • *
  • Thank You
  • -Given: 0
  • -Receive: 0
  • Posts: 7
    • View Profile
Re: Sliced sprites
« Reply #2 on: November 07, 2012, 07:01:18 PM »
Thanks for the reply. 

The Sliced Sprite seems to work fine as long as I am displaying the texture at the same manual height that it was created for (640).  However, when displaying the texture at a lower resolution (in my case on a 3GS at 320 height), the left and right edges of the texture do not remain 1 pixel wide -- depending on where I position it and how I scale it the borders are either drawn as 1 pixel, 2 blurred pixels, or not drawn at all.

Looking at the code, it seems to do all of its logic at localScale, and I don't understand how that compensates for the resolution which appears to be applied at a later time.

In other words, if I had an 8x8 sliced sprite created for a Manual Height of 640 which was a solid blue box with a 1 pixel white outline around it and I set it's top, bottom, right and left border to 1 pixel.  If I took that sprite and drew it on a 3GS (320 height), I was hoping that the system would draw a 4x4 box maintaining the 1 pixel outline around it.  Instead, it appears that depending on the positioning of the sliced sprite on the screen the outline on each edge can either be 1 pixel, 2 blurry pixels, or no pixels and calling makePixelPerfect it doesn't seem to help because it makes it pixel perfect at local scale.

Am I misunderstanding how this works?
« Last Edit: November 07, 2012, 07:41:25 PM by QuantumMechanic »

ArenMook

  • Administrator
  • Hero Member
  • *****
  • Thank You
  • -Given: 337
  • -Receive: 1171
  • Posts: 22,128
  • Toronto, Canada
    • View Profile
Re: Sliced sprites
« Reply #3 on: November 08, 2012, 04:29:45 AM »
It remains in pixels, assuming the UIRoot is automatic. Meaning a 4 pixel border on 1080p is going to be a 4 pixel border on 320p (and will thus look bigger on a lower resolution).

If you don't use the "automatic" flag on the UIRoot, then the size of the border will remain proportional to the screen's height -- meaning if it was 1% before, it will be 1% regardless of the resolution.