How do I disable loading all PNG files on start of the game

Hi there!

I have 20 images in my game which are used in a gallery and on the score screen. They are quite memory consuming on my iPhone 4 (via CocoonJS Launcher App, using Canvas 2D/WEBGL).

my layout buildup is like this:

title screen -> game screen -> score screen -> game screen or title screen

gallery screen (via menu button on title screen)

option screen (via menu button on title screen)

hidden layout to initial spawn all highscore screens, otherwise I cant let them spawn in my gallery

currently the game loads every single file (*.png) on start of the game, even if the highscore images arent used in the first 2 layouts (title screen -> game).

This makes the game extremely laggy. If I remove all highscore images from the game it runs smoothly, so the problem is definitely with the images. strangely enough the gallery navigates without lag.

Is there an option, that the game only loads the images when it is supposed to do it? ( gallery and score screens, NOT the beginning of the game)

I also placed a "On Start of Layout => HighscoreParent -> Destroy" to every layout, but nothing changed (as expected)

gallery image usage:

score screen image usage

thanks in advance for help! (=

What I've heard about some weakness about CocoonJS is that CocoonJS has been designed to load all the files when application starting. So I think there's nothing you can do unless Ludei updates their system.

However, you can try resizing your images to be smaller, dropping the quality of them(like converting PNG-32 to PNG-8), or optimizing your game in other ways(Event optimizing, grouping, etc)

What I've heard about some weakness about CocoonJS is that CocoonJS has been designed to load all the files when application starting. So I think there's nothing you can do unless Ludei updates their system.

However, you can try resizing your images to be smaller, dropping the quality of them(like converting PNG-32 to PNG-8), or optimizing your game in other ways(Event optimizing, grouping, etc)

thanks for the answer.

I allready resized the images, since my first version was really unoptimized, with an approx. download of ~25mb and memory usage of ~280mb (according to construct 2) Now I'm down at 3.1MB download and 46.1mb memory usage. I don't think I can minimize the images any further, otherwise they would have a very bad quality on iPhone and iPad.

I'll look into the conversion from PNG-32 to PNG-8, although I've currently no idea what "PNG-Version" my images have.

When I thought about minimizing images I always gone straight for the resolution/pixels

does loading images from url work in cocoonjs? this could potentially be a workaround (if its supported)

edit: ignore, would only work online ofcourse

thanks vtrix, but the game should work completely offline <img src="{SMILIES_PATH}/icon_e_wink.gif" alt=";)" title="Wink">

back to the PNG32/8 issue.

All(!) of the images are in PNG-24, which is at least for 80% of them not needed, since they look the same in PNG-8, we tried it yesterday and are going to convert every image from 24 to 8 now, on an original image (still with 7016x4961px) the size was reduced from 2.2MB to 900KB.

I'll post here the final result after all image reductions are in place

/edit: ok, looks like construct 2 saves all images always in png-32, but has an option to change that at export

for all who might stumble upon something similar:

(https://www.scirra.com/manual/129/image-format)

(https://www.scirra.com/manual/48/image- ... ons-editor)

(https://www.scirra.com/blog/66/image-co ... onstruct-2)

Hey genbatzu,

I'd really like to find a solution for that, too!

If you have any news, please tell me. It's really annoying that the game loads so many images in the beginning.

Thanks for the infos. This will come in handy, as soon as I'm into the optimizing state.

Changing the image format has no effect on memory use. All images are decompressed to 32-bit BMP upon loading. The memory issue on loading is specific to CocoonJS: in every browser in existence, they only download the images on startup, and don't load them in to memory. CocoonJS goes ahead and loads them in to memory even though none of them are needed yet. I have explained the problem to Ludei over and over again and I'm baffled as to why they have still not fixed it.

Try Crosswalk - it doesn't have the same problem. Also we'll be looking in to an Ejecta exporter for iOS soon.

thanks for the infos Ashley!

I got the Approx. Download down from 3.3MB to 1.3MB thanks to changing it to png8 and jpg. However, as you said, it had no impact on the memory usage.

I had a (very) quick look at Crosswalk and it seems to only supports Android?

Ejecta looks really interesting, do you have an estimate, when "soon" is for this exporter? =)

How is PhoneGap? In one of your tutorials you said that Games can be very slow with it

PhoneGap IS really slow. I exported a very simple project with PhoneGap, CocoonJS and IntelXDK. The game was running with 10 FPS on PhoneGap and 60 FPS on CocoonJS and IntelXDK.

I chose CocoonJS over IntelXDK cause of the shop handling.

thanks Vuuv, then I'll stick with CocoonJS for now and have to figure out how to minimize it further. It's kind of crazy what ideas one can have when needed ^^

cut my tiled background into 3 parts, removed 2nd part and replaced it with background color, no visual difference but saved memory, reducing the animations also helped and is not really noticable

haha I totally agree. I once tried to parse my images to base64 strings and save them in webstorage.