Cocos Creator 3.0 Technical Preview!

Cocos Creator 3.0 Technical Preview

The technology behind games has grown exponentially since the birth of video games. Today with the creation of cloud computing, 5G networks, and faster mobile computers, the revolution to bring better 3D titles to your hands has become overwhelmingly apparent to game developers.

The Cocos engine started as a 2D game engine. In Cocos2d-x, we built the best open-source 2D engine in the world. We also tried to build 3D features upon the 2D-oriented architecture. But due to the lack of an editor and the challenge of growth on 3D features, it wasn’t very successful. That’s why we were determined to build an excellent editor tool: Cocos Creator . It was initially for 2D game development. But since 2017, we have already started to build a pure 3D engine for this tool. To push ourselves to give developers the best 3D development tool, we have re-designed the whole engine architecture and updated the editor’s core. On October 15th, 2019, we released Cocos Creator 3D , a dedicated experimental branch of China’s product. With a whole year’s effort, we have greatly improved the 3D engine architecture. We are finally merging the experimental 3D branch into the main Cocos Creator product to forge the awesome Cocos Creator 3.0, released later this year.

We have to thank some of the biggest companies in our industry for helping us test our new 3D engine so that it would be ready for the game market overseas. During last year, many games have been created with our experimental 3D branch. Let’s show you some examples to see what kind of 3D games you can create with Cocos.

Announcement

Today, we are bringing out the next generation of our game engine for you to test, prod, and investigate: Cocos Creator 3.0 Tech Preview.

Though it’s a powerful demo, this is not a complete version of Cocos Creator 3.0. But, we felt it was time to give developers all over the world a chance to see what the future will be when we release 3.0 later this year. We are excited to share a few things about what to expect and give you the chance to play with it TODAY !

You can download the Cocos Creator 3.0 Tech Preview now and start building your 3D games, fully exportable to many different platforms. There are a few things to share to make sure you have the best experience.

  1. Projects built in Cocos Creator 1.X – 2.X will not work with this demo.
  2. Only 3D projects are available in this demo. Some 2D features like Spine, Tiled map, etc. are absent in this demo, but they will be included in the official 3.0 version.
  3. All projects built in the demo are exportable to 3.0 when it is released. So go crazy!
  4. We only recommend using TypeScript for future Cocos Creator 3.0 projects. (we’ll discuss why in a minute)

Download Cocos Creator 3.0 Tech Preview:

Windows version – macOS version

Preview Features

Cocos Creator 3.0 Tech Preview has the same look as our older versions but includes tons of 3D features. Let’s give you a glance of some key features.

The Editor

Cocos Creator’s editor architecture has been upgraded to a whole next level in v3.0, I want to list a few remarkable improvements:

  • Improved boot speed
  • Pure message-driven architecture, all modules communicate with IPC
  • More lightweight and reliable file system (A scan for 5k assets cost only 4.5s)
  • Modularized plugin system, custom plugins work just like internal modules

Besides the above architecture improvements, there are also some features introduced in v3.0.

There are a lot more to explore in our new editor, please enjoy.

TypeScript

While we have redesigned the whole engine, it has also been rewritten with TypeScript, this is mainly for some key features TypeScript provides and for code auto-completion in VSCode. We also suggest developers only use TypeScript in their project so that you can enjoy code completion, module auto import, API documentation, etc inside VSCode.

script

We also support developers build and use third party modules in JavaScript like packed npm modules as plugin scripts. Developers can define a dependency between plugin scripts.

3D model and animation

For 3D models and animations, we support glTF 2.0 and FBX as our main asset format, we have a very solid glTF 2.0 support with all models in glTF Sample Models passed. Some main features need to be mentioned for model and animation support:

  • Morph target support

  • Skeletal animation support with GPU simulation and instancing batch. That means we can batch models running different skeletal animations with different configurations all into one draw call.
    WeChat-Image_20201015173349

  • Support attachments to joints of skeletal animation
    WeChat-Image_20201015173641

  • Support simple blend of animations (only in CPU simulation)

  • Model asset inspector support animation clip editing, material dump, model preview, etc

Physically based rendering

Cocos Creator 3.0 is designed for physically based rendering (a.k.a PBR).

Currently, there is support for directional light, sphere light and spot light. The light configuration is based on physical metrics: color temperature and light power. The camera is using SBS exposure with configurable aperture, iso and shutter speed. This will let you simulate a real world camera easily. And our standard materials are physically based. We have put some effort to improve the rendering process and the algorithm to run smoothly on mid to low end devices, even on web platforms.

Two types of shadows are supported in the current version, one is simply a planar shadow which allows shadows only on planar surfaces, another is standard shadow map shadows with PCF support. Developers can configure it in the scene inspector.

Material system

The material system in v3.0 is the same as in v2.4, we use the same effect format but with more feature support, like GLSL 300 es support, effect preview, up to 32 macros support, visualized editing, uniform key frame animation, etc.

image

image-1

3D visual effect

The 3D particle system was ported from 3d experimental branch to Cocos Creator v2.3.0, so you can have the same use experience as in v2.3. In the tech preview, you will be able to switch 3D particle system to GPU based simulation and have a tremendous improvement in performance.

Physics

3D physics system was also ported to v2.3.0, but the tech preview version have much more features provided. Firstly the collider types are completed, secondly, we are starting to support constraints, thirdly, more complete physics events help developers to have more control over the behavior. At lower level design, as you can see in the graph, we have decoupled the physics components and functionalities with the beneath physics engine backend, so developers can choose what’s suitable for their use case.

Fog effect

There isn’t much built-in effects provided in the tech preview, but fog is a very nice built-in effect we can share today. Depth fog and layered fog are both supported.

Inheritances and differences

This technical preview version has a lot of great features and has inherited features from Cocos Creator v2.x, along with some fundamental changes we have to do for better 3D support. Hereare some key points:

  1. Inheritances

    • Core design of the engine including cross platform support, game boot process, director main loop, node and scene management, component life cycle, etc.

    • Core systems: tween system, scheduler system, event system, animation system, network, audio, etc.

    • 2D render components including Sprite, Label etc.

    • UI system and components.

  2. Differences

    • Nodes no longer have content size and anchor point related APIs, they were moved to UITransform component, all UI and 2D related components rely on this component.

    • There is no longer 2D and 3D version for Node and Camera, there is only a 3D version.

    • Plugin system have been upgraded, so some old plugins will also need to be upgraded.

Documentation

We have finished almost all of the documentation in English for Cocos Creator 3.0, please check it out. There are hundreds of new documents we’ve been working months to translate and add for the final release of 3.0. If you find something missing, always contact us on these forums, and we’ll try to finish or fix it. Thanks for the help.

Documentation

API Docs

Demos

We built a few demos as well, and a full game to look at and try. All are free to play and enjoy on Github.

Demos

Test cases

Taxi Game

If you have any issues, please share them here. We want Cocos Creator 3.0 to be amazing, your support, suggestions, and bug reports help us make that happen.

Conclusion

Cocos Creator 3.0 is almost here, and we are super excited to share it with you in a few months. Thanks to everyone helping and giving us support for the work done to help us get here, especially the developers making games with Cocos. Pplease take a taste of what’s to come, play around and tell us what you think, and be ready for the next generation of development for Cocos Creator, a 3rd dimension for Cocos.

4 Likes

Thanks a lot for the update!

Unfortunately there are still bad things that must be improved (on my opinion):

  1. The conversion from world space to local space is very annoying! Please consider to change your environment to work with world space (like most of the engines out their). You can also do that in the settings menu maybe?

  2. What triggers me the most is that you still cannot animate classes properties from outside the component class. To illustrate the problem please follow the code below:


@ccclass("AnotherClass")
export class AnotherClass {
    @property()
    public speed: number = 0;
}

@ccclass("MainComponent")
export default class MainComponent extends Component {
    @property({ type: AnotherClass })
    public externalProps: AnotherClass = new AnotherClass();
}

In the code above every thing works perfect in the editor and inside the inspector you can notice even more detailed section of the property speed of class AnotherClass. However, when you access the timeline animation and you try to animate the property: externalProps.speed the engine shouts on you on preview and it tells you that you cannot do that. WHY? It is a must have feature. Btw, if you cannot do that so why the animation timeline shows you the ability in the first place? Maybe a design issue? Or maybe I missed something?

Please help here. Its important…

  1. Terrain component - When you add it in the first time, you have to drag a terrain asset from somewhere. In your Docs it looks like you should have a button which creates a terrain asset for you.
    I managed to figure out how to do that but it not intuitive. Please consider to do something with that.

  2. Rotating elements for some reason is very difficult here. Why do I need to use Quat and calculate it in order to rotate a simple 3D cube in an open space? The reason we are using an engine is to prevent as many calculations as we can just to make our life easier but it is not so simple. I admit that my Math knowledge is a bit messy and I also admit that Unity or Unreal engines did a lot of staff for me when it comes to rotation.

  3. Without a Snapping tools it is very difficult to create 3D environments. Consider to add the ability to press Ctrl and while moving the mouse you can stick the object to the world grid, other closed objects, units and so on… For me (as a blender 3d modeler) it is a Critical feature for 3d spaces.

Any way, I am still testing whatever I can. And I find this engine to be the best web engine out there! Keep up the good work!

Moving on to have some fun with materials and lightnings :slight_smile:

3 Likes

Thanks for the insightful feedbacks, I have send them to our product designer and we will create internal issues to track them.

  1. For the coordinate system, as I mentioned in another topic, we do have local space and world space difference, and the node stores local space TRS and world space matrix, so can you specify the most annoying actions you have encountered ?

  2. This is a very important feature, we agree to that, our animation system could support such animation, but we still need to do the UX design before we can implement this feature inside the animation editor.

  3. We will improve that

  4. You actually can rotate with Euler angles with editor’s rotation gizmo and using Node.setRotationFromEuler.

  5. Noted

Enjoy and looking forward to more feedbacks

1 Like

For the 1st point, just adding my vision (probably the same as @hananht), Unity (and Unreal, AFAIK) have the position variable the global one (even if in the editor is the local one), and localPosition as a different variable. Cocos the position variable is the local one, and you have to find out the global one.

It’s just one annoying thing for those who came from Unity that when they are coding, they expect the node.position be global, but is local, and it take some time to get used to. It’s not wrong, it’s a design choice, but it would be great if we didn’t needed that learning time.

1 Like

Thanks a lot for your feedback. Here is my notes:

  1. About the coordinate system:
    To illustrate the issue, lets assume that I have a tank node and inside it I have a rotating child node represantes the tank tube (with a big damn canon).
    Problem (1) - I am trying to rotate the cannon so he can look at a target enemy out side its parent position. Looots of calculations…
    Problem (2) - I want to move the tank and rotate it to its movement direction while the cannon seeks for new enemies in a specifide radius. Again… Loooooots of calculation.
    Problem (3) - Without converting EVERYTHING to woldspace you have to do a lot of dirty work here. Unity and Unreal engine solved this issues for you without the need to convert wolrd to local aand local to world.
  2. Noted… ETA? :slight_smile:
  3. Noted…
  4. Thanks for that. For some reason it did not worked for me at first. Looks like I did somthing very wrong there. Any way thanks. If you can add some more Docs details with more samples about Quats I will be more than greatfull for that!
  5. :slight_smile:

Thanks @Randomzord @hananht , I understand more the problem. We do support world space calculations with Node.setWorldPosition etc, and getters are provided too.

We are using local coordinates for position, scale and rotation because it’s from the design of the original cocos2d-x and cocos creator, we don’t want our old users to learn a different meaning of it. Another reason is that our node APIs are implemented in JavaScript, so the performance of world coordinates APIs is worse than local coordinates, that’s why default RTS properties (the most frequent APIs) are by default in local coordinates.

The sub property path for animation editing could be expected in v3.x, we don’t add any more feature to v3.0 in the current stage

2 Likes

Thank you. I will look forward for it!

hello, I test the external props in Animation Edtior, It seems working well, can you attach a screenshot of your problem?

Press play and while the game loads you will see the error in the console.

Do you mean this waring:

This is the problem of property decorator:

@ccclass("AnotherClass")
export class AnotherClass {
    @property()
    public speed: number = 0;
}

if you don’t want to set type of speed by yourself, you don’t need to add parentheses.
if you want to set the type,you can write like this:

@ccclass("AnotherClass")
export class AnotherClass {
    @property({type: CCFloat})
    public speed: number = 0;
}

A small question: do we have some kind of WebGL 1.0 Fallback? It seems like i cant start stuff on older Hardware / Browsers which only have webGL 1.0. Can someone confirm. If so, it would be great to have a fallback.