HTML5 limitations?

[ecv]

What are some know limitations of HTML5 games?

For Instance, I noticed most if not all games take quite a bit to start playing the music, but I don't know if it's just a problem with my system.

 

[Kartikey]

It is possibly not wrong with your system, HTML5 games mainly depends on Different Browsers.

HTML5 audio is both robust and limiting, depending largely on its implementation. It works well for simple sound effects, but leaves much to be desired for sound-intensive applications such as games.

[rgk]

For the most part, the biggest issue I would say with HTML 5 games is performance. Compiled games, with very similar logic, generally run much faster. This is most likely a Browser/JavaScript issue also.

[JazzAceman]

I think audio is currently the biggest limitation, especially on mobile devices. Some devices supports only the audio element, but have strict limitations. Others supports the WebAudio API, which is more complicated to handle, but solves some of the problems of the audio element. 

And the game size is a problem due to the loading time, also especially on mobile devices. Like native apps, you should have an eye on your memory consumption since some mid class mobile devices only have 512 mb of RAM.

Performance itself can be a problem if the target platform doesn't support hardware acceleration. But except for that, you can make mobile HTML5 games which can compete with native apps. 

[ecv]

Thanks everybody for your valuable input. I guess the conclusion is to keep an eye on how sound and resources are managed to get a decent performance.

[ecv]

... So this leads me to my next question: Is it possible to sync music and animated sprites? Because I have the feeling animations themselves don't keep up a steady rhythm, although I'm unsure if the reason lies in the engine, system performance, browser...

[WombatTurkey]

1 hour ago, ecv said:

... So this leads me to my next question: Is it possible to sync music and animated sprites? Because I have the feeling animations themselves don't keep up a steady rhythm, although I'm unsure if the reason lies in the engine, system performance, browser...

 

Quote

 

I think audio is currently the biggest limitation, especially on mobile devices. Some devices supports only the audio element, but have strict limitations. Others supports the WebAudio API, which is more complicated to handle, but solves some of the problems of the audio element. 

 

 

Yeah, try https://github.com/goldfire/howler.js/

This uses "real" HTML 5 audio and polyphony playback works wonders on it. Should help with all your audio issues (consecutive playback, control, looping, streaming, etc)

 

[ecv]

Thank you WombatTurkey, unfortunately I can't "like" your post yet. Hit daily limit 

I'm not yet familiarized with html5 development, all the less with html5 sound management, but the polyphony playback you mentioned makes me believe it'd be possible to implement a midi or sound tracker like player and both save bandwidth and achieve the synchronization. Sounds really cool.

 

[WombatTurkey]

4 hours ago, ecv said:

Thank you WombatTurkey, unfortunately I can't "like" your post yet. Hit daily limit 

I'm not yet familiarized with html5 development, all the less with html5 sound management, but the polyphony playback you mentioned makes me believe it'd be possible to implement a midi or sound tracker like player and both save bandwidth and achieve the synchronization. Sounds really cool.

 

Yeah, you can do some awesome things in the HTML 5 world! The only downside I guess I can think of is if your games starts to get really big. The responsiveness around the DOM/CSS is just not as "fluid" if  you will, as compared to a native application. This becomes barely noticeable in the beginning, but once your games grows, you can really start to "notice" the UX and its degradation of responsiveness. This is something that again, is rarely noticeable, but you can tell the delay gets worse. Obviously a lot of factors come into play here (memory leaks, css properties, dom updating rate, background videos, etc, etc) -- This could be fixed by creating your own UI system in WebGL, but that's just a lot of work.

Another downside is the background throttling that is enabled for minimized windows on Firefox, IE, Chrome, and others. This is just unacceptable for multiplayer games. Especially when your game is using a physics system. Obviously there are way around this, using web workers, but it's a hassle. I got NW.js and Electron to fix this and let us disable that throttling that occurs. So if you do decide HTML 5 and start making something large, using Electron/NW will be there for you. Wish you the best

 

[programicks]

On 27/05/2016 at 2:45 PM, JazzAceman said:

Some devices supports only the audio element, but have strict limitations.

The following code for using the audio element complete with playing several sounds at once I have recently tested and works in a number of mobile browsers including chrome mobile, firefox mob, cm browser, dolphin.

//sounds
var _f15416917 = 0;
var div = document.getElementsByTagName('div')[0];

	var sounds_div = document.createElement("div");
	_sounds_div.setAttribute("id", "_sounds_div");
	_sounds_div.style.position = "absolute";
	_sounds_div.style.width = "580px";
	_sounds_div.style.height = "100px";
	div.appendChild(_sounds_div);
	document.getElementById('_sounds_div').innerHTML =
	"<audio id='music_3' preload='auto' loop>"+
		"<source src='./assets/sounds/music.mp3'>"+
	"</audio>"+

	"<audio id='sound_1' preload='auto'>"+
		"<source src='./assets/sounds/sound_1.mp3'>"+
	"</audio>";

	var _music_3 = document.getElementById('music_3');
	var _sound_1 = document.getElementById('sound_1');

	//check if loaded
	_music_3.addEventListener("canplaythrough", function()
	{


  	});

  	//check if loaded
	_sound_1.addEventListener("canplaythrough", function()
	{


  	});


	//when ready to play sound, use this:
		//_music_3.play();

var touchzoneS = document.getElementById("canvas");
	touchzoneS.addEventListener("touchstart", __drawS, false);

	function __drawS(evvS)
	{


		//play and stop all sounds to be used on touch so they will work in mobile browser
		if (_f15416917 == 0)
		{
			_music_3.play();
			_music_3.pause();
			_sound_1.play();
			_sound_1.pause();

			_f15416917 = 1;
		}
}

The code above assumes you have a div in your html file with your canvas inside. Also, change the var touchzoneS = document.getElementById("canvas"); to match the id of your canvas and obviously things like the source mp3 links.

[programicks]

When I edit my post, I choose Javascript but the code snippet is still showing in black and white. I thought this was colour-coded? *edit* now showing in white and yellow after refresh :-)