Look at the attached project. It contains an image sheet that is displayed on the screen. The strange thing is that for some y positions, there is an artefact around the upper and lower edges of the image.
Try e.g. y= 100, y=110 and y=120 (or some other values if those don’t work for you) to see the difference. In other words, the rendering of the image is different depending on the position of the image.
Is this a bug?
I’m not seeing any attachment
Sorry, please see it attached to this post…
Has anyone got any ideas? As you can see from my example, it’s just a plain wigdet so I guess others must have experienced this also…
Looks to me like you’ve clipped / defined the sheet incorrectly, HOWEVER, I may not be seeing the same thing as you are. The best steps to take in these kind of situations is to also provide screenshots of the issue so that you know that everyone is seeing the same issue that you are, because your issue may only be present on some specific devices, etc. and not just depending on the y-axis.
I also thought it had to do with the definition of the image sheet, but when I tried to correct it I realized that for some positions, the image was displayed correctly.
Please see the three attached screenshots. I’ve named them according to the y position of the image. The artefacts are most visible below the dark grey area to the left.
I had that issue when my game was scaled on different devices.
I had tons of image sheet animations in the game. They worked flawlessly on the simulator, on an iPhone X, on an iPhone 5, etc, but the positions were off by a fraction of a pixel on the iPhone6, and some of the iPads.
And I assume a bunch of Android sizes I don’t have access to.
But that fraction of a sub pixel was really noticeable. The image sheets appeared to stutter and shake. It looked terrible.
I also use image sheets for button states, and different things throughout the game that are static. I assume the issue is happening there as well but it isn’t noticeable. Those buttons and things are always .png images with enough of a transparent bleed around them so I wasn’t getting any artifacts.
For the animations though I had to revert back to a method I used before image sheets were even in Corona - an old MovieClip library which loaded each image individually.
It got rid of the positioning problems but those scenes where the animations were needed to load for a second or two on older devices which made the game seem sluggish.
You might just need to remake those graphics old school, with a stack of images and turn their alpha on and off when necessary.
Good luck!
Joe
Yeah, Joe put it really well.
I’ve run into similar issues often. I am guessing that it has something to do with Corona’s scaling. For instance, if you were to design your app using Corona’s default 480x320 and you then created all of your assets according to that, then I doubt you’d experience any issues on that particular resolution.
However, once the resolution or aspect ratio begins to change, then you’ll get these oddities popping up at weird places. I’m not really sure about this, but it may have something to do with Corona attempting to render half pixels, e.g. in some cases a 48 pixels tall image would scale to 47.5 or 48.5 (or some fraction of a pixel), but such a value can’t obviously be rendered, and I guess that these issues cause those artifacts.
@Joe & XeduR: thanks for your answers. One thing I do to prevent decimal sizes or positions due to scaling is to use math.floor() every time the position of a display object is a calculated value or a variable. I don’t know if that is why scaling has never been a problem. The only time I can actually see artifacts is when I take a screenshot and enlarge the image.
Here is the interesting thing: if you just display the png file as a regular image (i.e. not in a slider widget), then there are never any artefacts, regardless of the position. In other words: this seems to be something caused by the slider widget.
The image in question is used in a slider widget as a sound volume control. I guess I could manually create a slider itself, but is seems like a clumsy workaround.
Can someone from Corona staff shed some light on how images are handled when being part of a slider widget? What is “done” with the images that could cause this?
I don’t believe there is any light to shed on this. It’s likely sub-pixel rendering. I looked at the image sheet and my measurements of the images didn’t quite match what you said, but maybe you could maybe fill in another row or two of pixels both on the top and bottom and not have the hard-green-to-white edge be part of the image.
The widget source is available on GitHub: https://github.com/coronalabs/framework-widget
It’s open source. You can download it and make any changes you need to it.
I don’t believe we are doing any magic in the widget code other than using an imagesheet.
Rob
I tried to set the frame height to the entire image height, which means that there are 27 extra (empty) pixels on both sides top and bottom. Still the same artefacts. Therefore, I don’t think it has to do with a lack of extra pixels. Also, I’m thinking that if it really was the height of the frames that caused the problems, then the positioning of the image would not matter, right?
ALTERNATIVE 1.
When I display the image as it is:
local image = display.newImageRect("audiosliderimagesheet.png", 170, 70) image.x = 300 image.y = 140
there are never any problems with artefacts, regardless of the position of the image.
ALTERNATIVE 2:
When I display it as individual images from the sheet:
local frame1 = display.newImage( sliderSheet, 1 ) frame1.x = 100 frame1.y = 500 local frame2 = display.newImage( sliderSheet, 2 ) frame2.x = 150 frame2.y = 500 local frame3 = display.newImage( sliderSheet, 3 ) frame3.x = 200 frame3.y = 500 local frame4 = display.newImage( sliderSheet, 4 ) frame4.x = 250 frame4.y = 500 local frame5 = display.newImage( sliderSheet, 5 ) frame5.x = 300 frame5.y = 500
there are also no problems with artefacts.
In other words, it is not the image or the image sheet definition itself that is causing it, but something when it is used in the slider widget.
Is there anyone who has any input on this?
@Corona staff: please see my previous post. As you can see, the artefacts do not appear when the image is displayed as a “regular image” or as an image sheet. The artefacts ONLY appear when displayed as part if a slider widget. If you use my examples above, you can easily reproduce my findings and you will see that it has to be something in the widget causing this.
EDIT: the fact that other users have experienced the same thing also suggests that it is not simply a question of configurating the image sheet wrong.
First, here is the source for the widget: It’s just Corona Lua, so anyone who wants to look at the code and try and figure this out is more than welcome to: https://github.com/coronalabs/framework-widget/blob/master/widgetLibrary/widget_slider.lua
I don’t see any reason why this happening. What I see is that it’s either a. making the end cap too small or b. making the fill bar too large. As a test, I colored the fill bar red.
Here is the result:
I don’t see any artifacts in the red. What I see is the left end cap and fill are different heights.
What I don’t see is why this is happening. As I said, there isn’t any magic going on. I thought it might be a rounding issue and drying to draw on a half-pixel. But the height is even, so that shouldn’t be the cause.
I’ll keep looking. But I don’t think this is an under the hood graphics issue.
Rob
@Rob: when you colored the fill bar red, the artefact is visible in the form of a solid colored “extra height”, that’s very interesting. But I still don’t understand why this happens. As you also said: the cap and the bar heights are identical in the image sheet, and yet they are displayed differently.
I’d like to emphasize that if you display the image as separate images from the image sheet (see “ALTERNATIVE 2” in my previous post), no artifacts are visible at all. The only conclusion I can draw from that is that it *HAS* to be a result of the widget. I understand that there is no strange stuff done with the image sheet in the widget but the fact remains, that is the only place where the artefacts are visible. I have looked at the widget code but I cannot see what may be causing this.
Has anyone got any ideas?