Detailed introduction to 5 suggestions for HTML5 game development and sharing of development tools

When you develop a game based on HTML5, you have many options. What editor to use? Are Canvas 2d and WebGL used? What rendering framework and game engine are used? These choices are largely dictated by the developer's personal experience and the platform on which the game will be released.

Luckily, there are now a lot of guides on HTML5 game development. This article is to tell developers some overall concepts that they should have before developing HTML5 games. What can you learn from this article? Here we will introduce some frameworks for HTML5 game development. You will know how to enable the games you design to run on more platforms, how to manage the status of online games, and how to deal with performance issues.

Without further ado, let me introduce some practical suggestions for HTML5 game development.

Suggestion 1: Use a framework

If you just write some small programs in HTML5, it is very simple, but if you want to add richer functions to your game, then there are many other things Needs to be dealt with.

For example, if your game has a large number of pictures, sound effects or other resources, then 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 a program, you may be surprised by the final results. Since graphics and sound files are downloaded asynchronously, your JavaScript script may start running before your resources are downloaded. This is known as "popping" (image display abnormality), 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 encounter is that your game runs at different speeds on different machines or even browsers. Although this may be outside of your control, you can still try to make the speed of your animations or actions not dependent on the speed of the game's running framework.

In fact, there are many game template codes now, which implement the functions required by most games. This way, developers don't need to program a complete game from start to finish. There are now many frameworks that can help developers design games. Developers only need to focus on 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 a suitable framework from many frameworks. Frameworks like ImpactJS are very powerful and can help developers in almost every aspect; while frameworks like EaselJS mainly deal with graphics work. In the end, it is up to the developer to decide which framework is more appropriate. This may seem simple, but in the world of JavaScript, choosing a framework also means you are choosing a specific programming style.

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

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

Ascended Arcade launched three games within three months, all using the ImpactJS framework

Although there are already many HTML5 games using it There are some frameworks, but there are still many developers who take the trouble to choose not to rely on any framework and develop completely by themselves. If you want to complete a task within a reasonable amount of time, using a framework is certainly the most efficient way to do it. Ascended Arcade is a good example. In just three months, they developed three games, all using the ImpactJS framework.

Recommendation 2: Consider small screen and touch screen devices

One of the biggest selling points of HTML5 is that it can be used on desktop PCs, laptops, tablet devices and even It runs on smartphones. (Here is a demonstration of the running effect of IE9 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 most important, the screen sizes of different devices are also different, and the aspect ratio and resolution of the screen may be very different. If you want your HTML5 to look good on mobile devices, make sure it supports multiple resolutions and doesn't exceed WVGA's 800×480 frame size. Additionally, because most mobile devices cannot display all page content on one screen, they often employ precise zooming and panning techniques that are often not 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. Zoom functionality on mobile browsers often conflicts with touch game controls and can be disabled by setting the "user-scaleable" parameter to "no".

Now that you are able to render your game view nicely on small screen devices, it’s time to consider how to handle user input. Most touchscreen devices have a virtual keyboard, but displaying one while gaming 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's best to have as little extra elements in your game as possible. Spy Chase does a great job in this regard, allowing users to control the cars in the game with just one finger.

Suggestion 3: Automatically save user records

Using site pinning, web browsers try to make Web Apps work like desktop apps. However, the idea of ​​making websites run like Apps is still relatively new, and similarly, the idea of ​​letting Web pages save client-side state is not yet mature. When closing a Microsoft Word document, users may think about whether the content has been saved, but they often do not think so carefully when closing a Web page. Normally this doesn't cause a problem - most web pages are stateless or store user 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 game's state in memory (RAM). Once the browser window is closed, the high scores that the user worked so hard to earn are lost forever.

You can ask the user to be careful not to close the game window in progress, but accidents always happen, especially when the user has multiple windows open or the battery is dead.

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

Where should you save 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 side, additional HTTP request overhead will be incurred. In the case of cookies, the space in which the record can be saved is very limited, and the lifetime of the cookie depends on the browser configuration.

A more efficient method is to use HTML5 DOM storage. DOM Storage provides an interface for key-value storage (or JavaScript-defined objects) 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 - which DOM storage may not support natively. Fortunately, JavaScript now 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 state and the JSON functionality in ECMAScript5:

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

Recommendation 4: Use profiler

The biggest challenge in game development is adding many After the function is implemented, how to ensure that the game still has a high frame display frequency.

The good news is that browsers have become faster and faster in recent years, and games based on HTML5 can already reach 60 frames per second.

This is amazing. For IE9, this means developing a new JavaScript engine that can take advantage of multiple CPU cores and a Direct2D-based hardware rendering pipeline. In other words, if you are equipped with a high-configuration game platform, IE9 can make full use of these hardware platforms.

IE9 integrates a JavaScript profiler that can find performance bottlenecks

For simple games, this means you don’t have to worry about its performance. But since HTML5 can run on any platform, this 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 as fast as you want. Even if your application is only targeted at high-performance PCs, game performance is an issue that must be considered.

If you require your game to reach 60 frames per second, this means that the rendering time of each frame cannot exceed 16 milliseconds. In other words, in the blink of an eye, you need to complete at least 6 frames of rendering work. It may sound a bit unimaginable now... but there are some extraordinary games that actually do it.

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

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

Don't trust your instincts too much - some code may look inefficient, but execute very quickly on some JavaScript engines. The best way is to analyze the program repeatedly from time to time. For modified code, you need to test it repeatedly to ensure that your modifications can indeed improve the performance of the program.

Games are becoming more and more social: Warimals is a game based on HTML5, users can participate in the game with friends on Facebook

Recommendation 5: Be creative!

Being able to develop games that run in the browser is a great thing, and 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 an ideal gaming platform.

Think about it... Browsers are on all kinds of different devices, they are often online all the time, and they are what people use for email, chat, and social networking. 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 Monitor and Web Console.

The following continues to introduce some HTML game development tools.

Canvas Debugger

In the latest version of firefox, we have added Canvas debugging in the browser. The Canvas Debugger allows you to track all canvas context calls, like drawing elements and using specific colorists, and it will call color encoding based on specific requirements. Not only is it 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 row to directly see the response of that part.

Shader Editor

When you create a game based on WebGL, it would be very cool to be able to test and modify the shader program while the game is running. one thing. You can do such cool things using the Shader Editor. You can modify vertex and fragment shaders without reloading the interface and see the impact on the output.

Web Audio Editor

There is a Web Audio Editor in the Firefox Aurora (32) version. This editor displays the connections between all audio nodes and the current AudioContext through charts. You can use it to view specific properties of each node. The Web Audio API provides the creation of more mixes, and the operation and processing of audio is much more powerful than the HTML5 Audio tag.

Network Monitor

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

#In addition, you can also visually see the performance analysis of the game 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 already have a commonly used one. development environment. If you are interested in a browser-side development environment, you can try the Web IDE, which is already available in the latest version of Firefox.

#Web IDE not only provides developers with normal coding, but also remote publishing, debugging, framework management, etc.

The above is a detailed introduction to the five suggestions for HTML5 game development and the sharing of development tools. For more related content, please pay attention to the PHP Chinese website (www.php.cn)!

#