Welcome to pay attention to the rich way Web development team, lack of conformity

Original link: view

What’s the difference between a mini-game and a mini-program?

Small game is a small program category, small game is wechat open to small program more ability, let small program developers have the ability to develop games. Small game without WXSS, WXML, multi-page content, but added some rendering, file system and background multithreading functions.

The running environment of small games is an extension of the small program environment. The basic idea is to encapsulate the necessary WEB interface to provide users with the same development experience as the WEB as far as possible. Small games provide WebGL interface encapsulation on the basis of small program environment, which greatly improves the rendering ability and performance. However, as these interfaces are encapsulated by the wechat team through its own development of the native implementation, they can not be equal to the browser environment.

The running environment of small games on iOS is JavaScriptCore (note: WebKit is an important part, mainly to parse JS and provide the execution environment). On Android, V8 (needless to say, Node.js currently uses V8). But both have no BOM and DOM runtime environments, and no global Document and Window objects.

Mini games VS H5 games VS applets

Third Party Code Adapter

The purpose is to provide a BOM and DOM operating environment.

As you can see from the figure above, there are no global Document and Window objects because there is no BOM and DOM runtime environment. In order to make third-party code based on the browser environment (H5 game, above) more quickly adapt to the small game environment, there are adapters. It is a library that simulates BOM and DOM codes with wechat API. It is an abstract code layer that can realize relevant methods according to its own needs.

For example, simply implement the document.creatElement method:

var document = {
    createElement: function (tagName) {
        tagName = tagName.toLowerCase()
        if (tagName === 'canvas') {
            return wx.createCanvas()
        }
        else if (tagName === 'image') {
            return wx.createImage()
        }
    }
}
Copy the code

Whether Adapter is used or not is up to the developer. If Adapter is not used, the corresponding method can be implemented through the API provided by wechat, but the DOM API cannot be used to create elements such as Canvas and Image.

Some game engines call DOM API directly and access DOM properties, so remember to use Adapter to adapt the game engine to the running environment of small games, to ensure that the game engine will not generate errors when calling DOM API and accessing DOM properties.

However, it only simulates the possible attributes and methods that game engines can access. There is no guarantee that all game engines can seamlessly access games through the p-Adapter. I provide additional p-Adapter for developers to use as a reference, allowing them to extend the app to work with their own game engines if needed. Eapp-adapter pre-calls wx.createcanvas () to create an overscreen Canvas and expose it as a global variable Canvas.

require('./weapp-adapter');
var context = canvas.getContext('2d');
context.fillStyle = 'red';
context.fillRect(0.0.100.100);
Copy the code

The app-Adapter provides the following objects and methods:

  • document.createElement
  • canvas.addEventListener
  • localStorage
  • Audio
  • Image
  • WebSocket
  • XMLHttpRequest

In fact, there are many official documentation, interested in the official API documentation.

Modularity of mini-games

Small games provide commonJs-style module apis, exporting modules through module.exports and importing modules through require. There is no need to explain more here, in fact, you can code according to the normal coding habits.

module.exports = function (canvas, x, y) {
    var image = new Image()
    image.onload = function () {
        var context = canvas.getContext('2d')
        context.drawImage(image, x, y)
    }
    image.src = 'res/image/logo.png'
}
Copy the code

So mini-games are friendly to basic coding abilities.

Mini-game ability

Some of the API capabilities provided are listed here, and more detailed capabilities and official instances are available in the API documentation.

For those of you who are not familiar with Canvas optimization or off-screen Canvas, check out this article Canvas Best Practices (Performance).

Mini game engine

Game engines are the core components of written editable computer game systems or interactive real-time graphics applications. These systems provide game designers with all the tools they need to write games. Their purpose is to allow game designers to easily and quickly program games without starting from scratch.

Cocos, Egret, and Laya have done their own engines and tools to adapt and support small games:

  • Cocos
  • Egret (Egret)
  • LayaBox
  • Three. Js is a 3D engine that runs in a browser and allows you to create a variety of 3D scenes, including cameras, lights, textures and other objects

2D, 3D, VR support

performance

From the feedback of developers, Layabox was originally an H5 game engine for larger games, and the performance advantage was unquestionable.

Design concept and orientation

Workflow support

Toolchain support, such as UI editor, particle editor, skeleton editor, scene editor, etc., is also a consideration. If the engine side directly provides or supports it, the r&d efficiency will be greatly improved. The three Egret, Layabox, and Cocos2D-JS engines provide comprehensive support for the toolchain.

The breadth of application of the engine

Egret is an early, fast growing company with extensive resources and a full suite of development flow tools.

Advantages of using a game engine: fast development, high maintainability

Disadvantages of using a game engine: sacrificing some performance, small games with no engine almost feel the performance difference. Big games use game engines for efficiency and maintainability.

Summary of small game actual combat

This is the main implementation of a jump jump small game. The game looks like this:

How to implement a hop technique can refer to: this article

hierarchy

  • Scene layer: responsible for rendering of leaf decoration on both sides to realize the animation effect of infinite circulation sliding;
  • Step: responsible for the rendering of steps and robots, realizing the random generation of steps and the control of automatically falling step bricks and robots;
  • Background layer: responsible for rendering the background background color and starting and ending the panel rendering.

The animation is performed a certain number of times through the requestAnimationFrame loop. The game logic is implemented by listening to the global canvas object.

Layer by layer superposition to the canvas, first draw the background, calculate the position of the step through the algorithm, combined with the position of the last time with requestAnimationFrame to achieve the shift to generate a new step, the robot alone out, not together with the step, through the position calculation, get the position of the robot, draw word on the step, Finally, paint the top layer of leaves.

Small game development difficulties

First of all, small games are developed in JavaScript language, without HTML and CSS, so they need to be familiar with JavaScript language and Canvas object.

Second, there is not much difference from H5 game development, but there are fewer libraries for small games, and most of the libraries used for H5 development are not supported.

In addition, the H5 version of the game has more options to implement, such as the original use of CreateJS development, while the small game version does not support all engines, only a few engine adaptation.

Mini Game Optimization

Why optimize? In fact, in order to improve the page loading speed, reduce the game running lag, make the animation look smoother, the smoothness of the game and the graphics directly affect the user experience.

Several optimizations are provided below.

The GC optimization

The optimization documentation for the mini-game does not indicate that a performance manager is provided in the API, which can be invoked to accelerate GC. The timing of GC is controlled by JavaScrpitCore/V8, and GC cannot be triggered immediately after the call.

SetData call count optimization

Small program side, it is not recommended to call setData frequently. Large images and long list images may lead to the increase of iOS client memory usage, thus triggering the system to recycle the small program page.

Reducing code packages

Minimize the size of the code package, which directly affects the download speed and thus the user’s first opening experience.

Control image resources

Control the image resources in the code package. After compilation, the small program code package will be placed on the CDN of wechat for users to download. CDN enables GZIP compression, so users download the compressed GZIP package, which is smaller than the original volume of the code package. However, according to our data analysis, the code package compression ratio of different small programs varies greatly, some of them can reach 30%, while some only reach 80%. One reason for this difference is the use of image resources. GZIP works best for text-based resources, typically up to 70% to 80% compression when compressing large files, and only slightly for already-compressed resources (such as most image formats).

Clearing Useless Resources

Clean up unused code and resources in time. Small program packaging will put all files under the project into the code package, that is to say, these library files and resources that are not actually used will also be put into the code package, thus affecting the size of the overall code package.

FPS tuning

Adjust to the appropriate render FPS (frame rate) when implementing animation using requestAnimationFrame.

Problems encountered

Image size problem?

The size of an image in a mini-game should be 2048 pixels or less.

Open to the outside world?

Small foreign no open registration portal, the game can use now is two days before the open game category, in small programs to set the small program category for game category can develop small game, not sure whether after registered in this way, or open small game alone registered entrance, didn’t find what is the difference between two now.

At present, there is no official release. You can log in to the background and click publish, but you need to upload the software copyright certificate and so on. Therefore, it is not sure whether the release will be successful.

About the size of the small game code?

As for the size of small games, the size of small games should not be larger than 4M, and the cache should not be larger than 50M. The local code and resources must not exceed 4M. A single small game project can cache no more than 50M files. Currently, if the cache exceeds 50M, subsequent resources will not be cached. Future versions of AssetsManager will allow developers to customize which resources need to be cached. Script files are not allowed to be downloaded from the server.

Don’t allow dynamic code execution?

The ability to execute code dynamically is disallowed, the first argument to eval, setTimeout, and setInterval functions cannot be a string, and the argument to Function constructors cannot be a string.

Development issues

The game logic wasn’t handled well, the animation was a bit sloppy, and there were delays.