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. Hi everyone ! Remember "Macromedia Flash" ? It is a dead technology that used to allow total freedom at the expense of HUGE computation. It has been abandoned... As much as I loved the possibilities at the time, fact is, running a somewhat simple game within your browser would require all the power and memory your computer could give, no matter how powerful, and in my humble opinion, I'm happy it has been discontinued, I HATED the way my -powerful then- MacbookPro would start to spin its fans at full speed, full noise, full heat. Now I'm a beginner in trying to master BABYLON.JS, and in my first experiments, I notice the fans of my brand new super-spec MacbookPro behave sorta the same way, soon after loading my scene, the fans start to turn fast and loud, Babylon.js pushes the computer to high temperature. And I don't want my beloved Babylon.js framework to end up like Flash !!! lol Checking demos on the official babylon.js site, I notice some of them render well without making the fans turn on (ex : but others demand too much (ex : ###So, trying to make it short, what is the good way to go in order to keep the CPU usage low ? (like in the Sponza demo)### -Textures: -What is the recommended size ? -How much CPU does it take to use bump, specular, etc... on top of the Diffuse one ? -Lights: -Is there dynamic lighting on an optimized scene ? Of which kind ? how many ? How to bake static lighting ? -Programming: -Is there a way to writing javascript code that would be better than another ? -example: Is calling "scene.getMeshByName("")" more demanding than just "mesh" ? -how does the "scene.registerBeforeRender()"should be handled ? -example: Is it a problem if calling "for (var i=0;i<scene.meshes.length;i++)" or "for (i=0;i<scene.textures.length;i++)" multiple times rather than just one time ? -Is there a way to handle/optimize memory ? Well this is just a few questions this topic can bring up ... I hope people participate with questions and answers, we can decipher the magic behind perfect programming together !
  2. When I open this phaser example on Chrome, Windows 10 on a Surface Pro 3 (i7, 8GB RAM), my CPU usage jumps from about 2% to about 25% and stays there. This leads me to believe that running phaser will at a minimum use 20-25% of my CPU, and that's before I add anything like animations and sounds, physics, and anything in an update() method. Running this PIXI example shows CPU pegged at about 11%. I understand that Phaser is providing much more than just rendering, but I can't help think that when it's using at a minimum double the CPU of the renderer when idle that something is off. Is this what everyone else is finding? Is this just the cost of using Phaser? There are other threads that have optimization tips regarding limiting the amount of tweens and sprite reuse and physics etc, but are there any tips folks can share for optimizing when none of extra features are being used such as in the phaser example above?
  3. At work, we've had an outsourced team create a game for us; they chose Phaser even though neither of us had any previous experience, but for the most part that seems to have been a good choice - complete, good docs and examples etc. But there is this one issue: on first play of animations, they freeze up. The team tried to solve it in what I think is a reasonable way - pre-play all the animations once during a loading screen. However, doing this is somehow so taxing that even simple CSS animations also freeze (multiple browsers, devices, operating systems) creating a jarring effect for the player. It also takes so much time - up to 5 seconds even on desktop computers - that just having a black screen also feels bad on many devices. The thing is that it's not even that many animations, maybe 25-30 in all and most of them not that complicated. On one super powered graphics machine the freeze is down to less than half a second, but the machine itself does not even register it, meaning it's not (probably) a CPU issue or so, but something blocking maybe? I've tried to search google, stackoverflow and these forums but I don't really find anyone else having this problem, which leads me to suspect that we are simply doing something wrong. The team is new to Phaser and I have myself not even written any games in it, though I can read the code. And frankly, them being outsourced makes them tend to declare things being "unfixable" a bit early at times... I could post some code, but basically it's doing "world.create()" adding all the animations, and doing "play()". Instead I would like to ask if there is a common/best practice or, otherwise if this is so weird that our animations must be broken from the start or any other reason you could think of. What exactly is Phaser doing on first play, is it unpacking the image to memory or something? Is this something that could be partly or wholly done beforehand in a build? Would be very thankful for any clues - and I do apologize for the somewhat messy question, it's kinda hard asking third party questions. Thanks!
  4. I'm currently looking into JavaScript frameworks for a simple cross platform 2d game and mainly concerned about mobile. While investigating PhaserJS I've noticed performance issues when moving sprites although it shows consistent 60 fps in the browser. The movement is not consistent, not fluid, feels choppy. Tested on Chrome (48), Firefox (44) and MS Edge most of the time it was choppy with occasional smoothness. My specs are: 4th generation i7, 16gb ram, GPU HD 8800m. What's the issue here, can it be solved or JavaScript frameworks are not ready for mobile development and better to go native to achieve smooth 60 fps sprite movement? Please see the demo here: The code from the example above: // This example uses the Phaser 2.2.2 framework // Copyright © 2014 John Watson // Licensed under the terms of the MIT License var GameState = function(game) { }; // Load images and sounds GameState.prototype.preload = function() {'bullet', '/assets/gfx/bullet.png'); }; // Setup the example GameState.prototype.create = function() { // Set stage background color = 0x4488cc; // Define constants this.SHOT_DELAY = 100; // milliseconds (10 bullets/second) this.BULLET_SPEED = 500; // pixels/second this.NUMBER_OF_BULLETS = 1; // Create an object representing our gun this.gun =,, 'bullet'); // Set the pivot point to the center of the gun this.gun.anchor.setTo(0.5, 0.5); // Create an object pool of bullets this.bulletPool =; for(var i = 0; i < this.NUMBER_OF_BULLETS; i++) { // Create each bullet and add it to the group. var bullet =, 0, 'bullet'); this.bulletPool.add(bullet); // Set its pivot point to the center of the bullet bullet.anchor.setTo(0.5, 0.5); // Enable physics on the bullet, Phaser.Physics.ARCADE); // Set its initial state to "dead". bullet.kill(); } }; GameState.prototype.shootBullet = function() { // Enforce a short delay between shots by recording // the time that each bullet is shot and testing if // the amount of time since the last shot is more than // the required delay. if (this.lastBulletShotAt === undefined) this.lastBulletShotAt = 0; if ( - this.lastBulletShotAt < this.SHOT_DELAY) return; this.lastBulletShotAt =; // Get a dead bullet from the pool var bullet = this.bulletPool.getFirstDead(); // If there aren't any bullets available then don't shoot if (bullet === null || bullet === undefined) return; // Revive the bullet // This makes the bullet "alive" bullet.revive(); // Bullets should kill themselves when they leave the world. // Phaser takes care of this for me by setting this flag // but you can do it yourself by killing the bullet if // its x,y coordinates are outside of the world. bullet.checkWorldBounds = true; bullet.outOfBoundsKill = true; // Set the bullet position to the gun position. bullet.reset(this.gun.x, this.gun.y); // Shoot it bullet.body.velocity.x = this.BULLET_SPEED; bullet.body.velocity.y = 0; }; // The update() method is called every frame GameState.prototype.update = function() { // Shoot a bullet if ( { this.shootBullet(); } }; var game = new Phaser.Game(848, 450, Phaser.AUTO, 'game'); game.state.add('game', GameState, true);
  5. Hi all, I have picked back up a project I started a while back and have run into some issues. I decided to upgrade from 2.2.2 to 2.4.4 assuming that all of the effort and improvements will be a benefit. I learned that the scaling API had changed a little, so I fixed my code to use the appropriate methods, discarding the deprecated ones. That eliminated the exceptions I was seeing. Unfortunately, though the game now runs, I have found that my FPS has dropped from around 55-60 to 5-15. I can toggle between these two versions of Phaser 2 and instantly see the difference in FPS. Everything else about the game looks the same and nothing is being reported in the logs. The only clue I have is that the drop in FPS occurs when the tilemap is scrolling. My game uses the following APIs/functionality: Tilemaps (made in Tiled), collisions set using, 4);Audio (mp3)Tried out both Canvas and WebGL rendering (no perceptible difference)Arcade physicsI'd greatly appreciate any tips/gotchas I should be watching for. Is there some flag I should be setting to correct the scolling problems? Thanks!
  6. Hi there, I have a problem with game mechanics on mobile devices. Mechanics connected with timers. For example, I have a physics character (using p2 physics), which fly up during some time, then falling down. So the problem is my character fly on different heights on different devices. I think it's a problem with performance and game fps. I've tried to connect mechanics with game.time.fps - but it's don't help. Maybe anybody have some ideas what is going on? This is the part of code for example: function fly() { if ( < force + 50/*I've tried to add fps here, but no effect*/) { = -2; } else if ( > force - 50) { = 2; } } var timer1 =; timer1.repeat(myTime, 3, fly); timer1.start(); I use phaser 2.4.4
  7. Hello, not getting it out of the doc. when I set: game.time.advancedTiming = true; game.time.desiredFps = 50; My Game runs with 50 FPS (instead of 60). That's what I intended to do. Just because I do not need more FPS. So does this REALLY affect performance? When doing much calculation and drawing, is lagging reduced by 50FPS (desired) then 60? kind regards
  8. Hello everyone, I have made a little test by putting a stage and a graphic via pixi.js, now I have applied the tiltshift filter (which is more than awesome to have!). The performance hit is down to 40 frames on latest MBP fully upgraded. in latest Chrome available and node-webkit as well. This makes the further developement , using the filter, and pixiJS - impossible. So is it known to be slow using just one filter? or is it this filter specially... really need it, considering changing to native then webGL. here is the example code: (just for testing) // create an new instance of a pixi stage var stage = new PIXI.Stage(0x66FF99); // create a renderer instance. var renderer = PIXI.autoDetectRenderer(1280, 720); // add the renderer view element to the DOM document.body.appendChild(renderer.view); // create a texture from an image path var texture = PIXI.Texture.fromImage("assets/test2.png"); var texture2 = PIXI.Texture.fromImage("assets/test.png"); // create a new Sprite using the texture var bunny = new PIXI.Sprite(texture); var test = new PIXI.Sprite(texture2); // center the sprites anchor point bunny.anchor.x = 0.5; bunny.anchor.y = 0.5; bunny.width = 2076; bunny.height = 1318; bunny.position.x = 800; bunny.position.y = 100; test.x = 500; test.y = 500; test.width = 200; tiltshiftmode = new PIXI.filters.TiltShiftFilter(); tiltshiftmode.blurnumber = 120; tiltshiftmode.gradientBlur = 1400; //tiltshiftmode.start = 0; //tiltshiftmode.end = 720; tiltshiftmode.padding = 20; var World = new PIXI.Container(); stage.addChild(World); World.addChild(bunny); World.addChild(test); stage.filters = [tiltshiftmode]; document.addEventListener('keydown', onKeyDown); function onKeyDown(key) { key.preventDefault(); // W Key is 87 // Up arrow is 87 if (key.keyCode === 87 || key.keyCode === 38) { World.y += 14; } // S Key is 83 // Down arrow is 40 if (key.keyCode === 83 || key.keyCode === 40) { World.y -= 14; } // A Key is 65 // Left arrow is 37 if (key.keyCode === 65 || key.keyCode === 37) { World.x += 14; } // D Key is 68 // Right arrow is 39 if (key.keyCode === 68 || key.keyCode === 39) { World.x -= 14; } } //stage.filters = [tiltshiftmode]; requestAnimationFrame( animate ); function animate() { stats.begin(); stats.end(); // just for fun, lets rotate mr rabbit a little test.rotation += 0.05; // render the stage renderer.render(stage); requestAnimationFrame( animate ); } regards, Sam
  9. I was looking for a good bunnymark example in phaser, but couldn't find a decent one, so I wrote one myself: There are two versions: Basic: all sprites have same scale, angle, rotation Custom: all sprites have random scale, angle, rotation Two versions have the same code, but just different options set. - Click on the game to create bunnies. (Well, technically phaser-dudes) - There are options in preload to customize it. - All sprites are respawned from their original spawn point after they slow down. It was good practice for me, but now I don't know what to do with it, so I'm just putting this here, in case anyone has a use for it. Also all feedback is welcome.
  10. Hi everyone! First things first, a disclaimer: I'm French, I read a lot in english but I rarely have the opportunity to write or speak in English, so forgive me for that . I'm a beginner in the world of gamedev and Phaser in particular. I've already tried EaselJS (CreateJS) a couple years ago for a little game prototype I made using hand-made tilemap (based on a simple two dimentional array). I wanted to try something more robust this time, I searched across the Web for a good gamedev framework and stumble upon Phaser. It seemed to me the best tool to go, so here I am! It's my first time using Tiled for creating my tilemaps. I've use the excellent roguelike tileset from KenneyNL (kudos to him! ). I've set up a simple sample map (to try a few Tiled features), followed several tilemaps examples provided on phaser's website. You can check the layers I'm using : Note that the collision layer contains only a tile (a red/brown dot) that I'm currently using as a visual marker (there's no collision implemented yet). My tileset is 16x16. The map is 200x200 tiles. I'm exporting it as JSON, layers data as CSV. I'm also using states (which is really a cool feature that I was missing with EaselJS). I've set up a jsfiddle hosting a stripped version of my source code with a few comments to explain the logic. There's also a fiddle with the JSON file of the tilemap if it can help. I'm using a deadzone for my camera, and added a visual representation of this deadzone. Everything is correctly loading, the map and all the layers are displayed accordingly, with the visual deadzone and my character (I'm on Ubuntu 14.04 x64 with a GTX 660 and using the latest Google Chrome version). Everything looks fine, I can move my character within the camera's deadzone while the camera is not moving (which is what I was looking for). I haven't set up a FPS debug but I feel that the framerate is stable and should be around 60fps. It all feel smooth, not shattered at all. So far so good. But the issue is coming when the deadzone is reached and that the camera begin moving to follow the player (e.g. when I'm moving far right), as follows : At this point, I feel a huge framerate drop! Any movement feels shattered, jerky. But as soon as the character gets back in the deadzone and the camera is moving no more, everything goes back normal. I've tried with another map of 100x100 and 50x500 tiles, with just one layer and a tileset of 4 sprites, and the results were the same... I think I'm missing something, or I must have done something wrong. I cannot believe that the problem would come from Phaser not correctly supporting tilemaps! My goal is to build a very simple stripped-down version of a Harvest Moon-like prototype, just for fun, for my pleasure. So I really need to work with tilemaps. I'm sad that a cannot acheive this with Phaser . Sam Vieten (SamTheMighty on these forums) gave me some advice on Twitter, about using a plugin (englercj/phaser-tiled) to optimize tilemaps implementation of Phaser. Is it really necessary to use this plugin? It's a bit of a shame if Phaser cannot handle tilemaps alone ... Anyway, thanks for you help!
  11. I have googled a lot and haven't really found any good materials on tips how to improve render performance, or have to not screw it up. Please share if u know. 1 question from my side: Is there any point to free movie clips, sprites and them textures when they are not needed? Like the character goes behind the scene. Will that freeing not result in a LAG? If yes, what's the best approach?
  12. I'm loading a huge animation spritessheet ~5000x4000. 1) Asset loader PIXI.loader .add('assets/dance.json')............ 2) Adding to stage var frames = []; for (var i = 0; i < xxx; i++) { var val = pad(i, 3); frames.push(PIXI.Texture.fromFrame('xxx' + val + '.png')); } xxx = new PIXI.extras.MovieClip(frames); xxx.loop = true; xxx.visible = false; stage.addChild(xxx);3) At some point I want to make it visible to user and start playing deerDance['movie'].visible = true;deerDance['movie'].play();When It happens there is and half-second or more a LAG (fps drop or rather everything stops in the scene) and then it plays very well with good fps. Is there any way to avoid this? Pre..load..something. So when it plays it goes smooth? Best, janis
  13. I kinda like the concept, to have one spritesheet file for my whole animation. However I've found in most of the PIXI related animation tutorials the use of loading all the frames as separate files. Is it a bad practice from performance standpoints to use a PIXI Rectangle over the same texture to have the frames? I'm just curious about the performance when the animation plays. The initial load is ofc better w/ this solution, but if this causes worse animation times than I need to change it, so my code: createFrame = function createFrame(texture, offset, size) { return new PIXI.Texture(texture, new PIXI.Rectangle(offset.x, offset.y, size.x, size.y));}animation = new PIXI.extras.MovieClip([ createFrame(texture, ...), createFrame(texture, ...), ...]);
  14. Good morning everyone! I've made a very simple prototype on Phaser, tried to launch it on several Android devices and was discouraged by a rediculously low performance. Framerate was around 30 - 40 frames per second in Chrome and even lower in Firefox and Android browser, while displaying two short lines of a raster font text. iOS-device showed a bit better results, but still lagged sometimes. Here is the app: I've tried running pixi bunny test and other phaser games on the same devices and had got mostly smooth results. I've read some forum topics on optimization but could not find anything usefull for my very basic primitive prototype. I've tried using rendering with canvas and webGL. Results varied a bit but still were unacceptably poor. Some people wrote about wrong embeding into html page and scaling viewport. I'm not sure I understand it right, I tried using meta-tag "viewport" to prohibit scaling and it alsow didn't help. Due to my zero experience in Phaser and html5 developement, I'm sure, I'm doing some very basic mistakes but can't find the solution myself. Please help! Thank you in advance. Here's my index.html: <!DOCTYPE HTML><html><head> <title>Christmas Bounce</title> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="chrome=1, IE=9" /> <meta name="format-detection" content="telephone=no" /> <meta name="HandheldFriendly" content="true" /> <meta name="robots" content="noindex,nofollow" /> <meta name="apple-mobile-web-app-capable" content="yes" /> <meta name="apple-mobile-web-app-status-bar-style" content="black" /> <meta name="apple-mobile-web-app-title" content="Christmas Bounce"> <meta name="viewport" content="user-scalable=no, initial-scale=1, maximum-scale=1, minimum-scale=1" /> <link rel="stylesheet" href="css/stylesheet.css" type="text/css" charset="utf-8" /></head><body> <div id="game"></div> <div id="orientation"></div> <script src="js/phaser.min.js"></script> <script src="js/game.js"></script> <!--FPS stats--> <script>javascript:(function(){var script=document.createElement('script');script.onload=function(){var stats=new Stats();'position:fixed;left:0;top:0;z-index:10000';document.body.appendChild(stats.domElement);requestAnimationFrame(function loop(){stats.update();requestAnimationFrame(loop)});};script.src='//';document.head.appendChild(script);})()</script></body></html>And here is the code. Please tell if there is a better way than attaching all the code. But I'm realy not sure what can be important. (function e(t,n,r){function s(o,u){if(!n[o]){if(!t[o]){var a=typeof require=="function"&&require;if(!u&&a)return a(o,!0);if(i)return i(o,!0);var f=new Error("Cannot find module '"+o+"'");throw f.code="MODULE_NOT_FOUND",f}var l=n[o]={exports:{}};t[o][0].call(l.exports,function(e){var n=t[o][1][e];return s(n?n:e)},l,l.exports,e,t,n,r)}return n[o].exports}var i=typeof require=="function"&&require;for(var o=0;o<r.length;o++)s(r[o]);return s})({1:[function(require,module,exports){'use strict';//global variableswindow.onload = function () { var game = new Phaser.Game(960, 640, Phaser.CANVAS, 'christmas-catch'); // Game States game.state.add('boot', require('./states/boot')); game.state.add('menu', require('./states/menu')); game.state.add('play', require('./states/play')); game.state.add('preload', require('./states/preload')); game.state.start('boot');};},{"./states/boot":4,"./states/menu":6,"./states/play":7,"./states/preload":8}],4:[function(require,module,exports){'use strict';function Boot() {}Boot.prototype = { preload: function() { this.load.image('preloader', 'assets/preloader.gif'); }, create: function() { this.stage.disableVisibilityChange = true; this.parentElement =; = this.parentElement; = Phaser.ScaleManager.USER_SCALE; = Phaser.ScaleManager.SHOW_ALL; // Important = true; = false; = true; = 1;, this); = 1;'preload'); }, resize: function() { var scale = Math.min(window.innerWidth /, window.innerHeight /; = window.innerHeight.toString() + "px";, scale, 0, 0); }};module.exports = Boot;},{}],6:[function(require,module,exports){'use strict';function Menu() {}Menu.prototype = { preload: function() { }, create: function() { this.startText = * 0.5, * 0.4, "chromoFont", "Tap\nto start", 48); this.startText.align = "center"; this.startText.x = ( - this.startText.width) * 0.5;, this); }, update: function() { }, tapHandler: function() {;'play'); }};module.exports = Menu;},{}],7:[function(require,module,exports){'use strict';function Play() {}Play.prototype = { create: function() { this.startText = * 0.5, * 0.4, "chromoFont", "Gameplay", 48); this.startText.align = "center"; this.startText.x = ( - this.startText.width) * 0.5; }, update: function() { }};module.exports = Play;}],8:[function(require,module,exports){'use strict';function Preload() { this.asset = null; this.ready = false;}Preload.prototype = { preload: function() { this.asset = this.add.sprite(this.width/2,this.height/2, 'preloader'); this.asset.anchor.setTo(0.5, 0.5); this.load.onLoadComplete.addOnce(this.onLoadComplete, this); this.load.setPreloadSprite(this.asset); this.load.bitmapFont('chromoFont', 'assets/fonts/flappyfont/flappyfont.png', 'assets/fonts/flappyfont/flappyfont.fnt'); = 0xffffff; }, create: function() { this.asset.cropEnabled = false; }, update: function() { if(!!this.ready) {'menu'); } }, onLoadComplete: function() { this.ready = true; }};module.exports = Preload;},{}]},{},[1]);
  15. First of all here are the specs of my pc: - MS Windows 7 64-bit SP1 - Intel® Core i5-4570 CPU @ 3.20GHz 4-core - 16 gb ddr3 ram @ 2300 mhz - NVIDIA GeForce GTX 660, 2 gb dd5 ram (driver version: - Firefox 31, latest (Mozilla/5.0 (Windows NT 6.1; WOW64; rv:31.0) Gecko/20100101 Firefox/31.0) Here are the graphics settings in firefox (gpu acc enabled, webgl enabled, direct2D enabled etc...) { "application": { "name": "Firefox", "version": "31.0", "userAgent": "Mozilla/5.0 (Windows NT 6.1; WOW64; rv:31.0) Gecko/20100101 Firefox/31.0", "supportURL": "" } "modifiedPreferences": { "dom.ipc.plugins.enabled.npietab2.dll": true, "dom.mozApps.used": true, "gfx.direct3d.last_used_feature_level_idx": 0, }, "graphics": { "numTotalWindows": 2, "numAcceleratedWindows": 2, "windowLayerManagerType": "Direct3D 10", "windowLayerManagerRemote": false, "adapterDescription": "NVIDIA GeForce GTX 660 ", "adapterVendorID": "0x10de", "adapterDeviceID": "0x11c0", "adapterRAM": "2048", "adapterDrivers": "nvd3dumx,nvwgf2umx,nvwgf2umx nvd3dum,nvwgf2um,nvwgf2um", "driverVersion": "", "driverDate": "12-19-2013", "adapterDescription2": "", "adapterVendorID2": "", "adapterDeviceID2": "", "adapterRAM2": "", "adapterDrivers2": "", "driverVersion2": "", "driverDate2": "", "isGPU2Active": false, "direct2DEnabled": true, "directWriteEnabled": true, "directWriteVersion": "6.2.9200.16492", "webglRenderer": "Google Inc. -- ANGLE (NVIDIA GeForce GTX 660 Direct3D9Ex vs_3_0 ps_3_0)", "info": { "AzureCanvasBackend": "direct2d", "AzureSkiaAccelerated": 0, "AzureFallbackCanvasBackend": "cairo", "AzureContentBackend": "direct2d" } }}But still, firefox lags like hell when using Phaser.WEBGL mode when using simple text/lines. Also from time to time fps just drop like 5-7 fps and then goes back even on a white blank project. Test it yourself: 1. Open official example in firefox 2. Open the browser console (press ctrl + shift + j or go to Developer >> browser console) 3. Inject this code in the console // for fps measuringgame.time.advancedTiming = true;// override the original render() method game.state.onRenderCallback = function(){ game.debug.text('fps: '+game.time.fps, 32, 20);}4. Check the fps (in my case drops to 54-56) 5. Inject this code in the console // override the original render() method game.state.onRenderCallback = function(){ // welcome to the Laggy-Land :-) game.debug.text('fps: '+game.time.fps, 32, 20); game.debug.text('Enemies: ' + enemiesAlive + ' / ' + enemiesTotal, 32, 40); game.debug.text('Enemies: ' + enemiesAlive + ' / ' + enemiesTotal, 32, 60); game.debug.text('Enemies: ' + enemiesAlive + ' / ' + enemiesTotal, 32, 80); game.debug.text('Enemies: ' + enemiesAlive + ' / ' + enemiesTotal, 32, 100); game.debug.text('Enemies: ' + enemiesAlive + ' / ' + enemiesTotal, 32, 120); game.debug.text('Enemies: ' + enemiesAlive + ' / ' + enemiesTotal, 32, 140); game.debug.text('Enemies: ' + enemiesAlive + ' / ' + enemiesTotal, 32, 160)}6. Check the fps (in my case it drops to 24-26) The webGL renderer not able to render 8 texts? How? Why?! I've test three.js demos - all work perfectly on this hw setup in firefox. Also tested pixie demos - same, works perfectly 60/60 fps. Here a screenshot PS: also i've noticed that in IE and Firefox on either canvas or webgl mode sprites twitch from time to time, happens totally random - the sprite moves smooth, fps is 60 and then it just starts twitching while moving without fps drops. Chrome works perfectly of either modes, no glitches, no twitching - perfecto.
  16. In my game if you touch the screen and then move the pointer, the fps drops from 60fps to 35-40fps. ( tested in galaxy s3 mini ) And has nothing to do with my code, if I try this example: The highest fps I get it's 50 without doing anything ( CANVAS mode ) Moving 1 pointer : 30-35fps Moving 2 pointers: 25-30fps. Pointers are very usefull, but they seem to be slooow. Is there anyway to optimize this? or at least replace the pointers with something else? I have a virtual gamepad to move a spaceship and a button to shoot. Thanks
  17. I'm developing an iso game using this plugin Right now I have a map of 40x40 tiles and each tile has 75x44 px. Create two layers one for the floor and one for character collisions and depth sort. I'm using a spritesheet to create map constructed on Tiled Map Editor. Add to floor group this.floorGroup.cacheAsBitmap = true; to see if performane improve without success With this setup my game is running at 10 FPS, want to know how to implement a script to recycle and hide objects (tiles) that are not in the screen because I think that his is the problem. Or probably need a way to reuse repeated sprites or something like that. In this post lewster32 mention a post where this is demonstrated but link is broken Thanks for your help Diego
  18. Hi all! I'm doing a platformer game and I'm thinking about optimisation. I was wondering if it could be a good idea to scale down all my original assets, and scale them up in the game (to reduce loadings). So my first question is : what's the cost of scaling? Is this technique worth it or are the gains meaningless? Then, I was trying to apply that to the tilesets of my map and I'm struggling with API. These three methods seem to badly interact : cache.getImage() : return an HTML image (how is that useful, really?) or an image. Here I fetch my downscaled image.tilemap.addTileset() : takes a string key or a bitmapData. Not an image! So I create a bitmapData from the image (fetched in cache), and scale it uptileset.setImage() : takes an image! Damn. I have to change my newly created bitmapData back to image. In my game I change the tilesets' images every now and then, so I have to use these 3 methods. The fact that tilemap.addTileset() doesn't take an image as parameter is very weird and forces me to go from image to bitmapData, and bitmapData to image. Is there something I'm missing? Is there an easier way to do that? Thanks guys!
  19. I am having some performance issues with collision groups on mobile. I have 13 enemy sprites in game that collide with map polygon boundaries. Having the enemy sprites in game degrades the fps from 60fps down to 30fps. As I reduce the number of enemies in game the fps increases. 13 seems like a really small number of sprites to have in game so I feel like I must be setting up the collision detection incorrectly. I am trying to setup a base map with polygons to use for collision boundaries of the map. I want to have enemies go back and forth horizontally between the map boundaries. They will change direction (both a change in x velocity and flipping the scale so they visual point the opposite direction) when they make contact with the boundary. Is this the proper way to setup this type of collision detection? If so, any thoughts on why it is so slow on mobile devices (testing on iPhone 5)? Here is the code I currently have: // Init gamevar game = new Phaser.Game(1024, 640, Phaser.CANVAS, 'test-game'); // Load the assetsgame.load.image('level01', 'assets/level01.png'); // Image 1024x4608 game.load.physics('level01_physics', 'assets/level01_physics.json'); // Physics data format is Lime + Corona (JSON)// Setup collision groups var landCG = game.physics.p2.createCollisionGroup(); var enemyCG = game.physics.p2.createCollisionGroup();// Load map background imagevar map = this.add.sprite(0, 0, 'level01');// Create sprite and load polygon physics data for the map boundaries var mapCollisionPolygons = this.add.sprite(15, 15); this.physics.p2.enableBody(mapCollisionPolygons, false); mapCollisionPolygons.fixedRotation = true; mapCollisionPolygons.body.motionState = Phaser.Physics.P2.Body.STATIC; mapCollisionPolygons.body.clearShapes(); mapCollisionPolygons.body.loadPolygon('level01_physics', 'left'); mapCollisionPolygons.body.loadPolygon('level01_physics', 'right'); mapCollisionPolygons.body.setCollisionGroup(landCG); mapCollisionPolygons.body.collides(enemyCG); // Create a new enemy and setup collision var enemy = new Enemy(game, 100, 100, 100, 100, 100); enemy.body.setCollisionGroup(enemyCG); enemy.body.collides(landCG, enemy.collided, enemy); The extended Sprite class called 'Enemy': var Enemy = function (game, x, y) { this.hasCollided = false; this.speed = 100;, game, x, y, 'boat'); game.physics.p2.enable(this); this.body.fixedRotation = true; this.body.motionState = Phaser.Physics.P2.Body.DYNAMIC; this.body.onEndContact.add(this.endCollided, this); game.add.existing(this); return this;};Enemy.prototype = Object.create(Phaser.Sprite.prototype);Enemy.prototype.constructor = Enemy;Enemy.prototype.update = function() {};Enemy.prototype.collided = function(body1, body2) { if(!this.hasCollided) { this.scale.x *= -1; this.speed *= -1; this.body.velocity.x = this.speed; this.hasCollided = true; }};Enemy.prototype.endCollided = function(bodyB, shapeA, shapeB) { this.hasCollided = false;};module.exports = Enemy;The 'assets/level01_physics.json' file: { "left": [ { "density": 2, "friction": 0, "bounce": 0, "filter": { "categoryBits": 1, "maskBits": 65535 }, "shape": [ 0, 4608 , 224, 4016 , 384, 4056 , 384, 4608 ] } , { "density": 2, "friction": 0, "bounce": 0, "filter": { "categoryBits": 1, "maskBits": 65535 }, "shape": [ 384, 264 , 224, 303 , 0, 0 , 384, 0 ] } , { "density": 2, "friction": 0, "bounce": 0, "filter": { "categoryBits": 1, "maskBits": 65535 }, "shape": [ 224, 4016 , 0, 4608 , 0, 0 , 224, 303 ] } ] , "right": [ { "density": 2, "friction": 0, "bounce": 0, "filter": { "categoryBits": 1, "maskBits": 65535 }, "shape": [ 640, 4056 , 800, 4016 , 1024, 4608 , 640, 4608 ] } , { "density": 2, "friction": 0, "bounce": 0, "filter": { "categoryBits": 1, "maskBits": 65535 }, "shape": [ 1024, 0 , 800, 303 , 640, 264 , 640, 0 ] } , { "density": 2, "friction": 0, "bounce": 0, "filter": { "categoryBits": 1, "maskBits": 65535 }, "shape": [ 800, 4016 , 800, 303 , 1024, 0 , 1024, 4608 ] } ] }Here is a link to a related post with some of my performance testing with different options for displaying the background map and boundaries in case it helps.
  20. Have you seen this: It's a version of the crosswalk webview for android with optimizations for html5 games. They are working with cocos2d engine, it would be great if they could work also with phaser. I haven't tested it yet because it needs a custom build and I don't have the tools installed, but if anyone is willing to test this with phaser it would be great.
  21. I'm new to Phaser but familiar with Javascript. I'm working on my first game and am running into some (expected) performance issues. The game is a basic kill 1 and 2 more spawn with a max number of enemies per level. Levels are calculated automatically by adding/multiplying the initial default settings such as Max number of Enemies, Enemy Fire Rate and Enemy Speed. As you can imagine, the higher the levels get the more enemies spawn. Currently it's causing some major performance issues around levels 20+ (lower on less equipped machines). My question: Is there a better way to optimize this -or- is there a more efficient way of handling these enemies? I'm not sure what chunk(s) of code to include but I've linked the game at its current state below and can supply any code chunks needed for review. to skip to a certain level change the number in the url (level=#) Any help on this would be greatly appreciated! Thanks in advance!
  22. Has anyone else noticed a lack of performance in Firefox and Safari for v3? I've got a lot going on in the small game I'm creating, and I dont actually think Pixi is my performance bottleneck at all, but was wondering if anyone had any similar experiences, Chrome runs at a solid 60fps even with the inspector open Firefox at about 45-50fps Safari just 30 or so If I add about a 1000 objects to my physics simulation (I'll get to other factors in a mo) then Chrome still chugs along at 60fps FF goes down to 25-30 Safari is lucky if it hits 15 I'm using P2 for the physics stuff, but, to there is a lot else that is probably to blame over Pixi, including ImmutableJS (for data), React (for UI level) and it uses Stage 0 Babel transforms for feature compatibility and polyfills, so, yeah, I'll try to isolate just the Pixi/P2 bit, but its not straight forward. Thought I'd ask first and also investigate myself. Its webGL rendered. Platform is Mac, nearly new Retina 15-inch and slightly older non-retina 13-inch Air, similar perf pattern on both
  23. Hello everyone! I was looking for the answers across forum topics but without success. I am just wondering why when I am viewing any babylon.js app (even as simple as Basic Scene on it's frame rate always not higher than 40 frames per second. I was expecting it to be 60 fps... Is there some reason for this or I am missing something?
  24. I'm seeing a huge performance drop on mobile browsers whenever I put a skybox on my scene, even if scene is very simple. This can be seen even on BabylonJS site - Lens flares demo Can someone confirm this (i hope its not just me...) ? ThreeJS examples work perfectly on my devices, this one for example
  25. I have to recreate a Box2D game I made in Flash in HTML5. Unless I can figure out a way to pull the Box2D info from the Flash game (I did not hand code the objects, I used Box2d Flash Alchemy Port + World Construction Kit), I was planning to use R.U.B.E. to recreate the world and use Phaser with the Box2D plug-in to load it in like so. I've built 2 games using Phaser without using the built in physics systems and they work fine on my iPad, but I'm concerned about mobile performance using Box2D and want to set my client's expectations appropriately. So on to my questions... Why does the Bridge demo run so much more slowly than the Conveyor Belt demo? Just wondering if there is something I should avoid. Why does this run so much better on my iPad than the Phaser demos? I'm guessing it's because it's a simplistic library, but just wanted to point it out as an example of a Box2D demo that runs smoothly on my iPad. None of the public Phaser Box2D examples have a background image. Would adding a background image and images to all of the objects further effect performance? Is there a performance hit in using the Box2D plug-in vs. using Box2D externally like this Phaser game? Would it be insane to try to build a Phaser Box2D game at 1024x768 or larger? I'm guessing that the larger the canvas size the worse the performance. Please correct me if I'm wrong. The bottom line is, I really want use Phaser with the Box2D plug-in, but I want to make sure that it's the right tool for the job. I realize that mobile performance will never match that of a desktop, but I want the game to at least be playable.