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:
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 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:
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:
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:
High-level API package for game development more convenient;
Resource loading adaptation
Event handling adaptation
Audio playback adapter
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:
Fifth, the market outlook
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.