This article comes from the official Cocos document "Cocos Creator Quick Guide for Unity Developers"
Original address:
https://docs.cocos.com/creator/manual/zh/guide/unity/ (Click at the end of the article to read the original text directly)I hope Cocos veterans will forward it more. The more people use Cocos, the easier it will be for everyone to change jobs and increase their salary
!
As the types of game platforms and channels increase, developers hope that their games can be written once and released to different platforms and channels multiple times, and Cocos Creator happens to meet this demand very well.
This article will compare from the perspective of a Unity developer from the following perspectives to help Unity developers quickly get started with the Cocos Creator engine.
Installation and version management
editor
Resource workflow
Scripting and debugging
shader
Essentials for getting started with Cocos Shader
Installation and version management
Unity Hub can be used to manage Unity's editor versions, projects, and various templates. In Cocos Creator, you can also manage engines, projects and templates through Cocos Dash Board.
| Unity Hub | Cocos Dashboard |
|---|---|
 |
 |
Similarly, you can also find a large number of available plug-ins, resources and source codes in the Store page, and more learning materials in the Learn page.
editor
As a Unity developer, in most cases you can seamlessly use Cocos Creator's editor. They have similar editor layouts and usage methods.
| Unity Editor | Cocos Creator Editor |
|---|---|
 |
 |
The slight difference is that because Cocos Creator is developed using Electronic + Chromium, you can either preview the game through the browser or run the game directly in the editor.
Workflow
The 2D and 3D workflow of Cocos Creator is similar to Unity. You can read Scene Production Workflow to view the workflow of Cocos Creator.
Texture resources
The import of texture resources is similar to Unity.
| Unity | Cocos |
|---|---|
 |
 |
Global texture compression can also be configured in the project settings
Models and animations
Importing FBX in Cocos Creator is the same as Unity, just drag or copy the file to the Assets directory of the project.
| Unity | Cocos |
|---|---|
 |
 |
At the same time, Cocos Creator also supports glTF format files and standard materials of DCC tools such as Maya and 3DMax.
Spine animation
Cocos Creator has a built-in Spine animation component, spine.Skeletonwhich you can use directly through the component.
Animations and state machines
Cocos Creator supports keyframe animation and skeletal animation. You can edit and preview these animations directly within the editor.
Similar to Unity's Animator, Cocos Creator also supports editing of animation state machines, and you can find them in the Marionette animation system.
Music and sound effects
Cocos Creator also supports the Audio Source component for playing music and sound effects.
Resource pack
Similar to Unity, Cocos Creator also supports importing resource packages from the outside world for collaborative development.
| Unity | Cocos |
|---|---|
 |
 |
Release and build
In addition to being published on various native platforms like Unity, Cocos Creator also supports publishing on small game platforms such as WeChat mini games and Douyin mini games.
| Unity | Cocos |
|---|---|
 |
 |
Scripting and Debugging
Unlike Unity's GameObject, in Cocos Creator, entities in the scene are named Node, but similar to Unity, Cocos Creator also has an ECS (Entity-Component-System) architecture. You can also add different components to Node. Implement game functions.
Component life cycle
Similar to Unity, Cocos Creator components also have their own life cycle. The system will call back the registered methods in the component to facilitate developers to process business logic.
Writing custom components
In Unity, we inherit Monobehavior to implement our own game scripts.
public class Player : NetworkBehaviour
{
Animation _animation;
Start(){
_animation = gameObject.GetComponent<Animation>();
}
}Cocos Creator uses Typescript to write scripts.
The following example demonstrates how to implement a custom component using Typescript.
@ccclass('MotionController')
export class MotionController extends Component {
animation: SkeletalAnimation;
start() {
this.animation = this.getComponent(SkeletalAnimation);
}
}C# and Typescript are both programming languages developed by Microsoft, and their ease of use is similar.
Debugging and logging
Log debugging
To use logs in Unity we can use Debug.Logthe method.
To use logs in Cocos Creator, you can either use js log printing console.log()or use Cocos Creator's log method:
cc.log()
cc.debug()
cc.error()Breakpoint debugging
Unity can use Visual Studio or VSCode for breakpoint debugging.
Cocos Creator uses VSCode or debugs directly in the browser through developer tools.
Material and shader writing
Material
Cocos Creator materials and Unity materials have similar preview and property panels.
| Unity | Cocos |
|---|---|
 |
 |
The difference from Unity is that Cocos Creator can more easily view and define the rendering status in the pipeline in the material.
shader
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 and DSL differences they use.
| Unity | Cocos | |
|---|---|---|
| file format | *.shader | *.effect |
| DSL | Cg/HLSL/GLSL + Unity Shader Format | GLSL + Yaml |
Unity uses custom shader files as DSL, while Cocos Creator uses Yaml as the DSL file format.
Shader syntax rules
Unity Shader syntax rules
Shader "Transparent/Cutout/DiffuseDoubleside" {
Properties {
_Color ("Main Color", Color) = (1,1,1,1)
_MainTex ("Base (RGB) Trans (A)", 2D) = "white" {}
_Cutoff ("Alpha cutoff", Range(0,1)) = 0.5
}
SubShader {
Tags {"IgnoreProjector"="True" "RenderType"="TransparentCutout"}
LOD 200
Cull Off
CGPROGRAM
#pragma surface surf Lambert alphatest:_Cutoff
sampler2D _MainTex;
float4 _Color;
struct Input {
float2 uv_MainTex;
};
void surf (Input IN, inout SurfaceOutput o) {
half4 c = tex2D(_MainTex, IN.uv_MainTex) * _Color;
o.Albedo = c.rgb;
o.Alpha = c.a;
}
ENDCG
}
Fallback "Transparent/Cutout/VertexLit"
}Cocos Creator effect syntax rules
// Effect Syntax Guide: https://github.com/cocos-creator/docs-3d/blob/master/zh/material-system/effect-syntax.md
CCEffect %{
techniques:
- name: opaque
passes:
- vert: general-vs:vert # builtin header
frag: unlit-fs:frag
properties: &props
mainTexture: { value: white }
mainColor: { value: [1, 1, 1, 1], editor: { type: color } }
- name: transparent
passes:
- vert: general-vs:vert # builtin header
frag: unlit-fs:frag
blendState:
targets:
- blend: true
blendSrc: src_alpha
blendDst: one_minus_src_alpha
blendSrcAlpha: src_alpha
blendDstAlpha: one_minus_src_alpha
properties: *props
}%
CCProgram unlit-fs %{`
precision highp float;
#include <output>
#include <cc-fog-fs>
in vec2 v_uv;
uniform sampler2D mainTexture;
uniform Constant {
vec4 mainColor;
};
vec4 frag () {
vec4 col = mainColor * texture(mainTexture, v_uv);
CC_APPLY_FOG(col);
return CCFragOutput(col);
}
}%Shader syntax comparison
This section will compare the file structures of Unity Shader and Cocos Effect.
Structural comparison
Define Shader object
Unity shader:
Shader "<name>" { <optional: Material properties> <One or more SubShader definitions> <optional: custom editor> <optional: fallback> }Cocos Shader:
CCEffect %{ <techniques> <passes> <techniques> <passes> <shader program> }
Pass structure
Unity Shader：
SubShader{ <optional>Tag {} <optionall> Pass }Pass：
Pass{ <name> <tag> <code> }CocosCreator Shader:
CCProgram <name> %{ <in parameters> <out parameters> <uniforms> function vert(); function frag(); }%
Finally, I would like to recommend a set of "Cocos Shader Getting Started Essentials" by Cocos Store developer Kaoru Cho.
This is a tutorial to accompany "Getting Started with Unity Shader". All use cases are written using Cocos Shader.
This source code resource is developed using the latest Cocos Creator 3.8.0. Cao Yixun claims that the source code use cases of the latest chapters will be updated regularly. I would like to thank the author for his hard work~
Download address: https://store.cocos.com/app/detail/5276
Past highlights