Search the Community

I'm just curious what are regarded as best practices to avoid the dreaded GC pauses that can mess with the framerate of your game. I've only made some really simple games so I don't really have that much experience with this. Generally the way I've made objects when outside gamedev type situations is pretty close the Crockford-style way of making objects by have a factory function that returns an object literal with functions that closures that refers to variables inside functioning as private variables. (Technically I use TypeScript, but I don't really need to get into the types for this discussion.) const createObject = (someArg) => { let variable = someArg; return { changeVariable: (change) => { variable += change; }, getVariable: () => variable, }; }; const o = createObject(42); o.getVariable(); // 42 o.changeVariable(3); o.getVariable(); // 45 From a purely programming ergonomics perspective this is the way of writing objects I find the most comfortable (not trying to convince anyone else here, this is just my preference). However, I've read many places that aspects of this can be bad for performance (even Crockford admits this about his own pattern). in typical JavaScript programming this seems fine to me, but for games I worry that I'm limiting myself in performance which can lead to slowness or limits to for exampe how many objects I can have running in my game. This has made me think that I maybe ought to be using ES6 classes (or something else that uses prototypes) instead of my closure based approach. Also, maybe I should use object pools? Or hell, maybe even entity-component-systems? Suddenly this stuff seems really complicated (I'm _almost_ wishing I could just use malloc and free, haha). How do you people deal with this? How do you balance ease of testing out ideas while having an reasonable path towards optimization if needed be? I'm generally thinking of using Pixi.js for graphics (hence why I posted in this forum), and Matter.js for the times I want a dedicated physics engine. Sorry for the long post! I'll be very grateful for any thoughts on this!

I need to generate some textures on the fly, bassicaly when map is loaded I generate several dozens simple gradient textures. I found here: https://github.com/pixijs/pixi.js/issues/3806 (last comments) that this is possible to use just one helper canvas to do this but after reading some other sources I am a little confused how to handle destroy of this textures. At the moment I have some helperCanvas with 2D context to generate my textures and then I do: // This create texture from helper canvas as I understand var texture1 = new PIXI.Texture(new PIXI.BaseTexture(helperCanvas)); // This one "save" texture in GPU memory if I understood correctly. renderer.textureManager.updateTexture(texture1.baseTexture); // Create new sprite from this texture var sprite = new Sprite( texture1 ); I do this in loop to create all needed sprites but I am not sure what should I do when map is unloaded, when I don't need these textures. Is any action needed or GC can handle this? Should I remove them manually from textureManager by some method or call destroy on sprite?

Hello, I am working on implementing drag and drop in my scene. I have a sphere being created successfully. But when I click on it (mouse down), I do not get the expected drag behavior. I am basically working from the example and I can even reproduce the example in an "in situ" text fixture (i.e. Visual Studio hosted standalone HTML page). Both work equally well. Next, I want to connect the drag and drop stuff with a jQuery "scene:created" trigger. This is potentially where things fall over. I do not get the pointer down event, for starters, that I think I should be getting. I have verified that the trigger is indeed happening. Here is my on trigger event handler: var sceneCreatedDragAndDropHandler = function(e, args) { var startingPos = null; var currentMesh = null; var s = args._scene; var c = args._canvas; var camera = s.getCameraByName("arc1"); var getGroundPosition = function() { /* use a predicate to get position on the ground */ var pi = s.pick(s.pointerX, s.pointerY, function(m) { return !(/^role-/.test(m.name)); }); return pi.hit ? pi.pickedPoint : null; } var onPointerDown = function(event) { if (event.button !== 0) { return; } /* check if we are under a mesh */ var pi = s.pick(s.pointerX, s.pointerY, function(m) { return /^role-/.test(m.name); }); if (pi.hit) { currentMesh = pi.pickedMesh; startingPos = getGroundPosition(); if (startingPos) { /* we need to disconnect camera from canvas */ setTimeout(function() { camera.detachControl(c); }, 0); } } } var onPointerUp = function() { if (startingPos) { camera.attachControl(c, true); startingPos = null; } } var onPointerMove = function() { if (!startingPos) { return; } var currentPos = getGroundPosition(); if (!currentPos) { return; } var deltaPos = currentPos.subtract(startingPos); currentMesh.position.addInPlace(deltaPos); startingPos = currentPos; } c.addEventListener("pointerdown", onPointerDown, false); c.addEventListener("pointerup", onPointerUp, false); c.addEventListener("pointermove", onPointerMove, false); }; I have confirmed all the other bits are working. Canvas, scene, etc, are all rendering okay. The only thing I can figure is that somehow the scope is an issue, even though I am capturing the handler in a global variable, and that the JavaScript GC is collecting the guts of it. If that's the case and it's a GC issue, I wonder what the best way to capture which elements would be. Things like the event handlers, positions, etc, off the cuff. Suggestions?

Hi guys! I have this scene where I import different meshes with lots of polygons, like here: http://babylonjs-playground.com/#1OI6LZ#11 You'll see that I'm importing the same mesh repeated times instead of using instances on purpose. So at some moment, I'd like to remove some of these meshes. In the example above, when you click on the skulls, the mesh.dispose() is called. When I track the memory with the Chrome JS Heap timeline tool I can't really see the memory released though when the dispose() function is called. Here the four skulls were loaded and then I clicked on every one of them, so shouldn't there be some drops visible?: Is there something I'm missing?