Cocos 3.x 入门系列二 官方示例Mind your step

本系列参考https://docs.cocos.com/creator/3.0/manual/zh/,会摘抄部分原文,并做一些个人笔记。

在官方的快速上手:制作第一个游戏使用了许多功能,因为篇幅问题,原文只作简单使用,细节介绍放在了其它章节,本文稍微做一些补充,方便理解。

一、坐标系与场景操作

参考坐标系和节点变换属性

1.世界坐标系
image.png

Creator 3.0 的世界坐标系采用的是笛卡尔右手坐标系,默认 x 向右,y 向上,z 向外。

在Scene中添加几个Cube,让它们的x分别是0,1,2 ;这样就能观察到排放顺序。点击场景右上角的箭头

image.png

可以确认,颜色也是红色对应X轴,绿色Y轴,蓝色Z轴。点击不同的轴,看到Cube不同的投影。

2.添加光照,查看效果

默认new的scene就有个平行光,平行光的位置没有意义,可以调旋转属性,此时在场景中使用ALT+左键就能看到光照的实际效果。

在 3D 视图下,可以通过以下操作来移动和定位 场景编辑器 的视图:

  • 鼠标左键 + Alt:以视图中心点为中心旋转。
  • 鼠标中键:平移视图。
  • 鼠标滚轮:以视图中心点为中心缩放视图。
  • 鼠标右键 + WASD:摄像机漫游。
  • F 快捷键:摄像机聚焦到当前选中节点。

在 2D 视图下,可以通过以下操作来移动和定位 场景编辑器 的视图:

  • 鼠标中键:平移视图。
  • 鼠标滚轮:以当前鼠标悬停位置为中心缩放视图。
  • 鼠标右键:平移视图。
  • F 快捷键:摄像机聚焦到当前选中节点。
3.调节摄像机

可以把默认的摄像机参数置0,然后调节X=2,Z=6。不断改变X和Z的值,就能明白X可以控制视野左右变化,Z是离的远近程度,远小近大。

4.本地坐标系

Creator 3.0 的 节点(Node) 之间可以有父子关系的层级结构,我们通过修改节点的 Position 属性设定的节点位置是该节点相对于父节点的 本地坐标系,而非世界坐标系。最后在绘制整个场景时 Creator 会把这些节点的本地坐标映射成世界坐标系坐标。

假设场景中有三个节点:NodeA、NodeB、NodeC,节点的结构如下图所示:


image.png

当场景中包含不同层级的节点时,会按照以下的流程确定每个节点在世界坐标系下的位置:

  • 从场景根级别开始处理每个节点,上图中 NodeA 就是一个根级别节点。首先根据 NodeA 的 位置(Position) 属性,在世界坐标系中确定 NodeA 的本地坐标系原点位置(也就是 Position)。

  • 接下来处理 NodeA 的所有直接子节点,也就是上图中的 NodeB(以及其他和 NodeB 平级的节点)。根据 NodeB 的 Position 属性,在 NodeA 的本地坐标系中确定 NodeB 在世界坐标系中的位置。

  • 之后不管有多少级节点,都继续按照层级高低依次处理,每个节点都使用父节点的坐标系和自身位置属性来确定在世界坐标系中的位置。

  • 本地坐标系转世界坐标系,比如const v3 = this.riverRole.getWorldPosition()

5.示例中的主角树节点

首先创建一个名为 Player 的空节点,然后在这个空节点下创建名为 Body 的主角模型节点,为了方便,我们采用编辑器自带的胶囊体模型做为主角模型。

分为两个节点的好处是,我们可以使用脚本控制 Player 节点来使主角进行水平方向移动,而在 Body 节点上做一些垂直方向上的动画(比如原地跳起后下落),两者叠加形成一个跳越动画。


image.png
二、Animation

对Body节点,添加Animation。这里按照教程创建twoStep.ani后,要先挂到Animation后。再进入动画编辑器里切换到twoStep里进行编辑


image.png
image.png

Body添加了Animation后,就可以拖到脚本的BodyAnim属性里了

三、Prefab

参考https://docs.cocos.com/creator/3.0/manual/zh/asset/prefab.html
预制件用于存储一些可以复用的场景对象,它可以包含节点、组件以及组件上的数据。由预制件生成的实例既可以继承模板的数据,又可以有自己定制化的数据修改。

1.创建预制件

在场景中将节点编辑好之后,直接将节点从 层级管理器 拖到 资源管理器 中即可完成预制件资源的创建。
完成创建后,原节点自动变为该预制件的实例,根节点呈现 亮绿色,非嵌套预制件子节点呈现 暗绿色。

2.使用预制件

将预制件资源从 资源管理器 拖拽到 层级管理器 或 场景编辑器,即可在场景中生成一个预制件的实例。
场景中的预制件实例对象,数据源来自预制件资源的反序列化,所以它的数据默认同步了预制件资源,如果对预制件实例中的各项属性进行修改,修改的数据会被存储在预制件实例中,所以不会影响到预制件资源和它生成的其它预制件实例的数据。

image.png
  • 还原为普通节点。预制件节点可变为普通节点,即完全脱离和资源的关系。还可以通过点击编辑器主菜单中的 节点 -> 取消关联当前的 prefab 资源 来实现。
  • 定位资源。便于快速在 资源管理器 中定位到预制件资源。
  • 从资源还原。将当前预制件实例的数据还原为预制件资源中的数据,其中名字、位置和旋转不会被还原为预制体资源中的数据。
  • 更新到资源。将当前预制件实例的所有数据更新到所关联的预制件资源中。
3.替换临时资源时有坑

项目刚开始使用临时资源,后期替换资源后,Chrome运行发现报错,加载不到资源,并且Chrome控制台显示的是一些md5码的名称,不清楚具体是哪个文件缺失。此时可以选择项目打包,控制台就会提示哪个文件有问题了。


image.png

另外一个坑就是,prefab替换资源后,仍然会引用之前的uuid,如果此时删除之前的资源就会报错了。解决办法就是先把prefab拖到场景上,然后取消关联,改个名字后再拖回资源管理器里,创建一个新的prefab。这样之前的prefab就可以删除了。后果就是要把使用旧prefab的所有地方,都手动替换成新prefab,很麻烦……

image.png

参照其它代码,改成这样:

let block: Node|null = this.spawnBlockByType(this._road[j]);
四、2D的UI

对于 UI 节点,为了让其正常显示,它的任意上级节点至少得有一个含有 UITransform 组件。所以创建 UI 节点时,如果不符合规则,则会自动创建一个 Canvas 节点作为 UI 节点的根节点,具体内容可参考 UI 结构说明

五、脚本
1.在 GameManager 脚本中引用 PlayerController 脚本:
image.png

这里需要import:

import { PlayerController } from "./PlayerController";

然后稍微改一下:

    @property({type: PlayerController})
    public playerCtrl: PlayerController|null = null;

然后回到UI,要挂载的并不是PlayerController脚本,而是挂了PlayerController脚本的Player节点。

六、阴影
1.Scene 节点,然后在 属性检查器 勾选 shadows 中的 Enabled,并修改 Distance 和 Normal 属性
2.点击 Player 节点下的 Body 节点,将 cc.MeshRenderer 中的 ShadowCastingMode 设置为 ON
七、复制

复制cocos文件夹时,我把之前的meta文件全删除再复制过来的,这样就会重新生成meta文件。然后就报错了:


image.png

应该是配置文件中使用了固定的uuid,所以需要把meta文件也复制过来,不要重新生成meta。

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 203,098评论 5 476
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 85,213评论 2 380
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 149,960评论 0 336
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 54,519评论 1 273
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 63,512评论 5 364
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 48,533评论 1 281
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 37,914评论 3 395
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 36,574评论 0 256
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 40,804评论 1 296
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 35,563评论 2 319
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 37,644评论 1 329
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 33,350评论 4 318
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 38,933评论 3 307
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 29,908评论 0 19
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 31,146评论 1 259
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 42,847评论 2 349
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 42,361评论 2 342

推荐阅读更多精彩内容