Jump to content

[TOPIC: topicViewTemplate]
[GLOBAL: userSmallPhoto]
Photo

widget.newProgressView has a black shadow in the middle frame
Started by yashin Feb 23 2015 01:53 AM

6 replies to this topic
widget.newprogressview progress bar shadow

Best Answer Brent Sorrentino , 25 February 2015 - 01:32 PM

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

[TOPIC CONTROLS]
This topic has been archived. This means that you cannot reply to this topic.
[/TOPIC CONTROLS]
[modOptionsDropdown]
[/modOptionsDropdown]
[reputationFilter]
[TOPIC: post.html]
#1

yashin

[GLOBAL: userInfoPane.html]
yashin
  • Observer

  • 4 posts
  • Corona SDK

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



[TOPIC: post.html]
#2

Brent Sorrentino

[GLOBAL: userInfoPane.html]
Brent Sorrentino
  • Moderator

  • 7,810 posts
  • Corona Staff

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



[TOPIC: post.html]
#3

yashin

[GLOBAL: userInfoPane.html]
yashin
  • Observer

  • 4 posts
  • Corona SDK

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.



[TOPIC: post.html]
#4

Brent Sorrentino

[GLOBAL: userInfoPane.html]
Brent Sorrentino
  • Moderator

  • 7,810 posts
  • Corona Staff

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



[TOPIC: post.html]
#5

yashin

[GLOBAL: userInfoPane.html]
yashin
  • Observer

  • 4 posts
  • Corona SDK

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

Attached Files



[TOPIC: post.html]
#6

Brent Sorrentino

[GLOBAL: userInfoPane.html]
Brent Sorrentino
  • Moderator

  • 7,810 posts
  • Corona Staff

  Best Answer

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



[TOPIC: post.html]
#7

yashin

[GLOBAL: userInfoPane.html]
yashin
  • Observer

  • 4 posts
  • Corona SDK

Thanks Brent,

 

That worked!




[topic_controls]
[/topic_controls]