Hello all,
I’m trying to create a loading bar using Corona’s progressView widget, using the public build.
I’m using Texture Packer to create the spritesheet.
The problem is that the object appears to be cut at every frame, as seen in the attachments(“myspritetexture.png” is the spritesheet i’m using and “progressview.jpg” is the issue).
Update: here is the link for “myspritetexture.png”, http://imgur.com/Rc9uib9
Any ideas, guys?
Thanks,
Mihai
Hi @touchdowngames,
I think I know why this is occurring, but it’s tricky to explain. Basically, things like the progressView use a center frame from an image sheet as the fills between the end caps, and those pieces are almost always stretched out horizontally to accommodate the width of the progressView. When that stretch occurs and that frame from the image sheet has transparent pixels on its left and right side, some “bleed” can occur, as if the transparent pixels are bleeding into the stretched fill part.
The typical solution to this is to simply take a more narrow “sample” of the fill sections from the image sheet, such that there is some repeating, redundant image content outside of where you’re clipping the frame.
For example, assume the = signs are the white fill part you want to use, the brackets “[]” indicate where you’re cutting that frame, and the “O” indicates transparent pixels outside:
[ ] O========O [ ]
Instead of the above, add a little more visual content outside of that clipped region:
[ ] O==========O [ ]
Or, take a slightly smaller clipped region for the middle sections:
[ ] O========O [ ]
In both cases here, notice that there is just more visual material outside of where you’re clipping the frame, so the edge of the frame doesn’t touch directly up against transparent pixels.
Hope this makes sense,
Brent
Thanks Brent,
I tried everything, but the only thing that seems to work is an ugly fix, tweaking the ‘x’ and ‘width’ positions from the spritesheet.
Although a tiny almost-invisible gap is still visible on one side, it should work.
I think for the future it would be wise for me to make a custom progress-bar module.
Cheers,
Mihai
Hi Mihai,
Can you upload your actual image sheet and show the code your using for cutting it up into pieces? I can probably figure out how to fix the code so that there are no gaps whatsoever.
Thanks,
Brent
Hello Brent,
I appreciate your input.
Here is the spritesheet, http://imgur.com/Txd0zg1
Here is the sheet info, http://pastebin.com/7Z9FS08L
And the progressView implementation, http://pastebin.com/sy46UqjC
You may notice the inner caps are way too long, doesn’t matter, the issue occurs event if they’re smaller.
Update: the sheet info with the ‘ugly’ fix is here, http://pastebin.com/c5VCeh6K (notice outer-middle ‘x’ and ‘width’ edits).
Thanks!
Mihai.
Hi @touchdowngames,
If you refer to the documentation on how to visually customize a progressView widget…
http://docs.coronalabs.com/api/library/widget/newProgressView.html
…notice that it’s expected that all of the frames are of equal size, even if you need to put some transparency around the frames to make this work.
I adjusted your image sheet (made it much smaller actually) and this should work no matter what width you set for the widget, without any visible gaps:
[lua]
local opt = {
width = 32,
height = 58,
numFrames = 6,
sheetContentWidth = 192,
sheetContentHeight = 58
}
local progressSheet = graphics.newImageSheet( “progtest.png”, opt )
local newProgressView = widget.newProgressView
{
sheet = progressSheet,
fillOuterLeftFrame = 1,
fillOuterMiddleFrame = 2,
fillOuterRightFrame = 3,
fillOuterWidth = 32,
fillOuterHeight = 58,
fillInnerLeftFrame = 4,
fillInnerMiddleFrame = 5,
fillInnerRightFrame = 6,
fillWidth = 32,
fillHeight = 58,
left = 20,
top = 300,
isAnimated = true,
width = 700,
}
[/lua]
Take care,
Brent
P.S. - the attached file is there, but since it’s white on transparent, you may not “see” it. Just mouse-drag around and you should be able to see it, then right-click and download it.
I got stuck on the idea of declaring separate frames, while ignoring the basic docs.
Thanks Brent 
Mihai
Hi @touchdowngames,
I think I know why this is occurring, but it’s tricky to explain. Basically, things like the progressView use a center frame from an image sheet as the fills between the end caps, and those pieces are almost always stretched out horizontally to accommodate the width of the progressView. When that stretch occurs and that frame from the image sheet has transparent pixels on its left and right side, some “bleed” can occur, as if the transparent pixels are bleeding into the stretched fill part.
The typical solution to this is to simply take a more narrow “sample” of the fill sections from the image sheet, such that there is some repeating, redundant image content outside of where you’re clipping the frame.
For example, assume the = signs are the white fill part you want to use, the brackets “[]” indicate where you’re cutting that frame, and the “O” indicates transparent pixels outside:
[ ] O========O [ ]
Instead of the above, add a little more visual content outside of that clipped region:
[ ] O==========O [ ]
Or, take a slightly smaller clipped region for the middle sections:
[ ] O========O [ ]
In both cases here, notice that there is just more visual material outside of where you’re clipping the frame, so the edge of the frame doesn’t touch directly up against transparent pixels.
Hope this makes sense,
Brent
Thanks Brent,
I tried everything, but the only thing that seems to work is an ugly fix, tweaking the ‘x’ and ‘width’ positions from the spritesheet.
Although a tiny almost-invisible gap is still visible on one side, it should work.
I think for the future it would be wise for me to make a custom progress-bar module.
Cheers,
Mihai
Hi Mihai,
Can you upload your actual image sheet and show the code your using for cutting it up into pieces? I can probably figure out how to fix the code so that there are no gaps whatsoever.
Thanks,
Brent
Hello Brent,
I appreciate your input.
Here is the spritesheet, http://imgur.com/Txd0zg1
Here is the sheet info, http://pastebin.com/7Z9FS08L
And the progressView implementation, http://pastebin.com/sy46UqjC
You may notice the inner caps are way too long, doesn’t matter, the issue occurs event if they’re smaller.
Update: the sheet info with the ‘ugly’ fix is here, http://pastebin.com/c5VCeh6K (notice outer-middle ‘x’ and ‘width’ edits).
Thanks!
Mihai.
Hi @touchdowngames,
If you refer to the documentation on how to visually customize a progressView widget…
http://docs.coronalabs.com/api/library/widget/newProgressView.html
…notice that it’s expected that all of the frames are of equal size, even if you need to put some transparency around the frames to make this work.
I adjusted your image sheet (made it much smaller actually) and this should work no matter what width you set for the widget, without any visible gaps:
[lua]
local opt = {
width = 32,
height = 58,
numFrames = 6,
sheetContentWidth = 192,
sheetContentHeight = 58
}
local progressSheet = graphics.newImageSheet( “progtest.png”, opt )
local newProgressView = widget.newProgressView
{
sheet = progressSheet,
fillOuterLeftFrame = 1,
fillOuterMiddleFrame = 2,
fillOuterRightFrame = 3,
fillOuterWidth = 32,
fillOuterHeight = 58,
fillInnerLeftFrame = 4,
fillInnerMiddleFrame = 5,
fillInnerRightFrame = 6,
fillWidth = 32,
fillHeight = 58,
left = 20,
top = 300,
isAnimated = true,
width = 700,
}
[/lua]
Take care,
Brent
P.S. - the attached file is there, but since it’s white on transparent, you may not “see” it. Just mouse-drag around and you should be able to see it, then right-click and download it.
I got stuck on the idea of declaring separate frames, while ignoring the basic docs.
Thanks Brent
Mihai