Cocos入门

来源：好游戏攻略时间：2024-11-22 05:33

下载cocos

在官网下载完cocos的集成器

在集成器里面下载对应的编辑器版本

//这个时候请不要切换网络，会报错导致重新下载，算是一个小bug

Cocos编辑器设置中文

File—》preferences—》general—》中文

关闭与恢复面板

在cocos之中有很多面板，对应着各种管理器，设置等。

右击不需要的面板则会关闭

在最上面的菜单栏-面板可以恢复回来。

如何恢复默认这里不同版本有不同的地方

最新版本3.8.4在文件-》布局—》默认布局来恢复。

场景 scene，

如何添加场景

在资源管理器里面，右键来创建场景。

对场景进修修改

重命名场景：在资源管理器之中选中后右键重命名

删除场景：在资源管理器之中选中后右键来删除

资源 asset

指游戏之中遇到的素材，如图片，音乐，脚本等。

导入资源

在桌面选中后拖入资源管理器

界面的各种编辑器

关于场景编辑器

1每个小格子大约是100像素

2框框是设计分辨率

3世界坐标系，也就是一个二维平面，脑子里代入一下初中的x与y坐标。

关于层级管理器

当创建一个场景，默认生成一个画布（canvas）与摄像机（camera）

场景编辑器

鼠标滚轮在场景编辑器上可进行缩放

而用笔记本使用两指缩放

右键进行拖拽，类似于ps的小手手

节点以及各种操作

选中节点

在图层管理器之中拖入图片素材，放在canvas画布节点下方。

这时候每个图片都是一个图片节点

控制节点

//低版本与最新版这里有些许不同

低版本在图层管理器之中。

最新版在场景编辑器之中。

选中后场景编辑器的上面会出现一个小蓝色标志，在这里可以移动，缩放，

图片节点的绘制次序是从上到下，所以最下面的图片会在最上面显示。

缩放；沿着x轴缩放则y轴缩放不会变化，沿着y轴缩放同理，中心点为等比缩放。

矩形变换：理解为ps之中的矩形变换。可以任意比率调整宽高和中心点。

图片节点属性

Position：位置

Rotation：角度

Scale：缩放

位置与锚点

位置position，用于指定一个节点的位置，是一个相对的位置。

锚点 anchor，用于确定一个节点的基准点。

节点 node

图片节点

一个能显示图片的节点

创建图片节点

方案一，把图片拖入资源管理器，然后在拖入层级管理器。

方案二，这里新版本和老版本不同。

旧版：在层级管理器，右键-》创建-》渲染节点-》sprite（精灵）

新版：在层级管理器，右键-》创建-》2d对象-》sprite（精灵）

一般的情况创建节点我们都是使用方案二，图片节点比较特殊，方案一更省事一些。

创建完一个空的sprite后怎么往里面填充图片？

在选中后，把图片从资源管理器拖入即可。

添加文本节点和ui节点

添加一个文本节点，用于显示文字

在层级管理器，右键-》创建-》2d对象-》lable文本

添加ui节点

添加一个按钮，button

设置背景，背景图，背景色。

在层级管理器，右键-》创建-》ui组件-》按钮

{还是新老版本有所不同}

当创建成功时候会看见按钮下方被自动创建一个文本节点。

{这里新版本与老版本也不同，新版本只有一个文本节点，老版本多一个背景节点。}

按钮节点可以像是之前图片节点一样放置图片，具体原理一样。

按钮节点有着一些别的属性，比如按下时候的样子，鼠标选中时候的样子。

选中按钮节点后在cc.button里面可以设置具体的属性。

添加一个文本框

在层级管理器之中，选中后右键，创建-》ui组件-》输入框

这将会随之创建一个TEXT_LABEL节点和PLACEHOLDER_LABEL节点

在textlabel上可以更改当用户打字上去的时候的文字属性，如是什么色之类。

Rlaceholder上可以设置当默认情况下的文字属性，如默认的颜色等。

节点与组件

节点 node

组件 component

如label组件（文本）

Sprite组件（图片）

通过例子来了解节点与组件

在层级管理器之中创建一个空节点

选中空节点后，在属性检查器里面的下方“添加组件”

然后在2d-》sprite创建一个图片组件

然后在图片组件的Sprite Frame增加一个图片

创建一个空节点

增加一个图片节点，设置完后在增加一个按钮节点。

设置按钮组件的属性，更改悬浮这一个Hover Sprite，使其图片更改别的

这样通过节点属性的组合，使其特性进行了叠加

父子节点

当一个节点包含另一个节点时候将这种关系称之为父子关系，父节点移动子节点相对于父节点移动。

开始学习cocos脚本

下载vscode

1从官网下载vscode

2进行汉化

在首页使用快捷键 ctrl+shift+p

输入》Configure Display Language

选择中文然后回车

创建一个脚本

1在资源管理器右键-》创建-》脚本

2双击刚创建的脚本

3在系统选择之中选择用vscode打开

4在vscode之中选择信任窗口

//为更好地打开脚本，在 {preferences} -> {program} -> {scriptEditor} 里配置打开脚本的应用程序

//在win之中让默认打开.ts文件为vscode的方法

1win+i

2应用-》默认应用

3下滑到最底部->按照文件类型选择

4输入js，选择vscode

同理，在如果想打开其他后缀名也可以类推。

为节点添加脚本组件

创建好了直接往节点的属性检查器上托

Hello，world

选中脚本后在vscode打开

在start函数之中写入console.log("你好世界");

选中浏览器运行，然后f12打开控制台即可看见“你好世界”

除此之外也可以这样写

cc.log(“咋瓦鲁多”)

没事也可以写点警报玩。

console.warn("你看你吗呢");

这样控制台就可以看见一个警报。