Background
Summarize and organize some commonly used resources and code to form your own “framework” for reuse in subsequent projects.
This is a common practice in project development and a primary method for technical accumulation.
However, over time, this framework can become increasingly “bloated,” and not all projects can utilize the entire framework’s functionalities.
So, how can we solve this problem?
Solutions
There are usually two popular methods to address this situation:
1. Remove “Useless” Resources through Reference Relationships
“Useless” means that the editor detects no “reference” to certain resources. For example, in Cocos Creator (hereafter referred to as CC), there is a method for removing unused resources that are not dynamically referenced. Similarly, AndroidStudio (hereafter referred to as AS) has the shrinkResources configuration.
PS1: Since resources packaged by Cocos Creator are not directly referenced by Android Studio, this parameter should be configured as false in the Android Studio project after the Cocos Creator project is published.
It’s worth noting that code obfuscation (minifyEnabled) in AS not only obfuscates methods but also removes unused code. Therefore, if the code is called via reflection, we also need to exclude it from obfuscation.
PS2: For instance, if Java code is called in Cocos Creator using the
callStaticMethodmethod via reflection, we should either disable obfuscation or write the obfuscation method in theproguard-rules.profile.
2. Remove Code Using Macros
Language macros are quite common in C++ and Objective-C. For example, in XCode, macros can be set using Preprocessor Macros.
Cocos Creator also provides a macro configuration scheme to remove unnecessary code blocks.
Macro Configuration in Cocos Creator
The macro configuration method chosen by CC is consistent with the webpack. In Cocos Creator 2.x, only built-in macros (mainly platform macros) were available, which could not meet our project needs.
In Cocos Creator 3.x, the engine team has opened up custom macros, giving us the ability to remove project code. This is another highlight of Cocos Creator 3.x compared to 2.x.
Next, let’s see how to use macros.
1. Add Macros
Open Project Settings Panel from the top menu → Project → Project Setting, and select Macro Configuration.
In the panel that opens, you can see an Add Custom Macro button at the end.
We define a macro called CUSTOM_TEST. To enable this macro, just check the box.
2. Use Macros
In the code, we use if-else for judgment, and the editor will automatically remove the relevant code during compilation, as shown below:
import { _decorator, Component, Node } from 'cc';
import { CUSTOM_TEST } from 'cc/userland/macro';
const { ccclass, property } = _decorator;
@ccclass('Test')
export class Test extends Component {
start() {
if (CUSTOM_TEST) {
// TODO tasks to do when the macro is enabled
} else {
// TODO tasks to do when the macro is disabled
}
}
}
By toggling the CUSTOM_TEST macro, you can package two different versions and see the differences in the content of the published packages.
Conclusion
The functionality shared here is a basic feature of Cocos Creator and is very simple. During discussions in related technical groups, I felt that many people had not used it or were unaware of it, so I am sharing it here in the hope that it will be helpful to everyone.
About the Author
- Nickname: dream93
- Location: Changsha
- Introduction: Originally worked in APP development, later entered the game industry, and has been using Cocos Creator ever since. Enjoys being active in various technical exchange communities. Currently working at a small game company focusing on developing various toolchains, porting libraries, and creating tools. Hopes that his sharing can help those in need.