Access to Open Data Context

    In Cocos Creator 3.0, we deprecate the Canvas Renderer module and replaced it with a lightweight front-end Canvas engine based on XML + CSS designed by WeChat team. The engine is integrated into the Cocos Creator 3.0‘s built-in Open Data Context project template, which allows developers to implement a leaderboard-like feature based on the template with a few basic front-end skills.

    Since the Open Data Context can only be rendered on the off-screen canvas called sharedCanvas, you need a node in your project to act as a container for rendering the Open Data Context, and add the component to that node, which will render the sharedCanvas to the container node.

    The SubContextView component contains two main properties, Design Resolution Size and FPS.

    If you set the Design Resolution Size of the SubContextView component to 640 * 960, the size of the sharedCanvas will be set to 640 * 960 during the component’s onLoad phase. This means that after the build, the Open Data Context Project is rendered on an off-screen canvas of 640 * 960. Then, when customizing the Open Data Context (see below), the maximum size of the tag style in style.js is 640 * 960, otherwise the rendered content will be off the canvas. Example:

    To avoid this part of the data coupling, setting a percentage adaptation to the size is supported. Example:

    In the actual rendering process, the engine will adopt the SHOW ALL adaptation policy to render the sharedCanvas to the component node to avoid the UI distortion caused by stretching during rendering. For example, in the following two images, we are using SubContextView component nodes of different sizes, and the Open Data Context texture will not be stretched.

    adaption-2

    Setting FPS

    The FPS property is primarily used to set how often the main context will update the sharedCanvas on the SubContextView component to avoid performance loss due to frequent updates to the Open Data Context texture.

    1. After the scene is set, save the scene, and then open the Build panel in Menu -> Project, select the WeChat / Baidu / ByteDance Mini Game platform you want to release, check Generate Open Data Context Template, and then click Build.

    2. After the build is complete, click the Folder Icon button at the end of Buid Path, you’ll see an openDataContext folder (e.g.: build/wechatgame/openDataContext), which is an Open Data Context project template built into Cocos Creator, in the distribution folder of the corresponding game platform.

      build-output

    3. Open the build distribution (e.g.: build/wechatgame) using the DevTools of the corresponding mini game platformer to open the mini-game project to view the Open Data Context content.

    Before customizing an Open Data Context project, developers need to know some basic information:

    With this basic information in mind, let’s take a look at the Open Data Context template generated by default after the build, with the following directory structure:

    folder-structure

    • render/dataDemo.js: Simulates some random data of the leaderboards, where the developer can request the relational chain data from the platform and pass it to the doT template engine to generate relevant XML text
    • render/style.js: To record CSS style text information, refer to
    • render/avatar.png: Header images for display in Open Data Context project template, can be deleted.
    • engine.js: source code of Canvas engine
    • index.js: Open Data Context Project entry file where the Open Data Context is rendered by passing XML text and CSS styles to the Canvas engine

    1. Since the build directory generated after the build of the project is excluded from version control by default by git, if you want to include your custom Open Data Context in version control, you can put the openDataContext folder (e.g.: build/wechatgame/openDataContext) into your project’s build-templates directory. Please refer to documentation.

    2. When the main context sends a message to the open data context, it is recommended to include a message to avoid handling the wrong message source. For example, the res.type === 'engine' in the above code means that the message comes from the main context engine.