Search the Community

I'm currently hunting down an issue with a game that we have developed with pixi.js: According to the dev tools in Chrome, the game uses about 53MB memory. On FireFox it uses about 73MB. On Safari it uses anything between 1800 and 3500MB. On an iPad with iOS12 the game crashes before it even starts, both on Safari and Chrome. As I understand it, Chrome on iOS uses webkit (as apposed to chromium?), so I suspect there is something wrong with webkit. But I could be wrong, I haven't really had a need before to dive into that. Has anyone else experienced memory issues when using pixi on Safari? I have been trying to use the Safari Web Inspector's Timeline recorder, but it doesn't tell me much - likely because I'm not 100% sure what I'm looking at. It says that the java heap is around 600MB, the 'layers' take up around 1GB and the 'page' another 1GB. Both of these last ones can also go up to 1.5GB, and sometimes go down to about 800GB (I'm guessing when pixi's GC kicks in). I'm not sure what the 'layers' are, the 'page' is 'everything else' (graphics, audio, etc.). If someone knows about a good reference of how to 'read' the information supplied by the web inspector, that would also be greatly appreciated!

Hello! I've been developing a game using Babylon for our client for a few months now. It has essentially developed into a 360 video player with interactive components, but I probably shouldn't reveal much more than that. For a few weeks now, I've been looking into IE 11's memory leak issue. For those who don't know, IE 11's garbage collector is broken, and reloading the page will not remove quite everything from memory. The memory will continue to pile up each page reload, until eventually the browser crashes. See https://developer.microsoft.com/en-us/microsoft-edge/platform/issues/10186458/ and https://developer.microsoft.com/en-us/microsoft-edge/platform/issues/11106982/ . Microsoft doesn't support IE 11 anymore, but the browser is used by the majority of our client's users. I have researched it and gained a better understanding of it, but have had no luck in mitigating it. Other JS libraries have bug reports on the issue, and individuals have come up with solutions that work for that library: Polymer: https://github.com/Polymer/polymer/issues/3430#issuecomment-248034098 AngularJS: https://github.com/angular/angular/issues/17637#issuecomment-387801113 Webcomponents (comments point back to the Polymer solution): https://github.com/webcomponents/webcomponentsjs/issues/541 I added only the library-agnostic code from the Polymer thread to my code, which removed document and window event listeners that may have been stuck in memory. It doesn't seem to have impacted the leak on my site, but it can't hurt so I left it in. I'm having trouble figuring out what hacks to apply in my project to help, or what methods I should change or avoid. All I could think of was to add `scene.dispose()` on unload. I know this isn't a Babylon issue per se, but has anyone come across this and attempted to solve it? What did you try? Here is my current cleanup script: // https://github.com/Polymer/polymer/issues/3430#issuecomment-248034098 var wrapper = function( name, fn, opts) { // add events to cache/queue addEventToQueue(this, name, fn, opts); this.__oldAddEvent( name, fn, opts); }; function addEventToQueue( obj, name, fn, opts ) { console.log('EVENT ADDED TO CLEANUP LIST: ' + (obj.nodeName ? obj.nodeName : 'window') + '/' + name); obj.__eventListeners = obj.__eventListeners || {}; obj.__eventListeners[name] = obj.__eventListeners[name] || []; obj.__eventListeners[name].push({fn: fn, opts: opts}); } function initListener() { document.__oldAddEvent = document.addEventListener; document.addEventListener = wrapper; window.__oldAddEvent = window.addEventListener; window.addEventListener = wrapper; }; function cleanupApp() { cleanupListeners(); cleanupScene(); } function cleanupListeners() { cleanupListener(document); cleanupListener(window); } function cleanupListener (obj) { for (var k in (obj.__eventListeners || {}) ) { var fns = obj.__eventListeners[k]; for ( var i = 0; i < fns.length; i++ ) { obj.removeEventListener(k, fns[i].fn, fns[i].opts); } } } function cleanupScene() { if(scene) scene.dispose(); } initListener(); window.onunload = cleanupApp; Thank you!

Hi Thanks for the great BJS and TOB exporter, the meshes could be generated from Blender and rendered in BJS environment efficiently. However I find out something interesting that JS heap increases when the mesh is instanced in the scene. But the heap size could not be decreased when the mesh is disposed. I’m curious whether this will cause some memory issues(such as memory leak). Here is the demo of the system: https://willlinifm.github.io/Playground_bjs/index.html The Source code is as the following or the link : https://willlinifm.github.io/Playground_bjs/js/Scene.js If the playground is better for debugging, please try this link. The implementation and the outcome are nearly the same. (Click Sphere to generate mesh //// Click ground to dispose it) https://www.babylonjs-playground.com/#4GQCEL#2 The attachment are the heap snapshots ! 。The heap1 snapshot is took before the mesh is made an instance by TOB-generated-js file 。The heap2 heap snapshot is took after the mesh is made an instance by TOB-generated-js file. We can find that the heap size is increased. 。The heap3 snapshot is somehow hard to understand that when the mesh dispose function is called, the heap size still raise a high level compared to the first snapshot. NO~~ My questions are 1. If the meshes are generated and the Js heap size is increasing at the same time. Will it cause the memory issue and make the system run slowly? 2. How to make the best to decrease the heap size after mesh dispose process. 3. I’m not sure, but during watching the snapshot constructor information, I find there may be some looping references within BJS/TOB/MeshFactory structure. Will it cause the GC(Garbage Collection) unable to release memory? Thank you ! BJS and everything here are awesome!

Hello, I have simple exteneded object from sprite. Its simple smoke effect with tween alpha for some effects, after tween ends, call this.destroy(), for destroy and remove this sprite from game. But somethink vierd happends. I call this every tick, but memory increase more and more, and after few minutes browser crash. When I dont use this object, game run OK and memory not increase. I think there must be somethink, and this think not allow GC clear this instance. But I try clear object as example, only create sprite nothink else, and on the end put this.destroy(), same memory leak. But when I create only sprite (without extending and creating instance), and call destory() on this sprite, memory leaks gone.. Everythink OK. So where is problem ? I also try after destroy set to all properties in this instance to null, same situation, GC not clear memory. Problematic code here: /* global Phaser, Utils, config */ /** * XP point body * * @class XpPoint * @extends Phaser.Sprite * @constructor */ SmokeEffect = function (game, x, y, black, lessTransparent, settings) { /** * @property {Phaser} game - Main game context * @private */ Phaser.Sprite.call(this, game, x, y, 'smoke'); game.add.existing(this); game.physics.enable(this, Phaser.Physics.ARCADE); //2500 game.time.events.add(100, function () { this.destroy(); }, this); }; SmokeEffect.prototype = Object.create(Phaser.Sprite.prototype); SmokeEffect.prototype.constructor = SmokeEffect; I try clear all properties in instance, but not help: for(var property in this){ this[property] = null; delete this[property]; } When I do this everythink is OK: var effect = this.game.add.sprite(exhaustPosition.x, exhaustPosition.y, 'smoke'); this.game.time.events.add(2500, function () { this.destroy(); }, effect); This anoying memory leak blocking release our game, almost one year of development stop on this memory leak, anybody know how solve it ?

I am a little bit confused about how timers work in Phaser: I understand that the Phaser.Time instance accessible from game.time is responsible for all the internal timing of the engine and also for the timed events we want to add in our games. But I don't understand the following (even after reading the source code) First, the name of the main game timer property game.time.events. It's odd because is a Timer object, not a signal. Shouldn't it be called mainTimer or something like that? I understand it might have this name for historical reasons and a change would break working code, but I'm curious If we want to create new timers we have game.time.add and game.time.create. We can destroy these timers form it's own API (Timer.destroy()) But that doesn't seem to delete them from the _timers array used by the Time instance to update them. We do have Time.removeAll(), but shouldn't we have Time.remove(timer)? . Otherwise we would have a potential memory leak, right?. I saw in the source code that the timers are automatically removed from this list in the Time.update() function if they have no more events to be dispatched, but only if their autoDestroy property is set to true. What if you don't set this property to true? I'm sure I don't want to, because I like to reuse my timers. Am I missing something? Thanks in advance Óscar

Apologies for what is a very vague question. My game runs fine for quite awhile, but eventually starts to spend 90% of its time (checked via chrome's profiler) in the emit function from pixi. I can't really share the ~18k lines of code, but I only do a few things in pixi so maybe someone knows right away that one of these things is an issue. It is a bit difficult for me to find the issue as it does take quite awhile to appear. Are any of these things suspects for causing pixi to 'emit' more and more over time? animating by changing a sprite texture: this.body.texture = PIXI.Texture.fromFrame('someArt'+frameNumber+'.png') creating a mask by drawing some shapes to a regular old canvas, having a sprite made from PIXI.Texture.fromCanvas(canvas), and then updating this mask via this.visibilityMask.texture.update() *once every frame* using a few PIXI.Graphics objects, and redrawing the graphics object from scratch every frame (only a few objects though, less than 10) updating x, y, rotation, mask, tint of a few objects every frame -- I have a networking layer which is constantly updating the properties of many of the objects. Any ideas? Sorry for the abstract problem. The game runs at a solid 60 fps with most of its profiled time spent 'idle' for at least 30 minutes. Going forward I'm just going to comment out large sections of the game and leave it running when I'm done working for the day. Maybe one of these mornings I'll return to find the program without a leak, and then I'll have narrowed down the search. The problem does appear to be in the game client and not the game server, as opening up fresh clients without restarting the server yields 60 fps again. Thanks!

Hi, Today I've faced with issue in the Chrome, that was discovered several yeas ago - requestAnimationFrame leaks. Pity but true. A brief post about my investigation is on the site: http://www.elvarion.com/garbage-collection-in-the-game-loop-chrome-failure/ What other eags our great web-platform has?

Hello, In my current project, I stumbled upon a memory problem with the Atlas. Each time we load a State, we load at least 2 Atlas to generate the content of the screen, but I noticed that after the shutdown phase the pixi textures generated for each frame are still in memory. At first I thought that it was a cache used for loading optimization, but when I return to the same State, the same number of texture are created and added to the cache with the old one created earlier. So each time I get an incrementation of 176 texture in memory resulting in a crash on mobile device. Is there a proper way to manage the destruction of Atlas or am I missing something? With this kind of behavior, I cannot relase a stable production on mobile.

Hi, while working on a project I found nasty memory leak - after few hours of debugging I finally managed to locate problem. here is test case to reproduce: function main(){ var game = new Phaser.Game(800, 600, Phaser.CANVAS, '', { preload: function(){ this.game.load.spritesheet('test', 'dude.png', 32, 48); }, create: function(){ //testLeak(); testLeak(true); } }); var info = document.createElement("span"); document.body.appendChild(info); var count = 0; var increaseCount = function(){ count++; info.innerHTML = count; }; var frames = [0,1,2,3]; var testLeak = function(addAnimation){ var sprite = game.world.create(0, 0, "test"); if(addAnimation){ sprite.animations.add("default", frames, 10, false); } increaseCount(); window.setTimeout(function(){ sprite.destroy(true); testLeak(addAnimation); },0); };} debug.zip Problem is that sprite animations isn't destroyed properly. Can anyone suggest workaround? Is it possible to reuse animations e. g. //......var animation = sprite.animations.add("default", frames, 10, false);//......sprite = game.world.create(0, 0, "test");sprite.addAnimation(animation); cheers, stauzs