市面上用cocos creator开发的游戏

创始人王哲

1、在链接这里下载dashboard，也就是cocos creator的IDE

2、下完后打开IDE，先去Editor栏，去下载包，下完这个包依赖后，才能去project里面去新建项目。

截屏2022-08-20上午9.26.28.png

3、新建一个项目，可以选new新的，也可以选模板hello world 或者 typescript，等待它导入模板。就看到这样的界面

hello world 模板项目的界面

截屏2022-08-20上午9.28.31.png

empty 模板项目的界面

截屏2022-08-20上午9.30.58.png

可以看到：

资源管理器：显示了项目资源文件夹（assets）中的所有资源。

场景编辑器：用于展示和编辑场景中可视内容的工作区域。

层级管理器：用于树状列表的形式展示场景中的所有节点和它们的层级关系，所有在场景编辑器转给你看到的内容都可以再层级编辑器中找到对应的节点条目

属性检查器：用于查看并编辑当前选中节点及其组件属性的工作区域

资源预览：在资源管理器中选中资源，即可在资源预览面板中显示资源的缩略图。若选中资源所在的文件夹，即可显示文件夹下所有资源的缩略图，方便查看。

动画编辑器：用于制作一些不太复杂的，需要与逻辑进行联动的动画，例如UI动画。

控制台：用于显示报错、警告或其他编辑器和引擎生成的日志信息。

1、创建场景scene, 在资源管理器的assets右击-新建-Scene,取名‘scene’

2、创建物体，在左上方的层级管理器面板中点击鼠标右键，选择创建 > 3D对象 >Cube立方体。或者也可以直接点击左上角的+按钮，然后选择3d对象>Cube立方体

截屏2022-08-20下午2.41.02.png

3、添加脚本，在 资源管理器 面板中点击鼠标右键，选择 创建 -> TypeScript，然后命名为 “HelloWorld”，即可在 资源管理器 的 asset 目录下新建一个脚本。

4、添加代码，双击新建的脚本，脚本会自动在脚本编辑器中打开，前提是需要在编辑器菜单栏的 Cocos Creator -> 偏好设置 -> 外部程序 -> 默认脚本编辑器 中指定好使用的脚本编辑器。

然后在脚本中添加 start() 函数，start() 函数会在组件第一次激活时调用，并输出 “Hello world”。

import { _decorator, Component, Node } from 'cc';  const { ccclass, property } = _decorator;

@ccclass('HelloWorld')
export class HelloWorld extends Component {
    /* class member could be defined like this */
    // dummy = '';

    /* use `property` decorator if your want the member to be serializable */
    // @property
    // serializableDummy = 0;

    start () {
        // Your initialization goes here.
        console.info('Hello world');
    }

    // update (deltaTime: number) {
    //     // Your update function goes here.
    // }
}

5、绑定脚本，在 层级管理器 中选中创建的 Cube 节点，然后在 属性检查器 面板最下方点击 添加组件 -> 自定义脚本 -> HelloWorld，即可将脚本挂载到 Cube 节点上。或者也可以直接将脚本拖拽到 属性检查器 面板。

6、预览场景，简单的场景搭建完成后，就可以点击编辑器上方的预览按钮来预览游戏了。目前支持使用 浏览器/模拟器 进行预览。

以使用 浏览器 预览为例，Cocos Creator 会使用您的默认浏览器运行当前游戏场景，效果如下图所示：

可以看到在浏览器的开发者工具中的日志信息中输出了 “Hello World”。

7、修改场景中的camera，在预览中我们可以看到立方体似乎有点太小了，这时便可以通过调整场景中的 Camera 来调整场景运行时显示的区域，Camera 代表的是游戏中的玩家视角。

首先在 层级管理器 中选中 Main Camera 节点，场景编辑器 中便会显示变换工具 Gizmo，以及玩家视角的小窗口。

然后在 场景编辑器 中拖动 Gizmo，或者修改 属性检查器 中的 Position 属性，使玩家视角窗口中的立方体显示得更为明显。

然后再次在浏览器中预览，可以看到场景中的立方体就很明显了

项目结构

assets：资源目录: 用来放置游戏中所有的本地资源、脚本和第三方库文件。只有在assets目录下的文件才能显示在资源管理器中。assets中的每个文件在导入项目后都会生成一个相同名字的.meta文件，用于存储对应的资源配置和索引信息。.meta文件需要一并提交到版本控制系统。
build：构建目录（在构建某平台后会生成该目录）: 在使用编辑器主菜单中的项目 -> 构建发布，使用默认发布路径发布项目后，编辑器会在项目路径下创建build目录，并存放所有目标平台的构建工程。
library：library 是将 assets 中的资源导入后生成的，在这里文件的结构和资源的格式将被处理成最终游戏发布时需要的形式。当 library 丢失或损坏的时候，只要删除整个 library 文件夹再打开项目，就会重新生成资源库。
local：日志文件目录: local 文件夹中包含该项目的本机上的配置信息，包括编辑器面板布局、窗口大小、位置等信息。开发者不需要关心这里的内容.
profiles：编辑器配置: profiles 文件夹中包含编辑器的配置信息，包括各目标平台的构建配置信息、场景配置信息等。
temp：临时文件目录: temp 是临时文件夹，用于缓存一些 Cocos Creator 在本地的临时文件。这个文件夹可以在关闭 Cocos Creator 后手动删除，开发者不需要关心这里面的内容。
package.json：项目配置: package.json 文件和 assets 文件夹一起，作为验证 Cocos Creator 项目合法性的标志，只有包括了这两个内容的文件夹才能作为 Cocos Creator 项目打开。开发者不需要关心里面的内容。

cocos creator 一款轻量、高效、免费开源的跨平台游戏引擎 - 小白入门教程

项目结构