HTML5 Game Development
   
  • HOME
  • News
  • Tutorials
  • Engines
  • Demos
  • Tools
  • Partners
  • Mobile HTML Game
  • Guess The Celebrity
  • About us

Commentary on: 5 Best Practices for Building HTML5 Game

Kai Jager writing for MSDN has posted 5 tips for best practices for writing HTML5 Games – here’s his 5 tips (with my comments on each):

1. Use a framework

Kai’s point is that while at the basic level, making a HTML5 is pretty straightforward, to build a “professional” level game there’s a lot of nitty-gritty details such as asset loading and timer shenanigans that need to dealt with. His recommendation is to use a framework such as Impact.JS. While in theory this is a good idea, I’d recommend understanding the basics of HTML5 game development before you put too many abstractions between yourself and your game. HTML5 Game engines are fairly new and are “leaky abstractions” – they are new enough that you’ll often need to make significant modifications to do anything out of the ordinary. Failing to understand the technology your game is going to be built on means your going to run into problems you can’t solve when you open up the Impact source code and have no idea what’s going on.

2. Consider small- and touch-screen devices

Great idea – especially with the metro interface launching with windows 8 – where touch screen devices will become first-class citizens in the general computing world. HTML5 is the only technology that should work across any modern device – so use that to your advantage by considering different types of devices and resolutions right from the start.

3. Automatically save the player’s progress

User, especially on mobile or at work will jump in and out of your game frequently – so letting them jump right back into where they were originally should be an important consideration. I’d add also that you should load your assets progressively – so the user doesn’t have to sit at a long loading screen just to get a 5 minute game break.

4. Use a profiler

Games need to be as-fast-as-possible, using a profiler is the only way you’ll get that extra performance out of your game – and please don’t assume what you think is fast is going to be fast – there’s lot’s of levels of optimization going on, so tricks such as loop-unrolling might end up being a net performance hit when compared with optimizations the JIT compilers of today are doing.

5. Be creative

Not much to say here – other than HTML5 opens up lots of new opportunities to take games out of their confined boxes (whether literal boxes like the XBox or figurative ones like the flash player SWF box we’re used to on the web) – so go shift some paradigms.

Check out the full article

Share List

You might also find this interesting:


  1. Building HTML5 Metro Games For Windows 8 With windows 8 bringing HTML5 to the forefront via the Metro interface, it will be possible to build HTML5 Games as “native apps” that have access to native features of...

  2. GDC 2012: Best practices in developing a web game Google engineer Colt McAnlis gave a talk at GDC2012 targeted at game developers who are interested in building games on the web. Description from Youtube: There’s a new wave of...

  3. CocoonJS HTML5 Native App Acceleration and Monetization tool CocoonJS is a HTML5 wrapper technology from ludei that allows you to package your HTML5 game on mobile devices, including iOS and Android, with no code changes and benefit from...

  4. HTML5 Game Development Tips From Gamzee Sean Soria of Gamzee has posted a guest blog over at Facebook chronicling the hoops they jumped through to make a speedy, isometric game in HTML5 that would run acceptably...

  5. Building a Google Chromecast Game The Chromecast USB device is thought of as a device to beam content onto big screens. Its mainly used to beam movies and tv shows. This “casting” action is done...

HTML5 Game Dev Tutorials

License HTML5 Games

Are you a company looking to license HTML5 games? We recommend MarketJS.com, a B2B platform for licensing games.

MarketJS has over 300 HTML5 games for licensing. They also provide additional services such as game reskin, custom development, and white label portals.

Html5 Game Development


Follow @GameDevHTML5



WHAT’S NEW

  • HTML5 Games in Guest Room Tablets

  • What’s New in Phaser 3.50

  • Particle and Sprite Editors in Babylon.js 4.2

  • Healthcare Industry HTML5 Games

  • Games for Events Example



NEW DEMOS

  • Vertical Endless Runner Prototype

  • Particle and Sprite Editors in Babylon.js 4.2

  • Song Maker in Google Experiment

  • Phaser 3 Experiment for Drawing Cards

  • HTML5 Game for a Recycling Campaign


ENGINES

  • Phaser 3 Game Object Pools Tutorial

    Memory allocation inside update loops often causes framerate problems in real-time gaming. One of the best solutions to this is to use Object Pools in Phaser 3. An Object Pool …Read more

  • Games During The COVID-19 Pandemic

    There so many effective ways to engage your audience with HTML5 games. Here is an example of how to run a game campaign to keep users motivated during difficult times. …Read more

  • Building Simulated 3D HTML5 Games With Phaser

    Phaser is commonly used as a 2D game engine for creating HTML5 desktop and mobile games. However, with the help of three.js and Phaser 3D library, you could render your …Read more

SEARCH OUR ARCHIVES

CONNECT

rss twitter

HTML5 Game Development is proudly run by 3P Solutions Inc

GOT NEWS?

Send new engines, demos, information and tips to hello@html5gamedevelopment.com

MONTHLY MEETUP

In boston? Join us for the Monthly HTML5 Game Development meetup.

BOOKS

We're in the process of writing a few books about game development. Coming soon!

Copyright HTML5gamedevelopment.com