Share: HTML5 game development experience and development tools

[[147896]]

When you develop a game based on HTML5, you have many choices. What editor to use? Should you use Canvas 2D or WebGL? What rendering framework and game engine to use? Most of these choices are determined by the developer's personal experience and the platform where the game will be released.

Fortunately, there are many guides on HTML5 game development. This article is to tell developers some global concepts before developing HTML5 games. What can you learn from this article? Here are some frameworks for HTML5 game development. You will know how to make the game you design run on more platforms, how to manage the state of online games, and how to deal with performance issues.

Without further ado, let’s start with some practical suggestions for HTML5 game development.

Tip 1: Use a framework

It's actually very simple to just write some small programs in HTML5, but if you want to add richer features to your game, there are many other things to deal with.

For example, if your game has a lot of images, sound effects, or other resources, the browser needs to download these resources from your game server, which often takes a lot of time. If you don't consider these issues when writing your program, you may be surprised by the results of the attack. Since graphics and sound files are downloaded asynchronously, your JavaScript script may have started running before your resources are downloaded. This is the so-called "popping" phenomenon (abnormal image display), and the sound may also play at the wrong time. A good solution is to create a pre-download mechanism to ensure that all resources are downloaded before allowing script execution.

Another problem you may run into is that your game runs at different speeds on different machines or even browsers. While this may be beyond your control, you can try to make the speed of your animations or actions independent of the speed of the game's running framework.

In fact, there are many game template codes that implement most of the functions required by games. In this way, developers do not need to write a complete game program from beginning to end. There are many frameworks that can help developers design games. Developers only need to focus on the specific game logic without worrying about the details of how to make the game run smoothly.

The only thing you need to pay attention to when using a framework is how to choose the right one from the many frameworks. Frameworks like ImpactJS are very powerful and can help developers in almost every aspect; while frameworks like EaselJS mainly deal with graphics. In the end, it is up to the developer to decide which framework is more suitable. It seems simple, but in the world of JavaScript, choosing a framework also means choosing a specific programming style.

 ig.module( 'monster' )
 .requires( 'impact.game' , )
 .defines(function(){
 Monster=ig.Entity.extend({eyes : 42 });});

Monster = ig.Entity.extend({eyes : 42});}); ImpactJS is a good example, it not only provides methods for image display and sound processing, but also inserts its own objects and models in the implementation.

Ascended Arcade released three games in three months, all using the ImpactJS framework

Although there are many HTML5 games that use some frameworks, there are still many developers who choose to develop them completely by themselves without relying on any framework. If you want to complete the task in a reasonable time, using a framework is of course the most effective way. Ascended Arcade is a good example. In just three months, they developed three games, all using the ImpactJS framework.

Tip 2: Consider small screens and touchscreen devices

One of the biggest selling points of HTML5 is that it can be used on desktop PCs, as well as laptops, tablet devices and even smartphones (here is a demonstration of IE9 running on Windows Phone 7 Mango).

HTML5 is inherently cross-platform, which usually saves developers a lot of work. However, there are some things that developers need to consider...

How SpyChase works on Windows Phone 7 Mango

First and foremost, screen sizes vary from device to device, and the aspect ratio and resolution of the screen can vary greatly. If you want your HTML5 to work well on mobile devices, make sure it supports multiple resolutions and does not exceed the WVGA 800×480 frame size. In addition, since most mobile devices cannot display all page content on one screen, they often use precise zooming and panning techniques that are not usually suitable for game writing. These features can be disabled programmatically using the viewport meta flag. The following code snippet can be used to make your game view automatically adjust to the actual horizontal width of the screen. The zoom function on mobile browsers often conflicts with touch game control functions. You can disable the browser's zoom function by setting the "user-scaleable" parameter to "no".

Now that you have your game view nicely rendered on a small screen, it's time to think about how to handle user input. Most touchscreen devices have a virtual keyboard, but showing a virtual keyboard while playing a game is a waste of space. You should develop a limited virtual keyboard that only provides keys used in the game (such as arrows). Of course, it is best not to use additional elements in the game as much as possible. Spy Chase does a good job in this regard, allowing users to control the car in the game with just one finger.

Tip 3: Automatically save user records

With site pinning, web browsers are trying to make Web Apps work like desktop apps. However, the idea of ​​making websites work like apps is still relatively new, and similarly, the idea of ​​making Web pages save client-side state is still relatively new. Users may think twice before closing a Microsoft Word document, but they are often not so careful when closing a Web page. Usually this is not a problem - most Web pages are stateless or save the user's records on the server.

But if you are dealing with browser games, the situation is completely different. Usually JavaScript code is executed on the client side, and HTML5 games usually cache the state of the game in memory (RAM). Once the browser window is closed, the user's hard-earned high score is lost forever.

You can ask users to be careful and not close the game window they are playing, but accidents will always happen, especially when the user has multiple windows open or the battery is low.

Long story short: When writing HTML5 games, it is best to save the player's progress status frequently. When the user reopens the closed web page, the user should be able to continue the game that was not finished before instead of starting over.

Where should you store user records? In the past, the answer was often a server-side database or a client-side cookie. But neither of these is the best choice. If it is on the server, there will be additional HTTP request overhead. If it is a cookie, the space for storing records is very limited, and the life of the cookie depends on the browser configuration.

A more effective way is to use HTML5 DOM storage. DOM Storage provides an interface for key-value storage (or objects defined in JavaScript) that can save several megabytes of data for each website. It is very convenient to use, but in HTML5 games, you may want to record some more complex data structures - these DOM storage itself may not support. Fortunately, modern JavaScript provides a mechanism to help developers compress a set of objects into some compact symbols, which is the JSON mechanism. Using this mechanism, DOM storage can save information in any format. The following two functions show how to use HTML5 DOM storage to save game status and the JSON function in ECMAScript5:

 functionsaveState(state) {
    window.localStorage.setItem("gameState", JSON.stringify(state));
 }
 function restoreState() {
 varstate = window .localStorage.getItem("gameState");
 if(state) {
        returnJSON.parse(state);
 }else{
 retrun null;
 }
 }

Tip 4: Use a profiler

The biggest challenge in game development is how to ensure that the game still has a high frame rate after adding many features.

The good news is that browsers have gotten faster and faster in recent years, and HTML5-based games can already run at 60 frames per second.

This is quite remarkable. For IE9, this means developing a brand new JavaScript engine that can take advantage of multiple CPU cores and a Direct2D-based hardware rendering pipeline. In other words, if you have a high-end gaming platform, IE9 can take full advantage of these hardware platforms.

IE9 integrates a JavaScript analyzer to detect performance bottlenecks

For simple games, this means you don't have to worry about performance. But since HTML5 can run on any platform, it means that the HTML5 game you develop should be able to run on any device or browser, some of which may not have the processing power you want as fast as you want. Even if your application is only targeted at high-performance PCs, the performance of the game is also an issue that must be considered.

If you require your game to reach 60 frames per second, it means that the rendering time of each frame cannot exceed 16 milliseconds. In other words, in the time it takes you to blink your eyes, you need to complete the rendering of at least 6 frames. Now it may sound a bit unimaginable... but some extraordinary games can really do it.

Fortunately, there are some tools that may be able to help you. In IE9 (or IE10), open the Developer Tools panel by pressing the F12 key. Select the "Profile" option and check "Start profiling".

Now stay in the area where you think performance needs to be improved for 30 seconds, the profiler will collect relevant data, and then select "stop profiling". You will see the cumulative execution time of each function in your game. Usually, you will find that certain functions take up most of the time. This way you can optimize those functions that are particularly time-consuming.

#p#

Don't trust your intuition too much - some code may seem inefficient, but it runs very fast on some JavaScript engines. The best way is to analyze the program repeatedly from time to time, and for the modified code, you need to test it repeatedly to ensure that your changes can really improve the performance of the program.

Games are becoming more social: Warimals is an HTML5 game that allows users to play with their Facebook friends.

Tip 5: Be creative!

Being able to develop games that run in the browser is a great thing, but what's even cooler is that you can use HTML5 to develop game applications on the browser! From a technical perspective, HTML5 is great, and the browser is also an ideal gaming platform.

Think about it... browsers are available on all kinds of devices, they are usually online all the time, they are the tools people use to receive emails, chat and socialize. Developers of browser games can use their games to connect people from all over the world.

As an HTML5 game developer, you must know a lot of cool development tools. In the Mozilla community, we have introduced many development tools for Firefox developers, including JavaScript Debugger, Style Editor, Page Inspector, Scratchpad, Profiler, Network Monitorand Web Console.

Next, we will introduce some tools for HTML game development.

Canvas Debugger

In the latest version of Firefox, we added Canvas debugging to the browser. Canvas Debugger allows you to track all canvas context calls, like drawing elements and using specific colorizers, which will color code the calls according to the specific requirements. It is not only useful when developing WebGL-based games, it can also be used to test Canvas 2D-based games. In the game below, you can see that the animation is broken down into many static images, and you can click on any line to directly view the response of that part.

Shader Editor

When you create a game based on WebGL, it would be very cool if you could test and modify the shader program while the game is running. This is what you can do with the Shader Editor. You can modify the vertex and fragment shaders without reloading the interface and see the impact on the output.

Web Audio Editor

In Firefox Aurora (32) there is a Web Audio Editor, which shows the connection between all audio nodes and the current AudioContext through a diagram. You can use it to view specific properties of each node. The Web Audio API provides more mix creation, audio operation and processing than HTML5 Audio tag is much more powerful.

Network Monitor

For HTML5 game developers, it takes expensive code to perform tedious testing on the game. If the game is running on a mobile device, you can use Network Monitor to intuitively see all network requests, system time consumption, type size and other attributes.

In addition, you can also intuitively see the game's performance analysis through Network Monitor.

Web IDE

Before developing a game, you must first choose a development environment. Similarly, you have many choices (Sublime, Eclipse, Dreamweaver, vi, etc.), the important thing is that you must have a commonly used development environment. If you are interested in the browser-side development environment, you can try Web IDE, which has been launched in the latest version of Firefox.

Web IDE not only allows developers to perform normal coding, but also allows remote publishing, debugging, framework management, etc.