Share my cocos creator plugin development tips and tools

It has not been updated for a long time, and I will share with you some of my ideas and achievements on plug-ins in the last 30 years.

Early personal development of the number of plug-ins a little too much, are some of the small tools, but also thanks to so many plug-ins, let me in the process of maintenance, found a lot of pain points, and slowly formed a set of solutions.

In the process of maintaining personal plug-ins, I have encountered a lot of problems, the following is listed in chronological order, hoping to give some help to plug-in developers who encounter these pain points.

plugin packaging

This is the first problem I encountered. At the beginning, all my plugins were released in source code, and the creator did not have an anti-piracy mark mechanism in the early days (all understand and do not need to explain), so I hope the plugins can be compressed and confused as much as possible. Using jsfuck is a bit excessive, and it is not good for my later troubleshooting. Secondly, I do not want to publish some files needed in the development process, and it is troublesome to manually package and modify them every time, so I wrote a npm package by myself to temporarily meet my needs.

cc-plugin-packer - npm

creator version adaptation

After that, the second problem I encountered was the version of creator. There were many versions of creator, and for some time, I received feedbacks of incompatibility of plug-ins from users every day. The most common problem was the change of editor api, and finally I found out the cause and added some compatible code. How to synchronize these compatible codes in time is a little disgusting.

This is when I realized that I had to develop a cli tool to base my plugins on this cli, and that this cli could handle not only api compatibility issues, but also the compression obfuscations that I had previously packaged, but I didn’t have the ability and insight to figure out what to do.

Later, cocos creator released the v3 version, the plug-in mechanism has undergone very big changes, which also means that I need to turn over all the plug-ins to fit again, which is more disgusting, for some time, I have been a little depressed, feel like being kidnapped.

In fact, during the time I worked at cocos, my personal web front-end skills improved a lot. My colleague who worked on the project with me was a professional web front-end, and I stole skills from him.

I have always thought that cocos creator’s plug-in development model is not specialized enough, essentially writing js naked, and later did a project together directly let me see how to make plug-in development more ‘front-end engineering’, perhaps not perfect, at least gave me a lot of inspiration.

Later also read some Webpack advanced tutorials, also studied some npm package source code, and slowly there is this npm package

cc-plugin - npm

Based on this npm package, the plugin can be released as’ creator v2 ', ‘creator v3’, ‘web’ version with one click. The bottom layer of cc-plugin handles many of the compatibility holes I encountered with creator2.x and 3.x versions. Although the creator plugin part of the new feature cc-plugin did not follow up support in time, but this made my plug-in migration work became a lot smoother.

When developing cc-plugin, it was also inspired by vue-cli, and if you read the source code of cc-plugin, you will see that it is very similar to vue-cli.

UI adaptation

The next problem is the cocos creator plug-in UI control problem, the main reason is also the usage has changed, but the change of v2, v3 version is too big, the change is also very disgusting, maintenance needs to keep looking at the editor’s own demo ui.

It is a pity that creator’s ui control is not open source. If it is open source, I can integrate it into my cc-plugin, but even if it is open source, the meaning is not too great, because I need to ensure the unity of the use of ui controls in v2 and v3 versions.

Moreover, my cc-plugin also wants to support the web as much as possible, because hot module replace will directly improve the development efficiency several levels, the small friends who have used vue know the importance of hmr, and the use of ui controls also wants to be as close as possible to the use of game controls.

All these demands forced me to implement a set of ui controls that mimic the style of cocos creator 2.x

@xuyanfeng/cc-ui - npm

It can perfectly cooperate with cc-plugin for plug-in development. Before writing cc-ui, I also tried other ui frameworks, but I gave up because of such errors, mainly due to a series of problems brought by shadowdom.

Run the plug-in project

This is the last pain point I encountered. After the plug-in was written, since cc-plugin supports v2 and v3 versions, I need to test different versions, so I need to publish plug-ins in different projects. This requirement cc-plugin has been realized, but the problem is that I need to start these projects, and it is a little troublesome to pass dashboard. If there are more projects, and often switch projects, it is very difficult to find, and it is easy to open errors.

So I developed another npm package:

@xuyanfeng/cc-editor - npm

Bind the editor and the project path, directly ‘cce run’ after configuration, very comfortable, more than a few bindings, cce free switch, more comfortable.

creator v2, v3 version command line open project ‘project path’ parameters have also changed, cce will automatically process, is disgusting compatibility, later I found that I need to debug the plug-in main process code, of course, also need to add startup parameters, cce are supported, now this set down, the development experience is a little slimy.

Debug plug-in main process

Because I have personally developed several VsCode plug-ins, the plug-in development experience of VsCode is called awesome, and cc-plugin is to make up for it to a certain extent.

This is my personal small need, but I feel that it is also a need for plug-in developers.

Debugging the main process, presumably everyone is using ChromeDevtools, but I want to use VsCode debugging, so I studied it, and really studied something.

cc-plugin-debugger - Visual Studio Marketplace

store.cocos.com/app/detail/4417

The above two plug-ins need to be used together, and at present, there is no idea how to better integrate and optimize the development experience, and then conduct in-depth development over time.

Personal technology stack is relatively complex, but also thanks to cocos, so many skills can be summarized to form a set of solutions to solve a problem, the above BB so much, inevitably have the suspicion of advertising, really listen to your words, as if words.

However, I feel that good things can’t be hidden, and maybe one day I can help you , I use my 30 years of development experience to guarantee!

3 Likes

Forum post prompts me not to allow the use of links, want to see the link, just need to replace the c o m with com.
The original text of the article reads:

forum.cocos.o r g /t/topic/153170

My English is not very little, what you see is the result of machine translation, sorry

Xu_Yanfeng is a MVP Cocos dev, so thank you for this amazing topic