Home > News content

WeChat "jump one jump" game of fire, how quickly do developers get on?

via:博客园     time:2018/1/9 17:36:50     readed:420

In the version of WeChat 6.6.1, the user pushed the "play a small game is decent" the first screen game entrance, a circle of friends all jumped. I believe many game developers feel embarrassed to find out what. Today I and Wang Zhe from the technical point of view for everyone to develop WeChat mini game development knowledge, this series of articles from our Cocos Creator engine team and WeChat team cooperation process summary, at present, Cocos Creator v1.8 editor has The first time to support a key release WeChat game version.

Today, this article is the first to introduce WeChat game development series.

First, the ecological characteristics of the game

At present, wechat games have released 17 starter games, including six chess games, as well as casual games such as Happy Elimination, Love Elimination, Tank Battle, and Safeguard Radish.


From the entrance side, wechat games currently have the following main entrance:

  • Group or friends to share
  • Identify the game two-dimensional code
  • WeChat chat list page drop down after the recent game played
  • Find & ndash; applet
  • Discover & ndash; Games & ndash; my little game


From a technical point of view, weChat game is based on WeChat applet added game library API. Small games can only run in a small program environment, so the game is neither a native game, nor exactly the same as HTML5 games. But in fact the game is for HTML5 game developers, in order to make HTML5 games can be transplanted as low as possible, the game as much as possible reuse WebGL, JavaScript and other browser-derived HTML5 technology. It can be said that the game is built using HTML5 technology, with a native experience WeChat game products.


There are many advantages to using this mode for small games, and the biggest advantage is that it is stable and controllable. Compared to the native, WeChat closed the game inside WeChat; unlike HTML5, you do not have to worry about being paid for the game.

The runtime environment for WeChat mini-games has a major benefit compared to other Runtime mods that have appeared in the world in that it is "compatible with HTML5 Ecology." In other words, no matter which game engine you use to develop HTML5 games, can be easily ported to the game above. This allows WeChat game to borrow directly from the huge HTML5 ecosystem.

In addition to technology, weChat to the strongest blessing of the game is social communication. The use of WeChat social ecology to acquire new users will play a very important role in the design of mini games. We can see that the first batch of 16 games, in addition to the jumping screen with a splash, the other games are hidden deeper entrance, so the traffic source is not mainly rely on the recommended list, but by Social communication is coming. This point and the majority of users on the market guide users, wash clothes service game design ideas are different.

WeChat open high-quality entrance, a large user base, and that is, that is, play, for sharing characteristics will give the game a great potential. Everything depends on how you developers seize the opportunity to find suitable for WeChat users game categories and patterns.

Second, the API: Development of essential knowledge of the game point

Mentioned earlier, the development of small game reuse HTML5 technology stack, so the development of HTML5 game developers will get started much faster, and even many HTML5 games can be quickly ported to the small game platform. Specifically, WeChat game development technology is divided into three parts.


1. The underlying technology

The first is to develop the language, WeChat game only supports JavaScript, of course, can be compiled into JS TypeScript and CoffeeScript can be used as a development language.

The second is the game library APIs supported by the game, which mainly include the HTML5 Canvas 2D API and the WebGL 1.0 API. The use of any API can complete the game's most important rendering functions, but can not be mixed. In addition, only WebGL Rendering mode can support 3D rendering.

2. Middleware: game engine

Of course, using Canvas 2D or WebGL directly to create a game is a very demanding and time-consuming task. You certainly do not want to drag a game project for a year and a half. Therefore, the use of HTML5 game engine is actually a very wise choice, the engine encapsulates the high-level interface can greatly reduce the developer's development threshold, shorten the project cycle. At present, the three major domestic engines Cocos Creator, Egret, Laya have supported the release of small games, Phaser.js, Three.js other foreign HTML5 engine does not support direct release, after some customization can also successfully run in a small game environment.

3. WeChat SDK

In addition, WeChat mini games also provide rich WeChat internal SDK for developers to use these interfaces to complete the user login, forwarding, ranking and other conventional social functions.


However, in addition to these conventional games, the most delightful is that the game experience can be described by forwarding the game to complete the team-building or battle of the players in the game, plus the game-play characteristics of the mini-game Is perfect.


Happy friends in battle tank invited team


Friends by clicking the forwarding link directly into the game to complete the team

This group forwarding + click-to-play mechanism can bring interesting social games to play.

Third, under the API: understanding of the underlying game technology architecture

As we mentioned in the opening paragraph, a mini-game is neither a native game nor an HTML5 game, and its development environment is in fact very closely related to both. The relationship with HTML5 is that it reuses HTML5's rendering interface, but what about the native game? We use a picture to explain:


The game environment is actually WeChat native environment, the game's JavaScript code is not executed through the browser, but through the map VM VM layer independent JavaScript engine to perform. Using Google's v8 engine on the Android platform and Apple's JavaScript Core engine on iOS.

Of course, JS engine is only responsible for the interpretation of the implementation of JS logic, and does not support the rendering interface, then the rendering interface and many WeChat functional interface is how to achieve it? This has to mention the script binding technology, this technology can be some kind of native language interface bridge to the script interface, when called in the script layer interface, it will automatically forward to the native layer, call the native interface. WeChat game environment is the use of such technology, iOS / Android native platform rendering, user, network, audio and video interfaces bound to a JavaScript interface. This is the principle of the WeChat primary layer module to the mini-game layer module in the figure. Scripting technology can not be explored in more detail in this article. If you are interested, you can learn about Cocos Creator's JSB binding implementation, which is the only fully open source binding technology in the game engine.

After such a set of games, HTML5 games still encounter numerous API compatibility issues during the migration process. The simplest example is that the document object does not exist and the Image object does not exist. In order to reduce the cost of transplantation, WeChat team provided a Adapter script, adapted part of the browser interface.


As shown above, the Adapter section provides the browser interface on which most of the HTML5 games depend. This diagram is also a complete depiction of the interface modules that developers can use in WeChat games:

  • Browser rendering interface
  • Browser Adapter
  • WeChat service SDK

It is worth mentioning that the Adapter script is no longer maintained, so the additional adapter needs to be completed by the developer, and most of the features that rely on the DOM interface are unable to fit into the game environment.

Just mentioned that we recommend using the game engine to develop games, small game environment, based on the game engine not only encapsulates the high-level interface, but also tried to erase the difference between the browser and game environment.


Can be seen from the figure, if you do not use the game engine, developers face the game's underlying API, the use of the game engine, the engine is facing the API.

Summarize the game engine for developers to do the work, including the following aspects:

  • Framework:

High-level API package for game development more convenient;

Resource loading adaptation

Event handling adaptation

Audio playback adapter

Window adaptation

Input box adaptation

Add other missing interfaces, such as adding DOM Parser for parsing TileMap.


Optimizer - Art - Planning synergies;

Excellent game editor can significantly shorten the development cycle.


Excellent game engine to provide high device compatibility, stable operating performance;

Cross-platform game engine to provide seamless publishing HTML5, games, native platform, the power of.

High-efficiency editors bring down development costs; low entry barriers reduce labor costs; high compatibility and stable performance reduce maintenance costs; cross-platform / channel brings powerful traffic acquisition capabilities. For developers, these are the survival and profit protection!

Fourth, get started debugging game

It should be noted that, in the author's text today, WeChat public platform currently does not open developers to apply for the game category permissions, it is only through the small game development tools "experience small game" function to do the technical level of the attempt . But do not worry, WeChat team should soon open the application of the game category.

1. WeChat developer tools introduction

Below this picture is the basic layout of WeChat developer tools in the development of small games:


WeChat developer tools basic layout

Which is the top of the toolbar, contains the most important compilation, preview and configuration details; the left is the simulator window to show the game running effect; the upper right is the code editor, you can view the list of files in the project, edit the text file; Next is the debugger window, exactly as you would use Chrome Devtools.

2. WeChat game configuration and import documents

In the WeChat game project, the project.config.json and game.json configuration file is the first one we need to add, which project.config.json can define your game appid, game name, configuration and so on. The game.json is mainly used to specify the game orientation and network timeout.

In addition, the game does not support any html files, the entrance file is game.js, you need to start the engine and game scripts should be introduced in the game.js require function, the use of require function to follow the node.js require specification.

Compile and preview

WeChat Developer Tools automatically listens for changes in scripts and configurations, automatically updates when changes occur, and you can also trigger recompilation via the top compile button. When you need to preview the effect of the game on your mobile phone, you need to click the preview button to generate the QR code, code to enter the game. The process of generating a two-dimensional code is actually to compress and upload a small game package to the WeChat CDN, so it will take some time.

4. Details of the configuration

Details The configuration includes some important configuration options, including:

  • Debug basic library: small game should choose game;
  • ES6 to ES5: ES6 script is converted to ES5;
  • Automatic compression code upload: whether to compress the script;
  • Do not check security domain names, TLS versions, and HTTPS certificates: This option needs to be turned on to properly access your server when you test locally or through an informal domain name.

Fifth, the market outlook

Finally, we see from the market, in fact, the game favored HTML5 technology stack contains a huge opportunity, the current use of JavaScript to support cross-platform game engine has been a lot. Cocos Creator, for example, write a set of game code, you can seamlessly publish in the editor HTML5 mobile phone page tour, PC page tour, cell phone native game, small game. According to the industry report on gamma data in early December, there are 116.2 billion mobile phone native games in China in 2017, 64.8 billion PC terminal games and 15.6 billion PC page tours. Therefore, according to the simple calculation, the market space for mobile page travel = 1162 & 648 x 156 =Each year 28 billion yuan.

If you further consider the Flash announced the suspension of 2020, the market a large number of PC page tours are beginning to switch to HTML5 technology, and mobile phone native also appeared in a large number of micro-end products, so if you do not consider the shift constraints, HTML5 technology can Support the game market size = 28 billion mobile phone page tour + 15.6 billion PC page tour + part of the mobile phone native games & asymp;Each year 50 billion yuan.

Rmb50bn is still just the size of the country. According to foreign Newzoo data in mid-year, the scale of China's game industry accounts for 25% of the world, so HTML5 technology can theoretically support the global mobile phone page tour, cell phone native, PC page travel market up to capacity up200 billion yuan each year.

Therefore, master the HTML5 technology stack and master the social game development technologies on the new platform of "Mobile Page Tour" such as WeChat mini games, QQcmixiu, Facebook Instant Games, etc., understand the characteristics of users on these social platforms, and put forward targeted game design , For those who want to enter the field of game developers, is the immediate concern.

And now the general view is that under the impetus of capital, mobile phone page time window should be only 1 to 1.5 years, there will be successful layout of the original game makers, there will be new developers and distributors. In the game industry to produce such a tuyere, an average of about 5 years to once.

China IT News APP

Download China IT News APP

Please rate this news

The average score will be displayed after you score.

Post comment

Do not see clearly? Click for a new code.

User comments