Recently i finished my first medium-sized HTML5 game - Medieval Defense Z.
I came from flash background and developing for HTML5 presented with some new challenges. So i would like to share what worked and what didn't.
This is more like review/tutorial type of thing, so hopefully someone will find something useful.
• Smooth gameplay and animations.
• Quality comparable to flash games.
• Editing: HaxeDevelop IDE. Freeware, great code completion and very fast compared to everything i tried.
• Debugging: Chrome. Has console, debugger and profiler.
• Rendering library: Pixi.js. Uses display list concept like flash. Works well.
• Sound library: Howler. Good enough, the id system is a bit weird though.
• Bitmap font exporter: http://kvazars.com/littera/. Free and web-based.
• Sprite Sheet Packer: https://spritesheetpacker.codeplex.com/. Freeware and very simple.
• Scaling will look ugly if you use many small png files for textures.
• If you want nice scaling, fast load times and fast rendering - pack everything to 2048x2048 spritesheets (include bitmap fonts too).
• Resolution of assets: 1024x768, background can extend to 1382x768, so it covers most aspect ratios in horizontal orientation.
• To get proper native resolution in mobile browsers i scaled up renderer and scaled down canvas by window.devicePixelRatio.
• Library: Howler.
• Sound formats: ogg for Chrome and Firefox, m4a for Safari and Internet Explorer (note: mp3 has licensing issues with play count).
• ffmpeg: because of licensing issues and whatnot can't convert to m4a, unless you recompile ffmpeg with m4a, which is a pain to setup.
• I used MediaHuman Audio Converter (freeware) to convert from wav to ogg and m4a (64 bit).
• iOS Safari: keep in mind that before any sound could be played, user must first tap on the screen.
• Mouse Events:
• Used pixi.js API to open links.
• iOS Safari: window.open under "touchstart" event won't open links in new tabs, use "tap" event instead.
• sprite.on("mousedown", callback) for desktop.
• sprite.on("tap", callback) for mobile.
• Reuse frequently used sprites.
• Avoid creating too many objects every frame.
• Record timeline with Chrome profiler to find performance bottlenecks.
• Masks are slow. Use trim if you only need a simple cut.
• Very large functions may cause lag spikes. My best guess is that browser is trying to optimize the function. Splitting big function into several smaller ones solved my problem.
• Game Debugging:
• Simple CSS + DOM side menu.
• Basic field view/edit.
• Simple buttons with callbacks.
• How to debug html5 game on android (mobile) with desktop chrome (PC):
1. Upload game to your website.
2. Go to (desktop) chrome: chrome://inspect
3. Connect Android device with USB and run your game on android chrome (your android device must be enabled for development).
4. Open Command Prompt and enter: adb devices (must have Android Debug Bridge installed).
5. To quit debugging enter: adb kill-server
• Would have liked more automated solution for spritesheet and sound stuff.
• Poor performance bites sooner or later, so be prepared to do extensive profiling.
• Stable 60fps is very hard to achieve, even if you keep your code below 1-2ms per frame.
• Overall i am happy with the results, however it took longer than expected to make this game.
Any feedback is appreciated.
Game Link: http://html5games.vooxe.com/a90bd3f1fba643828ccfb0109b41a252/index.html