Cocos Creator Quick Guide for Unity Developers

With the increasing variety of game platforms and portals, developers want to be able to write their games once and publish them multiple times to different platforms and portals, and Cocos Creator is a great way to fulfill this need.

In this article, we will compare the following perspectives from a Unity developer’s point of view to help Unity developers quickly get started with the Cocos Creator engine.

  • Installation and Versioning
  • Editors
  • Editor Workflow
  • Scripting and Debugging
  • Shaders

Installation and Versioning

The Unity Hub can be used to manage Unity’s editor versions, projects, and templates. In Cocos Creator, you can also manage the engine, projects, and templates via the Cocos Dash Board.

Unity HubCocos Dashboard
unity-hubcocos-dash-board

You can also find a large selection of extensions, resources and source code in the Store page, as well as more material to learn in the Learn page.

Editor

As a Unity developer, you can seamlessly use Cocos Creator’s editor in most cases, and they have a similar editor layout and usage.

Unity EditorCocos Creator Editor
overviewoverview

A slight difference is that Cocos Creator, because it is developed in Electronic+Chromium, allows you to both preview the game in a browser and run it directly in the editor.

Workflows

Cocos Creator’s 2D and 3D workflows are similar to Unity’s, as you can read Scene Creation Workflow to see Cocos Creator’s workflow.

Texture Assets

Importing texture assets is similar to Unity.

UnityCocos
Cocos Creator Quick Guide for Unity Developers - 图5Cocos Creator Quick Guide for Unity Developers - 图6

Global texture compression can also be configured in the project settings

cocos-texture-compress.png

Models and animations

Importing FBX in Cocos Creator is the same as Unity, just drag and drop or copy the files into the Assets directory of your project.

UnityCocos
Cocos Creator Quick Guide for Unity Developers - 图8Cocos Creator Quick Guide for Unity Developers - 图9

Cocos Creator also supports glTF format files, as well as standard materials for DCC tools such as Maya and 3DMax.

Spine Animations

Cocos Creator has a built-in Spine animation component, which you can use directly through the spine.Skeleton component.

Animation and State machine

Cocos Creator supports keyframe animations, skeletal animations.You can edit and preview these animations directly in the editor.

cocos-keyframe-anim.png

Similar to Unity’s Animator, Cocos Creator supports the editing of animation state machines, which you can find in the Marionette Animation System.

./index/cocos-anim-graph.png

Music and sound effects

Cocos Creator also supports Audio Source components for playing music and sound effects.

cocos-audio-source.png

Assets Package

Similar to Unity, Cocos Creator supports co-development by importing assets packages from the outside of the editor.

UnityCocos
Cocos Creator Quick Guide for Unity Developers - 图13Cocos Creator Quick Guide for Unity Developers - 图14

Build and Publish

In addition to being published on various native platforms like Unity, Cocos Creator also supports publishing on small game platforms such as WeChat Small Games and TikTok Small Games.

UnityCocos
Cocos Creator Quick Guide for Unity Developers - 图15Cocos Creator Quick Guide for Unity Developers - 图16

Scripting and Debugging

Unlike Unity’s GameObject, in Cocos Creator the entities in the scene are named Node, but similar to Unity, Cocos Creator is an ECS (Entity-Component-System) architecture, and you can add different components to a Node to realize the functionality of the game.

cocos-add-component.png

Component Lifecycle

Similar to Unity, Cocos Creator’s components have their own lifecycle. The system facilitates the developer’s business logic by calling back registered methods within the component.

组件生命周期

Writing Custom Components

In Unity, we inherit from Monobehavior to implement our own game scripts.

  1. public class Player : NetworkBehaviour
  2. {
  3. Animation _animation;
  4. Start(){
  5. _animation = gameObject.GetComponent<Animation>();
  6. }
  7. }

Cocos Creator uses Typescript to write scripts.

The following example shows how to implement a custom component using Typescript.

  1. @ccclass('MotionController')
  2. export class MotionController extends Component {
  3. animation: SkeletalAnimation;
  4. start() {
  5. this.animation = this.getComponent(SkeletalAnimation);
  6. }
  7. }

C# and Typescript are both programming languages developed by Microsoft and their ease of use is similar.

Debugging and Logging

Logging Debugging

To use logging in Unity we can use the Debug.Log method.

To use logging in Cocos Creator, you can either use js’s log printing console.log() or Cocos Creator’s logging methods:

  1. cc.log()
  2. cc.debug()
  3. cc.error()

Breakpoint Debugging

Unity can be debugged at breakpoints using Visual Studio or VSCode.

Cocos Creator uses VSCode or developer tools directly in the browser.

cocos-debug.png

Material and shader writing

Materials

Cocos Creator materials have a similar preview and properties panel to Unity materials.

UnityCocos
Cocos Creator Quick Guide for Unity Developers - 图20Cocos Creator Quick Guide for Unity Developers - 图21

Unlike Unity, Cocos Creator makes it easier to view and define the state of the rendering in the pipeline in materials.

cocos-pipeline-state.png

Shaders

Unlike Unity, which supports CG, GLSL, and HLSL, Cocos Creator only supports GLSL as a shader programming language.

The table below compares the file formats they use and the differences in DSL.

UnityCocos
File Format.shader.effect
DSLCg/HLSL/GLSL + Unity Shader FormatGLSL + Yaml

Unity uses a custom shader file as the DSL, while Cocos creator uses Yaml as the DSL file format.

Shader syntax rules

Unity Shader syntax rules.

  1. Shader "Transparent/Cutout/DiffuseDoubleside" {
  2. Properties {
  3. _Color ("Main Color", Color) = (1,1,1,1)
  4. _MainTex ("Base (RGB) Trans (A)", 2D) = "white" {}
  5. _Cutoff ("Alpha cutoff", Range(0,1)) = 0.5
  6. }
  7. SubShader {
  8. Tags {"IgnoreProjector"="True" "RenderType"="TransparentCutout"}
  9. LOD 200
  10. Cull Off
  11. CGPROGRAM
  12. #pragma surface surf Lambert alphatest:_Cutoff
  13. sampler2D _MainTex;
  14. float4 _Color;
  15. struct Input {
  16. float2 uv_MainTex;
  17. };
  18. void surf (Input IN, inout SurfaceOutput o) {
  19. half4 c = tex2D(_MainTex, IN.uv_MainTex) * _Color;
  20. o.Albedo = c.rgb;
  21. o.Alpha = c.a;
  22. }
  23. ENDCG
  24. }
  25. Fallback "Transparent/Cutout/VertexLit"
  26. }

Cocos Creator Shader syntax rules:

  1. // Effect Syntax Guide: https://github.com/cocos-creator/docs-3d/blob/master/zh/material-system/effect-syntax.md
  2. CCEffect %{
  3. techniques:
  4. - name: opaque
  5. passes:
  6. - vert: general-vs:vert # builtin header
  7. frag: unlit-fs:frag
  8. properties: &props
  9. mainTexture: { value: white }
  10. mainColor: { value: [1, 1, 1, 1], editor: { type: color } }
  11. - name: transparent
  12. passes:
  13. - vert: general-vs:vert # builtin header
  14. frag: unlit-fs:frag
  15. blendState:
  16. targets:
  17. - blend: true
  18. blendSrc: src_alpha
  19. blendDst: one_minus_src_alpha
  20. blendSrcAlpha: src_alpha
  21. blendDstAlpha: one_minus_src_alpha
  22. properties: *props
  23. }%
  24. CCProgram unlit-fs %{`
  25. precision highp float;
  26. #include <output>
  27. #include <cc-fog-fs>
  28. in vec2 v_uv;
  29. uniform sampler2D mainTexture;
  30. uniform Constant {
  31. vec4 mainColor;
  32. };
  33. vec4 frag () {
  34. vec4 col = mainColor * texture(mainTexture, v_uv);
  35. CC_APPLY_FOG(col);
  36. return CCFragOutput(col);
  37. }
  38. }%

Shader Syntax Comparison

This subsection compares the file structure of UnityShader and Cocos Effect.

Structural Comparisons

Defining Shader Objects.

  • Unity shader:

    1. Shader "<name>"
    2. {
    3. <optional: Material properties>
    4. <One or more SubShader definitions>
    5. <optional: custom editor>
    6. <optional: fallback>
    7. }
  • Cocos Shader:

    1. CCEffect %{
    2. <techniques>
    3. <passes>
    4. <techniques>
    5. <passes>
    6. <shader program>
    7. }

Pass Structure

  • Unity Shader:

    1. SubShader{
    2. <optional>Tag {}
    3. <optionall> Pass
    4. }

    Pass:

    1. Pass{
    2. <name>
    3. <tag>
    4. <code>
    5. }
  • CocosCreator Shader:

    1. CCProgram <name> %{
    2. <in parameters>
    3. <out parameters>
    4. <uniforms>
    5. function vert();
    6. function frag();
    7. }%