High-performance animations and games based on HTML5

In fact, this article similar version in 12 in the online everywhere appeared, also with the rise of HTML5, the new features of HTML is also much sought after developers, nature-related HTML5 high-performance animation and game related articles are endless, the author is also in contact with the relevant technology in 12, but the saying goes " Interlacing as Foster ", with the arrival of the large front-end era, the front-end of the scope of work and knowledge boundaries are also expanding, the need for knowledge structure and knowledge system is also constantly rich, and recently based on the team constantly need to have new people have this knowledge reserves, so there is this article. Of course, this article does not provide any part of the complete code, the party also please bear in mind to see it, understand the principle of implementation is actually a very simple thing.

What is an animation? What is a game?

　　As mentioned above, since the face of new people, so it is necessary to start from the root. The first thing you need to go back to is "what"?

The definition of a certain degree is quoted here:

　　"The concept of animation is different from the general meaning of the cartoon, animation is a comprehensive art, it is a collection of painting, comics, film, digital media, photography, music, literature and many other art categories in one of the artistic expression form." Britain, which originated in the first half of the 19th century, flourished in the United States, where Chinese animation originated in the 1920s. Animation is a young art, it is the only definite date of birth of an art, October 28, 1892 Emire Reno for the first time in Paris, the famous Glefan Wax museum to the audience to show the optical film, marking the official birth of the animation, while Emire Reno also known as "the father of animation." Animation Art after more than 100 years of development, has a relatively perfect theoretical system and industrial system, and its unique artistic charm by people's favorite.

There are many expressions in English animation, such as animation, cartoon, animated cartoon, Cameracature. One of the more formal "Animation" is derived from the Latin word root anima, meaning "soul", the verb animate is "to give life" meaning, extended to make something to live up meaning. So animation can be defined as the use of painting techniques to create the art of life movement. the definition of animation technique is the image technique of moving the object by frame and continuously playing. No matter what the subject is, as long as it is taken in the form of a lattice, watching the continuous play formed the active image, it is animation. "　　Of course, the author also heard of another version of the animation originated in China's comic strip, of course, this is something, back to the point, regardless of historical factors and cultural factors aside, single on the technical realization of the animation is actually "using frames by frame shooting object and continuous play and the formation of image technology."　　such as: In the user's horizon, from left to right continuous width display this kind of picture can give a person to look like this "ball" moved up the same feeling.　　Plainly speaking, in fact, the use of the human brain "brain hole" and the eyes of the "visual Persistence", the original "continuous" world abstract into a "discrete" world, and then use a similar "integral" way to accumulate each picture, forming an animation. Here is also worth mentioning is "frame", believe that the movie, play games of children's shoes have a certain understanding of this frame. In layman's terms we refer to how many frames per second (FPS), such as 24 frames or more we will not feel the "card", this is because our eyes can keep the picture we see temporarily in the brain for about 1/24 seconds, so as long as the guarantee to display 24 consecutive images per second, Then the normal person can actually feel a continuous image. But in turn, the increase in the number of frames does not change the human eye on the image recognition mechanism, so the animation "attack on the Giants" part of the series using 60 frames per second technology, as well as last year's release of the "Billiern midfielder story" and even 120 frames/second of the session, In fact, most people's eyes or say the brain is not handled, then the question came, they do so what is the use of it? 　　Children who are interested in shoes can be studied, because the subject is too far away from the paper. Next is the game, because the game covers a wider range, and here is just a superficial explanation for the games involved in this article: "They usually involve animations when they can interact." "Of course, here is stripped of its greatest value" to bring happiness. In fact, living in this internet age, the game has become one of the essential elements of life, more or less, or deep or shallow, the game is the reality of life as a transfer of goods or more role, this article will not repeat. How do I implement animations and games? Next, let's talk about "what to do" problem. The implementation of the animation has been mentioned above, combined with the technical background of the author's front-end, here is a list of some of the approximate animation implementation: Non-JS: CSS3 provides us with two very useful features, so that we can use the non-JS method to achieve animation, and very simple. So, first of all, transition, strictly speaking, it is not an animation, at least the literal translation of it should be called transition, but we often use this property in our daily work to quickly achieve simple animation effect, here is attached links, if not clear children's shoes can be consulted, the other is Animation, which is also a new feature of CSS3, which should be a real property of animation in various meanings, combined with the use of keyframe, you can implement many of the animation effects you want to link.　　Of course, the animation based on CSS3 is also a branch of HTML5 animation, to improve performance, but also need to use 3D acceleration, such as preserve-3d,will-change,translate3d and other hack technology to improve the experience, but this article does not unfold here. Focus on another, but also this article is focused on the point, JS Animation implementation: First we need a drawing container (although the div is also a choice, but it is too old, and it is not related to HTML5, this article only to explain the canvas), give it a name, and then find it by JSvar canvas = document.queryselector (' Yourcanvasid ');//Of course with getElementById is also possible, after all, it is not compatible with the problemThen, since it's "painting," We need a paintbrush:var ctx = Canvas.getcontext (' 2d ');//Why is the brush called "CTX"? This is actually the context abbreviation, which is a reference to the drawing object provided by the Canvas API Get the pen, by what means draw it:ctx.drawimage (yourparams);//This Overloads n times (?) method is very complex when it comes into contact (laughter)In this way, you can draw a frame of the image you need to draw, as The picture needs to be loaded before it can be drawnThe basics, it's not going to start here. Next, we need to make it move, what should we do? We need every fixed time to call the DrawImage method, constantly update the pattern in the drawing container, let our eyes see the effect of motion:Requestanimationframe (Yourticker);//Of course this is a function that requires self-invocation, so make sure you don't let it die loop  Of course, settimeout and setinterval are available, but compared to the latter two, Requestanimationframe will not lead to memory leaks like its predecessors, and time slice error is the appearance of leaky frames.　　To sum up, we just have to make it self-invoking to achieve our goal. Have had other language experience especially engaged in the client development of the child shoes should be familiar with the above process, we want to implement animation through the code is often a pretty thankless thing, like in the "sequence frame", if using CSS3 to achieve animation, Only need to use Keyframe to drive background-position or transform changes, but to do so by code, we need at least one interval handle to help us to invoke the method of drawing at least 1/24 seconds, Manually let the picture show the part that we want him to show, which is actually a pretty useless thing, and if using CSS3 does not require you to be so troublesome, writing a frame animation may be over. Of course this is why CSS3 has the animation attribute, but with the development of the business (or. People "Brain hole" getting bigger? We need to play more and more "tricks", CSS3 's animation solution is probably the Web dimension of the animation problem, and the canvas API to solve WebApp animation and game problems. To give a chestnut: we need to make the animation "move", or create and the user's complex interaction, this time what to do?　　Perhaps CSS3 play a very slip of the children's shoes will say, CSS3 can still achieve these! Yes, indeed, I have done so. But when you open the chrome devtools, especially see your page in the execution of your complex CSS3 animation is produced by the same frame rate changes as the paint flashing and fps meter, you will find, particularly, when you painstakingly write those animations on the phone ( Especially a few years ago on the Android machine), s**t, why so card?　　The computer is clearly good! Although the technology is changing rapidly, but the performance of the WebView based on the browser is still limited, it is not a free to play a stage of creativity, we think in the realization of the mind, we also need to consider the performance issues, when reflow　　Repaint and other browser rendering mechanisms once again, the canvas is a panacea (and of course, history is always strikingly similar). Pulling so much, back to the problem of animating and playing the game, and then moving backwards, we continue to inject event snooping into our scene (which, of course, is ideally supposed to be event capture)  stage.addeventlistener (' Click ', Yourclickhandler, true);//Here we need to add event snooping to the canvas's superiors, the entire stage .This action builds the interaction between the user and the animation, making it one of the most elementary games. 　　Everything was born in this way. Remember the first time to write a game, can think of a word "God said, to have light, so, then there is light" do not know how many people will and I have the same feeling (laughter) This is a fast-food era, if faster practice?

After simply finishing the principle, many children's shoes may be the author just know the principle of the time, there are the same problems, the Times developed so fast, we do not have the time to heap a set of such things out? This problem also puzzles the author, in the past 2016 years I have encountered such a scene:

Business party needs in the Spring Festival on-line 5 HTML5 games, the time basically only two weeks, the whole project in the script is not, personnel undecided, resources did not, but the schedule has been determined under the harsh conditions

This is a typical "Black Swan" event for 2016 years of the year, but since it has happened, what we can do is "face the uncertainty". This time I also remember to learn HTML5 in the early 2012 to try to write a HTML5 game engine, but also through the balance of the team to consider, eventually choose a pretty source H5 engine Hilo, for rapid development. Although the internal event mechanism still have some doubts, but the overall API usability, ease of use, as well as a web-side such a feature, the author finally chose this engine, the successful completion of the "Party a abuse my times, I will be a first-party, such as love" demand.

Back to this question, perhaps this time we are faced with a game development needs, next time maybe a other what the development needs, in this rapidly changing, developing era, as a front-end engineer (remember, we are engineers), how should we do? I remembered another book by Nassim Taleb, author of Black Swan, "anti-fragility," which he wrote on the title page.

"Benefiting from uncertainty"

I hope you and I can all benefit from it.

　　

　　some perhaps a useful little knowledge

Reasonable article to the above should be over, but said a bunch of people understand the words is also too boring, the following list to collect a bit of their own practice in the work, I hope that the child shoes when the pit can help everyone:

1, the first is about the canvas, is also our old monk talk about screen vs multiple times screen problem, we all know that the mobile phone is at least twice times the screen, then smart you will certainly think, since the pictures are required for twice times the screen to do the adaptation, then the canvas should also have similar problems, right? Yes, canvas will also cause blurred images due to the twice-fold screen of the phone, the simplest way to handle this is:

Your DOM gives a twice-fold-wide canvas:

　　<canvas width= "Yourscreenwidth * 2" height= "Yourscreenheight * 2" ></canvas>

Also, before drawing again, scale your CTX to the original 1/2:

　　Ctx.scale (. 5,. 5)

If you want to know the specific reasons for the children's shoes, may wish to ponder why.

2, presumably many students have had the experience of using REM to develop a responsive page, so that the page can really fill the entire screen, but if it is canvas it? Can the REM implementation still work? In fact, all you need to think about this problem, such as you play such as LOL, DOTA, or so-so, it will be because of your screen changes and proportional change? It was a good answer.

3. As with CSS3 's rendering, turning on hardware acceleration is often a small number of ways to address performance bottlenecks, and there is a WEBGL solution on the canvas platform to optimize the performance of your HTML5 app.

4, perhaps the careful children's shoes in the above also found, why use event delegation to add monitoring? Because the entire canvas container is a EventHandler, based on performance considerations, this is one of the best performance scenarios (as for the implementation, the event queue is also quite mature thinking, here will not repeat). In the same way, all the calls that need to be deferred will be handled with the only ticker that has been started.

Now can think of these, perhaps the future encountered a new pit will also be updated.

Then in the end it is customary to sublimate the subject. Born and fortunate, in the forefront of the most rapid development of the past few years to choose the right line, into the line, and step by step to today, with the front-end of the tide swept around the world:

Animation Game Node Database Hybridapp

This reminds me of the famous Schlosshotel römischer Kaiser Gueos Youli Caesar said:

I came, I saw, I conquered

Perhaps the current wave of the big front is exactly the same, but in the end the Great Emperor (no Crown emperor) died in front of his own Senate.

High-performance animations and games based on HTML5