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. [uPDATE] The plugin can now display RenderTexture on WebGL So last August I posted this [WIP] Phaser Inspector Plugin. Though I have yet to solve the problem I mentioned in the topic, I have managed to have time to create a release for the plugin, in an entirely new look. The new plugin provides a floating, resizable, minimize-able panel for inspecting Display Objects and States. The plugin is available here and you can try out a demo here. Working features: Display objects tree inspection.Display object class guessing.Display object name guessing (by looking for this./name/ in parents).Text as name for Phaser.Text.Display objects non-case-sensitive search by name and class.Display object destroy/kill/hide.Properties inspection and editing.Texture display for sprite/imageBounds drawingStates list and state changeFloating, resizable and draggable panelPanel remember position on page reloadClose/minimize panelPlay/Pause buttonUpcoming features: Transparent/Clickthrough panelSprite/Image load TextureOptimize when displaying too many display objects on the tree Here are some "promo" images
  2. Hi, Since I'm a relative n00b here, I made a quick attempt to replicate the Pixi bunnymark ( it's on the sandbox It's important to understand that Pixi & Phaser rendering models aren't the same. Although I am currently trying to understand where the overheads are. The Phaser 3 BunnyMark test is much different.. rendering 200k+ items using different techniques (Canvas vs WebGL differences maybe), and that Rich and co are putting in a lot of work to improve the rendering.. this is more here to understand the sort of performance to expect from Phaser using unoptimized basics. I'd be interested to know if there's a better technique for getting sprites to render faster (ignoring pooling for now) .. eg bitmapdata copyRect etc? What's interesting is my demo seems to run faster with 8000 Sprites than it does with 4000. Possibly this has something to do with garbage collection? I know you're not really meant to add any new objects during the "update" loop... so you're going to get slowdowns here anyway. Anyway it's there for people to mess around with, I just wanted to get the basic code up. thanks J PS does anybody know why game.input.onDown.add and game.input.onUp.add don't respond on iPad? I thought those covered touch as well.
  3. Hi, As per my example here , I'm trying to draw multiple sprites to a render texture to animate a background. I need to be able to scale and rotate the Sprite image but nothing else (possibly Sprite has overheads I don't need?) I currently use 26 Sprites in a group and RenderXY the group to a texture in my update I could use filled polygons and track the points over time and redraw but I assume Graphics is slower My PNG for the Sprite is 128x512 and I scale them from 0.1 to 1.7. In chrome it hovers around 59-60 but mobile performance is around 30 I'm just wondering if there's a technique that performs better? From what I understand phaser is batching my sprites anyway. If I use BitmapData draws my graphic doesn't come out with antialiasing which is no good here ... Essentially I'm using the PNG to simulate a vector animation, so hard pixels don't work here. Thanks for any advice J
  4. Hey guys! I have had poor performance on older devices and cant reach beyond 30fps. I added Phaser-debug to my project to get some insight on where I need to start optimizing, but Im not sure I understand the numbers. Except for these numbers, everything was zero. preUpdate4ms - stage postUpdate1ms - stage5ms - plugins render4ms - renderer Even though thses numbers only add up to 14ms, the total displayed is 30-40ms of calculations. (I have no idea where the rest are displayed. Oh well. Except for the debug plugin, Im not using any plugins. What does stage mean? Where should I look to cut the display time based on these numbers?
  5. Preface We're a small development team of four that is working on an educational project for the children with special educational needs such as those with autism, hyperactivity or delayed mental development. The project consists of two main parts. Administrative part which covers management and functionality of student profiles, educational center profiles, teacher profiles, parent profiles, game administration in which teachers can replace characters, scale them and change different options based on the game, thus creating new game versions of the same idea. And second, the actual games which are developed in Phaser. The games themselves are designed by a team of seven psychologists and teachers that we are working with, they are those who decide how the game will look like, approve designs and brainstorm ideas based on their knowledge about working with children with special educational needs. From this come several restrictions or requirements: - The game must be filling the viewing area of the browser when maximized; - The game must be scalable so it can fit different screen sizes; - Mobile or tablet support is not considered nor required, but it it comes for free it's a plus; - Animations are complex and must be smooth; Due to the last requirement, for the animations to be smooth, the sprites are usually large and consist of many frames. Our designer have repeated some of the frames that can be removed, but this is not the issue at the moment. Here are some of the sprites we are working with in our first experiment: - Moving caterpillar - Magician appearing - Magician pointing NOTE: I know the sprites can be improved additionally, actually those are parsed through TinyPNG unlike the original ones and some repeating frames can be removed. The Problem And here's a basic example to illustrate our problem, I just placed some of the sprites on the screen. The fps drop happens even if I don't attempt to animate all of them, so I doubt this is a real performance issue: - A few sprite objects, animations are running smoothly as they should be; - Adding additional sprite object in the middle, it ruins everything - (3000x2700 size, High-end CPU is hogging at 40-60%, fps drops at 3-5) I've noticed that if I artificially change the size of the signs object, the stutter disappears. Here I make the sprite huge with simple resize: - Resized middle object to 5100 x 4590, no stutter. IMPORTANT: Be sure to close the stuttering example if you open several tabs because it affects everything. We have absolutely no idea why this happens, from what I see it's some problem with the sprite layout and sizing, I've read somewhere that it's good practice to keep the dimensions on the power of 2 but those aren't. We are considering switching to Atlas but need to figure out if this is going to be a problem and why is it a problem to begin with. We've asked for advice some colleagues in another company that are dealing with games as well and they've given us some very good advice regarding the repeatable frames and suggesting that the sprite size can be reduced dramatically. Additionally they've stated that the sprites are huge and this is causing the performance issue, however I do not agree because the above examples clearly illustrates that even if I increase the image size artificially three times it can still be smooth.
  6. Hi guys! Would you mind sharing some tips on optimizing performance in Phaser games in this thread?
  7. Hello, I am learning how to use Babylon.js and i made this scene by copy/pasting from different places, i ended up with something i am somehow satisfied with. The problem now is that when the camera is facing the field performance goes down the drain. So i'd like to know what i could do in order to improve performance. I might have to warn you the code is actually a mess, as i'm just testing babylon and playing with it i didn't care much about organizing the code (probably there's even some code that needs to be deleted) so that might also cause performance issues. I think the main culprit is this: for (var j = 0; j < (dimensions.z/ cubeSize); j++) { for (var i = 0; i < dimensions.x / cubeSize; i++) { var newCube = createCube(cubeSize);//cube.createInstance("cube" + "_" + i + "_" + j); newCube.position.z = 2 -((dimensions.z) / 2) + (j * cubeSize); newCube.position.x = 2 -((dimensions.x) / 2) + (i * cubeSize); newCube.position.y = 2*cubeSize; newCube.origPos=new BABYLON.Vector3(newCube.position.x, newCube.position.y, newCube.position.z); newCube.actionManager = new BABYLON.ActionManager(scene); newCube.actionManager.registerAction( new BABYLON.SetValueAction(BABYLON.ActionManager.OnPointerOverTrigger, newCube, "material.subMaterials.4.diffuseColor", blue, null) ); newCube.actionManager.registerAction( new BABYLON.SetValueAction(BABYLON.ActionManager.OnPointerOutTrigger, newCube, "material.subMaterials.4.diffuseColor", white, null) ); newCube.actionManager.registerAction( new BABYLON.ExecuteCodeAction(BABYLON.ActionManager.OnLeftPickTrigger, function(thisCube){ dragon.destination = thisCube.position.clone(); dragon.currTile=thisCube; thisCube.overTile=dragon; dragon.destination.y=dragon.destination.y+getDimensions(thisCube).y; }.bind(this, newCube), null) ); if(!(j==0 && i==0)){ cubes.push(newCube); } else { dragon.position.z = 2 -((dimensions.z) / 2) + (j * cubeSize); dragon.position.x = 2 -((dimensions.x) / 2) + (i * cubeSize); newCube.material.subMaterials[4].diffuseColor=BABYLON.Color3.Red(); dragon.currTile=newCube; newCube.overTile=dragon; } groundAnimationCount++; } }and this: function setCubeMaterial(cube){ var cubeMaterial = new BABYLON.StandardMaterial("cube_0_0", scene); cube.material=cubeMaterial; cubeMaterial.diffuseColor = new BABYLON.Color3(0, 0, 0); cubeMaterial.specularColor = new BABYLON.Color3(0, 0, 0); var textureName="textures/ground/ground.jpg"; var f=new BABYLON.StandardMaterial("material0",scene); f.diffuseTexture=new BABYLON.Texture(textureName, scene); f.diffuseTexture.uScale = -1; f.diffuseTexture.vScale=-1; var ba=new BABYLON.StandardMaterial("material1",scene); ba.diffuseTexture=new BABYLON.Texture(textureName, scene); ba.diffuseTexture.uScale = 1; ba.diffuseTexture.vScale = 1; var l=new BABYLON.StandardMaterial("material2",scene); l.diffuseTexture=new BABYLON.Texture(textureName, scene); l.diffuseTexture.wAng = 0.5*Math.PI; var r=new BABYLON.StandardMaterial("material3",scene); r.diffuseTexture=new BABYLON.Texture(textureName, scene); r.diffuseTexture.wAng = 0.5*Math.PI; var t=new BABYLON.StandardMaterial("material4",scene); t.diffuseTexture=new BABYLON.Texture("textures/ground/grass.jpg", scene); t.diffuseTexture.wAng = -0.5 * Math.PI; var bo=new BABYLON.StandardMaterial("material5",scene); bo.diffuseTexture=new BABYLON.Texture("textures/ground/ground_full.jpg", scene); bo.diffuseTexture.wAng = 0.5 * Math.PI; bo.diffuseTexture.uScale = 1; //put into one var multi=new BABYLON.MultiMaterial("cubetexture",scene); multi.subMaterials.push(f); multi.subMaterials.push(ba); multi.subMaterials.push(l); multi.subMaterials.push(r); multi.subMaterials.push(t); multi.subMaterials.push(bo); //apply material cube.subMeshes=[]; var verticesCount=cube.getTotalVertices(); cube.subMeshes.push(new BABYLON.SubMesh(0, 0, verticesCount, 0, 6, cube)); cube.subMeshes.push(new BABYLON.SubMesh(1, 1, verticesCount, 6, 6, cube)); cube.subMeshes.push(new BABYLON.SubMesh(2, 2, verticesCount, 12, 6, cube)); cube.subMeshes.push(new BABYLON.SubMesh(3, 3, verticesCount, 18, 6, cube)); cube.subMeshes.push(new BABYLON.SubMesh(4, 4, verticesCount, 24, 6, cube)); cube.subMeshes.push(new BABYLON.SubMesh(5, 5, verticesCount, 30, 6, cube)); cube.material=multi; }Which create the field, composed of 625 different cubes, each with its multi material and submeshes (i had to do this because i wanted to use a different texture for each side of the cube and change the top texture color on mouse over). When i started this test i had used instances and it worked fine (there were twice the cubes, twice as big but it ran smoothly) but in order to do the color change on mouse over I had to make a new cube and a new material for each cube (at least, it looked like so. Probably i could've just changed the top submesh). On top of that all the cubes are animated (they go up and down) and textures are 256x256 with no mipmap. Maybe I should find a minecraft-like project for babylon and study it As said above, the code is a mess! I am actually ashamed of posting it but I wanted to sort this issue as soon as possible and i haven't got the time to polish it. If you think it's hard to read i'll try to fix it. Any help will be appreciated, thanks!
  8. Helly everybody i'm making a prototype for my game and i had to stop any advance because in cellphones (chrome and firefox for android ) i have a huge FPS slowdown. Even sometimes in my Galaxy s4 chrome throws a WebGl error but the games loads anyway. here is the link for this game im using arcade physics and a tilemap using Tiled with a size of 44x40 with a tilesize of 32px using 3 layers and this image my maingame var globalVars= require('./GlobalVars.js');var GameManager= require('./GameManager.js');var player;var states={idle:0,moving:1,jumping:2,sticked:3,flying:4};var jumpTimer;module.exports={ preload:function(){ tileSize=new Phaser.Point(100,65); game.stage.backgroundColor='#5990A7'; game.time.advancedTiming = true; ///fonts game.styles=[]; game.styles['hudText1']={ font: "32px Arial", fill: "#ff0044", align: "center" }; game.styles['kids1']={ font: "32px kids1", fill: "#ff0044", align: "center" }; game.styles['chalk']={ font: "32px chalk", fill: "#FFFFFF", align: "center" }; }, create:function(){ game.add.text(0,0, '', game.styles['kids1']); game.physics.startSystem(Phaser.Physics.ARCADE); game.physics.arcade.gravity.y = 250; GameManager();; game.physics.arcade.setBoundsToWorld(true, true, true, true, false); } , update: function () {;'fps'+game.time.fps; }};and game manager called here var globalVars=require("./GlobalVars.js");var Player= require('./Classes/Player.js'); var Wire= require('./Classes/Wire.js') var Cannon= require('./Classes/Cannon.js')var Door= require('./Classes/Door.js')var Key= require('./Classes/key.js')var Yarn= require('./Classes/Yarn.js')var Goal= require('./Classes/Goal.js')var Hud= require('./HUD.js')var Bell= require('./Classes/Bell.js')var GameManager=function(){ this.currentWorld=1; this.currentLevel=1; //map markers this.playerstart=[]; this.yarnPosition=[]; this.itemsPosition=[]; this.trapsPosition=[]; this.goalMark=null; // player groups and collectables this.player=null; this.yarns=[]; this.traps=null; //set game objectives this.missionComplete=false; this.bells=0; this.totalItems=0; this.currentPercent=0; this.Initialize();}GameManager.prototype={ Initialize:function(){ this.LoadMap(); //create Hud this.Hud=new Hud(); this.Hud.DrawStart(); //load player this.LoadPlayer(); this.LoadGoal(); game.add.tween(this.startPortal.scale).to({x:1,y:1},1000,Phaser.Easing.Exponential.In,true); game.add.tween(this.startPortal).to({angle:360},5000,Phaser.Easing.Linear.None,true); var playerTween=game.add.tween(this.player.scale).to({x:1,y:1},2000,Phaser.Easing.Exponential.In,true); playerTween.onComplete.add(function(){ game.add.tween(this.startPortal.scale).to({x:0,y:0},1000,Phaser.Easing.Exponential.In,true); this.player.DisableMove(false); },this); } , LoadMap:function(){ = game.add.tilemap('level'+1+'-'+1);'world1tiles', 'world1tiles');'mapLayer'); this.floorLayer ='floorLayer'); this.climbLayer ='climbLayer');,100,true,this.climbLayer);,100,true,this.floorLayer); this.floorLayer.resizeWorld();; this.markers.forEach(function(item) { switch(item.type) { case 'playerStart': this.playerstart.push(item);break; case 'yarn':this.itemsPosition.push(item);break; case 'trap':this.trapsPosition.push(item);break; case 'key':this.itemsPosition.push(item);break; case 'door':this.trapsPosition.push(item);break; case 'goal':this.goalMark=item;break; case 'bell':this.itemsPosition.push(item);break; } },this); }, LoadPlayer:function(){ this.player=new Player(this,this.playerstart[0]); game.add.existing(this.player); this.player.DisableMove(true); this.player.scale.setTo(0);; return this.player; }, LoadGoal:function(){ this.goal=new Goal(this,this.goalMark); this.startPortal=game.add.sprite(this.playerstart[0].x,this.playerstart[0].y,'goal'); this.startPortal.anchor.setTo(0.5); this.startPortal.scale.setTo(0); }, LoadTraps:function(){; this.trapsPosition.forEach(function(trap){ switch ( { case 'wire': var obj=new Wire(this,trap); this.traps.add(obj); break; case 'cannon': var obj=new Cannon(this,trap); this.traps.add(obj); break; case 'door': var obj=new Door(this,trap); this.traps.add(obj); break; } },this); }, LoadCollectables:function() {; this.itemsPosition.forEach(function(collObj){ if(collObj.type=='key') { var coll=new Key(game,collObj,this); this.collectables.add(coll); } if(collObj.type=='bell') { var coll=new Bell(game,collObj,this); this.collectables.add(coll); } if(collObj.type=='yarn') { this.totalItems++; var yarn=new Yarn(game,collObj,this); this.collectables.add(yarn); } },this); }, ManageGoal:function(){ if(!this.missionComplete) { for(i=0;i<this.player.yarnList.length;i++) { this.player.yarnList[i].stopFollow=true; } for(i=0;i<this.player.yarnList.length;i++) { game.physics.arcade.moveToObject(this.player.yarnList[i], this.goal, 100) } this.missionComplete=true; this.Hud.DrawStageClear(); this.player.DisableMove(true); this.player.MoveToGoal(this.goal); } }, RecollectItem:function(item) { this.currentPercent++; var tween = game.add.tween(item.body).to( { x:, }, 1000, Phaser.Easing.Linear.None, true); game.add.tween(item.body).to( {rotation:360 }, 2000, Phaser.Easing.Linear.None, true); tween.onComplete.add(function(){ item.visible=false; },this); tween.start(); this.Hud.UpdateItemsHud(); }, UpdateGM:function(){ var shouldStick= game.physics.arcade.collide(this.player, this.climbLayer,function(body1,body2){ this.player.SetSticked(true,body1.body.blocked); },null,this); game.physics.arcade.collide(this.player, this.floorLayer); game.physics.arcade.collide(this.collectables, this.floorLayer); game.physics.arcade.collide(this.collectables, this.climbLayer); }}module.exports=GameManager;i dont know what else to do because this its becoming a big problem that could mean the project cancellation. thank you very much
  9. Riu

    Low Performance

    Hello everyone, Me and my friends are developing a simple platform game in, but we have a performance problem which i believe to be the number of elements on the screen, removing part of the elements (platforms to be exact) the fps goes up to 60, that's normal? Game:
  10. So I have tried to develop several games where multiple objects are produced and they move from pointA to pointB and then disappear (deleted) and are no longer required. I have tried many approaches tweening, physics with gravity when they need to fall from a point to a point, also I had the objects on recycle so only the alive ones were rendering. But still the performance took a serious hit even with no more than 50 objects (yes all animating or falling at the same time) and settled around 30-40fps (which is horrible for a simple game) So I was wondering what is the most perfomant approach here for something like this. In terms of animation(tweening) vs physics and about recycle approach. Assume that the objects are actually sprites and may play different frames (even while they animate or fall). Also assume that each object is as big as 5%-10% of the total space of the stage. I really appreciate the help on this.
  11. I'm trying to increase the performance of my game, i'm planning to use a monospace typography so I'm able to use both BitmapText and RetroFont, i've read BitmapText.generateTexture enables a better performance, is that performance better than using plain RetroFont alone ? Thank You.
  12. We all know that people are playing our games more on mobile than ever before. One of the primary benefits of HTML5 is that it can be played on the go without downloading heavy apps - this, by default, makes the developing economies our target audience. We are building an marketplace app for HTML5 games and are starting with the huge audience base of India. Here's my question: 1. What is the most influential factor for HTML5 game performance - Chipset, CPU or GPU? 2. In each of those categories, which are the best builds for smooth game performance?
  13. Hi, After writing few times games in different languages (mostly some student projects), I came up with an idea to write my own 2d engine in JavaScript. My main goal is to learn something new (and to have fun with it). Simple project became huge and even lived to see its own sprite-model'ish-animations editor. My problem is performance and not fixed number of frames: 1500 elements stress test: code: (I tried to remove unnecessary lines of code to improve readability) Conclusions: drawImage function occupies 83% of total script execution time (screen: and the frame rate is not stable (~40-60) (screen: I'm pretty sure that it's not garbage collector's fault. I would like to mention that i cache every 'shape' and draw it as whole image later because it is faster than painting each shape 60 times per second also in example above i draw everything even if some element is outside the canvas. You probably wonder why would anyone need 1500 objects on screen, well i don't need them but it should be possible to do. For example Pixi can handle (on my machine) 10 000 bunnies at the same time ( and I'm sure they are not using web workers in that example. I even tried to get some hints how to improve code from Chrome's V8 JavaScript engine but results are not stunning. Pre-rendering frames sounds cheap for only 1500 elements so i didn't try it. My question is: are there any tricks to improve performance of drawing images? Or maybe I'm doing wrong something else?
  14. Hi people. I've been doing a game for a year or so. Now i'm facing some troubles with the performance. I know i can use cocoonjs but before talking about that, i want to ask you if this are myths or realities , if you have faced it: Aclaration: Performance was not measured, it was what I saw with the lag of the game. This was tested with chrome 35. Using different canvas layers.I've been doing all in the same canvas element, i tried one time to add more canvas layers but I didn't noticed any change. Have you tried this? How is your experience with that? Rendering in a virtual canvas, and then painting on the visible canvas.This is one of the last changes i did, now i'm painting all in a hidden canvas created at runtime, and then drawing It on the visible canvas after drawing all the individual entities on the virtual one. I have noticed no change of performance. Not drawing too much entitiesThis made the game work better. As expected. What other tips could you provide to improve the performance? I'm using map/ functional style of programming for updating the entities, may this lead into a black hole of performance? function updateEnemies(){ enemies = _.compact( .map(move) .map(removeIfOutOfScreen));}I know "for" loops are better performants, but i don't know if this is what hits the performance of the game. Other thing I'm not doing is using a QuadTree algorithm for checking near positions. How do you check that? Any algorithm? Brute force? This is the game I'm doing. I'm opensourcing everything but before I have to clean all the f**ing mess of code I did in one year. (I think i have at least 6 more months to work on cleaning and performance) I accept all the suggestion and ideas you have for performance, or whatever you want to say! Thank you bros!
  15. Hello everyone. I'm currently working in a Puzzle Bubble kind of game and I'm trying to improve mobile performance. Currently I'm creating 1 pool for each colored bubble in my game and adding all animation frames to the sprite like this: this.redBubbles =;this.redBubbles.createMultiple(BUBBLE.AMOUNT_NORMAL, "anim_bubbles", "anim_red1_0.png");this.redBubbles.callAll("animations.add", "animations", "start", ["anim_red1_0.png"]);this.redBubbles.callAll("animations.add", "animations", "over", ["anim_red_over.png"]);frameNames = Phaser.Animation.generateFrameNames("anim_red2_",0, 10, ".png");this.redBubbles.callAll("animations.add", "animations", "kill", frameNames);frameNames = Phaser.Animation.generateFrameNames("anim_red1_", 0, 6, ".png");this.redBubbles.callAll("animations.add", "animations", "collision", frameNames);As I need to use them I just change the visible property to true and kill them when I stop using them. Is this the correct way to use sprites and animations? Would it be better to just create a pool of sprites without animations and create a new sprite on top of it to animate? Thanks for any help and excuse the poor english.
  16. Hi, I have an app that is a kind of photo gallery, after loading 10 photos in a mobile the browser crash (Iphone 6) It is probably related with Memory, each image its about 300kb. I have been using .dispose() before assign the texture but it does not have effect. sphere.material.emissiveTexture.dispose();sphere.material.emissiveTexture = texture;I'm desperate, I really don't know how to fix this. Any advice is welcome. Thanks
  17. Hi, another question about performance~ I've been busy updating my code to get more performance out of Phaser and CocoonJS. Currently everything runs fine ( stable 55 - 60fps ). Question / Problem When I change States - for example I go from my titlescreen into the mainmenu State: there are a few sprites set up and a few tweenings are done. A few means 3 - 6. During the change into the state the game struggles a little bit - it is lagging and also the tweening is lagging. This happens on all iOS devices (only developing for iOS included normal resolution screens / retina devices / iPad Air). The images which are loaded, the audio and all the stuff is minimzed and optimized. There are no big file sizes which have to be loaded. A few Questions on it - Is there something like a preload for tweens? - Or can I preload a state or something? - Which other issues cause this? All the stuff is preloaded in the "preload" function. My states (example: titlescreen, mainmenu) are out of the "create" function - as an own state, is that correct? because to call everything into the create function themes a little bit overdue - to call an entire game with all the logic etc on start. Any suggestions / improvements?
  18. My game UI had three icons, each with one with a text. So in code I was adding them in what I thought was a logical way: "level" icon and text, "score" icon and text and "deaths" icon and text. This resulted in phaser using a separate draw call for each one. It's not that important on desktop but on mobile every performance gain counts. The fix was to simply arrange the code so that all the icons are added one after the other and then all the texts are added one after the other. Now there's only one draw call for all the icons and one for all the texts. This might be pretty obvious for experienced programmers but I'm sure there must be some other junior devs making the same mistake I made.
  19. Hello! the tldr; How do I do color replacement of sprites in pixi? (not tinting, e.g. change #ff0000 to #cccccc) How do I best render 50+ characters made out of 6-10 sprites (~100 frames total), each of which has been recolored by whatever the answer is to #1 (with performance in mind)The long version, with images and examples: I am porting a canvas-centric project of mine to pixi, and am unsure how to re-implement my former character generator. I have these small pixel art characters that, in my former game, would all be recolored at runtime. Their skin, hair, gear, etc could be any color. They also had a set of animations, somewhere in the 60-100 frame range. To accomplish this, I had a base template character cut up into many pieces (head, hair, torso, feet, arms, misc gear, etc) which I would use to perform an expensive per-pixel color replacements. All in all, these were slow to generate (~250ms per character) but then I would save these recolored canvases and use them as spritesheets resulting in lagless animations and no limit on the colorization options. So rather than loading a spritesheet as most games do, I was loading several spritesheets or individual images, and then at load/runtime I was *generating* a geared+colored spritesheet per character. If someone redyed their gear I had to generate a new spritesheet for whatever they changed. Here's an example of a randomly generated set of characters. Keep in mind that this is just a sample of 3 frames from each sprite sheet -- every character has another 60-100 frames saved in memory representing run and attack animations in four directions. Here's one geared character in a run animation (not sure if it'll animate in the forum, so a link follows): There appear to be many options of how to accomplish something similar in pixi v3, but I keep running into performance issues so I wanted to solicit some feedback before I sink in too many more hours. So far with pixi I am able to draw a basic uncolored character composed of 6 sprites with no performance problems. I can even add 15000+ of them to the screen and have them run around at 60 fps. I suppose this makes sense, I'm just drawing straight from a spritesheet in this scenario just like bunnymark. Where I run into issues, is in colorization of the characters. I assume that in webgl the solution is a custom shader that replaces my template colors with whatever I want (is it?). I'm not sure how to make such a shader yet, but to test performance I tried using the InvertFilter and the SepiaFilter, as I figured these fundamentally performed the same task (recoloring pixels based on their existing value). In the scenario of randomly assigning a Sepia or Invert filter to each body part of my characters, I experienced a drop in renderable characters from 15000+ to a couple hundred. Removing shaders from some, and adding tinting to others (which I do not plan to use, because it washes out colors) further degraded the frame rate. If I were to add as much gear and variations as I have planned, the game wouldn't actually run with my current naive rendering approach. Now I know pixi has many tricks to use at this point, but I don't know which ones to use, or even if I've heard all my options yet. Could someone give me some options? Or let me know if any of the following options have merit: revert to using canvas to generate a per-pixel colorized + geared in-memory spritesheet of each character, and then render the character in pixi.js via webgl (I can do that right? use an offscreen canvas and still use webgl..?) write the color-replace-shader, use some pixi feature (cache as bitmap? render texture...?) to create the spritesheets (would this even work? can i capture the color changes from rendering with the shader and then save that as an image?) generate a finite number of skin/hair/gear colors in a drawing program and save them as spritesheets, don't make full character spritesheets, just draw the bodyparts where they need to go, don't do any fancy character generationIs it true that if I do somehow procedurally generate ~50-150 different colorized spritesheets (to represent ~50 unique characters on the same screen) that I may still have a performance problem because pixi would be rendering *from* too many different images? Or should i expect awesome FPS in this scenario? Sorry for the complicated question, but I would really love to leave my old canvas game behind and move to pixi! Thanks for reading
  20. The instructions here may not be specific to HTML5, but I think it explains well how game performance can be optimized on Android. A good read
  21. Hi guys, some days ago, I started with my first game ever and I decided to use js, phaser and tiled. The goal of this project is a jump'n'run game with different levels. There's a timer counting backwards, when the time reaches 0 it's over. But there are collectables which give you more time. During the last few days I learned a lot about tiles, sprites, canvas etc. and now I have finally setup a working phaser project with tilemap, timer, player and different states. The source is on github and a demo is available here. I have three problems with my game: 1. When the player stands on the cupboard, he's shaking. I have no idea why. 2. In firefox I get the following error: TypeError: PIXI.BaseTextureCache[a].destroy is not a function. 3. In chrome on mac I get constant 60fps, on windows about 30 and on mobile devices about 5. How can I fix these errors? Do you have any hints for me? And if you have some general advices for me that'd be awesome as I have no experience in online game development. Cheers
  22. Hello guys. As a beginner javascripter been working on a multiplayer 2d drag racing game but i ran into some issues now. Managed to create rpm, speed, motion, gear change and stuff and then got into node and socket io and managed to sync 2 players in real time with a little bit of lag. But i noticed a huge issue for me: if one player has a slower computer it will be slower. Tryied to use advancedTiming, desiredFps and fpsMax but no luck. The player who has better pc will move alot faster on X. Got any ideas what i can do ? Thanks in advance!
  23. as you can see here in my demo game if you die (touch a block with spikes or just fall of the screen) you will respawn.. actually it will just restart the current game state - this is just a simple line of code: game.state.start('start', true, true);true,true should clear all the cache.. right? (i thought this should provide a clean and fresh restart) i also remove global timer events to be sure nothing runs anymore.. but still.. i didn't see it when testing the game on my desktop (although if you try it on a 4 year old machine and you die a few times you will see it nevertheless - because it gets slower every time) if you test it on a tablet you'll see it after the first respawn.. it is unplayable slow.. please help! what did i miss ? something seems to be still running or initialized more than once.. thank you!
  24. So I am having a bit of a performance issue with states. When restarting a state multiple times the game starts to show a noticeable slowdown which also slows down Chrome. This occurs with WebGL and Canvas. For a bit of context here, I am messing around with a tile based RPG style game and I have created a method of choosing which map to display by passing a bunch of params (such as the map, tileset, tilemap layers etc) to the state start and restart commands. I had also planned on using states for various other tasks such as a battle system. This init function for the state is here: (Though I'm not sure if it will help very much) And is usually called with something like "this.state.restart("Gameplay", null, null, "mapname", {"Tiled tileset name" : "Phaser tileset key"}, "tile layer", "collisions layer", "objects");" as an example. As I mentioned before, constant restarting causes major performance issues. So what I'm wondering is, is this an issue with how the state system works (or possibly even tilesets)? Should I find a better method of displaying maps instead of using states multiple times? Thanks.
  25. Hello everyone, Right now I'm testing my game on an "old" smartphone, to check how smooth the game would work. Well it's terrible, unplayable, I've like 10-13 fps. I didn't know where to start so I did this little test : creating a phaser game with nothing in it and run it, so yeah basically a black screen. (but I kept loading my assets, which is pretty fast) The result was kind of scary : I've got approximatively 15fps. I use crosswalk-cordova to build the apk (so it does use the crosswalk webview) The smartphone is kind of bad, but that's the point : I don't think everyone has that high end device. It's a sony xperia E, built with a 1Ghz single core processor, 512MB of RAM, the whole running on Android 4.1. The game uses a resolution of 960 * 640. I wanted my game to be compatible with Android 4.0 and with most devices, is it actually possible to achieve this with Phaser ? I've read a lot of things to optimize mobile performances (avoid using text, tweens, too many update functions...) but I'm not even at this point yet, because with everything out it's still bad. Any help / advice would be hugely appreciated !