Multiplatform games DOM+CSS vs CANVAS vs both

[rorypicko]

I've built a few HTML5 games within the past few months and have been using the createJS suite and rendering everything to canvas.

The reasons behind my choice of canvas is that it seemed easier to get it working cross platform as I could just scale the canvas to fit the screen and everything was perfect. well, on most devices! Performance is an issue on older android and ios devices, but not horrendous.

My next HTML5 is a biggie, previous games were only simple point and click, quiz styled game with little animation and very few menus. This one is a bigger dinner with a lot more menus, interactive objects, but again only simple animations. But it involves a pan-able (is that a word) environment.

I've been more inclined to use the DOM and CSS for HUD items and menus for this, which would be overlaid on top of a canvas, running the main pan-able environment.

I understand this may take more time to get working on multiple screen resolutions using multiple CSS media queries, and even different layouts for smaller resolutions, (like hiding certain labels from the HUD or whatever)

I'm looking for a comparison of the technologies for mainly performance but also to find out which methods are 'best practice'.

It would also be nice to see some examples of multi-platform games using these different methods (or even others that I am not aware of) to see how they go about it and to test performance.

[shmikucis]

I am using canvas for gameplay and DOM for UI, but eventually will switch to canvas only.

 

Although DOM is a faster way to create responsive interfaces for various screen resolutions, it has drawbacks on mobile. I'm 'compiling' my web games with CocoonJS in order to have apps for Android and iOS. Currently I have CocoonJS layer with gameplay and web-view on top of it with UI. This hack leads to various problems in app performance and laggy user experience. Also coding wise you have problems like handling inputs for different layers etc. 

 

I will try this one for UI creation -> http://html2canvas.hertzen.com/ . Anybody can advice better solution?

 

Regarding examples, you can check 'Guardian Angel' demo http://mightyfingers.com/engine-demo/ . Somewhere in November there will be demo with UI on Canvas.

[Starboar]

I will try this one for UI creation -> http://html2canvas.hertzen.com/ . Anybody can advice better solution?

 

 

 

I'm considering html2canvas for the same reasons,  did you find it worked well on mobile?

[jamessimo]

I personally do every thing through canvas for two reasons

1) I want to control everything through my engines app (dom elements need messy code and can't guarantee that it will look the same on all browsers)

2) I Port my games to iOS and Android using cocoonjs, to use there webgl accelerated canvas plus, it has to be 100% no dom elements.

[rafinskipg]

I personally do every thing through canvas for two reasons

1) I want to control everything through my engines app (dom elements need messy code and can't guarantee that it will look the same on all browsers)

2) I Port my games to iOS and Android using cocoonjs, to use there webgl accelerated canvas plus, it has to be 100% no dom elements.

 

Hi, James

 

Have you tried Webview+ from Ludei?

 

I'm using a cordova application with Dom (angular js app ) +  the game, which is in canvas. I use angular for having a framework available when doing some calls to server, rendering lists, etc.

 

I haven't tried Canvas+ , does it has much difference in performance with Webview+? 

 

[rafinskipg]

I use DoM for UI and responsiveness. 

What James says about all browsers, it gets mitigated using Bootstrap or other styles framework. 

The worst part is not being able to use canvas +.

[jamessimo]

Hi, James

 

Have you tried Webview+ from Ludei?

 

 

I haven't tried Canvas+ , does it has much difference in performance with Webview+? 

 

 

I have not used WebView+ for any finished products, but out of curiosity I have tested my canvas+ apps on it. It runs almost the same as it would in a chrome mobile browser.

 

You only notice the performance of canvas+ if your game has to run at a target FPS. As a rule in my studio (as all our games are physics games) we aim at 60FPS. I am making a non FPS Dependant game that will use WebView+ and DOM elements as UI.

The thing to remember is WebView+ is just the latest chromium with some minor tweaks to optimise canvas operations.

[rafinskipg]

Nice to know that, I used crosswalk-project in substitution of cocoon webview+, because it's easy to wrap with it. 

But i didn't know that canvas+ was much better performant than webview+... This is something to consider. I should redo all my UI with canvas, or prepare a mobile version with just the canvas part.   

 

Anyway, both of the ways will involve a huge rework, maybe it's time to split my project into mobile and pc versions.

 

Thank you