Hello World项目

第一个Cocos Creator 3D项目, 为您展示:

  • 创建项目
  • 了解工程目录
  • 创建一个物体
  • 修改相机属性
  • 创建、修改、绑定脚本
  • 运行及调试项目

新建项目

在Dashboard面板中,点击右下角新建按钮,在弹出菜单中选中Creator 3D。 Hello world! - 图1

选择空的模板,设置项目路径,点击下方的创建按钮。

Hello world! - 图2

编辑器界面

Hello world! - 图3

工程目录

通常情况的我们只需要关心assets(资源目录)

  • assets(资源目录)

  • build(构建目录)

  • library(导入的资源目录)

  • local(日志文件目录)

  • profiles(编辑器配置)

  • temp(临时文件目录)

  • package.json(项目配置)

新建场景

左下方资源管理器面板点击鼠标右键,选择新建->Scene。

Hello world! - 图4

创建物体

左上方层级管理器面板点击鼠标右键, 选择创建->3D对象->Cube 正方体。创建的正方体就会出现在场景编辑器里。

Hello world! - 图5

修改Camera

  • 选择Camera对象
    在层级管理器面板,选择Camera,场景编辑器会选中它,并显示Gizmo。
    Hello world! - 图6

  • 修改Camera位置
    在场景编辑器里,拖动Gizmo, 使Camera能够看到创建的正方体。
    Hello world! - 图7

  • 修改Camera背景颜色
    在属性检查器面板,点击Color属性,选择黑色为背景色。
    Hello world! - 图8

添加脚本

  • 新建脚本
    在资源管理器面板点击鼠标右键,选择新建->TypeScript。
    Hello world! - 图9

  • 生命周期函数(按以下顺序调用)

    • onLoad
      脚本初始化时调用

    • onEnable
      组件的 enabled 属性从 false 变为 true 时调用

    • start
      组件第一次激活时调用

    • update
      每一帧渲染前更新物体调用

    • lateUpdate
      在所有组件的 update 都执行完之后调用

    • onDisable
      组件的 enabled 属性从 true 变为 false 时调用

    • onDestroy
      组件或者所在节点销毁时调用

  • 添加代码
    添加start()函数,并输出Hello world
  1. import { _decorator, Component, Node } from 'cc';
  2. const { ccclass, property } = _decorator;
  3. @ccclass('HelloWorld')
  4. export class HelloWorld extends Component {
  5. /* class member could be defined like this */
  6. // dummy = '';
  7. /* use `property` decorator if your want the member to be serializable */
  8. // @property
  9. // serializableDummy = 0;
  10. start () {
  11. // Your initialization goes here.
  12. console.info('Hello world');
  13. }
  14. // update (deltaTime: number) {
  15. // // Your update function goes here.
  16. // }
  17. }
  • 为物体绑定脚本
    选择创建的正方体,在属性检查器面板点击添加组件->自定义脚本->HelloWorld
    Hello world! - 图10

运行项目

编辑器菜单栏点击->项目->运行预览, 或者点击中间的运行按钮。
Hello world! - 图11

调试项目

以Chrome浏览器为例: 按 F12 或者 Ctrl + Shift + I 打开Chrome的开发者工具

  • 日志信息
    Console面板显示了所有日志输出
    Hello world! - 图12

  • 断点调试
    选择标签栏的Source选项,按下Ctrl+P,搜索HelloWorld.ts,在start函数里设置断点,再刷新网页就可以调试了。
    Hello world! - 图13