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
    • Web Gaming Platform
    • Coding and Game Design
  • Frameworks
    • Phaser 3
    • Phaser 2
    • Pixi.js
    • Babylon.js
    • Panda 2
    • melonJS
  • 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 261 results

  1. I am trying to recreate this effect in a way that performs better. I created the above in canvas 2d with javascript. I am no javascript master, but I do know that for the performance I want I'll probably need WebGL, and a fast framework to go with it. That led me to pixi.js. I have come across the SpriteBatch class but I don't know if that matches my needs? Perhaps I'm thinking of the term sprite too traditionally. Any insight into the best way to go about this with pixi? Much appreciated, Ryan
  2. Hi, after upgrating to latest Phaser v2.1.3 performance in camera.follow rapidly drops... Here is a example... Test steps: - after load click on "HRAJ"("hraj" means "play" in slovak language) - you will be forced to fullscreen - use your keyboard arrows and walk around with character Whats wrong? When camera is moving with character performance of app rapidly drops!!! This is not a problem in Phaser 2.0.7 but all version up to 2.0.7 are affected with this Expected behaviour In phaser v2.1.3 it should camera.follow performance fast as it is in Phaser v2.0.7 CAMERA FOLLOW IS FAST - v2.0.7 This link using v2.0.7 - it's fast CAMERA FOLLOW IS EXTREMELY SLOW - v.2.1.3 This link load Phaser 2.1.3 - and on camera follow its extremely slow Code is the same but different versions of Phaser, any suggestions? Thanks for support
  3. Hey guys! If I have a large selection of sprites (tiles) that are owned by a spritebatch - what is the most efficient way of culling them? Currently I am adding / removing from the batch. Is this this the best way? If so, what is the most efficient way of updating the contents of the spritebatch? current I am being lazy and flagging those that are 'to be rendered' and placing them in an array and doing something like: batch.removeAll(); batch.addMultiple(array); is there a quicker way I can do this? Thanks
  4. i dont know about the internals of phaser but i could imagine that using collision groups instead of letting everything collide with everything and filter the relevant infos in the begincontact event would be faster because phaser/p2 doesnt need to check everything against everything.. right or totally wrong because collisiongroups create an aditional overthead?
  5. I am simply moving the same image from the top of the screen to the bottom and once the image reaches the bottom I just move it back to the top. I do the same to every image in the batch (around 15 - 20). They are relatively small images. I am solely using the canvas renderer to do this. As of now, I use a spritebatch and then add it to the stage. Are there any optimizations I can do or is this just a limitation of canvas? It works perfectly fine but drains a lot of power if you're on a laptop.
  6. Hi! I'm working on an HTML5 massively multiplayer online game. I've been playing with this project for awhile now and am having some difficult performance issues with the game at the moment. Since this is a multiplayer game, information is sent to and received from the network. New game entities that show up on a player's screen must be streamed from the server to the client. Sometimes new entities represent quite a bit of data and processing this data takes a sizable amount of time on the client. What is the best way to ensure that receiving new game state from the network doesn't cause rendering to skip frames? Right now if I receive a large enough chunk of data or enough packets of data in a short span, frame rate will suffer as the client spends its time unpacking and processing this data instead of running the rendering. Any advice on this would be greatly appreciated! Best, Daniel
  7. I am new to Phaser and I am currently working on my first game. I'm am creating a vertical scroller and have come across some performance issues on mobile. I have a 1024x4608 background with some 'land' that needs collision detection with the 'player' and the 'enemies' in the game. I've been trying a couple approaches but can't seem to find the sweet spot with the performance. I was hoping someone would have some suggestions. Here's what I've tried so far: 1) Tilemap this.load.tilemap('level01_map', 'assets/level01_map.json', null, Phaser.Tilemap.TILED_JSON);this.load.image('tiles', 'assets/tiles.png'); = this.add.tilemap('level01_map');'main', 'tiles');'land');, 0,,;[], true, 'land');var bodyObjects = this.physics.p2.convertTilemap(, 'land');for(var i = 0; i < bodyObjects.length; i++) { bodyObjects[i].setCollisionGroup(this.gameGroups.landCG); bodyObjects[i].collides(this.gameGroups.playerCG); bodyObjects[i].collides(this.gameGroups.enemyCG);} 2) Sprite with polygons this.load.image('level01', 'assets/level01.png');this.load.physics('level01_physics', 'assets/level01.json');, 0, 1024, 4608); = this.add.sprite(0, 0, 'level01'); = 1024; = 4608;var polygonCollisionSprite = this.add.sprite(15, 15);this.physics.p2.enableBody(polygonCollisionSprite, true);polygonCollisionSprite.fixedRotation = true;polygonCollisionSprite.body.motionState = Phaser.Physics.P2.Body.STATIC;polygonCollisionSprite.body.clearShapes();polygonCollisionSprite.body.loadPolygon('level01_physics', 'level01_left');polygonCollisionSprite.body.loadPolygon('level01_physics', 'level01_right');polygonCollisionSprite.body.setCollisionGroup(this.gameGroups.landCG);polygonCollisionSprite.body.collides(this.gameGroups.playerCG);polygonCollisionSprite.body.collides(this.gameGroups.enemyCG); And here are my results testing on an iPhone 5:Tilemap no collisions = 45fps Tilemap with collisions = 20fps Sprite/polygons no collisions = 45fps evens out to 60fps when less polygons in view Sprite/polygons with collisions = 8fps Sprite/polygons (simple) no collisions = 60fps Sprite/polygons (simple) with collisions = 30fps Note: simple means I reduced the vertices in the polygons. (Simple = 6 shapes, Normal = 44 shapes) The game is setup with 1024x640 in Phaser.CANVAS mode. Also, the all sprite assets, except the stuff for the background, are being load via one atlas texture. Any thoughts?
  8. Mobile devices are limited in comparison to desktop browsers or native apps in resources. I've noticed quiet a lot of times that if your games get's a little bit more complicated in update-processes, physics etc that the performance is lacking on mobile devices. Even as a result there are as more errors in the physics etc as your game-performance is limited. So maybe it is useful to compare how to improve performance. 1. Update function In my code I strongly try write as less code into the update function as possible. Because of redrawing sprite etc you do not need to - or even you don't need to check for some attributes only on specifically events. 2. file sizes My files are always the size which they are needed and pixel-perfect exported. (That's even a "must be" for design). So I think you guys know a lot more how to improve the game perforce of Phaser on mobile Platforms. I run my Games to Cooconjs. Experiences in PhoneGap offered me much less performance. cheers,
  9. Is anyone making HTML5 games for Mobile? I've used Intel XDK for a while for mobile development and it has always worked well. This is the first time I've tried making a game work on mobile with HTML5 and it's doing really badly. I'm not sure if it's something I'm doing wrong or if the power is just really that limited on a mobile device. I have 2 devices I've tested with and both of them should be pretty quick processors. I have the Note 2, it's a couple years old but still a 1.6Ghz quad core so it's probably faster than the majority of phones The other device is a Note pro 12.2 tablet with a 2.3Ghz quad core cpu. Both of these drop to about 10FPS when I have a 10 vs 10 NPC battle on screen (there is currently no player interaction). The graphics are tiny, there is no fancy stuff going on just collision detection mainly and it's already too slow. It's running 60fps in a browser on my PC but not on mobile. My questions are: Is this to be expected or have I got something horribly wrong? What methods are you guys using to get HTML5 games on to mobile devices? Thanks for your time!
  10. Hello everyone, I'm sure a lot of you have seen this blog post from the makers of Construct ( It has some really good information and shows just how powerful WebGL is. Great news all around. I didn't see it addressed in the article, nor have I seen anyone else talk about yet, but I'm seeing a drastic difference in performance between in Safari performance and 'web-app' performance (ie. save to home screen). I'm not sure if its just my device (iPhone 5s) or if its for everyone, but perhaps someone here could help verify my findings. Below are screenshots using Scirra's Space Blaster test. The first is when saved to the home screen to run as a web-app. The second is in Safari. Both ran for 1 minute with no other applications open. The web-app version only drops 4 frames during that entire minute and used a max cpu of 91%. The Safari version drops just about 1 frame a second and never gets beyond around 50% of the cpu. Safari seems to be caping the CPU usage (which I'm cool with, I don't need Canvas acting like Flash on the desktop), however I haven't seen this documented anywhere, and in the past the opposite was true. If you wanted full speed in iOS7, you had users run it from Safari not a web-app. This leads me to believe that for our games on iOS 8 we will actually want to get users out of Safari and into a web-app (I take that back, the sencha link from alex_h actually mentions a really serious bug with web-apps). Even for webGL. (note: at the time of both screenshots the fps reads 60fps, but I actually noticed it jump down to 48 quite a few times in Safari.)
  11. Hello, I have been doing tests with PixiJS because I have seen good results in the examples. When I have make a code with 400 objects, the renderer is very slow. These are the lines: graphics.mousedown = graphics.touchstart = function(evt) { this.clear(); renderer.render(stage); // slooooowww };I have uploaded a JsFiddle example of the code: I think I am doing something bad. Very thanks!
  12. Hi All!, I am looking for a method to get a dramatic performance increase (frame per second) on fullscreen with webGL (I am working now with three.js framework) This is my game: I made it adapt to window size on browser resize events, so, you can test reducing the window to tiny size to get huge performance, and setting the window to great size (e.g. fullscreen) will make the game VERY SLOW, ok , this make sense since a small enough window will set the resolution to 640x480 or whatever, and (in my case) setting the window to fullscreen will set the resolution to 1600x900... Of course I know render the game in higher screen resolution will be make it slow since there is much more fragments to process by GPU (640x480 -> about 307200 fragments, 1600x900 -> about 1440000 fragments). But now, I am looking a way to render the game smooth (near 60fps) on fullscreen, even sacrifying quality, one approach I tried is to set the resolution of canvas (and rendering) to half widht, half height, (e.g. 800x450) and using CSS to stretch the canvas to cover all the window (all of this on fullscreen), and it didn't improve I hear about methods of postproessing via scaling (e.g. rendering on 800x450, then doing an scale) but I don't know how to use them Thanks in advance!
  13. i have one little tiled background image and two layers in tiled .. all of them are only used as background images.. all the collisionareas are polyline objects on different layers.. the problem is always the same.. the performance is so poor - the game is almost unplayable on a nexus7 (this is no low end device you know?!) of course my levels are quite big but this shouldn't matter at all because it's always just the camera view (800x480) that's beeing rendered but hey.. it does matter.. because scrolling tilemap layers still sucks hard.. so i am searching for a neat workaround.. i exported the whole map as jpg and every level got this hughe jpg as background - this works .. i've got almost 60fps on the nexus7 BUT every jpg eats up to 900kb so this is no good way to go.. right? (imagine 40 levels would need 40Mb space on your device .. and additional 20 for cocoonjs.. ) therefore i want to merge down the tilesprite with the background layers from tiled on load and get rid of the layers - scroll only one very big image.. because thats a LOT faster.. or any other idea would be very appreciated !! (otherwise my game will never go mobile )
  14. Hi, I am looking for an html game engine to make something running on mobiles, I just played around this remake of Flappy bird(authored by uralozden), created with Phaser, it is quite simple with 400 lines in main.js, and it runs smoothly on PC, but on my android phone, it's just too laggy. The birdy is jumping rather than flying. Code and demo here: I can't see any problems in the code, and the assets used are in small size, so I wonder is it the best phaser(or html5) can perform for this kind game?? Can it be optimized any way?? Thanks
  15. I have a game where the screen fills up with falling blocks in a grid. The blocks are rendered by canvas drawing operations and use arcade physics to test for collisions between the blocks-group and itself, and the the ground. The game runs fine at 60fps on desktop, and it also runs fine on mobile -- until I get about 20 blocks on screen. Then the framerate drops progressively, down to about 30fps when the screen is filled with blocks. I have done some profiling and debugging and believe the problem is with the physics quadtree operations. In the profiler, before many blocks stack up, the rendering functions take most of the time. After a few blocks get stacked up, the heavy operations are all quadtree related. See the attached screenshots (profile1 and profile2 respectively). I have tested rendering simple sprite images instead of canvas drawings, with no difference. I have tried to disable physics on blocks once they land, but only partially succeeded (this.body.enable = false). I tried switching landed blocks to a different group, but had other problems with that and gave up. Should that even be necessary? All my code is at You can test the game yourself at Any suggestions on what I am doing wrong, or if I need to be more clever at something? Thank you so much for your help - I'm new to Phaser, but I really like it, and want it to work for me, but it's got to work on mobile. Everyone tells me to just use Unity, but I want to give this a try.
  16. So I'm working on a game that is just about complete and I'm using CocoonJS to wrap it up for Android. I noticed that when putting it on a Samsung Galaxy S4 that it does lag a bit. It's not too troublesome but I would like to remove this lag if at all possible. I have a strong feeling that it's coming from my physics calls because of the way my game is set up, so hopefully I can get some tips on how to better set things up. Currently my game has a character the rides along a set of teeth. As the character touches each tooth it becomes clean thus playing an animation. This continues indefinitely as per design of the game. Currently in the main update function there is this piece of code for handling the collision. for (var i = 0, length = this.teethGroup.length; i < length; i++) {, this.teethGroup.getAt(i), this.cleanToothHandler, null, this);}The callback function simply plays an animation and updates the score. The tooth's body property is set to immovable and velocity to -350. However in order to stop the player from being pushed back I had to set it's velocity to 350. Is there a better way to handle this kind of collision? Also is there a way to have the player's character just sit on the moving teeth and still have the collision callback function go off without having to counter the teeth's velocity? My final question is what sort of performance issues should I look for in the physics portion of the game? Thanks in advance.
  17. Hey guys, I am playing around with terrain generation and everything is coming along just fine (ofc feel free to copy/paste if you see anything you like and you want to play around with it), but it seems generating having generated (bitmapdata) sprites in my scene is a bit too much for my CPU. It gets really hot and the fans go crazy. At 1000 sprites my PC (windows) shut down on me. I guess I am doing something I am not supposed to do or am doing the wrong way, so here is my code, in typescript (if you prefer the JS, I am happy to add the generated JS, just let me know!) : module Terrain01 { declare var Voronoi: any; declare var noise; export class World extends Phaser.State { private siteAmount: number = 500; private relaxLoops: number = 5; private seed: number = 123; private sites: Phaser.Point[] = []; private voronoi; private bbox; private diagram; private bmd; create() { noise.seed(this.seed); this.bmd =,; = '#454645';[this.seed]); this.createSites(); this.bbox = { xl: 0, xr:, yt: 0, yb: }; this.createVoronoi(); for (var i = 0; i < this.relaxLoops; i++) { this.relaxSites(); this.voronoi.recycle(this.diagram); this.diagram = this.voronoi.compute(this.sites, this.bbox); } this.drawPolygons(); //this.drawEdges(); //this.drawRoads(); //this.drawSites(); } createSites() { for (var i = 0; i < this.siteAmount; i++) { var x =,; var y =,; this.sites[i] = new Phaser.Point(x, y); } } createVoronoi() { this.voronoi = new Voronoi(); this.diagram = this.voronoi.compute(this.sites, this.bbox); } getCellVertices(cell: any) : Phaser.Point[] { var halfedges = cell.halfedges; var vertices: Phaser.Point[] = []; for (var i = 0; i < halfedges.length; i++) { vertices.push(halfedges[i].getStartpoint()); } return vertices; } relaxSites() { this.sites = []; for (var i = 0; i < this.diagram.cells.length; i++) { var vertices = this.getCellVertices(this.diagram.cells[i]); var centroid = Phaser.Point.centroid(vertices); this.sites.push(centroid); } } drawPolygons() { var graphics =, 0); var cells = this.diagram.cells; for (var i = 0; i < cells.length; i++) { var site = cells[i].site; var value = Math.abs(noise.simplex2(site.x/400, site.y/400)); var halfedges = cells[i].halfedges; this.bmd.ctx.beginPath(); this.bmd.ctx.moveTo(halfedges[0].getStartpoint().x, halfedges[0].getStartpoint().y); for (var j = 0; j < halfedges.length; j++) { var halfedge = halfedges[j]; this.bmd.ctx.lineTo(halfedge.getEndpoint().x, halfedge.getEndpoint().y); } this.bmd.ctx.closePath(); var r = Math.floor(50 * value + 50); var g = Math.floor(100 * value + 110); var b = Math.floor(50 * value + 0); var rgba = "rgba(" + r + ", " + g + ", " + b + ", " + value + ")"; this.bmd.ctx.fillStyle = rgba; this.bmd.ctx.fill();, 0, this.bmd); } } update() { } }}The Phaser.Game renderer is "Phaser.AUTO" if that's important somehow. I use noisejs by Joseph Gentle ( & javascript-voronoi by Raymond Hill ( So, my questions are: why is this so tough to handle for my PC and what can I do to change it?
  18. Hello! i'm creating a bullet-hell type game in phaser. When alot of bullet sprites are being created ingame (~10 sprites/second, size = 5x5 px), i get consistent lagspikes, and graphic bugs caused by the lag... Is this normal? Anything i can do to increase performance? Here's the code to create bullet sprites: ...this.bulletGroup =;this.bulletGroup.enableBody = true;this.bulletGroup.physicsBodyType = Phaser.Physics.ARCADE;this.bulletList = []...this.timeCheck =; this.shoot = function(bulletSpeed, bulletRate, bulletTexture){ if ( > this.timeCheck + bulletRate) { var bullet = this.bulletGroup.create(this.sprite.x, this.sprite.y, bulletTexture); bullet.anchor.setTo(0.5,0.5); game.physics.arcade.moveToXY(bullet, player.sprite.x, player.sprite.y, bulletSpeed); this.bulletList.push(bullet); this.timeCheck =; }}; this.shoot_update = function(type, phase){ for(var i = 0; i < this.bulletList.length; i++){ this.bulletList[i].body.x += Math.sin(phase*0.1)*5; }};// this.shoot and this.shoot_update are called in update()
  19. Hello, yes I'm new here I hope, even though this has as much to do with CocoonJS than with Phaser, that the question is still welcome and that somewhat have been in the same situation. I am a few weeks into a project and decided to test it on my Android Device (Samsung Galaxy S3 - mini). To my surprise the game only ran at about 3 FPS. It is a somewhat graphic-intensive game, but still. After fiddling around in the settings for a while I tried to disable WebGL and rely on pure canvas/software rendering. This made the FPS jump to about 25, which is somewhat acceptable, but from the tests I've heard, if the game can run in 25 FPS in canvas-mode, it should be able to run at about the double in WebGL-mode, so there is clearly something wrong. When running in WebGL-mode, in addition the terrible FPS, there seems to be some graphical artefacts as well. I have worked in OpenGL before, and know that even a single error can destroy performance for the entire game, so it points toward some error in the OpenGL-ES. Problem is that the debugger in CocoonJS doesn't report any Errors, and the few Warnings has nothing to do with graphics, only inputs. Is there some known bug with Phaser or Pixi.js, because my next step would be to to disable parts of my game to see if that is what causes the problem, which is going to be a very tedious process. The features that I am using that might be a cause of problem: - Crop() there were something about it in this thread, but it seems outdated, i might be wrong though - 2048x2048 texture-size (All modern devices should support this) - Tint() though very sparingly - I am using Phaser 2.0.4 - I am using CocoonJS Launch App 2.0.1 for Android I really hope someone can help out with a solution or a way to help the debug-process of this problem.
  20. Hello everyone! I just started using Phaser about 1 month ago. I am just about done building a fairly simple game. I was wondering if people could give me some general performance tips for Phaser and perhaps JavaScript itself. Also I am in the process of learning how to use the Profiler in Chrome and have been using the Timeline as well to track memory management. If also possible could someone shed some light on what my memory should be at for a fairly simple game? I am also using CocoonJS to port onto Android and iOS and I am aware that each respective OS will cap at a certain memory threshold. If anyone has any further questions, I will gladly answer them. Also, thanks in advance to everyone that posts! Your help is greatly appreciated!
  21. Hello everyone. This is my first time posting on the HTML5 Game Dev forums so don't hurt me. I am currently working on a small project for a job that I got about a month ago. We are using the Phaser engine to create three games in one app. Two of the games use Phaser's Arcade Physics the third does not. We wanted these games to be available on both the App Store (iOS) and the Play Store (Android) so we decided to go with PhoneGap to wrap our games. Our first few attempts were with CocoonJS and that didn't work out too well for us. So in short, right now we are at the stage where we can get PhoneGap to give us a working app that we can put on an Android phone for testing. We have tested our app with three different phones right now ranging from old, to decent to pretty much brand new. The phones are as follow: HTC Desire C HTC One V Samsung Galaxy S4 MiniThe games run fine on the S4 Mini with a couple blips in the frame rate here and there but on the other two devices they just run horribly. Unfortunately we haven't had the opportunity to test on other physical devices just yet. Through some research we saw some posts stating that devices pre-2012 don't run JavaScript that well. This would explain the first two devices but not so much about why there are frame rate blips on the S4 Mini. I realize the easiest thing to look at is how the code is written but we ran a test app on its own on the first two phones. This app simply has a tween that goes off once every 6 seconds tweening in 6 colored boxes. The only other thing is there is an event listener for a tap on the boxes. If anyone can shed some light on the issue, that would be greatly appreciated!
  22. Deban

    Performance tests

    Hello I used to be an AS3 developer. I started a new project, so... why not try something new? I try different languages and frameworks, all for the web. So here are some bunny benchmarks. I know pixi has it's own, but most benchmark usually test only rendering power and not processing power. What can I say? You rule! Not only in rendering power, but more important in processing power.
  23. Hi All, I've just started using Phaser over the last couple of days and am liking it very much. I've never attempted any serious programming with Javascript, but seem to be catching on quickly thanks to all the available Phaser documentation. My question concerns the performance hit of using "emitters" in place of "groups". I understand that the emitter functions are basically an extension to the groups functions. What I'm doing is creating an endless scroller/runner game format. As the screen scrolls, pre-composed "scene" sections are chosen randomly, then generated off screen and scroll by from right to left. These scenes are composed of platforms, coins, enemies, and various objects. I've been using an emitter for each type of scene object (i.e coin emitter, enemy emitter, platform emitter, etc). Each emitter will generate a scene that will then scroll by, after a certain time has elapsed, another scene will be chosen at random, then generated and allowed to scroll by. I've been using emitters instead of simple groups because it requires less coding on my part to generate each scene. This has been working just fine with no lag or noticable hit in performance so far. My concern is that as the game gets more complicated with more scene objects, will I eventually start to see a hit in performance? The reason I feel this way is that it seems that emitter particles get several physics properties automatically applied to them, some of which i'm not using. Will using emitters instead of groups for this eventually create a performance disadvantage? What would you use to continually generate scrolling scene content?
  24. Hi all, Wondering if anyone had any experiences with Phaser in IE9. Is it just always going to be slow? I'm using P2 with the built in polyfill provided in the official repo for 2.0.5. Desperately trying to boost performance cross-browser, any thoughts at all would be useful... thank you. Nick
  25. Here's a dilly of a pickle I'm having... I'm using CANVAS as my renderer. The game I'm building works great on Chrome but on Firefox, specifically for OSX, I'm having issues. For instance, a 4GB RAM Intel Core i3 PC running Firefox runs great but a 8GB RAM Intel Core i5 Macbook Pro running Firefox runs laggy... I've tried switching to bitmap fonts and reduce other expensive operations but still... Is there any one who has experienced this or who knows what's going on? (Please spare me the 'PCs are better' jokes ) Nick