Search the Community

Showing results for tags 'performance'.

More search options

  • Search By Tags

    Type tags separated by commas.
  • Search By Author

Content Type


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

Find results in...

Find results that contain...

Date Created

  • Start


Last Updated

  • Start


Filter by number of...


  • Start



Website URL





Found 262 results

  1. Hello! I'm faced with a problem and looking for a good solution. The problem is how to load test my websocket multiplayer game by simulating n real clients? My game works great when there are just a few clients while developing, but recently I had about a spike of new players join from a school at the same time, and my game did not scale well at all. So I have a scalability problem and I need to fix it, but the question is how do I know when it's fixed? I need a way to on-demand scale up to N number of simulated clients, to test my scalability. Problems with load testing websockets: I can't just open a bunch of browser windows on my computer and connect because my computer doesn't have enough resources to support that many clients. There are traditional web load testing tools like jmeter, but they are designed for opening http connections not websockets There are also websocket load testing tools like thor, but those just open a websocket connection and send dumb messages, and can't act as a real game client. What I need is a way so simulate a real game client that uses the same protocol as the game, and sends messages as a real player would, then be able to scale that up to 10, 20, 50, 100. Has anyone else run into this problem or have any recommendations? Thank you!
  2. Hello, friends. Here's some data for you I collected during my research. I think it may be useful for somebody who's like me trying to create truly crossplatform/crossbrowser html5 game and (unluckily?) chose Phaser engine. My game can be described like this: Size of the entire game: 3 mb Resolution: 640*960, up to 10 small sprites on the screen, 1 background sprite - that's all. ARCADE physics to process collisions between those 10 sprites. Not bitmap fonts - 2 text labels on the screen. Here's the stats I collected so far: Game works fine on Iphone 5/6 when I use CANVAS. Game works fine on modern android devices with chrome. Some devices fail when I use CANVAS - they prefer WEBGL. I got stable 60 fps and I am happy. But what about stock browsers? What about windows phones? Here the results for CANVAS on Lumia 930: Phaser v2.0.7, Pixi 1.6.1 - Works perfectly on Lumia. 60 fps, buttons work, scaling works. Phaser v2.5.0, Pixi.js - Extremly SLOW. Everything works fine, but with 10-15 fps. Phaser v2.4.1, Pixi.js v2.2.8 - Extremly SLOW, buttons don't work. Phaser v2.3.0, Pixi.js v2.2.8 - Extremly SLOW, buttons don't work. Phaser v2.2.2, Pixi.js v2.2.0 - Extremly SLOW, buttons don't work. Phaser v2.2.1, Pixi.js v2.2.0 - Extremly SLOW, buttons don't work. Phaser v2.1.3, Pixi.js v2.0.0 - The game didn't launch. // That's fine, I suppose API changed a little. Phaser v2.1.0, Pixi.js v1.6.1 - Extremly SLOW, buttons don't work, scaling broken. I prefer to use the latest versions of Phaser. But with v2.5.0 game gives me 10-15 fps as max. v2.0.7 works perfectly giving 60 fps. So, friends, do you have any idea what happened with Phaser between 2.0.7 and 2.1.0? After the 2.0.7 version this engine gives pretty poor performance on this device.
  3. hi there, got two questions about phaser 1. is there any tool to test a game performance? 2. how can i use two different properties in a sigle tween? thanks in advance!
  4. Hello again, all. Started project recently which seems simple enough and difficult to screw up, however, on our Apple devices I'n noticing over about the period of 30 minutes or so, the frame rate drops from 60 to under 20! I'm keeping an eye on instances in the world and they don't increase over time. I thought I had it well contained but it would appear I was wrong. I guess my questions is, what other things need manual keeping? My sprites/images are well contained I believe, could sounds not being destroyed be the cause? Cheers for any help
  5. I am looking to develop a 2D game using Phaser and want to target HTML5, Android and iOS with it. I see there are wrappers that can do this like the Intel wrapper, Cordova or Phonegap but what would be the best choice performance-wise? I am getting very confused by all the choices. What are your experiences using any of those wrappers? Is it also possible to use native OS functions? Things I would love to have are: "More apps/games" button which launches the app store. iOS Game Center and Android Google Play Services for highscores and achievements Mopub or Admob for launching interstitial ads/videos between levels. Are those functions available when using a wrapper and do they work well or would it be too buggy? On top of that, will device specific problems like screen-size cost a lot of time to solve or are there already approaches that can handle that efficiently?
  6. 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 ?
  7. 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
  8. 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?
  9. 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.
  10. 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.
  11. 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?
  12. 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!
  13. 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.
  14. 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); } };
  15. 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,
  16. 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?
  17. 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.
  18. 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?
  19. 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?
  20. 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!
  21. 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');
  22. 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 !
  23. 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
  24. 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.
  25. 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).