Author Topic: [Solved] UISprite FillAmount with Offset  (Read 2819 times)

Kerozard

  • Newbie
  • *
  • Thank You
  • -Given: 2
  • -Receive: 0
  • Posts: 17
    • View Profile
[Solved] UISprite FillAmount with Offset
« on: August 10, 2014, 04:07:36 PM »
Hello again!

I have been using the filled UISprite with fillAmount to great success when displaying health and progress bars. Now my UX guy has requested that I display anticipated damage. I think the mockup makes it pretty clear. I need to create one basic UISprite with a fillAmount and another one that shows how much energy/life/capacity is gained/lost.



Right now there are two not so desirable ways to do it:

1. Just move the anticipation bar far enough to the right and display the small portion that is needed. This would work with other graphics, but in my case the small tilted bars just won't align.

2. Place the red bar behind the blue one. That just does not look good since the red shimmers through where there is transparency (as is visible in the screenshot).

So I am at a place where I need to place my two progressbars and then set some sort of fillAmount(float from, float to) with the blue one going using e.g. fillAmount(0f, 0.5f); and the red one fillAmount(0.5f, 0.6f);

Is there a tool available in the great product that is NGUI or do I have to come up with something myself?

Thanks in advance,

Patrick
« Last Edit: August 12, 2014, 12:29:22 PM by Kerozard »

ArenMook

  • Administrator
  • Hero Member
  • *****
  • Thank You
  • -Given: 337
  • -Receive: 1171
  • Posts: 22,128
  • Toronto, Canada
    • View Profile
Re: UISprite FillAmount with Offset
« Reply #1 on: August 10, 2014, 06:14:48 PM »
Why are you using a filled sprite for this? It seems to me that the texture you have is just repeating over and over, which is ideal for a tiled sprite, not a filled sprite. Then all you need to do is adjust the width of the sprite. Given what you're trying to do, you'll have 2 tiled sprites. One on the left, and another on the right. You can have the left one use left as the pivot point, and the right one to be anchored to the left sprite's right-hand side. Then all you need to do is change the width of the two sprites in code based on the health and anticipated damage.

Kerozard

  • Newbie
  • *
  • Thank You
  • -Given: 2
  • -Receive: 0
  • Posts: 17
    • View Profile
Re: UISprite FillAmount with Offset
« Reply #2 on: August 11, 2014, 12:30:48 AM »
Sadly it is not just repeating. There is a fade effect to the left/right and the sprite is also cropped on the sides to make it fit. The situation might become more apparent when you look at the power bar on the slot graphic I've added. That one goes from a darker orange to a lighter orange and also gets smaller on the sides. I have to do the same thing there.



I also think there would be some alignment issues with a tiled sprite when I put them next to each other. The left bar would always have to be (int) x times its size so the right bar would fit perfectly. Otherwise there would be weird overlaps. I realize this is probably barely noticable. Still I would rather have a solution that allows me to display exact values, not rounded ones.

ArenMook

  • Administrator
  • Hero Member
  • *****
  • Thank You
  • -Given: 337
  • -Receive: 1171
  • Posts: 22,128
  • Toronto, Canada
    • View Profile
Re: UISprite FillAmount with Offset
« Reply #3 on: August 12, 2014, 12:08:20 AM »
The fade effect is easy to do. Just overlay a sprite on top that has a gradually increasing alpha, making it fade to blue. On the edges use the edge sprites on top as well (the slanted ones).

Long & narrow sprites are notoriously bad for packing in a texture atlas. They eat up way too much space.

Kerozard

  • Newbie
  • *
  • Thank You
  • -Given: 2
  • -Receive: 0
  • Posts: 17
    • View Profile
Re: UISprite FillAmount with Offset
« Reply #4 on: August 12, 2014, 12:29:11 PM »
I really need to get out of my old thinking patterns from when our game was based on HTML5/Canvas. Thank you.

My rudimentary Photoshop skills were enough to pull this off and I got the desired effect. ;-)

Thank you very much.