HTML5 comes into play! How to use the potential of HTML5 in games

HTML5 vs Flash

The fact is clear: HTML5 is slowly becoming an alternative for its competition and it's perfect for small or medium-sized games. For sure it will bury Flash, due to to a few solid arguments.

When it comes to prototyping and conceptual works, HTML5 is the ideal technology. Checking mechanisms, functionality or creating a playable demo has never been so easy. Simplicity of use is extremely valuable in the production process because it allows us to save a lot of time.

The great merit is the compatibility and cross-platforming, because the same HTML code works on different browsers (and on different operating systems or mobile devices). Notably, web browsers are better adjusted thanks to putting them to rigorous tests. They provide greater stability and output than Flash (it's no need to install any plug-ins!), that works very slowly and has a security gaps.

Cross-platforming is a very important feature that arise from availability of Chromium. The engine can interpret JavaScript and display HTML which is CSS-styled. Chromium (which can be spread with its own code) interprets JavaScript as the browser and works on different operating systems.

It's true that a developer depends on the biggest players on the market (like Google, Mozilla, Microsoft) and is not able to improve existing bugs. However, this is changing! Worthy to follow is Mozilla that is working together with Epic Games on the launch of Unreal (game engine) in their browser.

How we do it - HTML5-based game like Kopanito

The idea of the advanced HTML5-based game originated about a year ago when we started to wonder what kind of production we would like to play and which is also an output gap. The first conceptual works (drawings, artificial intelligence, a comprehensive outline of the game) lasted half a year. When we had clearly outlined the plan, we got to work.

The task wasn't easy, because at the moment there are not many tools available (libraries and frameworks used to create JS-based games are still in beta versions). So sometimes we had to bring to life our own innovate ideas.

Artificial Intelligence

Although we can't call our game realistic and it's far from realism known from big-budget games (at Kopanito you can foul and don't be afraid of red cards), we had to implement different kinds of behaviour to our players. Each player react differently when running without the ball and when keeping possession. They swirl the different vial when attacking and when defending.

We needed to use state machine (and created it themselves) that allowed us to queue and parameterized all attitudes. What we have developed, we have created just for Kopanito. However, what has been developed by us, can be used for creating another games.

Chromium and nw.js

We based our game on its own engine running on nw.js. It's stable, but works only to a certain type of game (cautiously with 3D graphic!) and its biggest advantage is using HTML. Importantly, thanks to chromium, it's possible to edit code live while game is running. You can change CSS (including interface design) and make changes without reset the game.

Other engines focus on rendering graphics. With Kopanito we took different actions and focused on the mechanisms of gameplay. Because we couldn't use any tools, we decided to create something new - a mechanism used for artificial intelligence and controllers.

Ease in creating interfaces, controllers integration and sound or graphic supporting is the strength of nw.js. It is perfect for strategy games like management games.

Development time and why so... quickly?

HTML5 goes well with developing simple games that can be ready in a relatively short period of time (thanks to efficient prototyping). You need to spend about two weeks to make small game used in promotion (like made by Merixstudio Travel Rush). It's an ideal solution for companies that are looking for and interactive ways of advertising.

Of course, complexity and development time of the game depends on the Clients idea and requirements. We're still working on Kopanito and still improving our game (although it has been already marketed). The result of over a year's work is a very complex product: more than 100 national teams, 600 players and at least 152 matches in 16 different tournaments. It's an advanced HTML5-based game that is unique in the world.

HTML5-based games: pros and cons

It is a well-known principle - when we have pros, somewhere must be cons. It is no different in the case of games created with HTML5.

Pros

Cons

+ cross-platforming- problems with productivity on mobile devices(we do not recommend using with more advanced games)+ fast prototyping (time is money)- Chromium regression, a new versions mean new bugs+ browsers supporting that surely will grow- lack of capacity for creating console game+ low entry barriers - the widespread availability and highly developed technology- dependence on browsers creators

The article is also available on the website Mamstartup.pl (only Polish).