Search the Community

Hi, I Recently discovered Pixi JS and have to say, I am a big fan. For a first project with the framework I thought I would create something fairly simple and go for a breakout type clone. The whole thing works super smooth in Safari and Firefox on my iMac, but for some reason I get intermittent choppy frames when using Chrome. I thought Chrome was supposed to be the boss of web browsers, so it was a surprise to see this! I have started to look at the profiler ( attached recording ), but according to this my frame rate is good! Unless I am mis-reading something? From what I understand, this kind of effect could also be caused by GC, but I am not really sure how to get the info from this data. If anyone can throw me a line here it would be greatly appreciated. I suppose I could try deploying the project somewhere or sharing my git repo if need be? Many Thanks. Profile-20210515T160855.json.zip

Hi, If I create animation this way: myanim = scene.add.sprite('myanim'); scene.anims.create({ key: 'myanim', frames: scene.anims.generateFrameNumbers('myanim', { start: 0, end: 20 }), duration: 1000, hideOnComplete: true }); .. and later I want to change it's duration or frameRate - how to do that? I try this, but no luck: myanim.anims.duration = 3000; myanim.anims.frameRate = 15; myanim.anims.currentAnim.duration = 3000; myanim.anims.currentAnim.frameRate = 15; Animation still runs with the initiall duration.

Hello, Since some day, firefox turn phaser game slow. All game i have created and even litle game downgrade fps. (60FPS to 30FPS) I dont know where is the problem. i have try use phaser but no change. You can try with this example : https://phaser.io/examples/v2/time/slow-down-time if you wait some seconds the animation down to 30fps. this problem is only on firefox (i suppose since v57). All others browsers working fine. Have you an idea where is the problem? Thank you

So I'm running into this problem where I initialize a sprite with multiple animations, but only the animation specified in the creation of the sprite is ever played. When I attempt to update the sprite with a new animation, it simply changes the framerate. I have debugged the game to see if it is actually updating the currentAnim, and it is. Also, I have tested the other animations too see if they loaded correctly by inputting them into the initializing sprite animation. Now, code: player = this.game.add.sprite(400, 400, 'player_idle'); this.game.physics.p2.enable(player, false); player.body.fixedRotation = true; player.animations.add('player_idle'); player.animations.add('player_left'); player.animations.add('player_right'); controls.left.onDown.add(() => { console.log("Begin left: " + player.animations.currentAnim.name); player.animations.play('player_left', 14, true); console.log("End left: " + player.animations.currentAnim.name); }, this); controls.right.onDown.add(() => { console.log("Begin right: " + player.animations.currentAnim.name); player.animations.play('player_right', 14, true); console.log("End right: " + player.animations.currentAnim.name); }, this); update() { player.body.setZeroVelocity(); controls.up.isDown ? player.body.moveUp(200) : null controls.down.isDown ? player.body.moveDown(200) : null controls.left.isDown ? player.body.moveLeft(200) : null controls.right.isDown ? player.body.moveRight(200) : null if(!controls.left.isDown && !controls.right.isDown && !controls.up.isDown && !controls.down.isDown) { player.animations.play('player_idle', 3, true); } } I am using "[email protected]". I need some help. Thank you a bunch.

Hey guys! I'm pretty new to this forum and to PIXI.js so please excuse me if I'm posting in the wrong place. I am creating a game similar to guitar hero, but for piano (basically a synthesia clone). Here is a link to my JSFiddle I have the basics setup how I want, but I am running into some performance issues. I need the game to run at a solid framerate with up to ~10,000 notes in a level (not all being displayed at the same time of course). Currently, the note graphics are created and added to the stage within a group and animated downward. When they are added, their visible property is set to false and is only set to true when the are within the view. Here is my animation loop: function animate() { gameTime = performance.now() / 1000 - startTime; // CULLING loop // loop to go through all notes and see if they should currently be visible for (i = 0; i < numNotes; i++) { // if the note should be visible, make it visible if (gameTime + offset > notes[i].startTime && gameTime < notes[i].stopTime + offset) { if (notes[i].graphic.visible == false) { notes[i].graphic.visible = true; } } // if the note should not be visible, set visible to false else if (notes[i].graphic.visible == true) { notes[i].graphic.visible = false; } } // set y pos based on gameTime group.y = (ySlope * -1 * gameTime); // or set it manually // group.y += 8; renderer.render(stage); requestAnimationFrame(animate); } The frame rate is currently not where I want it to be, so I am hoping that someone can show me where I can make some optimizations. Feel free to play around with the JSFiddle. Thanks, Micah

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?

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

I have a game that is only 11mb right now, but after finally wrapping the game with CocoonJS, I noticed the the game would go from 60fps to <15fps in about 10 seconds. I think the only way the game could be slowing down is having something like an infinite array; I have an array that I push to to get the direction of a swipe, then I set that array to an empty array to prevent an infinite array.

Hi I'm trying a super simple animation test. http://betterdeveloperway.com/tests/phaser/ I'm using a strong PC with Core i7 CPU and 4GB RAM. It got very good HTML5 benchmark results. I've tested on Firefox and Chrome and even though it could hardly get any simpler, the smoothness is disappointing. I expected absoultey no stutter and no lag but every few seconds there's a tiny pause. I've also tested on two other strong machines. It's never 100% smooth. Switching between WebGL and Canvas doesn't matter much. The test is intended for a very high profile project, so the tolerance is absolutely zero. Am I missing something, or are my expectations too high for HTML5? Attached below is the code (PNG is 0.3K and very small). Thank you! Gil <!doctype html><html> <head> <meta charset="UTF-8" /> <title>hello phaser!</title> <script src="js/phaser.min.js"></script> </head> <body> <script type="text/javascript"> window.onload = function() { var game = new Phaser.Game(400, 300, Phaser.AUTO, '', { preload: preload, create: create, update: update }); var rect; function preload () { game.load.image('rect', 'assets/rect.png'); } function create () { rect = game.add.sprite(game.world.centerX, game.world.centerY, 'rect'); rect.y = game.height; } function update() { rect.y -= 1; rect.y = (game.height + rect.y) % game.height; } }; </script> </body></html>

I'm porting a Flash/AIR project to Phaser, and everything is going pretty smoothly so far, but I hit a really odd performance issue which I'm hoping someone can explain to me. When using a forEach loop on a phaser Group (called desksGroup) which only has 9 items in it, I get ~40fps on mobile. But if I get rid of that forEach loop, and instead put the code into the built-in update() function of each of the 9 sprites within the group, FPS drops to ~4. Here is the game loop with a forEach going through a group of sprites (desksGroup): GameState.prototype.update = function() { // kill any pencils that hit a wall game.physics.arcade.overlap(layerMap, pencilsGroup, pencilHitWall); // TODO: subclass "Sprite" so that these update functions call themselves desksGroup.forEach(function(desk) { clientsGroup.forEach(function(theClient) { // get closest client if (!desk.currentTarget || desk.currentTarget && game.physics.arcade.distanceBetween(desk, theClient) < game.physics.arcade.distanceBetween(desk, desk.currentTarget)) desk.currentTarget = theClient; // other ideas for targeting: least health, most health, slowest, fastest }); if (desk.currentTarget && desk.currentTarget.health > 0 && game.physics.arcade.distanceBetween(desk, desk.currentTarget) < desk.range) { if (game.time.now > desk.nextFire) { desk.nextFire = game.time.now + desk.fireRate; var pencil = pencilsGroup.getFirstExists(false); pencil.reset(desk.x, desk.y); pencil.lifespan = desk.fireLife; pencil.rotation = game.physics.arcade.moveToObject(pencil, desk.currentTarget, desk.fireSpeed); } } }); game.physics.arcade.overlap(clientsGroup, pencilsGroup, pencilHitClient); if(defaults.showHealth) { clientsGroup.forEach(function(client) { game.debug.geom(new Phaser.Rectangle(client.x, client.y - 16, Math.max(0, tilemap.tileWidth * (client.health / defaults.health)), 7), '#00ff00', true); }); }}And here is a slightly modified version, with that forEach removed: GameState.prototype.update = function() { // kill any pencils that hit a wall game.physics.arcade.overlap(layerMap, pencilsGroup, pencilHitWall); game.physics.arcade.overlap(clientsGroup, pencilsGroup, pencilHitClient); if(defaults.showHealth) { clientsGroup.forEach(function(client) { game.debug.geom(new Phaser.Rectangle(client.x, client.y - 16, Math.max(0, tilemap.tileWidth * (client.health / defaults.health)), 7), '#00ff00', true); }); }}With the desk update functions moved to this: var deskUpdate = function() { var desk = this; clientsGroup.forEachAlive(function(theClient) { // get closest client if (!desk.currentTarget || desk.currentTarget && game.physics.arcade.distanceBetween(desk, theClient) < game.physics.arcade.distanceBetween(desk, desk.currentTarget)) desk.currentTarget = theClient; // other ideas for targeting: least health, most health, slowest, fastest }); if (desk.currentTarget && desk.currentTarget.health > 0 && game.physics.arcade.distanceBetween(desk, desk.currentTarget) < desk.range) { if (game.time.now > desk.nextFire) { desk.nextFire = game.time.now + desk.fireRate; var pencil = pencilsGroup.getFirstExists(false); pencil.reset(desk.x, desk.y); pencil.lifespan = desk.fireLife; pencil.rotation = game.physics.arcade.moveToObject(pencil, desk.currentTarget, desk.fireSpeed); } }}As you can see, the only difference is that I've removed the desksGroup.forEach() code block, and created an updateDesk function. Elsewhere in the code, where I instantiate the "desk" Sprites, I have the following line: desk.update = deskUpdate;I was thinking that by adding the deskUpdate function to each desk Sprite, it would save some overhead (since the .update() gets called automatically, instead of my explicitly looping through the group via forEach). However, when I use this deskUpdate function, my FPS on mobile drops from ~40fps to ~4fps. I also tried using an regular function declaration (function deskUpdate() {...}), and had the same performance loss.

This is a severe, game-breaking problem. When the framerate goes below ~50, my character (using arcade-physics) just falls through the tiles. You can incite this on purpose by scaling the browser window rapidly. I'm using Firefox 33.1 on OSX 10.9.4.

Hi friends, since yesterday I have a weird issue with the framerate of my phaser game, the problem is that my game FPS go down to 40, and just yesterday it was at full 60, the issue definitely is not with my code, because I go to Game Mechanic Explorer and all the demos run also in 40FPS. I've tried my game in another computers and the framerate goes to 60 again. I need to solve this because this is my development machine. Thanks in advance. PD: Sorry for my english, I speak spanish!

I've been just doing some simple tests on my server just to get things running. When I run it in Firefox I'm getting 60fps When I run it in Chrome however I get 24fps. http://mirvini.com/phaser/ Any ideas why my chrome browser would be going slower? I don't experience this problem with other browser games, including other phaser games. The only extension I have active is Adblock, which I disabled for my site Are there any plugins that are known to cause problems?

Hello ya'll! Is there a way to directly set how fast the framerate should be? I figure there should be a "fps" variable that I could set to determine how often the update function gets called. Is that the case? Thanks!

How would one go about destroying a specific entity in an array? I have tried destroy, I have tried setting the object equal to null, but nothing has helped. After about 400 enemy ships spawn the game just lags. Any advice?