WeChat game development skills (organization of conference speech content) Nuggets Developer Conference

WeChat game development skills (organization of conference speech content) Nuggets Developer Conference

Some time ago, such as before 2012, there were not many people doing web games (that is, people who wrote games in javascript).

At that time, I didn't think so much, just to make a "game that doesn't need to be downloaded and clicked to play", so I plunged into the sea of web game production.

But at that time, many people said, "You look pretty fun, but it feels useless."

Actually, I don t really understand what useless is. Isn t fun enough?

Then, in 2018, WeChat launched a mini game. So web game production technology suddenly changed from a "useless technology" to the most fashionable technology nowadays.

--------------Dividing line----------------

In fact, I only like one title, the game producer. But because there has never been a representative game, I never know how to introduce myself.

I really hope that one day I can proudly introduce: I am the producer of xx game.

My team is TGideas of Tencent Interactive Entertainment. I had a little talk at the meeting, and interested students searched for it on their own.

--------------Dividing line----------------

Next is the topic:

The theme is divided into 4 parts (ignore the emoji package next to it):

  1. Basic concepts

  2. Architecture design

  3. Partial algorithm

  4. WeChat API

The driver of the game is developed and written by the game logic, and then rendered on the canvas in real time in the renderer.

The biggest difference between WeChat mini games and traditional web games (canvas) is the API.

The performance of the mini game can be as casual as a jump, or as passionate as an arcade fighting game. Don't be limited by your imagination and think that "a mini game should look like a mini game."

Of course, people who generally have the idea of "what a small game should look like", and how many people who understand the game will express emotion, because we need to wear the technical shackles called "reality".

This kind of thinking is not wrong, on the contrary, it is much better than those who have not put on the shackles and ask others to change the background color of the phone according to the color of the phone case.

However, it is the most commendable thing that you can maintain your imagination after putting on the technical shackles.

File structure of WeChat games

game.js and game.json are the entry file and configuration file of the mini game respectively.

res is a game resource, and it is also the place where the game occupies the largest volume.

Adapter is a library that uses WeChat API to simulate browser API.

The src part is the focus of this sharing.

The mini-games I personally made are relatively unrestrained, so I borrowed the mini-games made by the team to introduce them when sharing.

The game structure is divided into 3 large modules:

The Base module management script is used to organize parts of the entire game. Responsible for the start and pause of the game, and decide which scene the game should call.

The Scene module is similar to different levels. What kind of character, what kind of enemy and what kind of music needs to be loaded in each level are determined by the scene module.

Role role module , the most important part of game logic. Whether it is the protagonist or the enemy, even a treasure chest or a bullet in the scene, all belong to the character.

The remaining modules are for different games to complete, because the modules required for a fighting game and a casual game are very different.

The role module can be roughly divided into 4 parts: attributes, animations, instructions, and behaviors.

Attributes : We can call an object an entity. The attributes in this entity are the attributes of the character, such as coordinates, hp, speed, and so on.

Animation : Character animation generally includes attribute animation, sequence frame animation, and skeletal animation. Some of these animations have the difference between 2d and 3d.

This part of animation is a "cross-domain" task, because some "perceptual" images must be transformed into "rational" codes. This part of the introduction will be released one after another in the future.

Command : Command is a kind of encapsulation of the player's input method.

For example, the "Fruit Ninja" command for sliding and cutting fruits is implemented through the "touch" API, and some "continuous skills" and "virtual joysticks" also require corresponding API combinations to implement.

Behavior : A character's behavior is a result of adjusting the character's attributes.

Such as movement is coordinates


Role behavior is the most important part of game logic, and the interaction between roles is accompanied by a large number of algorithms.

The algorithm required for each game is different, but the calculation method for running the algorithm in the game is the same.

Such as the acceleration equation, the realization in the code is actually like


After understanding the basic mechanism of the game algorithm, you can expand it slightly, such as the collision algorithm:

Basically, the derivation process of each algorithm can be described as a separate article, and interested students can search for the algorithm name by themselves.

You can also understand some of the more commonly used game algorithms, such as: state machine, dictionary tree, pathfinding, sorting...

Of course, the game is made based on a professional game engine, which can achieve twice the result with half the effort. Understanding the game operating mechanism can help you get started with the game engine more quickly.

The biggest difference between WeChat mini games and traditional web games is the API.

WeChat Mini Games have some APIs that are different from WeChat Mini Programs.

One of the most special is "open data."

The main domain can transmit data to the WeChat backend, but cannot get data from the WeChat backend. The open data domain can obtain data from the WeChat backend, but it is impossible to realize and transfer data to the main domain.

Therefore, if the main domain wants to display WeChat background data, it must draw the data in the open data domain, and then use the sharedCanvas of the open data domain as an image and draw it to the canvas of the main domain through the drawImage function.

Some considerations for open data

  1. sharedCanvas can only be drawn on the upper screen canvas.

  2. The on-screen canvas cannot call toDataURL, and its context cannot call getImageData.

  3. sharedCanvas cannot call toDataURL and getContext.

  4. Cannot draw on-screen canvas and sharedCanvas to other canvases in any form, including drawImage, createPattern, texImage2D, texSubImage2D.

  5. The width and height of sharedCanvas can only be set in the main domain

Among them, clause 5 is often easily overlooked, and then various adaptation problems arise.

Finally, summarize the operating mechanism of the mini game.

  • After entering the game from the entry file, the renderer will be executed.

  • Then the main logic of the game will call the scene modules needed in the next step of the game.

  • In the scene module, call the role module required by the current scene.

  • The role module will produce different behaviors after receiving different instructions.

  • A large number of algorithms are used to interact between character behaviors, and ultimately produce a complete game effect.

"When you gave a live speech, you didn't seem to say that."