Welcome to Tencent Cloud + community, get more Tencent mass technology practice dry goods oh ~.

Author: Chen Yang

I joined Tencent in 2011. Now I am working in Tencent Game Value-added Service Department, responsible for AMS game marketing platform, and committed to researching and promoting the development of Web and big front-end related technologies.

1. Wechat mini games — H5 mini games and wechat mini programs

Micro channel games, H5 games and micro channel small program, what is their relationship? Just like this picture, wechat mini game is actually the H5 mini game that can run in wechat mini program at present. It belongs to both wechat mini program and H5 mini game. And there’s actually a difference between these three, which WE’ll talk about later.

Two, H5 games

What is H5 mini game

First of all, what is HTML5

HTML (Hyper Text Markup Language) is a hypertext Markup Language.

HTML1 was developed in 1991.

HTML1 was released in 1993.

HTML4 was released in December 1999.

In 2004, the WHATWG came up with Web Applications 1.0, the precursor to the HTML5 draft.

In 2006, the W3C and the WHATWG decided to work together to advance a new version of HTML.

In January 2008, the first official draft of HTML5 was released.

In October 2014, THE W3C announced the release of HTML5.

New HTML5 rules: reduce the need for external plugins such as Flash;

New HTML5 features: Canvas, Video, local storage, Websocket, new content elements, etc.

As you can see, IT was html4 in 1999, but it wasn’t until 2014 that the W3C, the World Wide Web Consortium (W3C) officially announced the release of HTML5. It was a long and arduous process. And there were some episodes, such as around 2006, when Flash was popular, many sites flash, but also some representative flash games, such as Mini Flash. I don’t know if you have any impression, but it is very interesting that a few small people can play and fight.

At that time, there was also a famous blitz empire that could upload their own Flash works. These are from around 2006.

But H5 development, broadly speaking, is a collection of technologies. In Figure 5, I have listed some of the main points, such as the basics and standard specifications, including HTML5, CSS3, ES (we are currently developing mainly from es6 specification), There is also typescript (one of the biggest differences between typescript and javascript is that typescript is strongly typed), as well as other W3C specifications such as DOM/BOM (browser object model such as window.xxx). Then there are the familiar development and debugging tools for H5 development. Then in the area of security and performance optimization, CSRF/XSS are common.

WebAssenmbly is a javascript interpretive language that is relatively slow in performance, especially for complex web applications. In 2009, Google added JIT to its V8 engine. With a buff, it’s about 20-40 times better. JIT is compiled based on runtime analysis, and javascript is a typeless language, so most of the time the JIT compiler guesses the type, and if it guesses the type wrong, it has to start all over again. So there are two ways of thinking, one is Typescript, so you don’t have to guess the type; One is asm.js, which is also a tag type. Then Google, Apple, Microsoft, and the W3C tried to standardize this method, and as a result, they decided to define a new method, such as writing it in C/C ++ and compiling it into one. Wasm format binary file, through javascript directly load this binary file to run. This way, the performance gap between Web applications and native applications can be narrowed.

Moving on to the other major aspects of H5 development, one is engineering, which has actually emerged in recent years, especially on large projects at the front end. This requires mastery of several specifications such as Commonjs, AMD, and major tools such as WebPack. Then there are the main libraries and frameworks. Weex is a product of Alibaba. It is usually used in conjunction with Vue, similar to Facebook’s React Native. It allows developers to write native applications using JS, so it is often called Vue-native. Week refers to the weekSDK, prepares a JS engine, generates various commands during execution and sends them to native renderers, etc.

Finally, there are game development related topics, such as DOM CSS, Canvas, WebGL, and some game engines. There are other points as well. In fact, game development, and the whole H5 development, there are still some differences, do ordinary Web development can not understand this. So in some companies, H5 game development has been separated from Web front-end development. Ok, here to sum up, H5 game, is based on the H5 technology set developed out of the small game.

H5 mini game features:

Advantages:

Development costs are relatively low

Cross-system, cross-terminal, cross-platform

No need to download and install, click and play

Disadvantages:

The production threshold is relatively low

Lack of fixed flow inlet

Experience gap (performance, traffic, etc.)

According to data from iResearch and Egret Times, the H5 game market reached 3 billion yuan and the mobile game market reached 144 billion yuan in 2017, with a ratio of 1:48. Based on the development process of end games and page games, the market ratio of page games to end games is about 1:3. With the reduction of data rates, the upgrading of mobile phones, the continuous development of H5, H5 games with multiple data entry and point-and-play characteristics, H5 game market may have a huge space for growth.

H5 small game development brief

In 2014, “Around the Nervous Cat” and “Yu Gong Yi Shan” went viral on wechat, attracting more than 100 million participants

In 2015, the monthly flow of “Hanging Legend” and “Journey to the West” reached millions

In 2016, the monthly turnover of Legendary World and Battle of Sand City reached over 20 million yuan

In 2017, Archangel Sword H5 exceeded 100 million in public test in 24 days, gradually forming a profit effect (Sanqi Interactive Entertainment); In the same year, QQ, wechat, QQ Browser, Tencent Video opened the H5 small game area; Penguin Game APP, Playbar APP and other specialized H5 game platforms were born.

On December 28, 2017, wechat officially announced that small programs support small games.

Simple H5 game development techniques

It started out as a simple game, like Tetris. The main technical point of this game is DOM manipulation, using jQuery native javascript CSS3. The elements in the screen are relatively simple, the logic is not too complex, and the structure is consistent with the conventional Web page; Main technical points: DOM elements, jQuery, native javascript CSS3

Slightly more sophisticated H5 game development techniques

The complexity of Web pages is higher than that of traditional Web pages.

Main technical points: Canvas, javascript, part of DOM element CSS3

And then a little bit more complicated, like cutting fruit, relatively more complicated, mainly in the Canvas part of the DOM element operation.

Sophisticated H5 game development techniques

Then again, complex game development, such as World of Legends, is done primarily with the H5 game engine.

H5 small game engine

Take a look at the main comparisons of these game engines. Egret, is the current community is very active H5 engine, announced last year to support WebAssembly, and 2D 3D VR support, while supporting JS, TS development, classic representative is the legendary world. In addition, laya engine, is to support JS TS as (ActionScript). So people who used to do Flash/AS development might be able to move on to this. Then there’s Three. js, 3d only, Hop and Monument Valley, all via Three. And then the Cocos2D, which is another old engine, The Joyplay Landlord. Then again, Ali has also opened source an H5 mini game engine called Hilo. Ali Double eleven marketing activities small games, Tmall carnival city are through this.

Front-end engineering

Take a look at front-end engineering, which is actually a concept in recent years. The main things you need to know are code organization specifications, webpack tools (which help you pack and resolve dependencies, etc.), and Node.js, based on the V8 engine. This is also used for server-side programming. Another is NPM package management.

These are the basics of H5 games.

Three, wechat small program

Then take a look at the wechat applet. Wechat small program, in fact, is also based on webView.

The view layer of the small program currently uses WebView as the rendering carrier, while the logical layer is independent JavascriptCore (IOS) and X5 (Android) as the running environment.

Iv. Wechat mini-games

Small games and H5 games, small program comparison

Micro-games add wechat social ability, file system and toolchain on the basis of H5 games, and remove some things that are not so important to game development, such as Dom and Bom. As can be seen from this picture, micro-games no longer have webView. The API of H5 specification is realized by micro-games SDK itself. Canvas WebGL for example. Then there is the game engine this layer, is to do an adaptation

Small game resource loading

At present, the core game package 4M (used for first loading) can realize instant play and need 3~5 seconds to download

Theoretically, if the user does not take the initiative to delete, the wechat client will only update not delete; The capacity has no fixed value. If the capacity is insufficient, the capacity is deleted according to the Least recently Used (LRU) rule.

Little game Adapte

The mini game runs on Javascript Core on IOS and V8 on Android without DOM and BOM. Adapter, through the WX API simulation BOM, DOM code base.

Adapter is an adaptation layer that allows browser-based third-party code to quickly adapt to the running environment of a small game, and is not part of the base library. To be more precise, we see Adapter and game engine as third-party libraries that developers need to introduce themselves in small game projects.

Of course, game engines also make their own adaptations, such as Cosos

Small games open registration category

Currently, there are 24 subcategories in 6 categories

Small game open ability and API

Open tools for small games

Small game development tools

In order to help developers to simply and efficiently develop and debug micro program and micro game, micro channel launched a new micro channel developer tool on the basis of the original public number web debugging tool, integrated the public number web debugging and small program, small game development two development modes, and its own small game demo. For details, please refer to mp.weixin.qq.com.

5. Wechat mini game application

Small game marketing system construction

Small game marketing activities, marketing applications and other construction.

Game warm-up and user precipitation

Simple trial version, improve players’ expectations of the game, precipitation users.

Mini gamification marketing

Do some marketing or promotion through mini-games. (Alibaba Double Eleven, Tmall Carnival City, etc.)

APP diversion

We can deflect the APP

Brand communication

With the help of small game traffic communication advantage, do brand communication and so on.

Finally, I would like to thank Su Qiuhong, Huang Jianxin, Chen Liangliang, Li Yiqi and Wang Yue for their sharing of relevant references and the following reference materials:

Wechat Open Class 2018

“Micro channel small game adaptation principle” — Wang Zhe cocos

Interactive Technology Solutions of Tmall Double 11 Evening Party and Carnival City InfoQ — Deng Hongchun (Alibaba Xbin)

HTML5 Game Development with HTML5, CSS3 and WebGL. Translated by Jacob Seidelin, Publishing House of Electronics Industry, Denmark

Front-end Engineering – System Design and Practice – Zhou Junpeng Publishing House of Electronics Industry

Work together to promote the development of WEB and big front end!

Question and answer

What are the differences between wechat games and traditional mobile games?

reading

What is wechat mini game? The official explanation

Analysis of 6 trends of Micro-channel games

Wechat game “Jump jump” with a story

This article has been published by Tencent Cloud + community authorized by the author, please note if reproducedThe article citations

The original link: https://cloud.tencent.com/developer/article/1065070