Build CocosCreator component library

In the recent work of using CocosCreator (hereinafter referred to as CC) to develop HTML5 games, I found that many of the company's games have the same elements, such as countdown bars, checkout pages, and so on. In the early development, we did not find a way to reuse, we can only write from scratch in different game projects. With the increasing demand, it is definitely not a good way to reinvent the wheel, so for CC projects, can these reusable game elements be extracted as component packages? After some exploration, I finally found a solution.

What is CC component

Take our "Taiko Daren" mini-game on mobile Q as an example, its countdown bar and settlement page also exist in other mini-games, but only in appearance, but the logic is the same of. The countdown bar and settlement page here can be understood as components.

The logic of the two components is as follows:

• The countdown bar can set the game time, and the fill length is continuously reduced during the game time; the remaining time will be displayed on the right side of the countdown bar; a callback action will be performed after the countdown.
• You can set the level score on the settlement page, and you can get stars if you reach or exceed the specific level score; the stars will be displayed according to the animation logic; the score will be settled from 0 below; the callback action will be performed after the settlement is completed.

Through this example, it is not difficult to understand that a so-called CC component is a game node that contains different resources such as logic, pictures, animations, and audio . In CC, a node looks like this:

As you can see, the editor defines its structure on the left, its concrete manifestation in the middle, and its related attributes on the right.

What should I do if I want to reuse this already defined node in other projects?

Turn into prefabricated resources

In CC, prefabricated resources are a very important part, which can be understood as a template for nodes. If you want to abstract a ready node into components, turning it into a prefabricated resource would be the most appropriate method.

When we define a good editor in CC node to its associated logic script, after static resources, it directly from the editor's 层级管理器drag 资源管理器can put it into pre resources. However, because the association of resources in the CC is based on the resource path, before abstracting a CC component, it is necessary to put all the resources used by the component together to facilitate future reuse. When the project is reused, it will report the error that the resource cannot be found.

Create a new CC project, clear the assets/directory, and then create a Components/directory in it as our directory for storing CC components. Take the game result page Resultas an example, initialize according to the following directory structure, and put in the necessary resources:

.
├── Resources           # 组件静态资源
│   ├── score.png
│   └── star.png
└── Result.ts           # 组件脚本

Then in the CC editor, add pictures to the child nodes by dragging and dropping, and finally bind the logic script Result.ts:

When finished, drag it to the resource manager assets/Components/Resultdirectory to become a pre-made resource.

In order to allow other users to easily use this component, a demo can be added to it, which contains the scene and scripts required by the scene. When users need to understand this component, they only need to preview the Demo scene, and some methods of the component can also be seen in the Demo script. The final directory structure is as follows:

.
├── Demo                # 组件使用Demo
│   ├── Result.fire
│   └── ResultDemo.ts
├── Resources           # 组件静态资源
│   ├── score.png
│   └── star.png
├── Result.prefab       # 组件节点
└── Result.ts           # 组件脚本

how to use

To put it simply, just Components/copy the entire directory of the component library project to the target project assets/directory, and then drag the pre-made resource node to the hierarchy manager. Of course, such manual operations are not elegant enough, so we can use shell scripts to help us simplify this step.

Create a new download.shscript in the root directory of the target project and write the following:

#!/bin/bash

# 先清理一下
echo "Clearing workbench..."
rm -rf ./cocos-components
rm -rf ./assets/Components

# 直接clone组件库工程，取出Components目录，然后删掉组件库工程
echo "Cloning project..."
git clone http://git.xxx.com/cocos-components.git
cp -r ./cocos-components/assets/Components ./assets 
rm -rf ./cocos-components

echo "Done!"

In the future, you only need to execute ./download.shit to download the latest component library, which is very convenient.

Component design specifications

Component design should follow the "black box" principle, it does not depend on other components, nor does it affect other components. The state of the component is saved by the component itself. If you need to change the state or behavior of the component, you should expose configurable items or interfaces through it (modified through the Cocos Creator property inspector or introduce a script instance of the component).

Take Progresscomponents as an example.

It provides gameDurationconfiguration items to the outside and defines the duration of the countdown. In addition, it also provides a setTimeoutCallback()method for defining the behavior when the countdown ends. The former can be modified directly in the Cocos Creator property inspector, and the latter needs to be used by code in the game script:

import Progress from '../Components/Progress/Progress'

@ccclass
export default class Game extends cc.Component {
  start () {
    Progress.instance.setTimeoutCallback(() => {
      console.log('Test progress timeout callback!')
    })
  }
}

When defining a script for a component, pay attention to adding a instancestatic property named for the script to be used between scripts:

export default class Progress extends cc.Component {
  static instance = null

  constructor () {
    super()
    Progress.instance = this
  }
}

In addition, building component libraries must pay attention to naming conventions, so that both the developer and the caller can save a lot of trouble.

Subsequent optimization

The CC component library project is also a complete CC game. We can add a component menu to this game, click the menu to load the corresponding component scene, and preview the effects of the component in real time. This idea will be put into practice later, and strive to open source as soon as possible.

This article is reproduced in: Ape 2048➣ https://www.mk2048.com/blog/blog.php?id=h0ji011cbaa