Skip to content

Main NavigationHome

English

English

Appearance

Sidebar Navigation

Introduction

About Cocos Creator

Support

Understanding the Basics

Getting Started

Install and Launch

Dashboard

Hello World!

Project Structure

Editor Interfaces

Scene

Hierarchy

Assets

Inspector

Console

Preferences

Project Settings

Main Menu

Tool Bar

Editor Layout

Preview & Debugging

Glossary

Cocos Creator Quick Guide for Unity Developers

Tutorials

Quick Start: Making Your First 2D Game

Handle Touch Events

Quick Start: Make Your First 3D Game

Advanced: Add Light, Shadow and Skeleton Animation

Examples & Tutorials

Basic Workflow

Upgrade Guide

Cocos Creator 3.0 Upgrade Guide

Cocos Creator 3.0 Material Upgrade Guide

Cocos Creator 3.1 Material Upgrade Guide

Cocos Creator 3.5 Material Upgrade Guide

Cocos Creator 3.5 Native Built Project Upgrade Guide

Cocos Creator 3.6 Native Built Project Upgrade Guide

Cocos Creator 3.6.0 Build Template and settings.json Upgrade Guide

Upgrade Guide: Effect from v3.5.x to v3.6.0

Upgrade Guide: Particle from v3.5.x to v3.6.0

Scene Creation

Scene Assets

Nodes and Components

Coordinate Systems and Transformations

Node Hierarchy and Rendering Order

Build a Scene Image Using the Scene Panel

Level of Details

Assets

Asset Workflow

Images

Textures

Sprite Frames

Auto Trim for SpriteFrame

Texture Cube

Atlas

Auto Atlas

Label Atlas

Prefab

Fonts

Audio

Material

FBX Smart Material Conversion

Model

Importing Models Exported from DCC Tools

Export FBX file from 3ds Max

Export FBX file from Maya

glTF

Programmatically Create Meshes

Spine Skeletal Animation

DragonBones Skeletal Animation

TiledMap

Scripting Guide and Event System

Programming Language Support

Scripting Basics

Script Creation

Coding Environment Setup

Operating Environment

Decorator

Property Attributes

Life Cycle Callbacks

Using Scripts

Access Nodes and Components

Common Node and Component Interfaces

Create and Destroy Nodes

Scheduler

Components and Component Execution Order

Loading and Switching Scenes

Obtaining and Loading Assets

tsconfig Configuration

Advanced Scripting

Events

Listening to and Launching Events

Input Event System

Node Event System

Screen Event System

Event API

Modules

Engine Modules

External Module Usage Case

Module Specification

Import Maps

Plugin Scripts

Cross-platform Publishing

Publishing Android Apps

Android Publishing Example

Build Options - Android

Android Development Environment Setup

Upgrading Android Project to v3.8

Publish to Google Play on PC

Build and Run

Integrating Input SDK

Publishing iOS Apps

iOS Publishing Example

Build Options - iOS

Publishing Huawei HarmonyOS Apps

Publishing macOS Desktop Application

macOS Publishing Example

Build Options - macOS

Publishing Windows Desktop Application

Windows Publishing Example

Build Options - Windows

Fundamentals for Publishing to Native Platforms

General Native Build Options

Setting up Native Development Environment

Debugging JavaScript on Native Platforms

Integrating Input SDK

Publish to Mini Game Platforms

Publish to HUAWEI AppGallery Connect

Publish to Alipay Mini Game

Publish to Taobao Mini Game

Publish to WeChat Mini Games

WeChat Mini Games Engine Plugin Instructions

Access to WeChat PC Mini Games

Publish to Douyin Mini Games

Publish to Huawei Quick Games

Publish to OPPO Mini Games

Publish to vivo Mini Games

Publish to Xiaomi Quick Games

Publish to Baidu Mini Games

Access to Open Data Context

Mini Game Subpackage

Introduction to the Build Process and FAQ

Publish to Facebook Instant Games

Publish to Web Platforms

General Build Options

Publish from the Command Line

Custom Project Build Template

Build Process and FAQ

Function Modules

Graphics

Render Pipeline

Built-in Render Pipeline

Custom rendering of pipelines (experimental)

Full Screen Post Process

PostProcess Component

BlitScreen Component

Customize a Post Process

Camera

Lighting

Physically Based Lighting

Lights

Directional Lights

Spherical Lights

Spotlights

Ambient Light

Additive Per-Pixel Lights

Shadows

Imaged Based Lighting

Lightmapping

Light Probes

Light Probe Panel

Reflection Probe

Reflection Probe Panel

Reflection Probe Art Workflow

IBL Example

Meshes

MeshRenderer

SkinnedMeshRenderer

SkinnedMeshBatchRenderer

Importing Models Exported from DCC Tools

Export FBX file from 3ds Max

Export FBX file from Maya

glTF

Programmatically Create Meshes

Vertex Animation Texture (VAT)

Textures

Textures

Texture Cube

Texture Compression

RenderTexture

Material System Overview

Programmatic Use of Materials

Builtin Materials

Material System Classes Diagram

Shader Overview

Create and Use Shader

Built-in Shaders

Physically Based Rendering - PBR

Toon Shading

Unlit Shading

Syntax

Optional Pass Parameters

YAML 101

GLSL

Preprocessor Macro Definition

Chunk

Built-in Uniforms

Common Functions

Render Flow of Forward Rendering and Deferred Shading

Surface Shader

Guide to Built-in Surface Shader

Surface Shader Overview

Surface Shader Execution Flow

Include

Macro Remapping

Function Replacement Using Macros

Surface Shader Built-in Replaceable Functions

Render Usages

Lighting Models

Surface Material Data Structure

Shader Stages

Shader Assembly

VS Inputs

FS Inputs

Customize Surface Shader

Rendering Debug View

Legacy Shader

Guide to Built-in Legacy Shaders

Legacy Shader Key Functions and Structures

Write Shaders

2D Sprite Shader: Gradient

3D Shader: RimLight

Skin material

Instanced Attributes

UBO Layout

Fallback to WebGL 1.0

VSCode Extension - Cocos Effect

Compute Shader

Sorting

Effects

Billboard

Line

Skybox

Global Fog

Geometry Renderer

2D Objects

2D Render

Rendering Order

2D Renderable Component Batching Rules

Custom Materials for 2D Rendering Objects

2D Renderable Components

Sprite Component Reference

Label Component Reference

Mask Component Reference

Graphics Component Reference

RichText Component Reference

UIStaticBatch Component Reference

Spine Skeleton Component Reference

DragonBones ArmatureDisplay Component Reference

TiledMap Component Reference

TiledTile Component Reference

MotionStreak Component Reference

UI System

UI Components

Canvas Component Reference

UITransform Component Reference

Widget Component Reference

Button Component Reference

Layout Component Reference

EditBox Component Reference

ScrollView Component Reference

ScrollBar Component Reference

ProgressBar Component Reference

LabelOutline Component Reference

LabelShadow Component Reference

Toggle Component Reference

ToggleContainer Component Reference

Slider Component Reference

PageView Component Reference

PageViewIndicator Component Reference

UIMeshRenderer Component Reference

UICoordinateTracker Component Reference

UIOpacity Component Reference

BlockInputEvents Component Reference

WebView Component Reference

VideoPlayer Component Reference

SafeArea Component Reference

UI Practice Guide

Multi-Resolution Adaption

Widget Alignment

Label Layout

Auto Layout Container

Create a List of Dynamically Generated Content

Stretchable UI Sprite

Android Large Screen Adaptation

Animation

Animation Clip

Animation Component Reference

Animation Panel

Creating Animation Components and Animation Clips

Get Familiar with the Animation Panel

Editing Animation Clips

Editing Animation Easing Curve

Adding Animation Events

Using Animation Curves

Curve Editor

Skeletal Animation

Joint Texture Layout Settings

Controlling Animation with Scripts

Animation State

Embedded Player

Marionette Animation System

Animation Graph Assets

Animation Controller Reference

Animation Graph Panel

Animation Graph Layer

Animation State Machine

State Transition

Animation Mask

Animation Graph Variants

Procedural Animation

Introduction to Procedural Animation

Enable Procedural Animation

Pose Graph

Pose Graph View

Pose Nodes

Blend Pose

Modify Poses

Play or Sample Animation

Audio System

AudioSource Component Reference

AudioMgr Example

Compatibility Notes

Physics System

Physics 2D

2D Physics Manager

2D RigidBody

2D Physics Collider

2D Contact Callback

2D Physics Joint

Physics 3D

Physics Engines

Physics System Configuration

Group and Mask

Physics Components

Collider

Rigidbody

Constant Force

Constraint

Physics Material

Physics Event

Raycast Detection

Geometry Cast Detection

Continuous Collision Detection

Character Controller

Physics Application Cases

Particle System

2D Particle System

3D Particle System

Particle System Module

Main Module

Shape Module

Velocity Overtime Module

Force Overtime Module

Size Overtime Module

Rotation Overtime Module

Color Over Life Time Module

Texture Animation Module

Limit Velocity Overtime Module

Trail Module

Renderer Module

Particle Properties Editor

Curve Editor

Gradient Editor

Particle Editor

Tween System

Tween Interface

Tween Function

Tween Examples

Terrain System

Asset Manager

AssetManager Upgrade Guide

Asset Bundle Upgrade Guide

Asset Loading

Asset Bundle

Release Of Assets

Download and Parse

Loading and Preloading

Cache Manager

Optional Parameters

Pipeline and Task

Resource Management Considerations --- meta files

Localization

Translation Service Provider

Collect and Count

Compile Language

L10nLabel

Sample

XR

Version History

Architecture

Built-in Resources and Prefabs

XR Components

XR Preview

XR Video Player

XR Preview in Browser

XR Spatial Audio

XR Composition Layer

Passthrough

AR

AR Camera

AR Manager

AR Automated Behavior Editing

AR Interaction

Quick Start

VR Project Creation

VR Building and Publishing

AR Project Creation

AR Building and Publishing

WebXR Project Setup

WebXR Building and Publishing

Native Development

Native Platform Secondary Development Guide

JavaScript and Android Communication with Reflection

JavaScript and iOS/macOS Communication with Reflection

JavaScript and Java Communication using JsbBridge

JavaScript and Objective-C Communication using JsbBridge

JsbBridgeWrapper - An Event Mechanism based on JsbBridge

Tutorial: JSB 2.0

JSB Manual Binding

JSB Auto Binding

Swig

Swig Tutorial

CMake Usage Introduction

Native Engine Memory Leak Detection System

Native Scene Culling

Native Profiler

Native Plugins

Cocos Native Plugin Quick Tutorial

Optimization of Cross-Language Invocation

Advanced Tutorials

Editor Extension

Extension Manager

Extension Templates and Compile Builds

Getting Started Example - Menu

Getting Started Example - Panel

Getting Started Example - First Data Interaction

Change the Name of a Extension

Install and Share

Submitting Resources to Cocos Store

Extend Existing Functionality

Customize the Main Menu

Customized Messages

Calling the Engine API and Project Script

Extending the Assets Panel

Custom Asset Database

Custom Inspector Panel

Extending Build Process

Extending Project Settings Panel

Extending the Preferences Panels

Extending Shortcut

Extension Details

Extension Infrastructure

Definition of Extension

Message System

Configuration System

Extension Panel

UI Components

Advanced Topics

Submit Code to Cocos Engine Repository

User Data Storage

Engine Customization Workflow

Web Preview Customization Workflow

Dynamic Atlas

Hot Update Tutorial

AssetManager for Hot Update

HTTP Request

WebSocket Introduction

WebSocket Client

WebSocket Server

On this page

Effect syntax

We have systematically improved and updated the documentation of the material system module since v3.4. Please move to the latest version for the content related to the effect syntax.

Last updated:

Pager

Next pageAbout Cocos Creator