Noid Posted July 21, 2015 Share Posted July 21, 2015 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. ZoomBox, CodeToWin and Carlos 3 Link to comment Share on other sites More sharing options...
Skeptron Posted July 22, 2015 Share Posted July 22, 2015 Thank you for sharing performance tips. They are much needed! Link to comment Share on other sites More sharing options...
mxmlb Posted July 22, 2015 Share Posted July 22, 2015 Does this trick works for both webgl and canvas renderer ? Link to comment Share on other sites More sharing options...
qdrj Posted July 22, 2015 Share Posted July 22, 2015 Nice tip, thanks. How do you measure draw calls? Link to comment Share on other sites More sharing options...
Noid Posted July 22, 2015 Author Share Posted July 22, 2015 Does this trick works for both webgl and canvas renderer ?I've tested it only with webgl Nice tip, thanks. How do you measure draw calls?There is a canvas inspector in Firefox(at least in the latest Nightly). Open the Developer Tools, click on the gear icon and add a tick on Canvas. It'll enable the canvas debugger. I couldn't find the same feature in Chrome. The same can be enabled as an experimental feature in Chrome http://www.html5rocks.com/en/tutorials/canvas/inspection/ qdrj, ForgeableSum and Tilde 3 Link to comment Share on other sites More sharing options...
qdrj Posted July 23, 2015 Share Posted July 23, 2015 This is pure gold. THank you again. I was able to get rid of few unnecessary draw calls and get small fps boost. Now I'm wondering - is it possible to get rid of very 1st draw call? Which clears whole canvas. Link to comment Share on other sites More sharing options...
Noid Posted July 24, 2015 Author Share Posted July 24, 2015 This is pure gold. THank you again. I was able to get rid of few unnecessary draw calls and get small fps boost. Now I'm wondering - is it possible to get rid of very 1st draw call? Which clears whole canvas. Clipboard-2.pngI don't know if it's exposed through the API but you can modify Pixi.js and set clearBeforeRender: false https://github.com/photonstorm/phaser/blob/v2.3.0/src/pixi/Pixi.js I haven't tested it, though. Link to comment Share on other sites More sharing options...
qdrj Posted July 24, 2015 Share Posted July 24, 2015 I don't know if it's exposed through the API but you can modify Pixi.js and set clearBeforeRender: false https://github.com/photonstorm/phaser/blob/v2.3.0/src/pixi/Pixi.js I haven't tested it, though.Yes, it is exposed game.renderer.clearBeforeRender = false I got -1 draw call and didn't notice any visual glitches. I will test this more extensively on different devices. ZoomBox and Noid 2 Link to comment Share on other sites More sharing options...
Recommended Posts