Plug-ins and tools developed by Tencent Online Education for Cocos Creator
The following article is from Tencent Online Education Technology Author nextfu
Tencent Online Education Technology.
Tencent’s online education technology sharing platform aims to share online education front-end/terminal/back-end development experience and research practices.
In the process of using Cocos Creator to develop projects and to improve development efficiency, we have developed a lot of extension plug-ins. This article introduces several commonly used ones and hopes to help you.
Tencent Happy Mouse English
Web extension: View scene node tree at runtime
Cocos Creator local projects are usually debugged and run on Chrome. With Chrome’s powerful developer tools, we can debug and optimize web page performance, network, script logic, etc. However, for games, there is no way to intuitively obtain and modify the node component information in the scene, and it is impossible to locate the problem quickly. To solve this pain point, we can modify the webpage template when previewing in Cocos Creator to display more scene information.
The following is the modified preview game interface:
The following functions have been extended:
- The scene node tree is displayed in real-time, and the properties of nodes and components are displayed and changed in real-time
- Visualize cached resources
- Mark the node position in the scene
- Output node, component reference to the console
Source code:
This page is developed using vue + vuetify. For single-page applications, vue is a perfect choice. You can also customize the preview interface of your project based on this method.
Cocos developer Xu Yanfeng: This plug-in makes up for the shortcomings of Cocos Creator’s real-time, dynamic modification and debugging when the game is running and is definitely a powerful tool for quickly locating bugs. Based on this idea, many variant versions can also be seen in the community. Relatively speaking, this plug-in is the version with the most abundant functions and the best experience.
In addition, the extension is based on vue development, and the creator’s plug-in development can also use vue seamlessly.
Thank you for the author’s generosity and open source. Seeing the author’s selfless spending of energy and time to benefit everyone, please like it! ! ! Forum thread direct: 【运行时显示节点树插件】ccc-devtools悄悄更新 - Creator 2.x - Cocos中文社区
VS Code extension: JavaScript code supports function jumping
Cocos Creator supports JavaScript and TypeScript. If you use VS Code to develop js projects in Cocos Creator, your programming experience shouldn’t be very good because Cocos Creator’s component scripts are a set of custom structures.
const mylog = require('mylog');
cc.Class({
properties: {
node1: cc.Node,
node2: cc.Node,
label1: cc.Label,
label2: cc.Label,
},
start: function() {
this.method1();
},
method1: function() {
console.log('method1');
},
method2: function() {
console.log('method2');
},
});
Under this structure, VS Code cannot recognize this. When you enter in this, you cannot accurately obtain the accessible properties and methods, and you cannot jump to the definition location by clicking the method name or module name.
Fortunately, VS Code has a rich extension API. By studying the document[1] , we have developed a plug-in that allows js code to support function jumps and attribute prompts. You can search for “Cocos Creator JS” in the VS Code plug-in store to download and use.
Here is the preview effect:
- js code supports function jumping
- js code hint
- module jump
Source code:
Cocos Developer Xu Yanfeng: Use VS Code to write Cocos Creator games is standard! If you can expand the linkage jump between Creator editors such as Prefab and Scene, it will be perfect! The entire ecology and tools are handled by JS in one language, and the WebStorm party expresses great envy!
Editor Extension: WeChat Mini Game Subpackage Dependency Check
Thanks to the excellent cross-platform capabilities of Cocos Creator, our project has been launched on Android, iOS, Web, and WeChat mini-game platforms. Since the WeChat platform restricts the size of the code package, we used the code subcontracting function when launching WeChat mini-games. However, some modules are coupled with each other during the project development process, resulting in dependencies between the main package and subpackages or subpackages after subcontracting. Importing it before the dependent package loads will cause the program to fail. To solve this problem, we developed a Creator plug-in that automatically detects subpackage dependencies. The effect is as follows:
After clicking the Check Dependency button, the plug-in will automatically check the dependencies between all subpackages and display them visually. Click the file name to locate the script location, and modify it according to the modification suggestions.
Source code:
Cocos Developer Xu Yanfeng: Error correction assistant, customized according to the project’s special needs. I can imagine that because of the limited external interface of the editor, the author uses the most primitive way to read files for processing. We’re happy to hear better ways to improve this.
Editor extension: Quickly open scenes
In the process of using the Cocos Creator editor, the worst personal experience is the search function in the resource manager. When searching for resources in version 1.x, the function to globally filter resources will be called once every letter is entered. Feeling the constant lag, I slightly optimized the experience in version 2.x, and changed to press Enter to execute the filter function, but the search in projects with many resources will still lag.
To solve this small but mood-affecting problem, we developed a search plug-in that can quickly search and open scenes or prefab resources. No waiting, no mouse needed.
Source code:
Cocos Xu Yanfeng: We observed that to use the plug-in function normally, the plug-in panel with instructions must be opened. If it can be installed and used, it’s great. But we consider:
- Use Electron to create your own BrowserWindow for processing, and you may need to handle IPC messages yourself;
- Use Editor.Scene.callSceneScript to trigger the corresponding logic. In this case, the logic needs to be migrated to scene-script. I am looking forward to the subsequent update of this plug-in!
Console extension: console view node tree, node properties
Through Chrome’s developer tools, we can directly remotely debug the JavaScript code of Cocos Creator in the native platform, but some UI-related problems are still challenging to locate. Viewing the node tree in the console would be much more convenient.
First, let’s introduce these console.group and console.groupEnd, two functions that can form a collapsible tab for grouping output information. console.group expands by default, and console.groupCollapsed collapses by default. So obviously, we can use them to output a tree structure.
function tree(node = cc.director.getScene()) {
let style = `color: ${node.parent === null || node.activeInHierarchy ? 'green' : 'grey'};`;
if (node.childrenCount > 0) {
console.groupCollapsed(`%c${node.name}`, style);
node.children.forEach(child => tree(child));
console.groupEnd();
} else {
console.log(`%c${node.name}`, style);
}
}
Paste the above code into the console, and then enter tree(), you can view the node tree structure of the current scene.
The above functions are still straightforward, and we can get more functions after expansion.
Each node will be followed by several common attributes and a unique id, which can be referenced by cc.cat(id)to improve debugging efficiency.
Source code:
Cocos Xu Yanfeng: A console can help so much. It’s a handy little function!
JSC encryption and decryption tool for Cocos
Cocos Creator supports encryption and compression of scripts during construction.
However, the official version does not provide a decompression and decryption tool. This brings inconvenience to the secondary modification and reuse of jsc.
This tool makes up for this deficiency: it provides the same encryption, decryption, compression, and decompression methods as Cocos Creator. It is very convenient to decrypt and decompress the built jsc to obtain js, or compress and encrypt the js back to jsc.
Source code:
Cocos Xu Yanfeng: Great function, but pay attention to protecting your encryption key.
References
- Cocos Creator extension editor document [2]
- Cocos Creator custom web page preview document [3]
- VS Code plug-in development documentation [4]
Reference Links
[1] Documentation: Programmatic Language Features | Visual Studio Code Extension API
[2] Cocos Creator extension editor documentation: https://docs.cocos.com/creator/manual/en/extension/
[3] Cocos Creator custom webpage preview document: https://docs.cocos.com/creator/manual/en/advanced-topics/custom-preview-template.html
[4] VS Code plug-in development documentation: Your First Extension | Visual Studio Code Extension API
Thanks for the plug-in sharing brought by Tencent Online Education Technology, the author Next is also very active in the Cocos community, often helping developers answer questions. Your comment is the most tremendous encouragement to the author!