Loading 200 images at once

[thithous]

Hi i’m trying to load 239 images at once on my app. But even on the simulator it wont work very well.
When the app reaches arounf image 90 to 100 it stops loading the images like they arent there with a message like that: C:\Users…lua:9387: file ‘NOVO.libEA\Paginas/Page 218.jpg’ does not contain a valid image.
And it shows a black image in place of the original image.

I tryed to load the images using a timer of 0100 but the result is the same.

I dont know why this is happening, but i supose its because corona cant have so many images at once on the screen…

Is there a way for me to load those images and have then all loaded at the same time and visible?

I need to get then on a tableview so i can scroll all of then together like power point do using slides as pages.

Thanks in advance.
My best Regards

[sporkfin]

It sounds like a problem with your images.  Please post the code you use to load the images and  remember to format the code with the <> button

[roaminggamer]

That seems like a lot of images.  

Loading them isn’t  going to be a Corona issue.  It is going to be a question of:

• Resolution of each image

• Amount of memory you have to work with

Also you want to be sure your images are saved in a valid format. 

Questions:

1. Can you use Corona to display that problem image all by itself? 
2. Can you edit it with photoshop or some other editor? 
3. If so, what editor? 

Try re-saving the image to fix the format.

As far as loading lots of images but being smart about memory usage take a look at this example I made a long time ago:

https://github.com/roaminggamer/RG_FreeStuff/raw/master/AskEd/2014/10/Texture%20Memory%20Management.zip

This sample demos the impact of trying to load and display many images all at once.  It comes with three examples.

Before the examples run, the code duplicates 3 images over and over in temporary storage so each one is a uniquely named file.  By default the example does this 100 times, but you can increase that in main.lua

Then, main.lua loads one of the three examples by requireing it.

1. example1.lua - Brute force loads all images at once.
2. example2.lua - Uses helper in onScreen.lua to fill the image just before it comes on screen and unfill it when it goes off.
3. example2.lua - Similar to #2 with different settings.  Notice the images are all white for a moment.  

I just re-ran this on my machine for 250 images and got these results:

1. SUPER SLOW LOAD --> Main mem: ~ 1 MB, Texture mem: 840  MB

2. Good perfomance --> Main mem: ~ 1 MB, Texture mem: 19…22 MB varying over time.

3. Good perfomance --> Main mem: ~ 1  MB, Texture mem: 19…22 MB  varying over time.

Tip: If you tweak the number of images, be sure to open the sandbox and delete all of the files in temporary and documents, the re-run the sample.

Note: The delay when running the demo is the file copying and duplication, and a little loading time.

[XeduR]

Like roaminggamer already said, that sounds like an issue with texture memory.

You can download my simple plugin for tracking your texture memory at https://github.com/XeduR/spyricPerformance/. It’s just a simple performance meter UI that tracks how much memory you are using.

Since you’ve named your folder pages and the individual images are called pages too, I’d expect the images to be quite large. If the images are all somewhere between: 256 to 512 pixels in width and 512 to 1024 pixels in height, for instance, then 100 such images would require 2000MB of texture memory, i.e. even a good gaming GPU would fail to load them all as it would run out of memory.

You simply need to do what every other developer does, i.e. load the resources when they are needed and not before. Then once they are no longer needed, you get rid of them. For instance, if you have an ebook, you could always just keep the 3 pages in memory, the previous page, the current page and the next page. This way you’ll always have the pages you could see ready.

[thithous]

The images are working fine. If i run everyone of then separately and remove before loading another the simulator runs just fine.

Maybe its because of the resolution of the images then? They are 1100 x 2200 .
My software ill run on computer only.

Is there a way to load the images and integrate smaller sizes of then in one?
I dont want to limit the size of images the user can use.
Tryed using capture after scalling to 0.1 and removing the image, it worked(i had to put a delay of 0030 between images too).
So i guess i had two problems: the size of the images and loading all at the same time.
The problem with capture is that it only gets whats inside the screen and some times i can have 4 of those images on top of another and it goes offscreen even scalling to 0.1.

Is there a better method than capture to integrate components of a group?

Thaks for all your help.

[XeduR]

@thithous

Maybe its because of the resolution of the images then? They are 1100 x 2200 .

It’s definitely that. You’d need 2048 x 4096 x 4 / 1024^2 = 32MB of memory to load a single image. Multiply that by a 100 and it becomes 3200MB. You’d need a serious gaming computer to be able to pull that off. No AAA desktop game consumes anywhere that much memory.

You simply need to redesign how your app loads images to something closer to what I mentioned before, i.e. load only as few images as you need at any one time. There’s absolutely no need to have 100 massive images loaded at once.

[thithous]

Thanks i managed to solve it by:

loading the image;

scaling it to 0.2 of its size;

capturing it (i noticed now that i can capture offscreen if needed)

removing the original image

using a delay of 0030 between captures and loading.

thanks for all your help.

[sporkfin]

It sounds like a problem with your images.  Please post the code you use to load the images and  remember to format the code with the <> button

[roaminggamer]

That seems like a lot of images.  

Loading them isn’t  going to be a Corona issue.  It is going to be a question of:

• Resolution of each image

• Amount of memory you have to work with

Also you want to be sure your images are saved in a valid format. 

Questions:

1. Can you use Corona to display that problem image all by itself? 
2. Can you edit it with photoshop or some other editor? 
3. If so, what editor? 

Try re-saving the image to fix the format.

As far as loading lots of images but being smart about memory usage take a look at this example I made a long time ago:

https://github.com/roaminggamer/RG_FreeStuff/raw/master/AskEd/2014/10/Texture%20Memory%20Management.zip

This sample demos the impact of trying to load and display many images all at once.  It comes with three examples.

Before the examples run, the code duplicates 3 images over and over in temporary storage so each one is a uniquely named file.  By default the example does this 100 times, but you can increase that in main.lua

Then, main.lua loads one of the three examples by requireing it.

1. example1.lua - Brute force loads all images at once.
2. example2.lua - Uses helper in onScreen.lua to fill the image just before it comes on screen and unfill it when it goes off.
3. example2.lua - Similar to #2 with different settings.  Notice the images are all white for a moment.  

I just re-ran this on my machine for 250 images and got these results:

1. SUPER SLOW LOAD --> Main mem: ~ 1 MB, Texture mem: 840  MB

2. Good perfomance --> Main mem: ~ 1 MB, Texture mem: 19…22 MB varying over time.

3. Good perfomance --> Main mem: ~ 1  MB, Texture mem: 19…22 MB  varying over time.

Tip: If you tweak the number of images, be sure to open the sandbox and delete all of the files in temporary and documents, the re-run the sample.

Note: The delay when running the demo is the file copying and duplication, and a little loading time.

[XeduR]

Like roaminggamer already said, that sounds like an issue with texture memory.

You can download my simple plugin for tracking your texture memory at https://github.com/XeduR/spyricPerformance/. It’s just a simple performance meter UI that tracks how much memory you are using.

Since you’ve named your folder pages and the individual images are called pages too, I’d expect the images to be quite large. If the images are all somewhere between: 256 to 512 pixels in width and 512 to 1024 pixels in height, for instance, then 100 such images would require 2000MB of texture memory, i.e. even a good gaming GPU would fail to load them all as it would run out of memory.

You simply need to do what every other developer does, i.e. load the resources when they are needed and not before. Then once they are no longer needed, you get rid of them. For instance, if you have an ebook, you could always just keep the 3 pages in memory, the previous page, the current page and the next page. This way you’ll always have the pages you could see ready.

[thithous]

The images are working fine. If i run everyone of then separately and remove before loading another the simulator runs just fine.

Maybe its because of the resolution of the images then? They are 1100 x 2200 .
My software ill run on computer only.

Is there a way to load the images and integrate smaller sizes of then in one?
I dont want to limit the size of images the user can use.
Tryed using capture after scalling to 0.1 and removing the image, it worked(i had to put a delay of 0030 between images too).
So i guess i had two problems: the size of the images and loading all at the same time.
The problem with capture is that it only gets whats inside the screen and some times i can have 4 of those images on top of another and it goes offscreen even scalling to 0.1.

Is there a better method than capture to integrate components of a group?

Thaks for all your help.

[XeduR]

@thithous

Maybe its because of the resolution of the images then? They are 1100 x 2200 .

It’s definitely that. You’d need 2048 x 4096 x 4 / 1024^2 = 32MB of memory to load a single image. Multiply that by a 100 and it becomes 3200MB. You’d need a serious gaming computer to be able to pull that off. No AAA desktop game consumes anywhere that much memory.

You simply need to redesign how your app loads images to something closer to what I mentioned before, i.e. load only as few images as you need at any one time. There’s absolutely no need to have 100 massive images loaded at once.

[thithous]

Thanks i managed to solve it by:

loading the image;

scaling it to 0.2 of its size;

capturing it (i noticed now that i can capture offscreen if needed)

removing the original image

using a delay of 0030 between captures and loading.

thanks for all your help.