Making a WeChat Mini Game: Part 1 – Background

This entry is part 1 of 2 in the series Making a WeChat Mini Game

I can remember attending GDC China in 2009 and one of the keynote speakers stating earnestly that "mobile games were a waste of time because they didn't monetize" - that the real opportunity was to build social games on Facebook which could leverage a user's social graph. The speaker was of course completely wrong about mobile games - Tencent made 3.4 billion USD in the first quarter of 2018 alone from their mobile titles.

But most predictions come true, like a stopped clock, if you wait long enough, so perhaps the speaker would be cheered by the launch ten years later of WeChat mini games, Tencent's attempt to combine their social and gaming expertise with a casual game platform.

Jump Jump, one of the most popular mini games to date

Late last year Tencent started promoting these mini games, Javascript-based games that run within the WeChat apps for iOS and Android. Initially these were limited to Tencent's own properties and partners, but as of April 2018 they are available for all registered developers. There are several reasons to take note of this trend.

Just like mini-programs, Tencent believes that by encouraging developers to create simple experiences that work well within WeChat, they can provide a better experience for users in China than either native apps/games, or web-based apps/games. Because the games are hosted by Tencent, and must be approved by them, they can ensure both speed and quality. The games have already been played by half a billion users.

The most popular mini games so far such as Tencent's "Jump Jump" (跳一跳) enable social features like leaderboards which use people's existing friends graphs in order to encourage people to beat their friends' high scores.

 

Leaderboards are critical for encouraging the "one more play" feedback loop.

Tencent has already been encouraging partnerships with the likes of Nike and McDonalds to further promote mini games.

It's still very early days for mini games. Just like with any new gaming platform, it's common to port over tried-and-tested game ideas. From 2008-2012 ReignDesign developed a series of games for the then-novel platforms of iOS and Android. These included the casual side-runner Pig Rush, puzzle game Flockwork and various versions of Spot the Difference. We stopped developing our own games in 2013 after it because clear that it was becoming too tough for indie studios to compete with the success of free-to-play games from larger studios.

Pig Rush, an addictive side-scroller
Spot the Difference's simple mechanic could make it a good fit for a mini game.

Fast forward to 2018 and we thought the best way to get a better understanding of WeChat mini games would be to port one of our old apps to make a WeChat mini game. In this upcoming series of articles, we'll be exploring the process of building a mini game, from choosing a game mechanic, understanding the technical requirements for a WeChat game, integrating with social features, to the opportunities for brands who want to use WeChat mini games to promote a campaign.

Making a WeChat Mini Game: Part 2 – Mini Games versus Mini Programs

This entry is part 2 of 2 in the series Making a WeChat Mini Game

WeChat mini games sound very similar to WeChat mini programs, but there are important differences to understand. A mini game is NOT just a mini program which happens to be a game.

In fact, the Mini Program rules explicitly disallow game and quiz-type content in mini programs:

6.2. WeChat Mini Programs must also not contain any of the following content in violation of the platform rules:

​   6.2.3 Game or quiz type content.

If you want to develop a game, it must be developed as a mini game. Let's first look at the similarities between mini programs and mini games, and then discuss some differences.

Similarities

Both mini programs and mini apps are hosted by Tencent - you upload your code and assets to their servers. This means that they can ensure the games run very fast using their content delivery network in China.

Both mini programs and apps require you to go through an approval process for the initial submission of the app as well as any updates. Don't expect to be able to use any kind of questionable content in your app!

There is a severe size limitation on mini programs and mini apps - they are limited to just 4MB. Of course you can download additional assets from another server, but that adds to the complexity of the code, and you will need to download the assets every time the app is launched.

Differences

From a technical perspective, mini programs use a trio of technologies:

  • Javascript - fairly standard Javascript, communicating with the WeChat host app using an proprietary API
  • WXML - a proprietary Tencent markup language with various components you can use in your mini program
  • WXSS - similar to CSS with some restrictions

Because of the use of the WeChat API and WXML, it's not at all easy to take an existing native app or web app and port it into a mini program.

Mini games are quite different. They use either a Canvas element, similar to the HTML <canvas> element in a browser, or WebGL. You can take an existing HTML5 web game written to use Canvas or WebGL and fairly easily port it to WeChat.

Because you can draw to the canvas/screen directly you have full control over the appearance of your game. Mini programs are also allowed to be landscape (whereas all mini programs are portrait).

Excitingly this also means you can use many existing Javascript game frameworks such as Cocos, Egret or Phaser for development, and export a game which is compatible with WeChat. Of course there will still be some WeChat specific work to integrate with APIs for leaderboards, sharing, and so on.

As our team had familiarity with Cocos in previous game projects, it was a no-brainer to use Cocos as the game framework for our forthcoming mini game!