Difficulties in HTML5 game technology development

Advantages and disadvantages of HTML5 games

Recently, public gaming platforms are in full swing, and HTML5 games are also gaining popularity. What are the advantages and disadvantages of developing HTML5 games compared with traditional games?

First of all, the advantage is that cross-platform games are the most popular. Developing a set of games can seamlessly switch between PCs, tablets, and mobile phones, and the unified standard API is also very convenient for developers. Secondly, HTML5 native browser support does not require any plug-ins, which is also a great advantage for users. At last, it was strongly supported by major companies, such as Google, Microsoft, Tecent, and UC web.

However, the disadvantages of HTML5 are mainly reflected in the lack of performance and the lack of special APIs for game development. This article will share with you in HTML5 game development, common technical bottlenecks and solutions.

Input Event Response

In general, the number of clicks on a game player is quite high, and the number of clicks can reach 120 per second. A game shows as smooth as 30 FPS, and the human eyes can hardly feel at intervals. So how can I deal with these input events in HTML5? Due to the single-threaded nature of JavaScript, if you can handle these input events without any restrictions, you can imagine that the UI will be completely blocked.

The solution consists of three steps:

1. record each input event in the cache, instead of processing the event immediately

2. Process Cache during each Rendering

3. automatically clear events that have been processed in the cache

The example program is as follows. In the case of buffer and no buffer, we always press the button to observe the changes of the instantaneous FPS. By testing the buffer on IE, the performance is about 20% higher than that of no buffer. When the click frequency is high, the performance improvement is more obvious. You can download the App and test it on the local machine. In the attachment to this article: download.

 

Timeline

Friends who have developed Flash games must have feelings for the timeline and are very convenient for key frame animation. Is there a timeline available in HTML5? How to precisely control frame animation.

There are two solutions:

1. The setInterval animation can be used for the purpose, but the setInterval precision is relatively low. In idle state, the precision of setInterval () is 10 ms. The sample code of setInterval is as follows:

2. A better solution is to calculate the number of rendered frames in each second, set a small callback interval, and only render the frames at the right time, so that you can conveniently obtain FPS information, the sample code is as follows:

Layer

Layers are a very important concept in game development. Using layers, you can separate active objects from static objects in the background for rendering and drawing separately, only re-paint the necessary parts and cache frame animations in fixed mode to improve performance. Through layers, game logic can also be encapsulated by Play/Stop/Show/Hide. In event processing, layers are equally important. By only processing events that fall on layers, you can improve the gaming experience. However, there is no layer tool in HTML5, which makes development more difficult for game developers.

The first solution is to share the logical layer of the canvas. The specific steps are as follows: use the same canvas to encapsulate the drawing code into a layer based on the logical relationship ". The difficulty of this method lies in how to minimize the re-painting area. Its advantage is to maximize the Drawing Performance and facilitate timing function; its disadvantage is that the layers cannot be completely independent and the same content needs to be re-painted repeatedly. This method is suitable for scenarios where a large number of dynamic elements exist.

The second solution is to create multiple Canvas Nodes Based on the hierarchical relationship of DOM elements. Each canvas node is rendered independently, and the zIndex layer-level relationship is used. In this way, layers do not interfere with each other, and the business logic can be completely independent. The disadvantage is that dynamic rendering is inefficient. Applicable scenarios include background animation, game menus, and independent animation components.

Its structure is as follows:

Key Frame

In Flash game development, you can quickly create an animation by setting the key frame. In HTML5 games, you can set the key frame using the following methods:

Step 1: Draw the Key Frame in advance and make it into an image. then configure the time point at which the frame appears, the interval between the frame and the frame, and finally package the key frame image into the whole image.

This method corresponds to two schemes: the Canvas scheme and the CSS Animation scheme. The Canvas scheme uses drawImage to draw images. Key Frames are dynamically drawn by setting an appropriate clip area. You can use getImageData/putImageData to draw images. CSS Animation schemes keyframes and Timing functions are used to operate.

Audio Effect

For details about Audio effect processing, see the introduction in another article: Develop game music using HTML5 Audio API.

Canvas Drawing Performance

Canvas drawing is the most important point in game development. It is a performance analysis of a game. It can be seen that stroke occupies 84.74% of the performance.

You can use the following methods to improve the Canvas performance:

1. partial objects in the pre-Rendering scenario, and finally Stoke ()/fill () at a time ()

We tested the direct rendering scheme and pre-rendering Scheme respectively, and the results showed that there was nearly 100% performance improvement in Chrome.

2. horizontal/vertical line plotting has better performance than diagonal lines. You can also use Rotate or Scale to avoid multiple plotting operations, as shown in, diagonal lines, quadrilateral and so on can be obtained from the left square through deformation.

3. Avoid repeated pixel operations. In games, a role often has different color schemes. At this time, we adjust and overlay colors and transparency to make operations more efficient than direct pixel operations. For example, we need Huang Zhong in rendering, and we also need green and purple. Then we can use several basic colors to overlay them to achieve better results.

Drawing Performance of Canvas has always been the most tedious task for game developers. The three alternative Canvas options are listed below, but they also have their own disadvantages:

1. WebGL-2d uses webGL to render 2d canvas, WebGL can fully use GPU for rendering, improve performance. However, currently, browsers do not support WebGL as much as Canvas, especially on mobile browsers.

2. SVG + CSS3

Adobe Wallaby exports the Flash Animation to SVG + CSS3 Animation.

3. DOM elements are used in simple animations.

Use Absolute positioning to change left/top/right/bottom and CSS translate for animation.

The second and third schemes are only suitable for simple animation scenarios.

Reference

1. Cocos2d-HTML5 https://github.com/cocos2d/cocos2d-html5

2. Huan Du, HTML5 game challenges and solutions

 

  AttachmentDimensionsDownload draw-circles-demo.zip1.51 KB