Cocos Creator v2.2.0 released!

[slackmoehrle]

Cocos Creator v2.2.0 is released!

We strive to make your games work well on each platform. The Cocos Creator v2.2 update is the first time Cocos Creator has surpassed Cocos2d-lua in native speeds, while also significantly improving native performance! Cocos Creator v2.2 includes a number of enhancements and experience improvements, and developers of all versions are encouraged to upgrade.

What’s New

Greatly improve native platform rendering performance

In this version, we have significantly upgraded the rendering engine and achieved
tremendous performance improvements on native platforms, surpassing the speeds
of all previous versions of Cocos Creator, Cocos2d-js and Cocos2d-x.

Cocos Creator v2.2 can meet all the performance needs of every game, small to
large, simple to complex, few gaphics to 1,000’s of graphics. To help gauge performance,
low-end devices, such as the OPPO A57 and the iPhone 6S+ were used. We also
compared previous versions of Cocos Creator, Cocos2d-js, Cocos2d-x
and Cocos2d-lua to ensure we were testing in a broad spectrum, to provide the
most accurate data. The results:

• On Android native, the performance of Cocos Creator v2.2.0 is 1.5x - 1.7x
  Cocos2d-lua and Cocos Creator v1.9.3.

• On iOS native, the performance of Cocos Creator v2.2.0 is flush with
  Cocos2d-lua, which is 3x - 4x Cocos Creator v1.9.3.

In addition, Cocos Creator v2.2.0 running on iOS not only improves the frame
rate, but also greatly reduces any possibility of jittering when garbage collection
occurs. This means the actual game play experience will be really smooth. Here is
detailed performance data:

Support 3D model rendering batch

Cocos Creator v2.2.0 adds support for rendering batches of 3D models, which
effectively reduces the drawcalls for 3D games. To enable this feature, you
simply check the enableAutoBatch attribute on the Mesh Renderer and the engine
will automatically batch based on the material used, as well as the Mesh vertex
format and Primitive Type. For better optimization, it is recommended that you
enable this option only for models that can be batched and have a small number
of vertices.

Support for alpha channel separation of PVR compressed textures

Alpha channel separation format (RGB+A) for PVR compressed textures has been
added. This format uses a similar method to etc. to separate and compress the
transparent channel of the texture. After compression, the texture height will
be twice that of the original image, thus avoiding the problem of low image quality
in the conventional PVR RGBA format.

Support for custom browser preview templates

Allow users to customize the webpage used for browser preview in a way similar
to custom build templates. Support for 3 formats: HTML, Jade, EJS. See: Custom Preview Templates.

Support for ambient light settings

We have added an ambient light setting to the Light component for basic lighting
of 3D scenes. This is often used to solve the problem of blackout of the back surface
of the model. Just select Create Light → Ambient in the Node creation menu.
You can also add a Light component to the Node and set the type to be created
for AMBIENT.

Further improve the performance of Spine and DragonBones

Cocos Creator v2.2.0 optimizes the performance of 2D skeletal animation on various platforms.

• On the native platform, we have added support for Spine and DragonBones SHARED_CACHE
  and PRIVATE_CACHE. When the acceleration mode is enabled, the Spine performance
  of the Android platform is 2x that of the original, and the DragonBones performance
  is 7x the original. iOS platform Spine performance is 3x the original,
  DragonBones is 5x the original.

• After enabling acceleration mode on the web platform, Android Spine performance
  is 3x the original, and DragonBones performance is 4x the original. iOS
  Spine performance is 1.25x the original, DragonBones performance is 1.39x
  the original.

Here is a breakdown of the detailed performance data:

To enable acceleration mode, simply set the Animation Cache Mode to SHARED_CACHE
or PRIVATE_CACHE on the Spine or DragonBones component. For more detailed
information acceleration mode, refer to the property descriptions in the
documentation.

• Spine reference documentation
• Dragonbones reference documentation

Spine runtime upgraded to 3.7

• Support Spine partial reloading, please refer to Spine Component Reference, see SpineSkin in the engine’s own example.

• Support Spine vertex effect, please refer to Spine Component Reference: Spine Vertex Effect, please refer to SpineMesh in the engine’s own example.

Significantly enhanced TiledMap support

Cocos Creator v2.2.0 further improves the support of TiledMap. Grid rotation, grid animation, image layers, layer offsets, and object group text are now supported. Supporting multiple Tilesets in a single layer is also now possible. It also supports adding child nodes to the scene and creating an occlusion relationship with the map. And fixed the problem of rendering errors after a single map vertex exceeds 65535. For details, see TiledMap Component Reference. For details on use cases, see ShieldNode in the engine’s own example.

Property inspector tag supports width adjustment

We added a width adjustment function to the Property inspector to solve the problem of incomplete display of attribute names on some components. Now users do not need to greatly adjust the size of the entire panel, just drag the dividing line to the right of the property name to freely adjust the split ratio.

Release Notes

Improvements

• Optimize the editor and the startup speed of each panel
• Avoid every time the WeChat game build will overwrite the configuration file in the target project in order to retain the user’s custom configuration
• Change the margin property in the SpriteFrame resource panel and Sprite Editor from the trimmed margin to the original margin. Make it consistent with the data given in the art drawing, and have no effect on the old project data.
• Automatically remove the open domain components of other small game platforms during the build process, users do not need to manually configure in the module settings
• The native platform package name in the build panel will be stored separately according to different platforms
• Upgrade the editor’s Electron to 5.0.8, V8 to 7.3, node.js to 12.0.0
• Optimized Spine Initialization problem after enabling acceleration mode
• Officially supported on iOS platform etc2 Compressed texture
• Enable OpenGLES3 by default on iOS
• Adaptation macOS Catalina

Editor

• Fixed an issue where the scene name could not be obtained during preview after exiting Prefab edit mode
• Fixed 3D node in scene editor may show confusion after exiting Prefab edit mode
• Fixed an issue where the animation editor was being deleted and the animation editor would report an error.

Engine

• Fixed an issue where events polled with once could not be logged off
• Fixed cc.systemEvent listening for invalid once events (thanks to Zty)
• Fixes DragonBones and Spine textures do not support the problem of scene resource lazy loading [#4299]
• Fix part DragonBones The animation is not playing correctly
• Fixed an issue where warnings were not raised when the type was set to JavaScript’s native Number, String, etc. when using the decorator to declare CCClass
• Fixed a problem where the default value is incorrect when the CCClass is declared as the default value of cc.String, cc.Boolean, etc.

Native

• Fixed a problem with music being paused from the background after the music was paused on the native platform [#141] [#1875]
• Fix Android After playing multiple Audio instances in succession, there is a random problem with some sounds [#1869]
• Fixed Audio for lazy loading on native platforms, unable to stop after playback [#180]
• Fix iOS or Mac When the native platform reloads Font, it may cause memory leaks [#1761]
• Fix iOS 13 Dark mode causes EditBox white fonts are not visible [#1866]

Web

• Fix IE11 VideoPlayer Can’t full screen issue [#4879]

Mini Game

• Fixed AudioSource’s playOnload may not work
• Avoid iOS on Baidu game cut scenes may be black screen problem

Removed

• Removed Visual Studio 2015 support for building Windows platforms for unified use of 2017.

Breaking Changes

• Adjust cc.winSize from cc.Vec2 to cc.Size

Known Issues

• v2.2.0 does not support the Skew effect on nodes for the time being. We will provide documentation to guide you to manually enable Skew support. For new projects it issuggest ed to use 3D Sprite directly instead of Skew. For old projects please refer to [#5564] and [#1889] to match js and native engines to support Skew.

• After publishing to Windows/Mac, to resize the screen, please manually follow [#1891] to accommodate.

• Some old projects may have referred to this forum post, which implements screen rotation on iOS and Android. This is now old information. Please manually follow [#1891] to accommodate.

• On some macOS machines, Label will appear in the CHAR mode with a white border. This problem has a small impact and will be fixed in 2.2.1. For more follow-up version plans, please refer to the roadmap.

Upgrade Instructions

• If you open the 1.x project, all resources such as the scene will be automatically upgraded. If there is a warning or an error, please refer to 1.10.0 Resource Upgrade Guide and 2.0.0 Upgrade Documentation to make adjustments.
• 2.0, 2.1 Projects can be upgraded directly and seamlessly.
• Starting with 2.2, we have enhanced the memory management mechanism. Now the cc.Node that is dynamically created by the code and independent of the scene node tree must be released by destroy(), otherwise the engine doesn’t know when to recycle such nodes. In addition, nodes that are manually removed from the scene need to unify destroy when they are not needed. If the node is managed via cc.NodePool, it is not affected.

    // Suppose testNode is a node in the scene, if it was manually removed from the scene, such as
    testNode.parent = null;
    // or
    testNode.removeFromParent(true);
    // or
    parentNode.removeChild(testNode);
    // If testNode will be used again later, there is no need to manually destroy the node.
    // Otherwise it should be called manually
    testNode.destroy();

[hananht]

Perfect!

But I have an issue now… I cannot drag assets into the assets window for some reason.
Any clue why?

[slackmoehrle]

Let’s ask @jare to take a look at this.

[jare]

Sorry, we can not reproduce the problem.

[hananht]

I re-install Cocos Creator and after that I set “run as administrator”. Now it works. It was strange but fixed now.

[hananht]

@slackmoehrle Thanks for the version 2.2.0. Is there any place that I can add for you recomendation for improvements?

[slackmoehrle]

Feel free to reply here.

[MercuryBD]

Just to mention that effect/shader files have different structure now, and those needs to be updated to work with materials. Most of my shader files didn’t work until I updated them to new structure.

Also I would be good if there is explenation on Effect file in docs, how to create passes, properties, etc as there is non in the descriptions and I’m learning by testing…

[hananht]

Ok, so… I worked with several Game engines like Unity, Unreal, Phaser and PiXi. There are share (or common) methods that are not presented in Cocos Creator.

Common Math are missing:

For example some Mathematical methods like:

// Creating 2 Vec2 points:
const v1 = cc.v2(1, 0);
const v2 = cc.v2(10, 10);

// Now I want to add them together:
// Cocos Implementation:
const cocosV2 = cc.v2(v1.x + v2.y, v1.y + v2.y);

// Other Game Engines - Or what I want to see:
const otherV2 = cc.Vec2.add(v1, v2)
// Or
const otherV2 = v1.add(v2)
// There should be (add, divide, multiply and substract methods)

A lot of time we are calculating distances to set object direction.
Why we dont have this:

const distance1 = cc.misc.distance(v1, v2);
// Or
const distance2 = v1.distance(v2);
// Or
const distance3 = cc.Vec2.distanceBetween(v1, v2);

Also, working with angles is very important:

const angle1: number = v1.lookAt(v2);
// Or
const angle2: number = cc.Vec2.lookAt(v1, v2);
// Or 
const angle3: number = cc.misc.lookAt(v1, v2);

There is also a meaning for Inclines : m = (y2 - y1) / (x2 - x1)

const m1 = v1.incline(v2);
// Or
const m2 = cc.Vec2.incline(v2);
// Or
const m3 = cc.misc.incline(v1, v2);

There are many usefull Maths out there that are very important.
I can see you implemented:

cc.misc.degreesToRadiance
// And
cc.misc.radianceToDegrees

Looks like a good place to add more functionalities or maybe a new cc.Math lib?

Creator.d.ts is does not have every thing:

As I mentioned before, there are lots of common type structures that are missing here.
For example, I cannot do this in TS unless I am modifying the creator.d.ts or use :

const tween: cc.Tween = new cc.Tween(this.node);
// The code will throw error and creator.d.ts wants me to do this instead:
const tween: cc.Tween = new cc.Tween();
// So now I need to set the target manually later on:
this.tween.target = this.node;

Snap tool can be very usefull

In lots of game engines (with IDE of course) there is a snap tool that can help to place object on the grid or set objects close to others. This tool is missing but I can see in the road map that v2.5.0 will have it.

Missing information in documentation:

Building a custom inspector / panel is a MESS. Documentation is not strong enugh and it is not delivering the information that I need. also, We need to exit the engine and re-enter again to see the changes. And what about custom gizmos? It is in chinees too and still, there are not enogh samples to understand more complex situations.

Beyond that,

Engine is great!!! All of you are doing a very good job!
I believe that in the next 1 to 3 years it will be a game changer… Well done.

[slackmoehrle]

Thanks. I’ll tag @jare so he can read this and talk to the team. Thank you for taking the time to write this all up for us. We appreciate it.

[hyperscientist]

Do those performance improvements also translate to web platform, that is to running games in Chrome or Safari (on mobile) or did you focus on native?

[slackmoehrle]

Let us ask @jare to describe the performance on web platforms.

[vkrishna]

Any plans for making the .effect and .material format published so we can write custom shaders?
i was able to get lightmap shader implemented in 2.1.3 but am unable to migrate it to 2.2.0

I am currently working on an endless runner style game with cars, and would want to be able to write custom shaders for envmap etc.

What i would like is that we are able to create custom shaders with ease with everything from env maps to any new time based fragment / vertex shader.

[zetlcin]

I am using cocos 2.1.2 for hot update in android and ios, is it compatible with new build by cocos 2.2.0?

[DauDau]

Where is “cc.systemEvent.emit” function in creator.d.ts?

[whitecloudy]

i made android apk. but, it takes long time everytimes. how can i reduce compile time?

[Taras]

I already asked this on twitter, but I will repeat. When will you add VS 2019 support?

[Andres_IC]

i believe that most of those functions exists in cocos creator.

 let v1:cc.Vec3=cc.Vec3.ZERO;
        let v2:cc.Vec3=cc.Vec3.ZERO;

        let vAddResult:cc.Vec3 =v1.add(v2);
        let dir=v1.sub(v2);
        let distance=dir.mag();
        let angleRad=v1.angle(v2);//radians
        let angleDegree=cc.misc.radiansToDegrees(angleRad);

But i agree that Creator.d.ts is not updated.

[nicetry107]

Hello,

I have added LabelShadow component with ttf font. It’s working on windows but the effect is not visible on Android.

Thanks.