How to develop a mini game in WeChat mini program? (Practical tutorial)

How to quickly develop a popular game? "Hot" is a word that focuses on operations. The content introduced today may be more technical, that is, how to use WeChat's open capabilities to develop a small game. Several important news were released on the 120th day since the launch of the mini-game, among which there are several numbers that can be used to describe the word "hot". WeChat mini-games were officially allowed to be released by third-party developers on March 3, and now several mini-games have over 100 million users, and there are several mini-games on Android with monthly revenue exceeding 10 million. You should have already experienced the benefits of WeChat The popularity of mini-games.

Two pieces of knowledge related to popularity, one is how to develop? First of all, we must make good use of the social relevance of WeChat. Social sharing and interaction are very important in the decentralized scenario of WeChat, because there is no main entrance for traditional traffic distribution. The second is the ease of operation. We can draw these two conclusions based on the data after the game becomes a hit game. It does not mean that having these two characteristics will definitely lead to the development of a popular game.

What are mini games?

First of all, let me introduce to you what mini-games are: mini-games specifically refer to WeChat mini-games, which are a subcategory of mini-programs and can be easily obtained and disseminated within WeChat. Play with an excellent user experience. From a development perspective, Mini Games is a new platform based on Canvas/WebGL and WeChat’s social openness capabilities. The framework is divided into three layers, which is a typical layered architecture. There is a mini-game runtime in WeChat to run mini-games, and the OS itself may involve different types of devices.

If you zoom in on the runtime of the mini-game, you can see a lot of details. The first is the game logic, which is the development of game logic that is independent of the platform. The second part is the game engine, most of which will use some engine workflows and some high-level APIs packaged by various systems. The third part is weapp. The framework of the mini-game refers to the framework of webview, but in fact its bottom layer is not webview, but a streamlined and optimized platform of webview. The mini-game only has some rendering APIs related to the core. The weapp-adaper here is to adapt the capabilities of small games to an environment closer to webview, so that higher-level games or the engine itself can be integrated into the platform more quickly.

WeChat’s Runtime exposes WeChat API, and all capabilities are released through WeChat API. The most basic capabilities at the bottom are related to rendering, namely Canvas 2d and WebGL. Some other WeChat-related capabilities are separate, so the structure of mini-games is different from mini-programs, but there is not much difference in user experience. Mini games have no page concept, and their implementation is not exactly webview. The unnecessary parts have been removed.

Generally speaking, the entrance to the mini-game is game.js. The game can use some of the underlying capabilities to draw the entire interface of the game. The configuration file game.json is mainly used to configure whether the mini-game is horizontal or vertical. The global object of the mini-game, game Gobal, is similar to the window object in webview and supports the javascript language. However, an important limitation of mini-games is that dynamic execution of code is prohibited. Developers must submit for review first, and only after passing the review can they be released to ordinary users. In addition, the code volume of mini games including engines is relatively large, so the size limit is larger than that of mini programs. The limit size of the first package is 4M.

Let’s talk about the Webview Adapter. Its original intention is to allow game developers to become more familiar with our platform, so our platform will adapt to the webview as much as possible in terms of capabilities. In fact, this Adaptation is also a very simple layer. For example, we use the image object to create an image in the browser, but in the mini game it is created through wx.createimage. A simple adaptation needs to be made in the code. For example, Canvas and Document are implemented in Adapter. You can study the code in the link. There are some optimized versions, and the official will not continue to maintain this Adapter in the future, because we will focus more on the construction of underlying capabilities. If everyone is already familiar with this platform, it will be easier to develop games. For example, the Document object is no different from an ordinary object in the mini-game framework itself. It is a simple adaptation made by the Adapter.

The picture below is an overview of mini-game abilities. Recently, mini-game abilities have been iterated relatively quickly, and some abilities have not yet been listed. For example, some interfaces related to the game circle and health system that were recently released have not been listed yet. Let’s take a look at the basic capabilities first. In the rendering part, both WebGL1.0 and Canvas 2D are supported. The Canvas here is closer to the standard in the browser. At the same time, the concept of controllable frame rate mentioned here means that if the mini-game is running in the background, the frame rate can be reduced as much as possible. In the multimedia part, mini games cannot yet implement real-time audio and video streaming like mini programs, which we will further support in the future. The network IO part is similar to the applet. We also provide some UI components, such as pulling up the keyboard, modal dialog boxes, etc.

#The social opening ability of mini-games is now open to the outside world. One of the most important capabilities is the open domain, which opens up the WeChat friend relationship series for developers to use together, but there are also some restrictions. Because of the decentralized nature of mini-games, sharing this part is also very important. Developers must consider how to utilize this ability. In terms of code, because the first package limit is 4 MB, the code size of some small games may be relatively large. We are also recently planning a subcontracting capability to load code asynchronously, but this code must be reviewed by us.

How to develop a small game?

So how to develop a small game? Because I have only developed some simple games myself and am not professional in game development, so next I will introduce more about how to use the capabilities of WeChat to develop small games.

Choose a mini-game engine

First of all, when developing a game, you must choose an engine. We also have close cooperation with engine vendors. The engine used to develop mini-games must be suitable. Worthy. For example, at the bottom level, the engine may only support native games at first, and some adaptations must be made to WeChat mini-games, relying on the unique capabilities of the browser. Three engines, Cocos Creator, Egret Engine, and LayaAir Engine, already support the development of mini-games. There are also corresponding articles on the Internet describing how to publish to the WeChat mini-game platform.

Device/Environment Adaptation

Regarding the adaptation of device management, the mini-game will have an API to provide the ability to obtain the width and height of the screen, device pixel ratio, etc. After the development of the mini-game is completed, you can also initiate a request for real-device testing in the developer tools. WeChat provides test clusters for different devices to help developers discover problems in advance. The wx API provided by the basic library itself is a process of continuous iteration and update. For small games that use new capabilities, low version compatibility needs to be achieved. For example, if it is detected that an older version that does not support a new API is allowed to harm service users. At the same time, if a certain low-version version has a small proportion of users, you can consider directly configuring the minimum version of the basic library required by the mini-game in the management background. Of course, this also means that when this group of users comes into contact with this mini-game, the WeChat client will pop up a A prompt that requires users to update to a new version of WeChat before they can use this mini-game. If they do not update, they may lose this user.

WeChat login

The login process of the mini-game is similar to that of the mini-program and requires the user to customize the login status. appsecret/session_key represents a trust agreement between small game developers and the WeChat platform, such as payment and reporting of custody data. The platform needs to verify the access_token, and if it is related to the user, the signature of the session_key must be verified to ensure that the request comes from Small game developers or users. access_token is an application-state access_token, which has nothing to do with the user. It needs to ensure that one copy is maintained globally. There should be a central control module to ensure that the access_token is valid. At the same time, the access_token of the local cache is directly used within the validity period instead of going to it every time it is used. Generate a new access_token, otherwise you may encounter a call frequency limit error and affect the service. Remember not to put appsecret/session_key in the front-end code, otherwise it may be maliciously used and damage the rights and interests of small game developers or users.

Cache

Cache types include data cache and file cache. Data cache is key-value storage, suitable for structured small data storage, with an upper limit of 10MB. File caching provides a complete file system API, including addition, deletion, modification and reading of directories/files. It is suitable for local caching of frequently used network resources. The upper limit is 50MB.

Different from browsers, WeChat only provides basic storage management capabilities and does not perform any operations on what is stored and what is deleted when the storage is full. Developers can flexibly define caching and elimination strategies by themselves, such as storing frequently accessed resources in the file system and clearing out some files that are not frequently accessed recently when the file storage is full.

Open Data Domain

Let’s talk about developing the data domain, which means opening up user data to the public while protecting user privacy. Games. This is a closed, independent JavaScript scope. The open data domain is an independent directory, and its entry file is index.js. The current limitation is that it only supports 2D rendering mode, and data can only enter but not exit. For example, a ranking list must be for users to see.

Let’s take a brief look at its implementation. The left side is the main domain. After users get this data, the ranking list is actually a Canvas. The difference is that Canvas cannot take out the data and cannot analyze what the data is. There is a Canvas in the main domain. In WeChat, the upper screen Canvas is associated with the screen, followed by offline Canvas. The offline Canvas can be used according to your needs. Once the data is opened, the data in the Canvas on the upper screen cannot be taken out, nor can the next Canvas be taken out, ensuring the security of the data.

Because our data is in the development data domain, users have no way to develop it. Therefore, developers are required to host the required data with us during development and associate it with users. In this way, relevant data can be obtained in the development data domain. Its application scenarios include friend rankings, group rankings, surpassing friend prompts, etc. When the user inputs, all the user's operations are repeated, and all the user's input is obtained on the Canvas on the screen and the Canvas off the screen, and no open data will penetrate.

Share

If the user reaches a high score in the game, he or she can compete with friends. In the custom forwarding window, the title and picture can be customized. But now there are many mini-games that are very annoying to users. They have made a lot of settings that must be shared before they are allowed to play the game. This is the part that everyone needs to think about. How to promote the interaction of mini-games without affecting the user experience. Here we need to find a suitable balance point. At the same time, after sharing the data and associating the mini-game with this group chat, we can see a mini-game platform.

Payment

The mini-game supports virtual payment, but it is currently only available on Android systems. And there is currently only one way, that is, currency custody. It is mainly divided into two processes. First, the user spends money to purchase game currency, which has nothing to do with the game server. When initiating payment, the WeChat client will generate an order for the user to confirm the payment, which is asynchronous. The platform is responsible for converting the user's RMB into corresponding game currency and storing it in the user's corresponding game account. The second is to use game currency to purchase props. Developers can deduct the corresponding game currency and issue in-game props to users. The process of deducting game currency requires a certain transaction mechanism to ensure normal transactions in the event of network abnormalities. The interface for deducting game currency supports deduplication based on the order ID, which means that in the event of network timeout and other situations, developers can use the same order ID to retry the deduction until a clear response is returned.

Performance

Common performance problems in small games are usually caused by memory. If too much memory is occupied, it will be actively closed by the WeChat client. Therefore, developers must promptly release unused memory during the user's game, especially large objects of the Canvas and Image classes. At the same time, they can actively call wx.triggerGC to trigger underlying recycling. Corresponding resources. For work that is relatively independent of game logic, you can consider implementing it in workers. Mini games provide the ability for independent worker threads to execute js logic.

Version update mechanism

Mini games can be divided into hot start and cold start. Cold start means that there is no such mini game in the memory. In the case of a running instance of the game, the process of starting the mini-game; hot start means that the running instance of the mini-game still exists in the memory, but is temporarily switched to the background. At this time, the user triggers the mini-game to return to the foreground again. After the user clicks Start, the game will be loaded when the game is running. When you click the menu in the upper right corner, the button will just hang in the background. When it is restarted within a certain period of time, it will be restored immediately, and the memory will be released.

The mini-game will check the version of the mini-game during a cold start. If there is a new version, after downloading it back to the local computer, the latest version will be available for the next cold start. Of course, we also provide an API for developers to decide whether to force an update and apply the latest version when a version is available.

Operation and Maintenance

The management side provides capabilities such as release, rollback, and service suspension, so developers can make full use of the capabilities of the platform. For example, in background operations, js may report an error. Script errors are mainly triggered by uncaught exceptions during operation. Such exceptions may cause the js logic on the front end of the user's mini-game to suspend execution. At the same time, the platform also provides complete data analysis services, and you can use assistants to conduct data analysis through mini games.

Recommended: "小program Development Tutorial"

The above is the detailed content of How to develop a mini game in WeChat mini program? (Practical tutorial). For more information, please follow other related articles on the PHP Chinese website!