widget.newProgressView has a black shadow in the middle frame

Solar2D Widgets
#1

Hi,

When customising the progress view there is a black shadow in the middle section, that looks awkward. How do we remove that? Please see the image attached.

Regards,

Yashin

#2

Hi Yashin,

It looks like the image was not successfully attached. Note that when customizing this widget (all widgets, generally), you must follow the visual customization guidelines carefully, otherwise it may not appear as you intend.

http://docs.coronalabs.com/api/library/widget/newProgressView.html

Take care,

Brent

#3

Thanks for the reply Brent.

I have given a 5x5 pixel black image for outer region and 5x5 pixel green image for inner region. Im using the same black image frame for (fillOuterLeftFrame, fillOuterMiddleFrame, fillOuterRightFrame) for the outer and same green image frame (fillInnerLeftFrame, fillInnerMiddleFrame, fillInnerRightFrame) for inner region.

I want the progress view to be flat design(plain colour). But it shows a black gradient in the middle span alone, and its not there for the caps. Is there any way to remove that? Please let me know if I’m doing anything wrong.

#4

Hi @yashin,

Can you attach the image that you’re using for your image sheet? This is typically caused because, when OpenGL pulls the frames from the sheet, it can sample some “bleed” from surrounding frames when one frame is stretched/scaled greater than its core size, which is almost always the case for the middle section of a progressView (it’s using the one middle frame to stretch across the entire width from cap to cap).

Anyway, this is usually easy to solve by reworking the image sheet slightly, or even just adjusting the frames that are being pulled… I’ll just need to see how you’ve set it up so far.

Thanks,

Brent

#5

Hi Brent,

Please find the image sheet attached. There is a small black and green square (5x5 pixels) which I use as the outer and inner frames of the progress view respectively.

Regards,

Yashin

#6

Hi @yashin,

This is what I expected, and it’s easily solved. You can take the same exact “sample” from the image sheet (the frames), but on the sheet itself (the image), you should add 2-3 pixels of the same color around each little 5x5 box. So, just surround the black box with 3 more pixels of black, so that it’s 11x11… but don’t increase the 5x5 area that you are using in your code. Do the same thing for the green square, and it should appear correctly.

Take care,

Brent

#7

Thanks Brent,

That worked!

#8

Hi Yashin,

It looks like the image was not successfully attached. Note that when customizing this widget (all widgets, generally), you must follow the visual customization guidelines carefully, otherwise it may not appear as you intend.

http://docs.coronalabs.com/api/library/widget/newProgressView.html

Take care,

Brent

#9

Thanks for the reply Brent.

I have given a 5x5 pixel black image for outer region and 5x5 pixel green image for inner region. Im using the same black image frame for (fillOuterLeftFrame, fillOuterMiddleFrame, fillOuterRightFrame) for the outer and same green image frame (fillInnerLeftFrame, fillInnerMiddleFrame, fillInnerRightFrame) for inner region.

I want the progress view to be flat design(plain colour). But it shows a black gradient in the middle span alone, and its not there for the caps. Is there any way to remove that? Please let me know if I’m doing anything wrong.

#10

Hi @yashin,

Can you attach the image that you’re using for your image sheet? This is typically caused because, when OpenGL pulls the frames from the sheet, it can sample some “bleed” from surrounding frames when one frame is stretched/scaled greater than its core size, which is almost always the case for the middle section of a progressView (it’s using the one middle frame to stretch across the entire width from cap to cap).

Anyway, this is usually easy to solve by reworking the image sheet slightly, or even just adjusting the frames that are being pulled… I’ll just need to see how you’ve set it up so far.

Thanks,

Brent

#11

Hi Brent,

Please find the image sheet attached. There is a small black and green square (5x5 pixels) which I use as the outer and inner frames of the progress view respectively.

Regards,

Yashin

#12

Hi @yashin,

This is what I expected, and it’s easily solved. You can take the same exact “sample” from the image sheet (the frames), but on the sheet itself (the image), you should add 2-3 pixels of the same color around each little 5x5 box. So, just surround the black box with 3 more pixels of black, so that it’s 11x11… but don’t increase the 5x5 area that you are using in your code. Do the same thing for the green square, and it should appear correctly.

Take care,

Brent

#13

Thanks Brent,

That worked!