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, I'm making a platform game for mobile(crosswalk, cordova). Everything works great on my computer, but when I import my game on a smartphone and I move my player to scroll my map, it's really jerky... :/ I have like 3-4 parallax in the background who works really good with any movement of my player, but my principal tilemap with collision seems to be the problem here. I tried to resize everything, even with 32x32px tiles and 512px height (16 tiles of height), it's jerky again. Any ideas ?
  2. Hi everyone Currently i'm building a game about drilling oil from the ground. The stage that im in right now is creating the ground and the driller. Here is an example image The way that I create this effect is by using group. When ever the white dot collide with the brown mud, the driller will kill the mud they collide. Size of the mud is about 5 x 5 px so in order to fill up the whole screen i use a 2 for loop to create hundreds of mud sprite under one single group. var game = new Phaser.Game(800, 600, Phaser.AUTO, 'game', { preload: preload, create: create, update: update, render: render }); function preload(){ game.load.image('mud', 'img/mud.png'); game.load.image('driller', 'img/square.png'); game.time.advancedTiming = true; } function create(){ floorLevel = 100; dirt =; dirt.enableBody = true; dirt.physicalBodyType = Phaser.Physics.ARCADE; for(var j = floorLevel; j <; j = j+5 ){ for (var i = 0; i <; i=i+5){ var mud = dirt.create(i, j, 'mud'); } } driller = game.add.sprite(100,50, 'driller'); game.physics.enable(driller,Phaser.Physics.ARCADE); drillerTween = game.add.tween(driller).to({x:400, y:300}, 3000); drillerTween.start(); } function update(){ game.physics.arcade.overlap(driller, dirt, function collisionHandler(driller, mud){ mud.kill(); }); } function render(){ game.debug.text('FPS: ' + (game.time.fps || '--') , 2, 14, "#00ff00"); } Here comes the problem, when trying to run this game it was REALLY laggy. In a PC local environment, the FPS was about 15-20. But when i export it to my mobile through CocoonJS, the FPS drops down to 2-3 fps. I've try to come up with a solutions by increase the size of the mud so less sprite would need to be create and handle by the CPU. But i'd want to avoid this method to not expose that much background to the players. I've also done some research on the tileMap. I realized that it is possible to have an collision event on the with the tiles, but is it possible to kill that tiles when collide??? QUESTIONS: So Are there any kind of way to improve my FPS?? Really appreciate for the time to read and Thank You.
  3. I've been working on a naive multiplayer CTF game with a p2.js simulation on the client and server. - Live demo: (may take 10 seconds for the server to boot) It's created from this level data where each "X" is a 32x32 p2.Body that contains a p2.Box shape: .............XXXXXXXXX............. ........XXXXX.........XXXXX........ .......X....X.........X....X....... ......X.....X...XXX...X.....X...... .....X...........X...........X..... .....X.......................X..... .....X....X......X......X....X..... .....X....XXX....X....XXX....X..... .....X....X.............X....X..... ......X.......XX...XX.......X...... ......X.........X.X.........X...... .......X.........X.........X....... ..XXXXXXXX.......X.......XXXXXXXX.. .X>>>>>>>>.......X.......<<<<<<<<X. X>..............X.X..............<X X>.............X...X.............<X X>.....X.....XXX...XXX.....X.....<X X>.....XXXXXX...X.X...XXXXXX.....<X X>.....X.........X.........X.....<X X>.....X.........X.........X.....<X .X.........X..r..X..b..X.........X. ..X..............X..............X.. ...X.......X.....X.....X.......X... ....XXXXXXXXX...XXX...XXXXXXXXX.... .............XXX...XXX............. It works and performs well enough, so I pushed my naive implementation farther by doubling the resolution of the map (16x16 tiles this time) and supporting sloped tiles. Here's the map.txt data for this iteration: However, the performance is atrocious. That's ~512 p2.Body's each with its own p2.Box or p2.Polygon (slopes). The profiler says that most of my CPU time is spent in p2's default broadphase's .getCollisionPairs(). Even though the broadphase only produces 4-10 pairs, it's just too many bodies to sift through every frame. The obvious approach from here is to merge adjacent tiles into single p2.Body entities. For example, instead of having a row of twenty 16x16 p2.Bodies, I could have a single 320x16 p2.Body. This would drastically reduce the amount of work the broadphase has to do. But to what end do I try to reduce the number of p2.Bodies in the world? To follow this to the end of the spectrum, I could encode the level with a few p2.Polygons, but they'd be large and complex. Is there a rule of thumb?
  4. Hi so, I'm trying to make a FlappyBird game with Day/Night Cycle so to do this I have 2 Background images set up on my game; one morning and another one for evening. I understand that I can just use loadTexture on this.background, but I want to Tween it for a better effect (hence the 2 background images). The animation that I wanted was to Tween this.nextBackground's opacity from 0 to 1. In my create function I have the following:; this.background =, 0, 'morning'); this.nextBackground =, 0, 'evening'); If it helps, I have a pipeGenerator timer that generates the pipes. this.pipeGenerator = * 1.25, this.generatePipes, this); and I'm planning to implement a dayNightCycler timer that changes from morning to night and vice versa by tweening. But as is, I'm already having poor performance while just adding the nextBackground. I noticed that whenever I create this.nextBackground, I am having poor performance issues, anyway I can make this work? Sorry was new to Phaser.
  5. I'm using WebGL to render N triangles in 2D. The triangles' geometry and colors are random, computed once and placed in buffers at start up. My shaders are super simple. Then I render them by one call to drawArrays, and animate via requestAnimationFrame. The FPS drops rapidly as N grows (both on my PC and my MacPro). When N = 10k, it's painfully slow. All over the web I see smooth demos with very large numbers of triangles. What I'm doing is very simple: You can vary the number of triangles and see performance go down. I don't get it. Isn't WebGL expected to excel at this type of things? What am I doing wrong?
  6. Hi, I'm working on some performance tests of PIXI vs WebGL. Does anyone know if those tests already exist or the best way to go about comparing the two for my usage cases? Thank you in advance!
  7. kazoo

    Performance Tips

    What are some general performance tips that you would have for newcomers to Pixi? Also what should we really take care of if we want to avoid memory leaks, performance issues, etc. I currently destroy all graphics objects, sprites and textures that I use. I also take care of the stage and the renderer. Also I store references to dynamically created objects in arrays and then clear them afterwards when I need to. However I still see small memory leaks here and there. I use chrome dev tools to identify the leaks.. Also, consider this scenario. I have two pages, and on both of them I have a Pixi canvas with some stuff being drawn. When switching from page 1 to page 2, the whole page 2 throttles, until the Pixi canvas is loaded, although this is just a guess for now. However when I remove the Pixi canvas the page loads, fast, normal.. I am just asking this vaguely, since I haven't looked at what might be causing the issue yet, but I want to have some more input before I start. I do draw around 100+ different graphics elements on the second page.. Are there any ways to improve this loading, rendering time of the second canvas? Also I am running this on a 3rd party device, and that's why I need to be very conservative with memory and performance. When running on PC, I do not see performance issues, however the device is also really powerful, so I would not say this is a hardware limitation.
  8. Hi All, I've had a brief search of the forum and found some posts on mobile physics performance tweaks etc (and tried the suggestions), but haven't found a post regarding this specific issue. I'm using the Intel XDK (replaced phaser.js with 2.5). When testing through the emulator (and on 2 android devices) I find that gravity appears to act differently on some devices. I'm just making a basic touch to jump side scroller. The gravity seems extreme on some devices (HTC droid incredible, Lenovo K900, Motorola droid 2, motorola razr i, nook color and samsung galaxy s), i.e. when the player jumps he only manages to get about a tile high. On all the other emulators in the xdk it seems to work as expected (kinematic equations suggest a jump height of about 5 tiles y and 2.5 tiles x), all the apple phones work fine including the 3gs, the nexus devices are fine, the lenovo idea pad is fine, the microsoft ones are fine, and the galaxy tab 2 is fine. Frame rate seems to be about the same on all the emulators. Setting a desired fps of 60, 45, 30 had no effect. Using Phaser.Canvas made the game a bit quicker on the mobile device but the gravity was still playing up. Wondering if anyone has any idea what could be causing it or what to do to fix? I've attached the files to the post. main.js: var SideScroller = SideScroller || {}; var innerWidth = window.innerWidth; var innerHeight = window.innerHeight; var gameRatio = innerWidth/innerHeight; = new Phaser.Game(Math.ceil(320*gameRatio), 320, Phaser.AUTO, '');'Boot', SideScroller.Boot);'Preload', SideScroller.Preload);'Game', SideScroller.Game);'Boot'); Boot.js: var SideScroller = SideScroller || {}; SideScroller.Boot = function(){}; //setting game configuration and loading the assets for the loading screen SideScroller.Boot.prototype = { preload: function() { //assets we'll use in the loading screen this.load.image('preloadbar', 'asset/images/preloader-bar.png'); }, create: function() { this.input.maxPointers = 1; //loading screen will have a white background = '#487c9a'; this.scale.forceOrientation(true, false); //scaling options this.scale.scaleMode = Phaser.ScaleManager.SHOW_ALL; //have the game centered horizontally this.scale.pageAlignHorizontally = true; this.scale.pageAlignVertically = true; //screen size will be set automatically // this.scale.setScreenSize(true); // Apparently speeds things up... = true; //physics system; = 30; this.state.start('Preload'); } }; Game.js var SideScroller = SideScroller || {}; SideScroller.Game = function(){}; SideScroller.Game.prototype = { preload: function() { = true; }, create: function() { console.log(gameRatio); ='level1'); //the first parameter is the tileset name as specified in Tiled, the second is the key to the asset'tileset1', 'gameTiles'); //create layers this.groundLayer ='Ground'); //collision on blockedLayer, 300, true, 'Ground'); //resizes the game world to match the layer dimensions this.groundLayer.resizeWorld(); //create player this.player =, 250, 'player', 1); this.player.anchor.setTo(1,0.5); //add animation: this.player.animations.add('right', [0, 1, 2, 3, 4], 20, true); //enable physics on the player; //player gravity this.player.body.gravity.y = 4000; //the camera will follow the player in the world, 0, 3200, 320);; //move player with cursor keys this.cursors =; //create tap listener: this.input.onTap.add(this.onTap, this); }, update: function() { //collision, this.groundLayer, this.playerHitGround, null, this); if(this.player.body.blocked.down){"right"); //only respond to keys and keep the speed if the player is alive if(this.player.alive) { this.player.body.velocity.x = 200; if(this.cursors.up.isDown) { this.playerJump(); } } //restart the game if reaching the edge if(this.player.x >= {'Game'); } } }, playerHitGround: function(player, groundLayer) { //if hits on the right side, die if(player.body.blocked.right) { //set to dead (this doesn't affect rendering) this.player.alive = false; //stop moving to the right this.player.body.velocity.x = 0; //change sprite image this.player.loadTexture('playerDead'); //go to gameover after a few miliseconds, this.gameOver, this); } }, //onTap function onTap: function(pointer) { if(!this.player.alive) { return; } this.playerJump(); }, gameOver: function() {'Game'); }, playerJump: function() { if(this.player.body.blocked.down) { this.player.body.velocity.y -= 400; //this.player.body.acceleration.x = -50; this.player.animations.stop(); this.player.frame = 5; } }, render: function() { || '--', 20, 70, "#00ff00", "40px Courier");, 40, 24); } };
  9. Hi All, I am trying with my friend to develop our first game using Phraser. We decided to have it in an Isometric view, after creating first simple map we tested it on PC and game was running smoothly however when we tried to run it on a mobile device (LG G2) FPS dropped down dramatically to less then 1 frame per second, to run it on mobile we tried: 1) cordova 2) intel xdk 3) cocoon 4) cordova+crosswalk Intel xdk was the best but still far from acceptable level. The question is how to build or what to change in our code started in phaser.js to make it work? Here is our code. Any help will be highly appreciated! var width = window.innerWidth; var height = window.innerHeight; var obstacleGroup, player; var marker, itemGroup; var floorGroup; var exitMarker; var grassGroup; var check; var controls; var cN, cS, cE, cW, cSE, cNE, cSW, cNW; var way; var water = []; //Initialize function var init = function () { var game = new Phaser.Game(width, height, Phaser.AUTO, 'test', null, false, true); var keyboard = new Phaser.Keyboard(game); var cursors; var BasicGame = function (game) { }; BasicGame.Boot = function (game) { }; BasicGame.Boot.prototype = { preload: function () { game.load.image('tree', 'images/tiles/tree.png'); game.load.image('trees', 'images/tiles/trees.png'); game.load.image('tree2', 'images/tiles/tree2.png'); game.load.image('gold', 'images/tiles/find1_gold.png'); game.load.image('exit', 'images/tiles/exit.png'); game.load.image('house', 'images/tiles/house.png'); game.load.image('E', 'images/controls/E.png'); game.load.image('N', 'images/controls/N.png'); game.load.image('NE', 'images/controls/NE.png'); game.load.image('NW', 'images/controls/NW.png'); game.load.image('S', 'images/controls/S.png'); game.load.image('SE', 'images/controls/SE.png'); game.load.image('SW', 'images/controls/SW.png'); game.load.image('W', 'images/controls/W.png'); game.load.spritesheet('terrain','images/tiles/terrain.png', 64, 64); game.load.spritesheet('characterAnim','images/tiles/vehicle.png', 128, 128); game.time.advancedTiming = true; // Add the Isometric plug-in to Phaser game.plugins.add(new Phaser.Plugin.Isometric(game)); // Set the world size, 0, 2048, 1024); // Start the physical system game.physics.startSystem(Phaser.Plugin.Isometric.ISOARCADE); // set the middle of the world in the middle of the screen game.iso.anchor.setTo(0.5, 0); }, create: function () { // set the Background color of our game game.stage.backgroundColor = "0x000000"; // create groups for different tiles floorGroup =; itemGroup =; grassGroup =; obstacleGroup =; // set the gravity in our game game.physics.isoArcade.gravity.setTo(0, 0, -500); var renderedPositions = new Array(32); for (var i = 0; i < renderedPositions.length; i++) { renderedPositions[i] = new Array(32); } for (var i = 0; i < 32; i++) { renderedPositions[31][i] = game.add.isoSprite(31*32, i*32, 0, 'terrain', 18, obstacleGroup); renderedPositions[31][i].anchor.set(0.5); game.physics.isoArcade.enable(renderedPositions[31][i]); renderedPositions[31][i].body.collideWorldBounds = true; renderedPositions[31][i].body.immovable = true; renderedPositions[30][i] = game.add.isoSprite(30*32, i*32, 0, 'terrain', 18, obstacleGroup); renderedPositions[30][i].anchor.set(0.5); game.physics.isoArcade.enable(renderedPositions[30][i]); renderedPositions[30][i].body.collideWorldBounds = true; renderedPositions[30][i].body.immovable = true; water.push(renderedPositions[30][i]); renderedPositions[29][i] = game.add.isoSprite(29*32, i*32, 0, 'terrain', 18, obstacleGroup); renderedPositions[29][i].anchor.set(0.5); game.physics.isoArcade.enable(renderedPositions[29][i]); renderedPositions[29][i].body.collideWorldBounds = true; renderedPositions[29][i].body.immovable = true; water.push(renderedPositions[29][i]); renderedPositions[28][i] = game.add.isoSprite(28*32, i*32, 0, 'terrain', 8, obstacleGroup); renderedPositions[28][i].anchor.set(0.5); game.physics.isoArcade.enable(renderedPositions[28][i]); renderedPositions[28][i].body.collideWorldBounds = true; renderedPositions[28][i].body.immovable = true; } // create the floor tiles var grasses = [2,7,12,17,22]; for (var xt = 0; xt < 32; xt++) { for (var yt = 0; yt < 32; yt++) { if (!renderedPositions[xt][yt]) { renderedPositions[xt][yt] = game.add.isoSprite(xt*32, yt*32, 0, 'terrain', grasses[Math.floor(Math.random() * 5)], floorGroup); renderedPositions[xt][yt].anchor.set(0.5); } } } // create a house object which will be our ending point in the game var house = game.add.isoSprite(300, 100, 0, 'house', 0, obstacleGroup); house.anchor.set(0.5); game.physics.isoArcade.enable(house); house.body.collideWorldBounds = true; house.body.immovable = true; // create collectible items marker = game.add.isoSprite(rndNum(300), rndNum(300), 0, 'gold', 0, itemGroup); game.physics.isoArcade.enable(marker); marker.body.collideWorldBounds = true; marker.anchor.set(1.0); // create the exit marker next to the house object exitMarker = game.add.isoSprite(400, 400, 0, 'exit', 0, itemGroup); game.physics.isoArcade.enable(exitMarker); exitMarker.body.collideWorldBounds = true; exitMarker.anchor.set(0.5); exitMarker.alpha = 0.5; // create control button sprites on the screen cNW = game.add.sprite(0, 100, 'NW'); cNW.fixedToCamera = true; cNW.inputEnabled = true;, this);, this);, this);, this); cW = game.add.sprite(0, 176, 'W'); cW.fixedToCamera = true; cW.inputEnabled = true;, this);, this);, this);, this); cSW = game.add.sprite(0, 252, 'SW'); cSW.fixedToCamera = true; cSW.inputEnabled = true;, this);, this);, this);, this); cN = game.add.sprite(76, 100, 'N'); cN.fixedToCamera = true; cN.inputEnabled = true;, this);, this);, this);, this); cS = game.add.sprite(76, 252, 'S'); cS.fixedToCamera = true; cS.inputEnabled = true;, this);, this);, this);, this); cNE = game.add.sprite(152, 100, 'NE'); cNE.fixedToCamera = true; cNE.inputEnabled = true;, this);, this);, this);, this); cE = game.add.sprite(152, 176, 'E'); cE.fixedToCamera = true; cE.inputEnabled = true;, this);, this);, this);, this); cSE = game.add.sprite(152, 252, 'SE'); cSE.fixedToCamera = true; cSE.inputEnabled = true;, this);, this);, this);, this); // create control functions for the control buttons function onDown(sprite, pointer) { switch(sprite.key) { case "N": case "S": case "SE": case "SW": case "NW": case "NE": case "E": case "W": way = sprite.key; } } function onUp(sprite, pointer) { way = undefined; } controls =; controls.add(cN); controls.add(cS); controls.add(cW); controls.add(cE); controls.add(cNE); controls.add(cNW); controls.add(cSE); controls.add(cSW); controls.alpha = 0.9; // Creste the player player = game.add.isoSprite(25*32, 3*32, 0, 'characterAnim', 0, obstacleGroup); player.alpha = 1.0; // add the animations from the spritesheet player.animations.add('S', [0], 10, true); player.animations.add('SW', [1], 10, true); player.animations.add('W', [2], 10, true); player.animations.add('NW', [3], 10, true); player.animations.add('N', [4], 10, true); player.animations.add('NE', [5], 10, true); player.animations.add('E', [6], 10, true); player.animations.add('SE', [7], 10, true); player.anchor.set(0.5); // enable physics on the player game.physics.isoArcade.enable(player); player.body.collideWorldBounds = true; game.time.advancedTiming = true; game.debug.text(game.time.fps, 0, 0, 'red');; }, update: function () { // Move the player var speed = 100; if (way === 'SE')// || (cursors.down.isDown && cursors.right.isDown)) { player.body.velocity.x = speed; player.body.velocity.y = 0;'SE'); } else if (way === 'SW')// || (cursors.down.isDown && cursors.left.isDown)) { player.body.velocity.y = speed; player.body.velocity.x = 0;'SW'); } else if (way === 'NW')// || (cursors.up.isDown && cursors.left.isDown)) { player.body.velocity.x = -speed; player.body.velocity.y = 0;'NW'); } else if (way === 'NE')// || (cursors.up.isDown && cursors.right.isDown)) { player.body.velocity.y = -speed; player.body.velocity.x = 0;'NE'); } else if (way === 'N')// || cursors.up.isDown) { player.body.velocity.y = -speed; player.body.velocity.x = -speed;'N'); } else if (way === 'S')// || cursors.down.isDown) { player.body.velocity.y = speed; player.body.velocity.x = speed;'S'); } else if (way === 'E')// || cursors.right.isDown) { player.body.velocity.x = speed; player.body.velocity.y = -speed;'E'); } else if (way === 'W')// || cursors.left.isDown) { player.body.velocity.x = -speed; player.body.velocity.y = speed;'W'); } else { player.body.velocity.x = 0; player.body.velocity.y = 0; player.animations.stop(); } game.physics.isoArcade.collide(obstacleGroup); game.physics.isoArcade.overlap(marker, player ,function(e){ e.destroy(); }); check = game.physics.isoArcade.overlap(exitMarker, player ,function(e){ }); game.iso.topologicalSort(obstacleGroup); }, render: function () { } }; game.state.add('Boot', BasicGame.Boot); game.state.start('Boot'); // generate random number function rndNum(num) { return Math.round(Math.random() * num); } }; // window.onload can work without <body onload=""> window.onload = init; main.js
  10. Hi, just noticed my game has suddenly dropped fps quite dramatically (only on Chrome). I found when I reduce my texture atlas from 4096 x 4096 to 4096 x 2048 my frame rate is back up to 60. I'm a bit confused by this. My framerate only drops when I transition to a new screen which draws a few new sprites, but these sprites are still from the same texture atlas, so there is no additional memory used. The rapid drop of frame rate that continues to fall seems to be a symptom of texture thrashing, but my understanding of texture trashing is that it's caused by running out of texture memory and continually swapping textures on the gpu to draw the image. But in my case I'm not adding additional textures to trigger the frame rate decrease... I'm using the CANVAS renderer. Anyone have ideas? Cheers,
  11. Hi there, Im having some issues with performance when i render thousands of sprites. Currently having issues with loading around 20k sprites, but eventually plan on having more (maybe even up to 60k) around the map. I did some research and found this is a somewhat common issue but cannot get a clear and concise answer. I ran some chrome profiles on my game to see whats holding me back: here are my results. To be honest, I don't really understand what that information means other than 20k sprites is too much. (I have a fairly decent computer and its slightly choppy at 20k trees, at say 60k its very choppy) Also, when I say choppy, I mean like it looks choppy, my movement is still fine (to make the point that its not like the game loop thats lagging). Essentially I have 20k trees being placed around a very large map that's being rendered with a tileSprite. However, it's not the map size that is holding me back since the performance I get is very dependent on the number of tree sprites. The tree's have no physics enabled on them and are just rendered and placed in a group then never touched again. Here is a snippet from my create function and how i render the trees. for(var i = 0; i<20000; i++){ treeX = Math.round(Math.random()*(mapSize-1)); treeY = Math.round(Math.random()*(mapSize-1)); temp = position(treeX, treeY); createTree = game.add.sprite(temp[0],temp[1], 'tree2'); treeGroup.add(createTree); } The position function I called in the loop just gets the pixel location of the tree's based on a tile, as shown below: var position = function(col, row){ column = (33*col+1); rowFin = (33*row+1); return [column, rowFin]; }; Any ideas as to how i can beef up my performance? Any way I could not render the tree's until they are in view? (Kill then revive when seen?) Any tips are greatly appreciated! Side note (if its useful), right now all I have is the tileSprite background, 20k trees, and movable player sprite. Edit: Would creating a chunk system be a good idea? If so anyone have any idea where to start with the best way to make one?
  12. Hi guys, In one of the methods of game object class I have following code which executed on object click: var tween1 = game.add.tween(this.sprite.scale).to({x: 0}, 100, Phaser.Easing.Elastic.Linear); var tween2 = game.add.tween(this.sprite.scale).to({x: 1}, 100, Phaser.Easing.Elastic.Linear); var tween3 = game.add.tween(this.shadow.scale).to({x: 0}, 100, Phaser.Easing.Elastic.Linear); var tween4 = game.add.tween(this.shadow.scale).to({x: 1}, 100, Phaser.Easing.Elastic.Linear); tween1.chain(tween2); tween3.chain(tween4); tween1.onComplete.add(function() { me.sprite.loadTexture('fruit-' + me.index); }); tween4.onComplete.add(function() { me.closed = false; me.level.onOpenBoxAnimEnd.dispatch(me); }); tween1.start(); tween3.start(); When having 4 of these object in the scene it performs nice, but 30 objects cause performance to be very low (notice that only one object is animated, not all 4 or 30). So maybe I'm doing smth generally wrong? Tested on 8-cores 1.7 HHz CPU.
  13. Hi, Players in my game leave trail. When update is called I'll make the trail image based on the current player position and add it to the trail group: let trailImg = state.make.image(playerX, playerY, 'trail'); this.trailGroup.add(trailImg); The game world might be big and after a while this group holds few thousand trail images. This leads to performance problems. The methods which take really long to execute are Phaser.Group.preUpdate, PIXI.WebGLSpriteBatch.render and PIXI.DisplayObjectContainer.updateTransform. How should I handle this?
  14. That's mah fork: This branch is also known as dev-experimental-geometry and pixi v4.1. It is the bleeding edge, and only about 5% of it was discussed as PRs in main pixi.js (like ) Demos: Best demo is outdated, though it will be converted to pixiv4 soon: (use mouse and QE) Changes: 1. 3d Transforms. We have them now. 2. Static transforms: enabled by default, new Transform2d(true), dont have to recalculate whats already calculated, increases performance for most-static 2d and 3d scenes. 3. Camera: lookPosition, lookRotation and lookEuler - camera looks at specific point 4. Camera: zIndex, zOrder - YES, THE PAIN IS GONE! Regardless of how will you group your sprite into containers, they will be sorted for rendering and interaction 5. Proxies - experimental, special for, I dont guarantee their work in other projects yet. Contributions: 1. This fork will have fast iterations, the only relatively stable thing will be API that specified in demos 2. Binaries are stored in pixi-bin and not pixi.js sources3. PR's should be made into 'master' and not some 'dev' nonsence Current projects: 1. conversion to pixi 2. Poker game with 3d cards. UPD. Babylon goes 2D according to this: Well, now PIXI strikes back!
  15. Hello, I've tried to code a FlappyBird-clone in phaser but i have performance issues on mobile devices. When I run the game everything works fine but when the player falls (because of the gravity), it doesn't seem "smooth" anymore and the game lags. I've run the game on a LG G3 and a Sony Xperia Z. thanks in advance var game = new Phaser.Game(288, 512, Phaser.WEBGL); var mainState = { preload: function() { game.load.image('flappy' ,'img/flappy.png'); game.load.image('bg' ,'img/bg.png'); game.load.image('btn' ,'img/btn.png'); game.load.image('ground' ,'img/ground.png'); }, create: function() { game.scale.scaleMode = Phaser.ScaleManager.EXACT_FIT; game.scale.pageAlignHorizontally = true; game.scale.pageAlignVertically = true; game.physics.startSystem(Phaser.Physics.ARCADE); = game.add.sprite(0, 0, 'bg'); this.ground = game.add.sprite(0, game.height - 112, 'ground'); game.physics.arcade.enableBody(this.ground); this.ground.body.immovable = true; this.player = game.add.sprite(,, 'flappy'); this.player.anchor.set(0.5); game.physics.arcade.enableBody(this.player); this.player.body.bounce.set(0.2); this.player.body.gravity.y = 500; game.input.onTap.add(this.jump, this); }, update: function() { game.physics.arcade.collide(this.player, this.ground); }, jump: function() { this.player.body.velocity.y = -200; } }; game.state.add('main', mainState); game.state.start('main');
  16. Just want to put out our experience. (since there was a post with a different experience). We are developing a browser multiplayer game. and in v3 it was barely playable on regular laptops and office-pc's without "resonable" graphics cards. V4 actually doubled the performance of those lower-end devices, so when they would be running 30-40 fps, they are now pulling 80 fps which is more than the requred 60 to get the soft feel. I read that you improved the performance on mobile devices, and i wished it would have the same effect on lower end pc's. and it did! This is really important to us, because our game is probertly going to be played mostly from school computers, laptops etc. so thank you!. But, there's still alot of bugs, and I will keep reporting them on github, when i find simpler ways to reproduce them.
  17. Hi, so first thing i'm new to this, 3d modelisation and babylon.js so i'm kinda of a huge noob, but anyway. I started to work on this demo It seems like i get very bad performance from firefox compared to chrome. Do you have an idea why ? you can try the demo on the playground or i hosted the demo on my website : Thx !
  18. Hello dear Forum, i have a Question regarding dynamic Asset Loading in Babylon.js. I was not able to find Information about this topic in the Documentation or the Forum (donĀ“t slay me if I missed something ). So basically what I want to be able to achieve is: 1. User clicks a HTML-Button (for Example "Load Model") // Button should be outside of the Canvas if possible 2. Button calls Function with modelName as Parameter 3. Function checks if Model with modelName exists in some Kind of Library 4. If so, the Model gets Downloaded 5. Model gets rendered So, as far as i was able to find out, it is totally possible to pass Information from a HTML-Element to the Babylon Engine. But is it possible to download something at runtime (CORS is considered) that has never before been used inside the Project. The reason for this is that I want the Game to handle almost the whole "What shall i display?, Where shall i display it?, Which Components does the Object have" - Functionality dynamically without defining too much of it inside the Project. I hope I was able to give you an insight into what I want to achieve. Regards, Markus
  19. In short, I've just recently updated the html5 app I'm working on to use the newest version of Pixi (v4) recently. It looked nice & all and it basically didn't break anything. (Well, except for a ColorMatrixFilter because v4 for some reason has a padding attribute set as default to 4.) Anyway, I was really happy with the new promises such as WebGL renderer mobile optimizations and I quickly compiled my project (using to an Android apk to test. Well saying that it ran slower is an understatement. Gameplay parts where the previous Pixi v3 provided an estimated 50-60 fps, this struggled to get 20-30. I made some other changes to the code so I wasn't sure if it was the update's fault at first, but I quickly reverted to v3 and regained the old and much better performance. Some info: - I'm probably not using any SpriteBatches - I'm initializing the renderer as this: renderer = new PIXI.WebGLRenderer(window.innerWidth, window.innerHeight); - I'm drawing a lot of Sprites with different sizes at the same time, maybe 100 at max - A lot of the above Sprites are visibility/alpha toggled many times during gameplay, but I do not store them outside the render area - I'm using manual scaling on a lot of Sprites individually, I just rarely scale a container Well, that's all I could think of right now. The strange thing is that v4 actually seemed to run faster on desktop (Firefox).
  20. How could BabylonJs possibly be faster ? or Why is BabylonJs slower than what it could be ? What needs to be done. Any area we can help to make this engine faster ? Give us concrete directions so that we can help. I know BabelJs itself is not slow. It does nothing by itself. However, I would like also to know: what are the best practices to take full advantage of BabylonJs speed. This demo is really slow : Why is it so slow, and what can we learn from it ?
  21. Hey guys, long time no see, eh? How are you all doing? I started digging up some old game ideas and playing around. I ended up with one where I create a field of hexagons as the game world. Unfortunately I am having performance problems when creating bigger maps and zooming out to show the whole map. Here is an example of what I am trying to do: Any idea how I could improve performance for this kind of game world?
  22. Hi guys I'm working on a game developed with phaser.JS (and phonegap), and i'm facing a surprising problem. FPS is pretty good (it's between 55 and 60) but the avatar moves are not smooth. So i guess it's caused by the use of phaser feature. You can see the problem on the video here : Have you ever met this problem ? Do you have some idea to improve that ? Thanks for your time ! Dorian
  23. 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 !
  24. 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?
  25. 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!