Search the Community

Showing results for tags 'performance'.

More search options

  • Search By Tags

    Type tags separated by commas.
  • Search By Author

Content Type


  • HTML5 Game Coding
    • News
    • Game Showcase
    • Facebook Instant Games
    • Coding and Game Design
  • Frameworks
    • Phaser 3
    • Phaser 2
    • Pixi.js
    • Babylon.js
    • Panda 2
    • melonJS
    • Haxe JS
    • Kiwi.js
  • General
    • General Talk
  • Business
    • Collaborations (un-paid)
    • Jobs (Hiring and Freelance)
    • Services Offered

Find results in...

Find results that contain...

Date Created

  • Start


Last Updated

  • Start


Filter by number of...


  • Start



Website URL





Found 260 results

  1. Hey guys.. I have a quick question. So I'm preloading a background texture right, roughly 960 x 540, so not huge in the grand scheme of things. The preloader has finished loading it, and it definitely exists in the cache, however when ever I do this... let bg = new PIXI.Sprite(PIXI.Texture.fromImage('myBG.png')); stage.addChild(bg); It takes a fair while to actually add it to the stage. I've watched the network to see if it IS making another xhr request to get the same image, and it's not Are there any suggestions if I'm doing something wrong? Should I make a custom cache and create all the textures first so I don't have to wait for PIXI.Texture.fromImage to hunt through the texture cache and make it? Cheers!
  2. Hi, I have a very simple playform game Mario style with arcade physics and two small sprites (platform terrein and player, no background). When I set the game to be 100% width and 100% height (my monitor res is 1920x1080) the framerate is 30 in Firefox and 15/20 in Chrome. I use the following code: new Phaser.Game('100%', '100%', Phaser.AUTO); Does anybody know why would it go so slow if it is only using two sprites? I am big fan of fullscreen games as they are more immersive. The reason I am asking is because I was having a look at Construct2 demos and they are very smooth on fullscreen, see this example: Is Construct using something like Emscripten?
  3. Hey everyone, I have a very simple 2D "minigame" that looks like this (please don't mind the uglyness) : So very simple, only one sprite and a couple of shapes. But my computer (macbook pro) often starts heating up while running the task. So I ran a memory audit (around 700ko increase per minute, that are due to me storing a lot of stuff) and also ran a CPU profile with devtools. Here are the results of the CPU profile: I was wondering if those results seemed ok to you ? @Nockawa Or do you think I might be doing something wrong in the code? (too large to share) When I look at the engine.fps I am at around 60fps, so perfect on that side. The game will be used by around 300 people all over the US with all sort of computers, mine is a high end macbook pro of last year (with of course a shity gpu but still pretty common for macs): 2.2Ghz i7 - 16Gb ddr3 - Intel iris pro 1536 mb - Mac/OS sierra using Chrome Canari Thanks !
  4. Hello all! I'm currently working on a website that has a Babylon.js scene as it's background, and also includes a game created with Babylon.js. I'm trying to keep the scene as simple as possible - I'm only using planes and their clones - and I'm testing on a 2013 ASUS laptop where I'm getting constant 60FPS. But of course, there are users out there with lower graphics performance, and I'm trying to find a way to test and handle that. In my current setup, I monitor the FPS in the first ten seconds, and if it averages under 45FPS, I call scene.dispose(); and set a cookie so the scene won't be loaded next time. Is there a better way to do this? Thanks in advance! BTW, here a video of the submarine-themed game in progress :
  5. Hey guys, just a really quick question on containers. I see that you can use a PIXI.particles.ParticleContainer. In the documentation is says that it doesn't support features such as tinting, alpha, masking etc.. However, as this class is extending from the normal Container, I am curious as to what is different, and how it achieves this. Thanks, Nick
  6. Hi! I am working on my first Phaser-game. I have a performance issue with my collision rendering. I am using tilemaps and an extra layer for my collision. You can see my example on (without rendering collision) and here is the example with rendering collision: Everything is fine on Desktop. Loading time is about 6 seconds. But on mobile devices it takes about 1minute to load. I am using "map.setCollisionByExclusion([], true, this.collisionLayer);" for my collisions. Already tried toreduce the number of layers to a minimum - about 2 layers - does not help. Tried using map.setCollision([8,9..]) - did not render any collision for me. Any suggestions? Thanks for your replies.
  7. So, recently I created my own tweening functionality to overcome some issues I was having with Phaser's ones and make it fit my needs a little better. While doing so I realized Phaser, and apparently many other engines out there, precalculate the tweened values and store them into an array that's later used to update the object's values instead of calculating the value update on every frame. The way I see it, if calculating all the values for a tween that will be played for one second takes, let's say, 1 ms, I would prefer to have those calculations done in 1/60 ms during the whole second, as the impact on performance sounds lower this way than having a CPU intensive frame while the rest are all lower. Is there any good reason to do this that I'm missing? PS: Also, what I was considering is building some sort of tween cache, where I do actually store tween progressions (0-1) for a certain type of tween and time so I can reuse them multiple times, even with different object or values, would be happy to hear if anyone ever used this or if has some interesting thoughts on it.
  8. Hi All, TLDR: i really just want a javascript sprite rendering engine, is Phaser right for me and/or with 3.0 will i be able to just use that part of the engine? I am about half way through my first phaser game and am loving it. Because of the nature of the game, i am using very little of the engine. All I am currently using the engine for is input buttons and sprite rendering. No physics, movement, world updates etc... I am using all my own code for doing movement, collision, updates, etc.. In the current phaser version, i am starting to see some slowdown on mobile browsers. I still have some obvious optimization to do which will help but i am at a point now where i could move things around easily since basically everything is just pure javascript. The hooks are not deep into Phaser at all. I read with 3.0 we would be able to add and remove things from phaser to match what we need, is this still the plan? Would i be able to just use the Sprite Render and Button/Input parts? Is there another engine that might be better (maybe just straight PIXI). Or should i just use Canvas and make my own simple sprite management? Any advice from you guys with experience would be much appreciated.
  9. I know this will pretty vague but "What the Deal With Mobile And BabylonJS". 1... Is mobile in web browser 'performant' enough now to get good play fps 2... Has anyone use the newer IOS WKWebView to package a BJS game and get good fps When i first started playing with BabylonJS a few months ago, using just raw javascript (before i made the toolkit)... I put a few basic boxes and cube and simple rotation with some 1 or two lights... I was getting horrible frame rate (15-18 fps) with just a few static items when i ran on I'm old iPad 2 Air. I searched around the internet and found things like CocoonJS that was supposed to provide and IOS/Android 'native' WebGL emulation layer (or something like that). There file thing was that the state of webgl on IOS and Android devices very poor and required some kinda of native port. So i just forgot about mobile platform and concentrated on the toolkit. But today after talking to @MrVR who is making mobile type VR projects (and gets fair frame rate some of his scenes ... around 30+ fps I think) i decided to re-visit that how mobile thing and just for shits and giggles pointed my IPAD 2 AIR and iPhone 7 at: Test Shooter Scene just to see what frame rate i would get on my test space shooter scene... Keep in mind i am doing all kind of COMPLEX model prefab instantiation for the waves of asteroids... got particles system, physics collisions and movement, detail meshes, collision meshes, tracking dynamic mesh intersections, playing background audio, shot audio, explosion audio in particle system explosion controller start function... All kinda stuff... PLEASE CHECK OUT on your mobile device and tell me what kind of frame rate you get (I having a problem with hand.js on that version so you can't move the ship... but just let it sit there and see the ship and its particle system before it get hit... then just let the waves of asteroids come down the screen and monitor frame rate). Because i am getting a VERY GOOD fps in just the mobile browser (have not checked out in WKWebView yet)... I mean like 56-60 fps (once initial FOS drown when starting scene...down to about 45ps at FIRST FRAME scene show) with all that stuff mentioned above going... How can that be... A few months ago i could get a simple static game to yield good FPS... But now with my toolkit produced game (which ALOT more stuff and apis packed in there) is getting so good fps... or am i tripping Has there been some kind of update (either with IOS WEBGL support or the new BabylonJS 2.6 updates like webgl 2.0 and vertex array object) that explains this... or is my one scene just a fluke and every body get much lower fps... PLEASE... Help a brotha out yo and check out the link on your mobile
  10. MarvinB

    FPS drop

    Hi Guys, I have multiple game states and one of them is kind of slow on mobile, while it works just fine on desktop. I ran a js profile to find out what could be the potential cause of this and attached it as a reference here. I know this image does probably not give away enough in order to make any clear predictions on what the issue for my fps drop is, but maybe the pattern of the times spent for the functions to execute yields something I could make use of. I commented out most of my update functions of that state to see whether the issue is hiding in there, but no success. The imagery and text I am rendering is also smaller and less than on my working states. I also tried to destroy and null all objects of the previous state. There might be still a couple I haven't captured. This is what I null: = null; this.add = null; this.make = null; this.input = null; this.state = null; this.stage = null; this.time = null; = null; Any suggestion what could go wrong?
  11. Hello, I've recently encountered a very strange behavior on a specific PC. I've been testing about 10 Phaser puzzle games, which use various tweens for visualization. I've played the games on quite a few desktop PCs, including a Mac, and more than 10 different mobile devices, Android and iOS. On only 1 of the PCs all games exhibit an aberrant behavior where tweens seem to be running slower than their duration states. I couldn't find anything in the Internet about what could cause this issue. Even a simple alpha tween with a certain duration, no delay and autostart is acting weird. Phaser 2.4.6 is used. The issue is experienced in Chrome, currently the latest version, but I've noticed this behavior in earlier versions in the past months. On Edge everything runs as intended. If anyone has any idea or solution, please share.
  12. Hy guys, i used instances for my mesh, but it's really laggy Here's the code: var house; BABYLON.SceneLoader.ImportMesh("Cottage_House", "cottage/", "cottage.babylon", scene, function (newMeshes, particleSystems, skeletons) { house = newMeshes[0]; house.scaling = new BABYLON.Vector3(0.09, 0.09, 0.09); house.position = new BABYLON.Vector3(-6, 0, 0); house.checkCollisions = true; var instances = new Array(); for (var i = 0; i < 10; i++) { instances = house.clone('Instance' + i); instances.position.z = 4; instances.position.x = 3; } var houses = BABYLON.Mesh.MergeMeshes(instances);
  13. When profiling my game in chrome, 8-20% of the time is spent in processInteractive(), but to my knowledge I haven't enabled interactions. Is there a way to turn them off? Is there a way to turn them on *accidentally* ? Perhaps by adding a function to a pixi object like sprite.onmousemove = fn; or something like that? The game is live (works best in Chrome, not sure about the others) . If you play it and run the profiler you can see what I mean. I've also attached a screen shot of the profile. The source code is which I've searched for the strings 'interactive', 'interaction', 'interact' which do not appear as far as I can tell. Thank you!
  14. Parasyte

    Debugging tips

    There are a lot of things you can do to help get your questions answered faster. This announcement will provide some tips to get you unstuck as soon as possible. The first, and most important thing to do is ALWAYS develop your game with the most recent non-minified melonJS build. Switch to the minified build for your final release; never before that point. Follow the tips in the other announcement:!topic/melonjs/SvC8ZNJ3P_c Familiarize yourself with the debugger in your browser/user agent. You are writing a lot of JavaScript to create a full game, perhaps more than most web developers will in their entire careers. If you are not using a debugger, you are shorting yourself, and extending development time greatly. Enable the "pause on all uncaught exceptions" feature in your debugger; this should be the first thing you configure when you open the debugger for the first time. console.log() and alert() are simple to use, but breakpoints are better in every imaginable way; they are temporary, can be enabled and disabled at runtime without modifying the JavaScript, and allow you to inspect variable state at any point in the program's execution. Learn to follow stack traces so you can understand how the code eventually leads up to specific events, like uncaught exceptions. If your game runs slow, use the profiler in your debugger to pinpoint functions that take up the most time, and try to minimize how often the slow functions are called, or make the slow functions faster! If you've done the above and still need a little boost in the right direction, please include the full source code for your game. It is often not enough to paste code snippets in the body of your message, because there are times when the issue lies in an area of the code you hadn't considered. We can use the techniques described above to find and solve a very wide range of issues, but only if we are able to run the code ourselves. If you have found a true bug in the melonJS engine (not just a support request), please search the github issues for similar reports, and file a new ticket if you don't find anything: This is the best way to get bugs in the engine solved quickly. If you are having trouble with the tutorial, it has its own git repository and issue tracker:
  15. Hi, I am developing a game in Phaser 2.3.0. It is running smoothly on desktop, generally about 55-60 fps, and on android mobile (Nexus 4 and 5, Sony Experia) between 30-50 but I cannot get it over about 7fps on most iOS devices (tried iPhone 4s, iPhone 5, iPad3, iPad mini) An iPad Air runs at about 20fps which is OK, but not great. I am struggling to find out what is causing the slow frame rates so was wondering if anyone had any words of wisdom. It is using: p2 physics engine a 'Tiled' map with objects converted to sprites and collision objects. Texture packer atlases where possible I use large parallax backgrounds but swapping to smaller ones does not seem to have much effect I have read anything I can find on the forums regarding optimising games and tried anything that was suggested. Things I have implemented.. Detecting iOS and using sprites rather than TileSprites this got me from 1fps to about 7fps Switching from AUTO to CANVAS - game runs better using Canvas on all platforms Things I have tried... halving the width of all backgrounds - no change halving the width/height of all backgrounds and scaling up by 2 - no change switching physics engine to arcade - no change temporarily removing all the objects from the tilemap which have collision detection - no change changing all tiling background images to power of 2 - no change Here is the game - press space or click/tap screen to start sorry for the blurred graphics... Any pointers/help much appreciated.
  16. Here is my game: Curvatron. In that version (a bit outdated now) the snake's tail is drawn using a Bitmap Data. Every frame, it draws a sprite (small circle) under the snake's head, and erases the end of the tail with a clearRect. This is ugly but it was the fastest method I could find at the time, for mobile. I have been trying to find other ways to do this so that I can have a prettier version on PC, but I'm not sure which one is the best. I tried: Using Graphics, drawing the entire body with a thick line. The entire line is erased and then redrawn every frame. Same thing as 1, but with Bitmap Data. Using Bitmap Data, drawing small circles (not sprites) for each body point, for the entire body. The entire thing is erased with a clearRect every frame and then redrawn.Which one of these approaches is the best? Should I just stick to the original one? Another question: is there much of a performance difference between using a small sprite (16*16) for drawing in the BMD and drawing a circle with the same dimensions?
  17. I have observed that sub meshes can solve many issues for dynamically changing materials for parts of meshes. "Dynamic" changing of materials is meant to mean changing the material of parts of the scene content on demand while the application is running. It is understood by me that in order to increase general performance of the BABYLON engine, one should reduce the total number of meshes in the scene. This has certainly been an observed truth in my implementation of BABYLON for our application. We see that this truth, however can become problematic when several large meshes exist, and then many sub meshes are created for assigning materials to parts of the mesh. As I understand from forum research, empirical analysis, and reviewing BABYLON source code, the number of sub meshes is directly linked to the number GL draw calls. If the scene is organized with several large meshes, you will still see inferior FPS performance if many sub meshes are added to each mesh. This is true, even if many of the sub meshes reference a small number of materials. To visualize this problem, I will use the example of a large horse (metaphorically) being the entire contents of the scene. In this case, we will have a single mesh, containing all the vertices to draw this horse. Dynamically, we wish to change this horse to a zebra - where the vertices are identical to the horse, but instead we add black and white stripes to the horse. I have explored two options to accomplish this "zebra-fication". 1) (Non-submesh solution) Manipulating the index and vertex arrays themselves, it is possible to "pull" apart all the white parts of the zebra into a single mesh, and all the black parts of the zebra into a separate mesh. This performs wonderfully from a FPS perspective, but is not wonderful for the array manipulation itself. This is also NOT using the concept of sub meshes whatsoever. The problem, once again with this solution is not the render performance, but the operation of creating the two meshes. It can also be considered that once indexes are manipulated, we could retain the use of a single mesh, and since the indexes are reorganized and are concurrent with respect to their materials, we could also use 2 submeshes. 2) (Submesh solution) An elegant solution in terms of performance of the "zebra-fication" is to cut up the horse mesh into white and black stripes with sub meshes. The performance of creating these sub meshes is very good - as expected. The problem with this solution, as I introduced in the beginning paragraph, is that for each "stripe/submesh" we see a separate GL draw call. My post is intended to firstly inquire if there is a way to bridge the gap between the low cost for the zebra-fication with submeshes while also keeping GL draw calls low and therefore FPS high. As I understand it, I cannot currently have my cake and eat it too. My post is also intended to inquire about a possible enhancement to the BABYLON engine, which I am more than happy to code, test, and post to the BABYLON source. This would be an optional structure to pass multiple sub meshes to the rendering manager, where these sub meshes share the same material index. It should also be noted that these sub meshes do not need to have consecutive start/end indexes. Therefore, one could still enjoy the excellent sub mesh performance while "zebrafying", and also enjoy great FPS performance. I am more than happy to discuss design details with this enhancement if this enhancement would be allowed to the source code. It may also be possible to enhance the submesh class so that non sequential ranges of indexes could be added. This may be an easier and more elegant solution. With this solution, one could create two submeshes (one white, one black), and specify the various index ranges for each white and black stripe respectively. Thank you for your time
  18. Is there a performance impact of calling MANY 'scene.registerBeforeRender' for each scene component could be hundreds OR should there be ONE BIG scene.registerBeforeRender and i maintain my own array of scene components i want to 'tick' along and loop thru my array calling 'myobject.update' i would much rather not have to maintain an array of scene components for ticking and simple call: scene.registerBeforeRender(myobject.update) and scene.unregisterBeforeRender(myobject.update) for each and every scene component i am going to have??? Thanks for the info
  19. Hi, I'm new to Pixi.js and I'm trying to make a simple scene, in RPGMaker Style (with different tiles on the ground to draw the scene). I coded a little app that simply creates all the needed sprites, adds them to a Container (or ParticleContainer, tested both), adds the whole container to the scene, and manages a few keyboard inputs. The result is highly laggy... What am I doing wrong? I would happily look for other ways to do this but I think I'm doing what guides show, so I don't get it. Here is the code : Thanks !
  20. Hi guys Recently I'm testing my game on iphone7, I found out that the phone heat up very soon even though I have not started playing it, so basically there are just around 30 static sprites. When I reduced the number to less than 10, the temperature drop obviously. Eventually, this problem is resolved by changing the renderer from Phaser.AUTO to Phaser.CANVAS, but I don't understand why the canvas perform better than webgl, and why it only happens to iphone7(on iphone6+ or 7+ are totally fine), has anyone had the same problem can explain it to me?
  21. Hi All, In my game i am having a emitter which execute when user tap on the object. The emitter is slow in low level android phones. So I am planning to check the fps. If fps < 30 then don't show the emitter ELSE show the emitter. I am going to use the below line in create function so that Phaser will calculate the fps. = true; Will it reduce the performance of the game, because only when the advancedTiming property is set to true Phaser starts calculating fps, which is an additional work for Phaser. Thanks for your help. Joseph
  22. I see a framerate drop in the latest 2.5 compared to 2.4. It's not huge: about 5-6 FPS, but still noticeable.
  23. My Phaser (v2.6.2) game runs great at 60fps on my iPhone 6S. But then I tested it on a regular 6 and was shocked to see 20fps. I took everything out until nothing was left but an empty scene and it is still just 30fps on iPhone 6 and 10fps on iPad Mini 1. The code below outputs: In Safari on iPad Mini 1 iOS 8.2 -> webgl: true fps: 20 In Safari on iPhone 6 iOS 9.3 -> webgl: true fps: 30 (I even checked this on two different iPhone 6 because I couldn't believe my eyes) In Safari on iPhone 6S iOS 10 -> webgl: true fps: 60 The performance cannot possibly be this bad can it? iPhone 6 is still a modern device. But what could be wrong with my code below? For comparison I also quickly googled html5 game engine and set up a basic scene with Panda JS that just sets the renderer to WebGL and prints out fps and it was running at 60 on all 3 devices listed above. So I think I can rule out device and it must be something down to the Phaser engine, or the way that I am using the Phaser engine. <!doctype html> <html> <head> <script src="./build/phaser.js"></script> <meta name="viewport" content="width=device-width, initial-scale=1.0"> </head> <body> <script type="text/javascript"> window.onload = function() { var game = new Phaser.Game(360, 640, Phaser.AUTO, '', { init: init, render: render }); function init() { game.time.advancedTiming = true; } function render() { game.debug.text("webgl: " + (game.renderType === Phaser.WEBGL) + " fps: " + game.time.fps, 32, 32); } }; </script> </body> </html>
  24. Hello! I'm faced with a problem and looking for a good solution. The problem is how to load test my websocket multiplayer game by simulating n real clients? My game works great when there are just a few clients while developing, but recently I had about a spike of new players join from a school at the same time, and my game did not scale well at all. So I have a scalability problem and I need to fix it, but the question is how do I know when it's fixed? I need a way to on-demand scale up to N number of simulated clients, to test my scalability. Problems with load testing websockets: I can't just open a bunch of browser windows on my computer and connect because my computer doesn't have enough resources to support that many clients. There are traditional web load testing tools like jmeter, but they are designed for opening http connections not websockets There are also websocket load testing tools like thor, but those just open a websocket connection and send dumb messages, and can't act as a real game client. What I need is a way so simulate a real game client that uses the same protocol as the game, and sends messages as a real player would, then be able to scale that up to 10, 20, 50, 100. Has anyone else run into this problem or have any recommendations? Thank you!
  25. Hello, friends. Here's some data for you I collected during my research. I think it may be useful for somebody who's like me trying to create truly crossplatform/crossbrowser html5 game and (unluckily?) chose Phaser engine. My game can be described like this: Size of the entire game: 3 mb Resolution: 640*960, up to 10 small sprites on the screen, 1 background sprite - that's all. ARCADE physics to process collisions between those 10 sprites. Not bitmap fonts - 2 text labels on the screen. Here's the stats I collected so far: Game works fine on Iphone 5/6 when I use CANVAS. Game works fine on modern android devices with chrome. Some devices fail when I use CANVAS - they prefer WEBGL. I got stable 60 fps and I am happy. But what about stock browsers? What about windows phones? Here the results for CANVAS on Lumia 930: Phaser v2.0.7, Pixi 1.6.1 - Works perfectly on Lumia. 60 fps, buttons work, scaling works. Phaser v2.5.0, Pixi.js - Extremly SLOW. Everything works fine, but with 10-15 fps. Phaser v2.4.1, Pixi.js v2.2.8 - Extremly SLOW, buttons don't work. Phaser v2.3.0, Pixi.js v2.2.8 - Extremly SLOW, buttons don't work. Phaser v2.2.2, Pixi.js v2.2.0 - Extremly SLOW, buttons don't work. Phaser v2.2.1, Pixi.js v2.2.0 - Extremly SLOW, buttons don't work. Phaser v2.1.3, Pixi.js v2.0.0 - The game didn't launch. // That's fine, I suppose API changed a little. Phaser v2.1.0, Pixi.js v1.6.1 - Extremly SLOW, buttons don't work, scaling broken. I prefer to use the latest versions of Phaser. But with v2.5.0 game gives me 10-15 fps as max. v2.0.7 works perfectly giving 60 fps. So, friends, do you have any idea what happened with Phaser between 2.0.7 and 2.1.0? After the 2.0.7 version this engine gives pretty poor performance on this device.