3.6 New Features 1/3: Editor

Preface

I'm so happy to see that Cocos Creator 3.6 is finally released.

Since there are lots of updates in v3.6, it will be divided into three parts: editor, rendering, and performance optimization.

Now, Let's move on to the topic of this article and count down the important enhancements to the editor in Cocos Creator 3.6.

UI & UE improvements

Open Cocos Creator 3.6 editor and the first thing you feel is: it's different!

I'll skip the hundreds of words of praise here and just say one word: fantastic!

So what's different about this version?

Theme

1, In Preferences, remove the Theme Color option, you can no longer change the theme.

2, The the color brightness of v3.6 is between the two theme colors("creator" and "dark") in previous version,it will be more comfortable when you looking at it.

3, The color of the title bar keeps the same as the theme color (currently only supported by Mac OSX, Windows platform will be supported in later versions), and the spacing line between areas uses dark lines, which looks more high-end.

Scene Editor

It is evident that many functions have been changed from the panel to floating buttons on the scene area, and that these floating buttons will change depending on the editing mode, allowing developers to focus on the content being edited.

This UI revision is much more than that. For more details, please download and launch Cocos Creator v3.6 to experience it yourself!

If you want to post suggestions and feedback on these changes, you can go to our official forum and post.

Preview in Editor

When Cocos Creator version 0.9 came out, I started looking forward to the day when I could run and debug games directly in the Cocos Creator editor. Now, that wish has come true.

This function is very powerful, with it, you can visually see node data changes when developing games; you can modify objects' information with the help of editor editing; you can see dynamically created objects in the node tree; you can test Shader parameters on the panel, etc.

As shown above, launching this preview mode requires only two steps.

• 1.Change preview mode into Preview in Editor
• 2.Click on the button indicated by the red arrow in the figure above to access the screen as shown below.

To take care of all kinds of project needs, the Preview in Editor mode provides the following useful features.

• 1.Stop preview: indicated by red arrow,click to exit the preview state
• 2.Adjusting the frame rate：indicated by blue arrow, You can input the desired frame rate. This feature is very useful, for example, you can set it to 1 to check the animation status frame by frame. It can also be set to any value to check if the game logic functions properly at different frame rates.
• 3.Change preview resolution：indicated by green arrow,The resolution list provides popular configurations to choose from, or you can customize the resolution.
• 4.Device orientation: indicated by yellow arrow, you can switch the horizontal and vertical preview mode.
• 5.Preview zoom: indicated by grey arrow, you can zoom the preview window size.
• 6.Fit window size: indicated by white arrow, When clicked, the preview window content will be adjusted to the most suitable display size.

Rendering Debug View

This feature helps you to check information about shadow areas, UV, normals, specular, etc. in your 3D projects.

The operation interface is shown in the following figure：

Zoom in a bit to see.

This feature currently supports checking the following information.

Lighting & Shadow

• Lighting With Base Color
• CSM Layer Coloration

Primary Model Data

• Vertex Colors
• World Posistions, World Normals, World Tangents
• Front Face Coloration
• UV0,UV1,Light Map UV
• Projection Depth Z
• Linear Depth W

Primary Material Data

• World Space Pixel Normals/Tangents/Binormals
• Base Color, Diffuse Color, Specular Color
• Opacity, Metallic, Roughness, Specular Intensity

For all options, see the following figure.

Some screenshots of the feature

3D model preview enhancement

Cocos Creator 3.6 has enhanced 3D model thumbnails. So far, Assets window, Assets Preview window and Mesh Selection window all support 3D model thumbnails, it can be more efficient when you selecting models.

Localization Editor

Cocos Creator has supported i18n multi-language solutions for a long time, but the problem with using i18n directly is that developers need to set their own multi-language strategy, and if the strategy is flawed, they can't leave the translation work entirely to the planners or content translation teams.

In addition, it may take two projects from start to finish for a team to gain more experience in handling multi-language versions.

To solve these problems for developers, Cocos Creator 3.6 comes with a built-in visual Localization Editor that has the following advantages.

• Simple and efficient: one-click scanning of the required translation content, fast building, intelligent file matching and more.
• No code operation: all processes can be completed with just a click of the mouse, and the translation work can be transferred to planners, bd etc., reducing the workload of programmers.
• What you see is what you get: you can preview at any time and switch between languages.
• AI translation: AI translation system has been accessed, a click of the mouse can automatically translate.

The panel can be opened from the Panel->Localization Editor menu, as shown in the following figure.

Don't be scared by the seemingly complex interface, most of the content on the interface can be filled automatically.

The multi-language configuration of a project can be done in three simple steps.

• Content Collection: Get the text, ts code, scene, prefab, video, audio, image files that need to be translated by automated scanning.
• Content Translation: Translate content through manual or AI translation tools
• Build Release: Package the specified language with the build release function.

Enhanced animation editor

See the effects section of the GIF above, which consists of a slash and a hit effect. When the character's slashing action reaches a certain frame, the slash effect starts to play. When the slashing action reaches the hit frame, the hit effect will be played.

To efficiently produce effects like this in the editor with perfectly matched movements and effects, we need at least two features of the animation editor.

• 1. Allows actions to trigger special effects or other animations
• 2. Real-time preview, what you see is what you get, easy to adjust the details

The animation editor in Cocos Creator 3.6 adds the ability to play one or more existing animations on the trigger track and control their duration.

This feature allows effects artists to achieve more complex effects by combining them while creating animations. And, the real-time preview also makes the efficiency of the effects artist significantly improved.

Effect artists, get moving!

Optimized 3D model importer

The model importer is enhanced in almost every version update, and Cocos Creator already supports smart material import, as shown in the following image.

As of today, the supported DCC materials are listed below.

The following figure shows a comparison of the effects of the automatic import of materials from Maya into Cocos, and it can be seen that they are very close to each other.

The main updates to the importer in version 3.6 are as follows.

• 1.Support GLTF specular-glossiness
• 2.Added specular channel support for Blender principled bsdf materials
• 3.Support Importing mixamo.com model materials
• 4.Enhanced the default effect of material import from fbx-surface-phong
• 5.model splitting disabled by default

Let's take a closer look at point 3 mixamo material support and point 5 model splitting disabled by default。

mixamo.com

mixamo is an Adobe software that can intelligently bind and animate bones for models of human beings, and it also provides a library of many character models and common actions that can be used for free. As shown in the figure below.

However, when the models exported by mixamo are imported into Cocos Creator, the material rendering differs a lot, so it has been fixed in Cocos Creator 3.6.

BTW, Many developers say they don't know where to find 3D models with animations, mixamo.com is a good place to look.

Model splitting disabled by default

Due to the limitation of Uniform, when the number of bones exceeds a certain value, it cannot be submitted to the graphics card for rendering at once, so special processing is needed.

There are two common ways to deal with this.

• Splitting models and bones and submitting them in several draw calls
• Passing skeletal animation data to Vertex Shader using textures

Before Cocos Creator version 3.6, the model splitting feature was enabled by default.

The reason for turning it on by default is simply this: When the model bones are within the Uniform limit, the performance of using Uniform directly to transfer skeletal animation data is higher than using textures to transfer skeletal animation data.

The explanation from the engine team is:

For CPU version of skeleton animation, Uniform is used for skeleton data transfer, since the Uniform limit of different devices and graphics drivers are different, so we use the lowest limit of iPhone6 WebGL as the Uniform limit to make sure it is OK in any situation. If the number of bones in the model exceeds the limit (about 26 ~ 30), the model will be split into different sub models, which are equivalent to different draw calls, so that the Uniform of each draw call will not exceed the limit.

So why is there no need for splitting in Cocos Creator 3.6?

The answer is that in Cocos Creator 3.6, for the non-GPU version animation, a dynamic Uniform constraint judgment is made at runtime, so that if the condition is met, it will be passed using Uniforms, and if not, it will be degraded to FloatTexture or RGBA Texture.

The basic rules are as follows.

• No model splitting by default, no modification to the original data of the imported 3D models
• If the number of bones does not exceed the limit, pass it directly using Uniforms
• If the number of bones exceeds the limit, use texture passing

Using textures to pass skeletal animation data requires access to textures in the vertex shader, a feature that is minimally supported by OpenGL ES 3.0, WebGL 2.0.

However, relying on GL extensions, almost 100% coverage has been achieved on devices that only support OpenGL ES 2.0 and WebGL 1.0, so no need to worry about compatibility issues.

This option should be retained for now only to maintain compatibility with older projects, and will be considered for removal in due course.

Enhanced scene editor

For most 3D games, the efficiency of the scene production often determines the project schedule.

Cocos Creator 3.6 provides the following three features to improve the efficiency of scene editing.

Surface Snapping

Surface Snapping is mainly used to move objects over a certain range of surfaces so that objects can be placed precisely on the surface of the object.

Note*: For objects with collision body components, Surface Snapping will snap to the surface of the collision body, while for objects without collision bodies, Surface snapping will snap to the surface of the object.

The operation process is as follows.

• Select the target object to be moved
• Press the shortcut key (Ctrl/Command + Shift), gizmo appears, drag the ICON
• Switch the anchor point to the vertex to be moved when moving the mouse
• Hold Left Mouse Button and drag the ICON to move
• When moving, the tool automatically detects objects with collision volume in the area around the cursor, and if not, it is attached to the surface.
• Release the mouse after the movement is complete and left click to confirm the position

Vertex Snapping

The main purpose of Vertex Snapping is to more precisely align a vertex on one object with a certain vertex of another object.

The operation process is as follows.

• Select the target object to be moved
• Press the shortcut key (v), gizmo appears, drag the ICON
• Switch the anchor point to the vertex to be moved when moving the mouse
• Left click on the anchor point and move the mouse
• The tool will calculate the current target to be snapped based on the cursor position and move between the vertices of the target. Note: Snapping is only possible at locations with vertices
• Release the mouse after the movement is complete and left click to confirm the position

Multi-object box selection

Multi-object selection is a very frequent operation in scene editing. When there is no multi-object box selection function, if we want to select multiple objects, we need to know precisely the object node, and then multi-select the operation by way of check node, which is very inefficient.

With the multi-object box selection feature, scene editing is more flexible and convenient. Users don't need to look for the object nodes in the hierarchy manager that need to be multi-selected, the objects that are all covered in the selection box will be selected and the objects that are not all covered will not be selected.

The operation process is shown below.

Summary

Productivity is the main indicator of an engine's excellence, whether it is ease of use, stability or compatibility, and will ultimately be reflected in productivity.

Cocos Creator, the latest version of the Cocos engine, has been built from the ground up with the main goal of improving productivity. This is the reason why I think it is worth investing effort in learning and studying for a long time.

The long-awaited features of Built-in Preview, Rendering Debugging and 3D Model Preview Thumbnail are all online in this version, making development and debugging much more efficient.

Visual Localization-Editor and Animation Editor Enhancement are sort of surprises, another big step forward in terms of multi-language versions and art tool enhancements.

Model splitting is disabled by default Although it is a very small detail, it solves most project problems, and I hope that more and more small optimizations like this will be made in the future.

Due to the limited space, I can't show all the editor-related optimization one by one, more content will have to rely on you dear friends to dig it.

Thank you all and see you in the next post!