¡Guía de inicio rápido de CocosCreator para desarrolladores de Unity!

Este artículo proviene del documento oficial de Cocos "Guía rápida de Cocos Creator para desarrolladores de Unity".
Dirección original:
https://docs.cocos.com/creator/manual/zh/guide/unity/ (Haga clic al final del artículo para leer el texto original directamente)
Espero que los veteranos de Cocos lo reenvíen más. ¡Cuanta más gente use Cocos, más fácil será para todos cambiar de trabajo y aumentar su salario !

A medida que aumentan los tipos de plataformas y canales de juegos, los desarrolladores esperan que sus juegos puedan escribirse una vez y lanzarse en diferentes plataformas y canales varias veces, y Cocos Creator satisface muy bien esta demanda.

Este artículo comparará desde la perspectiva de un desarrollador de Unity las siguientes perspectivas para ayudar a los desarrolladores de Unity a comenzar rápidamente con el motor Cocos Creator.

Instalación y gestión de versiones.
editor
Flujo de trabajo de recursos
Scripting y depuración
sombreador
Conceptos básicos para empezar a utilizar Cocos Shader

Instalación y gestión de versiones.

Unity Hub se puede utilizar para administrar las versiones del editor, los proyectos y varias plantillas de Unity. En Cocos Creator, también puedes gestionar motores, proyectos y plantillas a través de Cocos Dash Board.

Centro de unidad	Panel de control de Cocos

De manera similar, también puede encontrar una gran cantidad de complementos, recursos y códigos fuente disponibles en la página Tienda, y más materiales de aprendizaje en la página Aprender.

editor

Como desarrollador de Unity, en la mayoría de los casos puedes utilizar sin problemas el editor de Cocos Creator, que tienen diseños de editor y métodos de uso similares.

Editor de unidad	Editor creador de Cocos

La ligera diferencia es que debido a que Cocos Creator se desarrolla con Electronic + Chromium, puedes obtener una vista previa del juego a través del navegador o ejecutarlo directamente en el editor.

Flujo de trabajo

El flujo de trabajo 2D y 3D de Cocos Creator es similar al de Unity. Puede leer el flujo de trabajo de producción de escenas para ver el flujo de trabajo de Cocos Creator.

Recursos de textura

La importación de recursos de textura es similar a Unity.

Unidad	Cocos

La compresión de textura global también se puede configurar en la configuración del proyecto.

Modelos y animaciones.

Importar FBX en Cocos Creator es lo mismo que Unity, simplemente arrastre o copie el archivo al directorio de Activos del proyecto.

Unidad	Cocos

Al mismo tiempo, Cocos Creator también admite archivos en formato glTF y materiales estándar de herramientas DCC como Maya y 3DMax.

Animación de la columna

Cocos Creator tiene un componente de animación Spine incorporado, spine.Skeletonque puede usar directamente a través del componente.

Animaciones y máquinas de estados.

Cocos Creator admite animación de fotogramas clave y animación esquelética. Puede editar y obtener una vista previa de estas animaciones directamente dentro del editor.

Al igual que Unity's Animator, Cocos Creator también admite la edición de máquinas de estado de animación y puede encontrarlas en el sistema de animación Marionette.

Música y efectos de sonido.

Cocos Creator también admite el componente Audio Source para reproducir música y efectos de sonido.

Paquete de recursos

Al igual que Unity, Cocos Creator también admite la importación de paquetes de recursos del mundo exterior para el desarrollo colaborativo.

Unidad	Cocos

Lanzar y construir

Además de publicarse en varias plataformas nativas como Unity, Cocos Creator también admite la publicación en plataformas de juegos pequeños como los minijuegos WeChat y los minijuegos Douyin.

Unidad	Cocos

Secuencias de comandos y depuración

A diferencia del GameObject de Unity, en Cocos Creator las entidades en la escena se denominan Node, pero similar a Unity, Cocos Creator también tiene una arquitectura ECS (Entity-Component-System), y también puedes agregar diferentes componentes a Node para implementar funciones del juego.

Ciclo de vida del componente

Al igual que Unity, los componentes de Cocos Creator también tienen su propio ciclo de vida: el sistema devolverá la llamada a los métodos registrados en el componente para facilitar a los desarrolladores procesar la lógica empresarial.

Ciclo de vida del componente

Escribir componentes personalizados

En Unity, heredamos Monobehavior para implementar nuestros propios scripts de juegos.

public class Player : NetworkBehaviour
{
    Animation _animation;

    Start(){      
        _animation = gameObject.GetComponent<Animation>();
    }
}

Cocos Creator usa Typecript para escribir guiones.

El siguiente ejemplo demuestra cómo implementar un componente personalizado usando Typecript.

@ccclass('MotionController')
export  class MotionController extends Component {  

    animation: SkeletalAnimation;

     start() {
        this.animation = this.getComponent(SkeletalAnimation);        
    }    
}

C# y Typecript son lenguajes de programación desarrollados por Microsoft y su facilidad de uso es similar.

Depuración y registro

Depuración de registros

Para usar registros en Unity podemos usar Debug.Logel método.

Para usar registros en Cocos Creator, puede usar la impresión de registros js console.log()o usar el método de registro de Cocos Creator:

cc.log()
cc.debug()
cc.error()

Depuración de puntos de interrupción

Unity puede usar Visual Studio o VSCode para la depuración de puntos de interrupción.

Cocos Creator utiliza VSCode o depura directamente en el navegador a través de herramientas de desarrollador.

Escritura de materiales y sombreadores.

Material

Los materiales de Cocos Creator y los materiales de Unity tienen paneles de propiedades y vista previa similares.

Unidad	Cocos

La diferencia con Unity es que Cocos Creator puede ver y definir más fácilmente el estado de renderizado en la canalización del material.

sombreador

A diferencia de Unity, que admite CG, GLSL y HLSL, Cocos Creator solo admite GLSL como lenguaje de programación de sombreadores.

La siguiente tabla compara los formatos de archivo y las diferencias DSL que utilizan.

	Unidad	Cocos
formato de archivo	*.sombreador	*.efecto
ADSL	Formato Cg/HLSL/GLSL + Unity Shader	GLSL + Yaml

Unity usa archivos de sombreado personalizados como DSL, mientras que Cocos Creator usa Yaml como formato de archivo DSL.

Reglas de sintaxis de sombreador

Reglas de sintaxis de Unity Shader

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"
}

Reglas de sintaxis del efecto Cocos Creator

// 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);
  }
}%

Comparación de sintaxis de sombreadores

Esta sección comparará las estructuras de archivos de Unity Shader y Cocos Effect.

Comparación estructural

Definir objeto Shader

Sombreador de unidad:

Shader "<name>"
{
    <optional: Material properties>
    <One or more SubShader definitions>
    <optional: custom editor>
    <optional: fallback>
}

Sombreador de Cocos:

CCEffect %{
    <techniques>
        <passes>
    <techniques>
        <passes>

    <shader program>
}

estructura de pase

Sombreador de unidad:

SubShader{

    <optional>Tag {}    

    <optionall> Pass
}

Aprobar:

Pass{
    <name>

    <tag>    

    <code>
}

Sombreador CocosCreator:

CCProgram <name> %{

    <in parameters>
    <out parameters>

    <uniforms>  

    function vert();

    function frag();
}%

Finalmente, me gustaría recomendar un conjunto de "Conceptos básicos de introducción a Cocos Shader" del desarrollador de Cocos Store, Kaoru Cho.

Este es un tutorial que acompaña a "Introducción a Unity Shader". Todos los casos de uso están escritos utilizando Cocos Shader.

Este recurso de código fuente se desarrolló utilizando la última versión de Cocos Creator 3.8.0. Cao Yixun afirma que los casos de uso del código fuente de los últimos capítulos se actualizarán periódicamente. Me gustaría agradecer al autor por su arduo trabajo ~

Dirección de descarga: https://store.cocos.com/app/detail/5276

Aspectos destacados del pasado