Disappointed with general html5 games performance on mobile devices

[ecv]

I am disappointed. I just bought a not-so-low-end device, mainly for testing purposes. It scores 50k on Antutu (yes, I heard manufacturers can make their chipsets score better without necessarily improving general performance), which is about twice what my old greatest phone did. It's still about a third of what an Iphone6s does, but allegedly it's still better than 86% of devices.

Okay, so I head to some html5 games websites and try a couple of (what I'd deem) top-end puzzle games. You know, they're nicely tailored, with good animations and all, but they're puzzle games, not sidescrollers with a hundred layers (I'm exaggerating of course). And the performance is soooo poor. Animations delay, user input delays...

I then checked both android versions of them and they worked flawlessly, even though they're probably just wrapped in cordova or some such.

So I'm wondering what's going on here? On my desktop all games run perfectly on Chrome, and in my previous phone, an LG p710 (no wonder) they underperform. But this underperformance on my new device took me by surprise. Although I realize maybe this technology is rather new, I'd have thought it'd work better today, not in 10 years?

Am I missing something?

Edited June 10, 2016 by ecv
missed that 's' in Iphone model

[blackmoondev]

web gl support in the browser perhaps?

[rgk]

I agree, native mobile games aka apps seem to work much better. Even though they are still built with the same technology.

Not sure why. I'm assuming the mobile browser has too many features that are unnecessary for the games, but that is all just assumptions.
My own game has some lag on mobile and I've tried hard to make it work well. But guaranteed would work great as a mobile app... (I've done some testing)

I wonder if anyone has a real answer, I would love to know why.

[totor]

"Am I missing something? "

- what is your phone, what is your browser, what is your html5 games websites, what is your android version, what is your favorite color?

On the same android tablet, the same game may run or not, fast or not, depending on browser.
On the same browser the same game may run or not, fast or not, depending on the css/html settings.

[ecv]

3 hours ago, blackmoondev said:

web gl support in the browser perhaps?

Maybe? I just installed Chrome. I didn't know I was supposed to install any extras? What's this webgl anyways? Opengl for the web?

 

2 hours ago, totor said:

"Am I missing something? "

- what is your phone, what is your browser, what is your html5 games websites, what is your android version, what is your favorite color?

On the same android tablet, the same game may run or not, fast or not, depending on browser.
On the same browser the same game may run or not, fast or not, depending on the css/html settings.

Xiaomi Redmi Note 2, Chrome, censored, Lollipop, purple. Seriously though, if this is really an issue with the websites, I wouldn't want to openly make a bad propaganda, so I'm afraid I won't tell. But I'm pretty sure these are some good games by widely experienced developers, so I'm taking for granted they knew what they (or whoever is in charge) were doing with their websites.

So, do I need to enable/install anything else on Chrome or Android to make them work smoothly? But if I have to, well, this is disappointing. You can't expect the average phone user to know this.

2 hours ago, rgk said:

[...]

I wonder if anyone has a real answer, I would love to know why.

I hope there's another explanation which doesn't involve the user fiddling with the browser... like... simply an underperforming phone or browser.

[ecv]

2 hours ago, True Valhalla said:

I don't know much about this specific phone model, but it sells for just $140 in China. That's dirt cheap...I wouldn't expect any kind of decent HTML5 performance from it.

Well, that's a bit of an oversimplified conclusion. Quality aside, I do expect some general good performance from it given its specs. But yeah, everything is possible. 

[ecv]

So in the event I wrongly generalized, can you guys tell me your phone models and some quality html5 games which will play smooth in your browser (specify)?

[ecv]

WebGL is working both on my native browser and Chrome. I read that cordova makes use of the native browser. And yes, suprisingly the games run smoother on my native browser than in Chrome. Problem is the native browser isn't playing sounds, and this seems to translate to cordova apps too. 

Anyways, I tried a few more games and they worked just fine: platform, space shooter, puzzles... I would have never imagined some puzzle games being resource hungrier than action games. I guess that as long as you keep performance in mind, you can hopefully get pretty good results... I won't dare say html5 is still not mature enough, but if all else fails I guess you can always move your game to a non-html5 engine. It still looks like a very appealing option for desktop in terms of monetizing, anyways.

 

[Boz]

It depends a lot of the API you choosed to build your game, and the way you coded it, for sure

Depending of which API is used, you may have some optimization tools you can use.
If your phone can do some work from GPU, do not hesitate. Use your own shaders can be the key

[DevJ]

I have also noticed this. I wonder why my smartphone (which is pretty damn bad) runs games like Pokemon Shuffle and Temple Run 2 (which even has 3D graphics and all) smoothly, and can't run a simple HTML5 canvas game as smoothly (really depends on the game). If it runs on my phone though, it runs everywhere (obviously flawed logic, but pretty much true since it's so bad and small in screen resolution).

[Mike018]

On 6/10/2016 at 7:39 AM, ecv said:

I am disappointed. I just bought a not-so-low-end device, mainly for testing purposes. It scores 50k on Antutu (yes, I heard manufacturers can make their chipsets score better without necessarily improving general performance), which is about twice what my old greatest phone did. It's still about a third of what an Iphone6s does, but allegedly it's still better than 86% of devices.

Okay, so I head to some html5 games websites and try a couple of (what I'd deem) top-end puzzle games. You know, they're nicely tailored, with good animations and all, but they're puzzle games, not sidescrollers with a hundred layers (I'm exaggerating of course). And the performance is soooo poor. Animations delay, user input delays...

I then checked both android versions of them and they worked flawlessly, even though they're probably just wrapped in cordova or some such.

So I'm wondering what's going on here? On my desktop all games run perfectly on Chrome, and in my previous phone, an LG p710 (no wonder) they underperform. But this underperformance on my new device took me by surprise. Although I realize maybe this technology is rather new, I'd have thought it'd work better today, not in 10 years?

Am I missing something?

The wrapper can make a huge difference in performance, and if you care about performance, no one would just use cordova. Even wrappers like cocoon actually convert some aspects to native level. 

As for HTML5 performance, it's actually pretty good, but most games are rushed. My first html5 game only had a few elements on the screen at a time, with maximum 5 animations and no HD graphics, and it lags more than my second game which can have 50+ elements and animations on the screen at once, with HD graphics and weather effects. 

[AhmedElyamani]

2 hours ago, Mike018 said:

The wrapper can make a huge difference in performance, and if you care about performance, no one would just use cordova. Even wrappers like cocoon actually convert some aspects to native level. 

As for HTML5 performance, it's actually pretty good, but most games are rushed. My first html5 game only had a few elements on the screen at a time, with maximum 5 animations and no HD graphics, and it lags more than my second game which can have 50+ elements and animations on the screen at once, with HD graphics and weather effects. 

What else should I use in addition to cordova? Is it necessary to optimize for crosswalk? (assuming I don't like cocoon). Thanks.

[Mike018]

8 hours ago, AhmedElyamani said:

What else should I use in addition to cordova? Is it necessary to optimize for crosswalk? (assuming I don't like cocoon). Thanks.

The only wrapper whose goal is performance in cocoon. Why use wrappers that don't optimize anything if you are looking for performance? Use crosswalk when making your initial games, then start using cocoon when you got the hang of things and start making more complex apps.

[b10b]

This Scirra blog entry has some decent benchmarks on the current (as of Q1 2016) performance of HTML5 renderers:

https://www.scirra.com/blog/175/the-great-html5-gaming-performance-test-2016-edition

I am posting it mostly in response to the comment about Cocoon vs Cordova.  The takeaway being that modern webviews are fast, by default, and Cordova (PhoneGap, XDK) directly benefits from that.  Therefore the huge performance advantage Cocoon had (in days before accelerated webviews) has largely been eroded.  To gain a few percent in performance while losing a significant percent of web features may not be such a wise strategy to someone without a legacy of knowledge around Cocoon (a proprietary platform).  And if performance is the #1 priority it may be prudent to look elsewhere than HTML5.