Before writing an extension, first understand the basic structure of extensions in Cocos Creator.
The Cocos Creator editor is based on the Electron kernel. Electron is a cross-platform development framework that integrates Node.js and Chromium.
The Cocos Creator editor follows the structural design of Electron's main process and rendering process. When the extension starts and runs in the editor, the main defined by the extension is actually started in the main process, and the panel defined by panels is started in the rendering process. The process structure is briefly summarized as follows:
Browser |- panelA |- panelB ...
The extension has a complete nodejs environment, which makes it easy to use a large number of tools on the npm market. Used to complete the function you want.
If you need to interact with other functions, you need to open the corresponding operation message for the corresponding function. In extensions, use the messages to trigger, query, and process the functions or data in the editor. The open message list can be viewed in the top menu Developer -> Message List panel.
In addition, you can also use some tools to facilitate the development of extensions, such as:
- Use TypeScript to develop extensions. After compiling into js, fill the compiled js into
package.jsonfor the editor to run.
- After the template rendering in the panel is completed, use vue to bind the data to facilitate interactive development of the panel.
The extension only agrees to the entrance, during which a large number of external libraries can be used to optimize the development process.