Article: Our Plug-in Princess’s Journey In Cocos

Last week we shared some of the updates to the Cocos Creator 3.0 extensions system, allowing 3rd party developers to bring some fantastic new and excellent items. This has included speech animation automation, customized handwriting, and more complicated particle systems.

The process of having an excellent extension system is thanks to our Cocos engine development engineer Yan Yuanyun. Her work has not only in the extension development but also with the animation editor has benefited our company and Cocos Creator.

We were able to interview her last year and ask her for her story. We're happy to share it with you today and proud to have her in our office helping us build amazing software.

I never thought of becoming a programming lady

I joined Cocos after graduating from college. Before working here, I didn't know much about Cocos. But I had been doing front-end engineer internships before I arrived.

I was interviewed by Jare and Sijie, two of the leaders for the Cocos Creator project. What I remember most clearly is that the written test questions were all in C++. Later, Jare told me that I had done everything wrong. I can laugh about that now because Sijie smiled throughout the whole process, and the questions asked were all front-end related, which made me feel very relaxed and confident. After joining the company, he confirmed that the test was a complete tease to see how I'd react.

Before going to university, I never thought that I would become a programmer. I was studying a lot of software from the Adobe software suite in school (mostly digital media). I was focused on all kinds of photography and camera use, post-editing, special effects modeling, animation design, and advertising.

I always thought that I would take the direction of art in the future, and I would try my best to get closer to positions where I can train for these positions.

College homework design drawing

In my sophomore year, I was doing web design homework. I understood the concept of having good front-ends, and unexpectedly I quite liked the idea. As there's always an art and technology compromise, it seems to be a good thing to study.

College homework design drawing

Before coming to Cocos, I was confused about what to do with my work, mainly about the consideration of going into technology development. I was just a front-end designer and worried that the direction of taking a job and working as an engine editor was too difficult. 

Of course, I was utterly relieved later. They were all technically oriented like me. But then what I was really was afraid of was the growth that the project itself could bring and if I could do it.

In my opinion, most of the technological growth I received early on was inseparable from the development of the participating projects I'm was a part of. In-depth participation in challenging projects that continuously require new knowledge is the best opportunity to exercise your brain. This is how I officially started my journey with the 3D editor group.

From 0 to 1, every start is a new starting point

When I joined the company, the 3D editor was in a rudimentary form. It didn't have many functions and was only built on a basic framework. But I think this is very rare. It means that I can witness the project being built from ground zero. You don't have many opportunities to participate in a large project in its early stages. The chance to start from scratch, with so many functional designs that are slowly being discussed in the design, was a great learning experience.

In terms of function, I took over from the UI components. At that time, Cocos Creator 3D (the version built to prepare us for Cocos Creator 3.0) had not yet been released as a beta. The journey of building different parts of the editor was determined entirely by myself, so I followed the project outline and started making it.

I remember that what I had to do at the beginning was to migrate existing functions from vanilla Cocos Creator. The overall framework was different, and the 2D editor had been iterated for so long that it took a lot of effort for me to separate many functions independently.

Some workmates may find this kind of work tedious and boring, but I actually thought it was pretty good at the time because when I didn't have that rich technical experience. So every code usage that I didn't understand was a learning opportunity for me. The module library I used, the code tricks I used and learning some of the processes that I didn't know at the time really helped me become a better programmer.

 Some articles I saw on the Internet at that time may have been outdated and are now unavailable, but these code examples shared helped me make a great usable production environment. It was a good learning opportunity!

Now in my daily time, I try to collect as much feedback as possible or think about optimizing functionality on my own, and also write documents and tutorials. Although the documentation is a trivial and troublesome thing for me, I help build upon it. Especially if we need to add pictures, add annotations to the picture, and so on. If many of the features were not written in the document or were not written clearly, developers couldn't understand the functions. How can it help developers?

So I continue to write documents and tutorials. Of course, I also hope that my efforts will be seen and valued. (Editor note: It really is!)

Building the animation editor - becoming more and more confident

Now in the engine group, I am responsible for the construction of the animation editor. In the beginning, I actually didn't know much. There are many details about the rules and settings, and there is no documentation to check. The code has been iterated for many years. It seemed to be a bit confusing.

In this case, the first step was to become more intimate with what to do, make a usable version, and then you can fully understand it, improve it, and upgrade it. In this way, step by step, I slowly added some optimizations and upgrades that I found helpful in the continuous iterative process.

Of course, after constantly completing those tasks, I've become more and more confident.

The construction of my code is more logical and detailed, and the animation editor has a lot better operational details. That was the easy part. In fact, to some extent, the animation editor's processing work was more complicated than the code construction. If you want to stabilize the code build, you can always test it a few times because the test method is relatively simple and logical, and test cases can verify the function, and the test process coverage of bugs is relatively complete and extensive.

But the animation editor is a highly customizable thing. When you have the animation happening and its implementing functions, it accessed them all one by one. Even if these functions are tested individually, there may be some incorrect or unusable situations when used in combination.

In many cases, the testers and I couldn’t follow the look you’d get from real professional art. The code development phase's focus is more on the code design and whether the implementation meets expectations, the sense of continuity with how it finally functions can be weakened if it doesn't look correct. This kind of thing is not like code that mainly depends on keyboard input. The common actions in animation can be changed with all types of shortcut keys or mouse clicks that could change the actions and cause trouble if quickly pressed.

I'm happy we have worked hard to improve on our Animation editor and that our team continues to work on it to make it a better experience with more advancements in the future.

Stressed and difficult - But everywhere is the scenery

In Cocos, I think what is important to me is to find a rhythm that suits me and the change in my sense of responsibility. From the original non-focused employee to fixing bugs to special maintenance of some modules, the responsibility is greater, the difficulties encountered will be more, and your own mistakes will be magnified.

When I am responsible for maintaining a particular module, all aspects of it are bound to me for others to see. Therefore, there must be pressure. The most stressed module is the animation editor. After all, the most complained about when we were still in 3D.

Of course, every time I see that the functions I have made are completed, praised by users, and helped developers, and every time a new version is released, this sense of accomplishment will dissipate all the pressure and exhaustion.

Let's stay together - Whether in work or life, I am a very willing person to try new things

Currently, I am constantly changing and exploring my hobbies; Watercolor painting, dance classes, cosplay in traditional Han dynasty clothing, and other things I do in my spare time. I'm Just enjoying the moment and be happy. 

I am very fortunate that the engine team I belong to has given us total freedom. Team members have their own division of labor, and everyone contributes their own efforts to promote the development of the entire product in the module they are responsible for.

I think Cocos is a group of people full of technical enthusiasm. Everyone really wants to do an excellent job of a product instead of simply doing the required tasks.

I believe that if you come here, you will be infected by such a group of people.

Finally, I want to say to everyone: "You are really great. I hope we can witness the moment when Cocos becomes a world-class engine together as soon as possible!"