How can I achieve certain behaviour

[mazoku]

I want to use always canvas on desktop and Phaser.auto on mobile. How is the best way to achieve this?

[mattstyles]

I think you'd probably need some sort of switch in your code that detects the difference between mobile and desktop. UA sniffing isn't infallible but is probably the most obvious solution here, or you could check screen dimensions, but that's probably even trickier to get a decent reading on mobile vs desktop.

Bigger question is why do you want to achieve this? Depending on your answer there could be an alternative solution.

[mazoku]

With the awful big res that is required from me on desktop only canvas performs ok. I have great performance on mobile with the auto setting (webgl most of the times) and canvas is slow on mobile. 

Again my resolution for this is way too big. 

[mattstyles]

So maybe sniffing on pixel density and canvas size would be better than UA sniffing, both density and size are easy checks and then just manually choose which 'flavour' of Phaser you want (pretty sure this is exactly what the auto function does under the hood, although likely checks for the existence of a GPU).

Seems odd that the CPU performs better than the GPU, I have an oldish retina mac so a high resolution, great CPU and garbage GPU (I have 2, both fairly toilet) but I've never had an issue that swapping to CPU rendering solved.

[stupot]

Phaser's AUTO logic goes - if WebGL available use that, else use Canvas.

Browser performace depends on many variables, the device itself being the biggest factor.  I've seen mobile browsers unable to push half as many pixels in landscape as they can in portrait.  I've seen browsers perform the best in webgl at low resolution, then perform better in canvas at higher resolutions.  Deciding on canvas/webgl mode based on it being a desktop browser might just seem right given the number of devices you've tested on, but in the real world it's different and forever changing.

If you can afford a bit of a delay on startup, then benchmark the device in both modes at the resolution and orientation you want to run at, and use that to decide.

ps. Phaser has a built in 'Phaser.Device.desktop' that you can use to determine which mode to set Phaser into (and a load of other useful ones ios/android/iphone/opad etc). There are other libs that specialise in determining the browser spec.

 

[mazoku]

Thank you both!

I have one more question - why on localhost(local server) I get twice as better performance than on remote server(my site)? Its only for canvas. What can be the reason for this? (Windows and Chrome)

[mattstyles]

What perf? Are you talking about canvas perf? Because that is solely client, doesn't matter where the server is. If you're talking about load perf then there's a huge difference. 

[mazoku]

I was going to add this - Talking about canvas performance when the game is loaded and playing. Frames per seconds are less when on server. 

but not happening now. Maybe I've had too many open browser tabs.  

[mattstyles]

Yeah, it was likely something else causing your perf issues, once all the assets (js, css, images etc) are delivered to the browser the server has no more work, its all client, so it doesn't matter where it has come from by that point.

[stupot]

Check your network tab in the console for any traffic during runtime, if there is none then the two setups 'should' be equal.

If' you're using a live reload system then that'll still be hammering the network even though the game assetts are loaded, and will cause stuttering.