HTML Memory Issues

[quinnhoener]

I'm having a very strange memory issue with a game, but only in HTML versions. There's 2 scenes that we're going back and forth between in this game. Scene 1 loads and we're at around 240MB in Activity Monitor on a Mac watching the Google Chrome process "Real Memory" column. Going into Scene 2 loads some extra assets so memory goes up to around 300MB. But then leaving Scene 2 to return to Scene 1, memory doesn't return back to 240MB. This behavior only happens in HTML, Flash immediately returns the memory back. I'm definitely disposing the asset packs so I know that's not the issue. Has anyone come across this before? The ultimate problem is that over time it's crashing iPads. I've gone through every class and made sure it's cleaning up everything, and seeing that Flash works fine makes me feel like something's wrong with the garbage collection for HTML.

Any help is greatly appreciated! Thanks!

[markknol]

Some checks:

• Did you also disposed all signal connections?
• Did you use the chrome profiler (record heap allocations) to see which objects are still allocated and shouldn't be there?
• How many assets do you load? It sounds like there is a lot going on. I know from experience, if you hit the memory limit iOS safari will do unexpected things. For example I noticed this when using too big assets (greater than 1024x1024).

Not sure if this is helpful information, but In my latest game I also use lot of assets (+- 22 spritesheets), I think this is a lot in terms of memory consumption for a mobile game. The game is an infinite runner without any in between stops, so I had to load at all at start. I tried to reduce it as much as possible, while keeping the quality good. We went back to 75% sized backgrounds parts at some places. We also used flipbooks a lot (at 60fps) on every frame for shape-tweened character animations. I saved several spritesheets by removing flipbook keyframes at every even frame, so those run at 30fps-ish. That not only saves memory or loading time but makes the game run more stable. Another small thing we did is that we rotated 45degree sprites to 90degrees, and rotate back in Flash or code, this saves some whitespace. You don't notice if you haven't seen it on 60fps. Conclusion: bringing back the amount of assets could solve this issue maybe.

[aduros]

+1 to using the Chrome profiler to inspect the heap, it's super helpful in tracking leaks.

[quinnhoener]

Thank you both for responding so quickly! And sorry for dual posting to the forums, I didn't realize that was a bad thing, won't happen again.

I've already done the atlas optimizations so we're only loading the assets for each scene that we need. I'm going to go through and make sure on the SignalConnections and check the Chrome Profiler, didn't know about that!

[TheSean]

Hi,

I just wanted to circle back on this in case it helps anyone else. We found this post on the forums and it really helped in our case. Thank you to Bruno Garcia. It requires an edit to Flambe engine:

https://groups.google.com/forum/#!topic/flambe/5c-tUo5-e_4 "Something I realized might help... Flambe pre-renders images to a canvas on iOS for better draw performance. It doesn't hold onto the original image, but the burst of allocation during loading may be crossing a memory limit before the GC can kick in. Is it any better if you set CANVAS_TEXTURES = false in CanvasRenderer.hx?"

Steps to fix

1. Navigate to where you installed the flambe core code on your computer and find the file CanvasRenderer.hx. On PC: C:\HaxeToolkit\haxe\lib\flambe\4,0,0\flambe\platform\html On Mac: /usr/lib/haxe/lib/flambe/4,0,0/flambe/platform/html (usr is a hidden directory on a Mac)
2. Open the file CanvasRenderer.hx, and go to roughly line 84

3. comment out the following line by adding the "//" as below // return pattern.match(Browser.window.navigator.userAgent); and replace it with return false;

   Final code for this function will now be: private static var CANVAS_TEXTURES :Bool = (function () { // On iOS, canvas textures are way faster // http://jsperf.com/drawimage-vs-canvaspattern/8 var pattern = ~/(iPhone|iPod|iPad)/; //return pattern.match(Browser.window.navigator.userAgent); return false; })();

4. Save and close the file.

IHTH