Search the Community

Hi I made this game just for fun, knowing that I'm not the first one or the last one who did this. It's made with jQuery and CSS3 Animations no need for heavy frameworks. It's very simple. So hope you like it anyways. Play it here: https://oliver77.itch.io/simon-memory-game

Doctor Simon's Time Crash (Download in Google Play) Doctor Simon's Time Machine has crashed and now he is stuck in a time loop! You're his only hope to come back to the present. Memorize the shapes and colors of the combinations and click the buttons on the correct order to break the loops. Travel through time and discover new ages and backgrounds. Play with special features and bonus and unlock all the rewards to complete the game. I developed this game for Ludum Dare, a JAM event in which you have to create a game from scratch in 72 hours or less. In this case, the selected theme was 'Stuck in a loop', a tricky one. I used Phaser 3 for the coding and photoshop for designing characters, backgrounds, buttons and bars. It's my fifth game uploaded to the Google Play Store, with my Game Studio, Funsmith. All of them developed with Phaser. Here's the Google Play link to download in Android devices: https://play.google.com/store/apps/details?id=es.timecrash.app If you have iOS or you want to try the game but not download it in your phone, here's a HTML link. But please, remember, if you like it, download it! http://gonzalolhm.es/doctorSimonTimeCrash/

I am working on a game that has few background graphics, these are stored in app bundle at big resolutions like 2000x2000 pixels to support bigger devices like iPad pro. Obviously something this big is an overkill for mobile and I wanted to ask if following optimisation assumption is correct: 1. I preload these assets with pixi loader 2. I create sprite for each texture 3. I then resize this sprite to fit device dimensions better i.e. 1000x1000 px for iphone When I inspect my sprites textures I still see them at 2000x2000 pixels even though sprite itself is 1000x1000. I am concerned that I am not optimising this correctly, especially because I use prepare plugin https://pixijs.download/dev/docs/PIXI.Prepare_.html for some of these assets, I upload my sprites not textures, but I still feel like I might be uploading those big 2000x2000 assets alongside which is a problem, as these occupy a lot of GPU memory. Hence this thread to clarify if my approach to this problem is correct. I don't want to create separate asset resolutions i.e. 2x / 3x etc if possible to avoid increasing final app bundle size.

Check here ! Well, not actually the first game, but first which I’m finally done and self-publish. The game is pretty simple: just repeat numeric sequence. That easy! Nothing should be difficult ))) It works on top of HTML5 technologies. Powered by preact and by pure css effects. The intend was to learn react hooks and dive deeply into css. After a while react was replaced by more lighter and faster - preact. As you can see, those are not quite usually used for game dev., but I was motivated So, please, give me your thoughts about this one. Check here !

There is a LAST PICK memory game at https://www.html5pcode.com/a1ylastpick.htm that was designed to teach the art of coding. It uses structured programming, so it is easy to follow the logic of the design. The game is divided into small self contained pieces. It has a main program and a subprogram. The subprogram has routines that perform specific tasks when they are called by the main program. The game has links to YouTube videos that describe the operation of the main program and the subprogram routines. Once you learn how to design games like this one, you can go on to design your own games in JavaScript and/or a JS framework. This p-code lends itself to teaching coding because the source and object code are the same. The engine that created the code (source-code) is the same engine that executes the code (object-code). This makes it possible to do the following options. A DATA OPTION allows you to view the game's data, while the game is running. A TRAIL OPTION allows you to execute a few instructions at a time, so you can see what each routine is doing. A REAL TIME (RT) OPTION allows you to change instruction values, while the game is running. The YouTube videos show how these options are used in the designing of the game. There are many other games written in this p-code at https://www.html5pcode.com

There is a FIND GIFTS memory game at https://www.html5pcode.com/a1yfindgifts.htm that was designed to teach the art of coding. It uses structured programming, so it is easy to follow the logic of the design. The game is divided into small self contained pieces. It has a main program and a subprogram. The subprogram has routines that perform specific tasks when they are called by the main program. The game has links to YouTube videos that describe the operation of the main program and the subprogram routines. Once you learn how to design games like this one, you can go on to design your own games in JavaScript and/or a JS framework. This p-code lends itself to teaching coding because the source and object code are the same. The engine that created the code (source-code) is the same engine that executes the code (object-code). This makes it possible to do the following options. A DATA OPTION allows you to view the game's data, while the game is running. A TRAIL OPTION allows you to execute a few instructions at a time, so you can see what each routine is doing. A REAL TIME (RT) OPTION allows you to change instruction values, while the game is running. The YouTube videos show how these options are used in the designing of the game. There are many other games written in this p-code at https://www.html5pcode.com

Hi All, What is the best way to free the memory used by a scene ? I tried scene.dispose but I don't retrieve all the level of memory that I had before loading the scene... Thanks for your help. Best regards

Hey, I got some scenes, which loading assets only needed in those, I would like to clear the cache out of the files when a new scene is started so that the memory is free again. But I can't find an example or something in the docs. I had a look at this.scene.cache.destroy(); But when I do this in a constructor: It throws an error that cache is not defined. Or at the first line in preload: it messes up the files that will be loaded afterward. Can anyone help me out regarding this? cheers

hi everyone, I was asked by my fiance how hard it would be to program a memory game.. .. challenge accepted So I came up with this, using some test-sketches done by her as the cards: Play now It was fun to code (thanks to phaser!) and a good exercise in using tweens (had only used them briefly before). The game mostly consists of phaser buttons (as the cards) that are moved around using tweens. If you have any comments/questions please let me know.

I'm rendering the content of some PNG's via a 4096 by 4096 RenderTexture, to cram all of it in the GPU memory, for scrolling usage. As each column should be 1024 pixels wide I can store a maximum of 16384 pixels of height to scroll through. I use 4096 as width and height because of http://webglstats.com/webgl/parameter/MAX_TEXTURE_SIZE But what to do if I want more than 16384 pixels to scroll through in one go? Suddenly realised: Should I just use some extra texture(s) of 4096 by 4096? It looks like a maximum of 8 textures is a safe bet: http://webglstats.com/webgl/parameter/MAX_TEXTURE_IMAGE_UNITS Or is there a better approach?

There is the MATCH TWO game at http://www.html5pcode.com/a1ymatchtwo.htm The p-code was written in HTML5 JavaScript. The home page is http://html5pcode.com In the MATCH TWO game there are 20 tiles. Behind each tile there is a picture of a bird. There are 10 different bird pictures. Each bird is behind two tiles. You are to select two of the tiles. They will only stay shown, if they match. When all 10 birds are matched, the game is over. There are 1000 different games. Test your memory! This game is written in a p-code. The p-code is executed by a p-code engine. If you click on PROGRAM in the RED STRIPE at the top, you can view the p-code programs. The p-code engine can execute the programs and it can edit the programs.There is a DATA option that allows you to see the program's data as it is being executed. There is a TRAIL option that allows you to execute the program in small steps. There is an RT, Real Time, option that allows you to change the program as it is executing. There are many YouTube videos that will show you how it works.

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!

Hi Guys, The scene that I have built, makes the page refresh every now and then on any iPad safari or chrome. On an iPad Air 2, it keeps refreshing itself every now and then. On an iPad pro, it loads, but the moment I use the camera view to look around it dies and refreshes. I am starting to think that this is something to d with the speed/memory on the iPad and the amount it can handle when the camera turns and the processing begins. I have tried debugging it on the iPad by connecting it to a Mac on safari. But as soon as the refresh happens, the dev tools disappear and also, I see no errors there before it refreshes. If I am right, how do I work towards making it lighter for iPads and if I am wrong, what should be my approach?

I have Class constructor that require options parameter, that parameter is plainobject {}, also it has 0 or more arrays inside and another plainobjects. I create a lot of instances of this Class and these are succesfully pooled already. But I am wondering what to do with this options param like this one: { type: "type", ..., bodies: [ { type: "type" ..., }, ... ], ... } Sometimes options param is hardcoded, sometimes algorithm gets it by net connection in arraybuffer to recreate {} & []; What is worth pooling mechanism in javascript? For sure complex objects with a lot of properties and inner objects. What about these little guys then? {} & [] Is it worth to pool empty plain objects and arrays? With releasing it to pool you would remove all properties in {} and setting length to 0 in array.

Does anyone know how to unload and destroy audio files appropriately? I have about 12 MB of audio in my game, or about 15 minutes. I do not load all of them at one time, since this will break any mobile browser. So I load them in the states they are needed. About 4 MB is loaded at the same time. According to the Task Manager in chrome, the memory used by my game just keeps growing and growing, easily above 1000MB by changing states. (Browsers decode audio to lossless => memory use is high, regardless of file format and encoding.) In all states I have a shutdown function that destroys all the sounds and purges audio loaded in the cache. This is my current code (very similar to how cache is cleared when changing states, but I have some assets I use everywhere and don't want to remove): function clearCache () { // Purge sound. var key = this.sound._sounds.length; while (key--) { this.sound._sounds[key].destroy(true); } // Destroy "everything" in cache. for (var i = 0; i < this.cache._cacheMap.length; i++) { var cache = this.cache._cacheMap[i]; for (key in cache) { if (key !== '__default' && key !== '__missing' && this.cache._doNotDelete.indexOf(key) < 0) { if (cache[key].destroy) { cache[key].destroy(); } delete cache[key]; } } }}(Note: This problem did not occur in previous Phaser versions, so I am suspecting that some reference to the audio files are lingering, but can't find out where.) Also, if anyone has a good way of profiling and debugging browser audio, please share, I haven't found a good way to figure out where all this memory goes (Chrome heap profiler says that I use | 20MB).

Hello, I'm just starting to learn pixi.js I want to make a game where the main character is in the middle of the screen all the time, while the map moves behind the character as it is walking. The problem is, the map is going to be extremely large. I'm going to be zoomed in on a very small portion of it. The easiest way for me to load the map, is to simply load that whole thing onto the screen. Since the whole map obviously won't fit on the screen, it'll just show a small portion. Then I can just change the x, y coordinates of the map, to make it move. But, unless pixijs is doing some good memory management I am unaware of, doing it this way will overload the memory. I'd need to be able to smoothly walk through the whole map without interruptions to load another portion of the map. Anyone try and do something like this before? What do you do to try and optimize it?

Hi, I have a folder with 23MB of sounds (including music), all of them are in .ogg format because I need to support really old browsers. When loading those sounds, memory usage goes up to 900MB. If I comment the lines below, it stays about 90MB. What am I doing wrong? Controller.numMusic = 5; //Load music: for (var i = 0; i < Controller.numMusic; i++) { let soundName:string = "music" + i; this.game.load.audio(soundName, "assets/audios/music/" + soundName + ".ogg"); } this.game.load.audio("menu", "assets/audios/music/menu.ogg"); this.game.load.audio(ESounds.ACERTOU, "assets/audios/" + ESounds.ACERTOU + ".ogg"); this.game.load.audio(ESounds.ERROU, "assets/audios/" + ESounds.ERROU + ".ogg"); this.game.load.audio(ESounds.ANDANDO, "assets/audios/" + ESounds.ANDANDO + ".ogg"); this.game.load.audio(ESounds.CAINDO, "assets/audios/" + ESounds.CAINDO + ".ogg"); this.game.load.audio(ESounds.CLICK_BT, "assets/audios/" + ESounds.CLICK_BT + ".ogg"); this.game.load.audio(ESounds.CLICK_RUN, "assets/audios/" + ESounds.CLICK_RUN + ".ogg"); this.game.load.audio(ESounds.GRAB_ARTIFACT, "assets/audios/" + ESounds.GRAB_ARTIFACT + ".ogg"); this.game.load.audio(ESounds.PUT_ARTIFACT_ALTAR, "assets/audios/" + ESounds.PUT_ARTIFACT_ALTAR + ".ogg"); this.game.load.audio(ESounds.BREAK_ARTIFACT, "assets/audios/" + ESounds.BREAK_ARTIFACT + ".ogg");

Hi guys, my game was working fine, fluently, etc and I was expanding it. It's platform, where a lot of bullets are flying, also many spikes hang from the upper platforms. Now, when I add more spikes and more bullets, when the turrets shot them, the game drastically slows. Is too many object there? And what can I do to make it faster again? Creating spikes: function create_spikes ( x , y , number, angle, vertical) { for (i=0; i < number; ++k, i++) { if ( vertical != 'yes' ) { spikes[k] = game.add.sprite((x+i)*16, y*16, 'kolec'); } else spikes[k] = game.add.sprite(x*16, (y+i)*16, 'kolec'); game.physics.enable(spikes[k], Phaser.Physics.ARCADE); spikes.enableBody = true; if ( angle==180 ) spikes[k].body.setSize(12, 8, -14, -16); else spikes[k].body.setSize(12, 8, 4, 8); spikes[k].body.allowGravity = false; spikes[k].angle=angle; } } //ENEMY BULLETS ebullets = game.add.group(); ebullets.enableBody = true; ebullets.physicsBodyType = Phaser.Physics.ARCADE; game.physics.enable(ebullets, Phaser.Physics.ARCADE); ebullets.createMultiple(50, 'enemy_bullet'); ebullets.setAll('checkWorldBounds', true); ebullets.setAll('outOfBoundsKill', true); //ENEMY SHOOTING function enemy_shooting (enemy,type,direction) { if ( type == 'mortar' && enemy.alive==true) { nextFire = game.time.now + fireRate; var ebullet = ebullets.getFirstDead(); ebullet.reset(enemy.body.x-20, enemy.body.y-20); ebullet.body.velocity.y=-200; if ( player.body.x <= enemy.body.x ) ebullet.body.velocity.x=-200; else ebullet.body.velocity.x=200; }

Hi, I present you my game made in Phaser, here u are: redplanetgame.prv.pl I've finished it 3 months ago. It's a platform game, to collect all goals and kill enemies. When I was creating it, it worked fine, I mean, on full fps, but when I reach the end it drastically slowed down. I started few topic about this problem. I think, it's too many bullets or sth.(or my weird structure of code). When u inspect the browser, on bottom u can see all of my phaser code I've used. It's this: <script type="text/javascript" src="functions.js"></script> <script type="text/javascript" src="create.js"></script> <script type="text/javascript" src="update.js"></script> <script type="text/javascript" src="game.js"></script> <script type="text/javascript" src="jquery-3.2.1.js"></script> My question is: how to speed up whole game? Now it's seriously problematic. Another weird thing is that on many computers it works fine, on few it doesn't run completely (black screen instead of game), on other it freezes after few seconds, and in one the space+left arrow is not working xD

Hi all, Please try out my very first game created with Phaser: Follow My Lead. INSTRUCTIONS: - Pay attention to the button sequence - Now repeat the button sequence to go to the next level - Try to complete the stage to unlock the next one! The last stage is unlimited and works the same way as a Simon game. You can try it here on newgrounds: http://www.newgrounds.com/portal/view/693612?updated=1495225931 I also converted it into an Android app with Cordova (any Cordova users here?) You can try it out here: https://play.google.com/store/apps/details?id=com.walkingfort.followmylead Any feedback or advise is appreciated! Walking Fort

Hello, everyone. I've been playing around a lot with Pixi.js trying to find the best ways for memory optimization. Using Pixi's loader, I load my images. Some images are very large and for the first time creating and adding them to the stage, my game freezes for a moment. After reading around, I realized that freeze is Pixi uploading the texture to the GPU. Now, my question is, would it be ideal to add in a method to pixi's loader that after the texture loads, it uploads it to the GPU? That would stop the brief freeze. I have already used Pixi's built in method to upload to the GPU and the freeze is gone. What would be the pros and cons of doing this for every texture loaded? Thank you!

I'm noticing from the profiler that when I run the particle emitter in my game, the heap builds up over the course of a couple seconds and then drops back down after the garbage collection. To be sure the test is accurate, I've turned off everything else in my game so it is *only* the particle emitter that is running. My understanding is that once the initial pool of particles are created (in my case, 200), no more objects should be dynamically allocated, so why is this happening? My emitter uses a custom particle class that calls the kill() method on the particle when the particle gets more than a certain distance away from the source. My impression is that by calling kill rather than destroy, Phaser should be able to use the same particles over and over again. Why is Phaser, apparently, not reusing the particles? I'm using Phaser 2.6.2.

X.htmlI intend to use Babylon.js for displaying digraphs that are uploaded by the end-user. I've noticed that that the memory grows after each upload (and the rotations and panning are getting slower). Obviously, I have to get rid of the previously loaded graphs, so I've declared scene as a global variable and have included the statement: if (scene != null) scene.dispose(); before creating the next scene. However, if the scene exist, I receive the error "No camera defined" and I have to reload the page. I'm a novice to javascript, babylon.js and 3D - I'm presuming I'm doing something obviously wrong. The error (SCRIPT5022) is in: babylon.2.5.js (12,14463) - Tried to attach the page file, but the uploading is failing with err -200 .... Here is the complete page, erroring statement marked red: <!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html" charset="utf-8" /> <title>Babylon - Getting Started</title> <script src="babylon.2.5.js"></script> <script src="hand-1.3.7.js"></script> <style> html, body { overflow: hidden; width: 100%; height: 100%; margin: 0; padding: 0; } #renderCanvas { width: 100%; height: 100%; touch-action: none; } .button { background-color: #4CAF50; /* Green */ border: none; color: white; padding: 15px 32px; text-align: center; text-decoration: none; display: inline-block; font-size: 18px; font: verdana; } </style> </head> <body> <script> var fName = '...'; var displayModel; var engine; var xhr; var scene; window.addEventListener('DOMContentLoaded', function () { // get the canvas DOM element var canvas = document.getElementById('renderCanvas'); // load the 3D engine engine = new BABYLON.Engine(canvas, true); window.addEventListener('resize', function () { engine.resize(); }); } ); // ************************************************************************************************************************************* //http://borjan5/ArchLS/api/SoaScape3D/Render25D/62b702b6-7903-49f4-b609-5ccda2bdba4f function renderApiTest() { var url = "http://borjan5/ArchLS/api/SoaScape3D/Render25D/62b702b6-7903-49f4-b609-5ccda2bdba4f"; xhr = new XMLHttpRequest(); xhr.open("GET", url, false); xhr.setRequestHeader("Content-type", "application/json"); xhr.addEventListener("load", apiComplete, false); /* xhr.addEventListener("error", apiFailed, false); xhr.addEventListener("abort", apiCanceled, false); */ xhr.send(); } function renderFile25D() { var url = "http://borjan5/ArchLS/api/SoaScape3D/Render25D/62b702b6-7903-49f4-b609-5ccda2bdba4f"; xhr = new XMLHttpRequest(); xhr.open("GET", url,true); xhr.setRequestHeader("Content-type", "application/json"); xhr.addEventListener("load", apiComplete, false); xhr.send(); } function renderFile() { alert('Not there yet'); } // ************************************************************************************************************************************* function renderDemo() { var url = "http://borjan5/ArchLS/api/SoaScape3D/RenderDemo"; xhr = new XMLHttpRequest(); xhr.open("GET", url, true); xhr.setRequestHeader("Content-type", "application/json"); xhr.addEventListener("load", apiComplete, false); xhr.addEventListener("error", apiFailed, false); xhr.addEventListener("abort", apiCanceled, false); xhr.send(); } // ************************************************************************************************************************************* function renderBuiltIn() { displayModel = { "Title": "Built-in Data", "Mode": 1, "Applications": [ { "Name": "APPL1", "Form": 0, "Id": 0, "ToolTip": "", "V3": 0, "X": 46.5826874, "Y": 30.3723526, "Z": 0.0 }, { "Name": "APPL2", "Form": 0, "Id": 1, "ToolTip": "", "V3": 0, "X": 91.46761, "Y": 50.6884537, "Z": 36.0399628 }, { "Name": "APPL3", "Form": 0, "Id": 2, "ToolTip": "", "V3": 0, "X": 51.7862473, "Y": 81.5939941, "Z": 36.0399628 } ], "Services": [ { "Name": "SERVICE1", "ProviderId": 0, "Form": 1, "Id": 0, "ToolTip": "", "V3": 0, "X": 50.97662, "Y": 36.7166367, "Z": 6.359515 } ], "ConsumingRelations": [{ "ConsumerId": 1, "ServiceId": 0, "ProviderId": 0 }, { "ConsumerId": 2, "ServiceId": 0, "ProviderId": 0 } ], "DisplayBoundary": { "Form": 0, "X": 69.025146484375, "Y": 55.983173370361328, "Z": 36.039962768554688, "W": 22.442462921142578, "H": 25.610820770263672 }, "LastError": "" }; showDisplayModel(); } // ************************************************************************************************************************************* // ************************************************************************************************************************************* function myUpload() { var file = document.getElementById('9999').files[0]; var ajax = new XMLHttpRequest; var formData = new FormData; formData.append('archimateFile', file); //alert('aa1'); ajax.upload.addEventListener("progress", myProgressHandler, false); //ajax.addEventListener(''); ajax.addEventListener('load', myOnLoadHandler, false); fName = generateUUID(); ajax.open('PUT', 'http://BORJAN5/BAB_DATA/' + fName + '.xml', true); ajax.send(formData); } function generateUUID() { var d = new Date().getTime(); if (window.performance && typeof window.performance.now === "function") { d += performance.now(); } var uuid = 'xxxxxxxx-xxxx-4xxx-yxxx-xxxxxxxxxxxx'.replace(/[xy]/g, function (c) { var r = (d + Math.random() * 16) % 16 | 0; d = Math.floor(d / 16); return (c == 'x' ? r : (r & 0x3 | 0x8)).toString(16); }); return uuid; } function myProgressHandler(event) { //your code to track upload progress var p = Math.floor(event.loaded / event.total * 100); document.getElementById("uuid").textContent = fName + ' ' + p + '%'; } function myOnLoadHandler(event) { // your code on finished upload // document.title = event.target.responseText; document.getElementById("25D").disabled = false; document.getElementById("3D").disabled = false; document.getElementById("2D").disabled = false; // alert('DONE ' + event.target.responseText); document.getElementById("uuid").textContent = ' File uploaded: ' + fName + ".xml"; } function apiComplete(evt) { var data = xhr.responseText; //alert('API DONE: ' + data); displayModel = JSON.parse(data); showDisplayModel(); } function showDisplayModel() { var scene = createSceneAndShow(); engine.runRenderLoop(function () { scene.render(); }); } function apiFailed(evt) { alert("An error occurred while transferring the file."); } function apiCanceled(evt) { alert("The transfer has been canceled by the user."); } // ************************************************************************************************************************************* function createSceneAndShow () { var canvas = document.getElementById('renderCanvas'); if (scene) scene.dispose(); scene = new BABYLON.Scene(engine); var camera = new BABYLON.ArcRotateCamera("Camera", 1, 0.8, 600, new BABYLON.Vector3(50, 50, 50), scene); camera.attachControl(canvas, false); var light = new BABYLON.HemisphericLight("hemi", new BABYLON.Vector3(0, 1, 0), scene); var material1 = new BABYLON.StandardMaterial("mat", scene); var material2 = new BABYLON.StandardMaterial("mat", scene); for (var key in displayModel.Applications) { if (displayModel.Applications.hasOwnProperty(key)) { var sphere = BABYLON.Mesh.CreateSphere(displayModel.Applications[key].Name, 16, 4, scene); displayModel.Applications[key].V3 = new BABYLON.Vector3(displayModel.Applications[key].X, displayModel.Applications[key].Z, displayModel.Applications[key].Y); sphere.position = displayModel.Applications[key].V3; sphere.material = material1; } } material1.diffuseColor = new BABYLON.Color3(1.5, 0, 0); var linesColor1 = new BABYLON.Color3(1, 0.2, 0.1); for (var key in displayModel.Services) { if (displayModel.Services.hasOwnProperty(key)) { var obj = BABYLON.Mesh.CreateSphere(displayModel.Services[key].Name, 16, 4, scene); displayModel.Services[key].V3 = new BABYLON.Vector3(displayModel.Services[key].X, displayModel.Services[key].Z, displayModel.Services[key].Y); obj.position = displayModel.Services[key].V3; var pId = displayModel.Services[key].ProviderId; var myLines = BABYLON.Mesh.CreateLines("a", [obj.position, displayModel.Applications[pId].V3], scene); myLines.color = linesColor1; } } for (var key in displayModel.ConsumingRelations) { if (displayModel.ConsumingRelations.hasOwnProperty(key)) { var idA = displayModel.ConsumingRelations[key].ConsumerId; var idS = displayModel.ConsumingRelations[key].ServiceId; var myLines = BABYLON.Mesh.CreateLines("a", [displayModel.Services[idS].V3, displayModel.Applications[idA].V3], scene); } } return scene; } </script> <div id="bts" style="color:#0000FF"> <span> <input id="9999" style="background-color: #4CAF50; width: 30%" type="file" name="archimateFile" onchange="myUpload()"> <span id="uuid">...</span> </span> <button id="2D" class="button" style="background-color: #BCAC00" name="render2" onclick="renderFile()">SHOW 2D</button> <button id="25D" class="button" style="background-color: #1387F5" name="render25" onclick="renderFile25D()">SHOW 2,5D</button> <button id="3D" class="button" style="background-color: #E70000" name="render3" onclick="renderFile()">SHOW 3D</button> <button id="DEMO" class="button" style="background-color: #D490B8; color: black" name="demo" onclick="renderDemo()">SoaScape Demo</button> <button id="DEMO" class="button" style="background-color: #D4CE90; color: black" name="demo" onclick="renderApiTest()">API Test</button> <button id="DEMO" class="button" style="background-color: #90D4AC; color: black" name="demo" onclick="renderBuiltIn()">Built in data</button> </div> <div> <canvas id="renderCanvas"></canvas> </div> </body> </html>

Hi there, first i'm more or less new to JS and Pixi (comming from php), so please be patient if i ask strange questions i want to write an relative huge game/app with many locations and animations (spine maybe) and want to realize it in an one page app. To keep the memory usage low i try to write an stage/container management class that only initialize the elements (sprites/animations/dom elements) on demand and dispose them afterwards. My question is now is there allready an solution for this hidden in pixi? Or does a best practise exist for this? Or does there exist maybe even a tutorial for such a thing? Like mentioned i tried allready to write an class, but this works only for better management, but not for less memory usage or performance (app.js) And till now only adding (dom)elements and displaying them works (with resize! ) but destroying or adding the sprites in the container wont work. so any suggestions or guiding directions how to solve the many locations issue?

Should i set variables to null after removing them? Is it a good practice? I have 2 states: load and play. I want to delete "Loading..." text when switching state to play but loadingText variable is always Phaser.Text object if i dont set it to null. My current code is: var loadingText; // load state loadingText = game.add.text(...); // ...end of load state game.world.remove(loadingText); game.state.start("play"); Should i set loadingText variable to null to free memory?