Objects in Scroll View is Jagged When Scrolling

Solar2D Widgets
#1

Hi guys,

I have been using scrollview for a while now, and it has been quite ‘jaggered’ when scrolling, Regardless of whether it is showing images or text. It is more evident when scrolling slowly, or when setting the frame rate to 30. I don’t see this in other apps like Facebook (i guess those are pure-native).

I currently set the frame rate to 60 to improve this, but it doesn’t entirely eliminate it. Is this because all objects in Corona is rendered as image ? 

Any suggestions to totally eliminate this ?

Thanks

#2

Hi @yosu,

What is contained within the scrollView? Are you encountering other potentially unrelated memory issues, like overloading your general memory?

Brent

#3

Hi Brent,

In the scrollview contains many displayGroups. Each displayGroup will contain an image, a few text-objects, and possibly another displayGroup. Sample image as attached.

I am also monitoring the memory usage of the app. I always unload an image when it is out-of-view to keep the memory usage as low as possible.

It generally happens to the scrollview. I tested it on iPhone6+, and don’t see this issue. Maybe because of its graphic processor.

If you want, I can PM you the link of an app in the iTunes so you can see it.

#4

Hi @yosu,

Did you blur out those images for privacy in the forums? Or are you using a Corona filter to blur them in the actual app?

Brent

#5

I’ve found using the scrollview to be pretty good on recent iPhones (=>5) and text-only tableviews to be OK. Maybe not as good as native, but acceptable. (Both are worse on Android devices.)

The problem for me has been tableviews with images. It’s choppy and definitely not native, especially on Android. I recall tableviews are built atop scrollviews, so if you’re loading and unloading images, you may have replicated a tableview – and be experiencing the same “jagged” and choppy scrolling.

Don’t native apps handle this by a UI thread that isn’t blocked by image loading?

#6

Dear Brent,

I manually blur out the images for privacy. I didn’t use Corona to do it.

I tested it on a few devices, and here’s the results :

iPhone6+ : No issues. smooth

iPad 2 (Retina) : Kinda smooth, except when loading images.

iPad Air : Jagged

Samsung S3 : jaggy. Lags when loading images.

Nexus 5 : No issues. smooth.

Could this issue be because i am loading a lot of images on screen (of course, i remove the images when it is off-screen). I notice when loading images ~50kb on the screen, it will cause a short-lag (loading image-files from cache). No issues if the image is ~20kb or if loading the exact-same image.

I have attached the source code that I am using for improvement-testing

https://www.dropbox.com/s/2zq14igc10t80jd/ScrollView_mod.zip?dl=0

#7

yosu: Why don’t you use a tableview? (Even with all its problems with images…) That’s what it’s designed for.

#8

Dear Corona273, A long time ago, I used tableview, but encountered some issues with it. Then i found out it is actually a scrollView with the table-features to it.

#9

yosu: You’re right that it’s built atop a scrollview. But it seems like you’re reinventing a tableview, and likely with code that’s not as optimized as tableview’s. (It certainly has flaws, but a decent number of people have looked at it over the years and have contributed fixes.)

One other point: two years ago or so the tableview scrolling performance was very poor. Now it’s markedly better. Now I’m not saying it’s native-equivalent, but far better than two years ago. I switched to it about seven months ago for my own codebase.

#10

The “jagged edge” issue is an anti-aliasing problem and can be seen on low-end devices. It causes jagged edges on images and display objects when rotated or moved. This issue is hard to solve because the graphics hardware needs to support it. We did support an “anti-aliasing” option a few years ago but turned it off because of buggy graphics drivers that caused more problems (like missing graphics on some devices). This is becoming a non-issue with newer and faster GPUs on devices but will show up on older, slower devices.

#11

Thanks coron273. I will look into it. I’ll see how I can use tableView based on my client’s demanding graphics (like Airbnb app).

Thanks Tom.

#12

Hi @yosu,

What is contained within the scrollView? Are you encountering other potentially unrelated memory issues, like overloading your general memory?

Brent

#13

Hi Brent,

In the scrollview contains many displayGroups. Each displayGroup will contain an image, a few text-objects, and possibly another displayGroup. Sample image as attached.

I am also monitoring the memory usage of the app. I always unload an image when it is out-of-view to keep the memory usage as low as possible.

It generally happens to the scrollview. I tested it on iPhone6+, and don’t see this issue. Maybe because of its graphic processor.

If you want, I can PM you the link of an app in the iTunes so you can see it.

#14

Hi @yosu,

Did you blur out those images for privacy in the forums? Or are you using a Corona filter to blur them in the actual app?

Brent

#15

I’ve found using the scrollview to be pretty good on recent iPhones (=>5) and text-only tableviews to be OK. Maybe not as good as native, but acceptable. (Both are worse on Android devices.)

The problem for me has been tableviews with images. It’s choppy and definitely not native, especially on Android. I recall tableviews are built atop scrollviews, so if you’re loading and unloading images, you may have replicated a tableview – and be experiencing the same “jagged” and choppy scrolling.

Don’t native apps handle this by a UI thread that isn’t blocked by image loading?

#16

Dear Brent,

I manually blur out the images for privacy. I didn’t use Corona to do it.

I tested it on a few devices, and here’s the results :

iPhone6+ : No issues. smooth

iPad 2 (Retina) : Kinda smooth, except when loading images.

iPad Air : Jagged

Samsung S3 : jaggy. Lags when loading images.

Nexus 5 : No issues. smooth.

Could this issue be because i am loading a lot of images on screen (of course, i remove the images when it is off-screen). I notice when loading images ~50kb on the screen, it will cause a short-lag (loading image-files from cache). No issues if the image is ~20kb or if loading the exact-same image.

I have attached the source code that I am using for improvement-testing

https://www.dropbox.com/s/2zq14igc10t80jd/ScrollView_mod.zip?dl=0

#17

yosu: Why don’t you use a tableview? (Even with all its problems with images…) That’s what it’s designed for.

#18

Dear Corona273, A long time ago, I used tableview, but encountered some issues with it. Then i found out it is actually a scrollView with the table-features to it.

#19

yosu: You’re right that it’s built atop a scrollview. But it seems like you’re reinventing a tableview, and likely with code that’s not as optimized as tableview’s. (It certainly has flaws, but a decent number of people have looked at it over the years and have contributed fixes.)

One other point: two years ago or so the tableview scrolling performance was very poor. Now it’s markedly better. Now I’m not saying it’s native-equivalent, but far better than two years ago. I switched to it about seven months ago for my own codebase.

#20

The “jagged edge” issue is an anti-aliasing problem and can be seen on low-end devices. It causes jagged edges on images and display objects when rotated or moved. This issue is hard to solve because the graphics hardware needs to support it. We did support an “anti-aliasing” option a few years ago but turned it off because of buggy graphics drivers that caused more problems (like missing graphics on some devices). This is becoming a non-issue with newer and faster GPUs on devices but will show up on older, slower devices.