当前位置：首页 > news >正文

cocos creator 3.8 下的 2D 改动

news 来源：原创 2025/7/5 16:24:16

在B站找到的系统性cocos视频教程,纯2D开发入门,链接如下:

zzehz黑马程序员6天实战游戏开发微信小程序（Cocos2d的升级版 CocosCreator + JavaScript）_哔哩哔哩_bilibili黑马程序员6天实战游戏开发微信小程序（Cocos2d的升级版 CocosCreator + JavaScript）共计139条视频，包括：01_什么是游戏编程、02_整体课程安排概述、03_开发前的编程语言准备等，UP主更多精彩视频，请关注UP账号。https://www.bilibili.com/video/BV1Uy4y1m7fx/随着时间的流逝,这个视频的内容也需要更新,这里记录一下3.8版本下与视频内不一致的地方

脚本编程部分

颜色

import { _decorator, Component, Node, Sprite,Label, UIOpacity, Color } from 'cc';
let node1 = this.node.getComponent(Label)
node1.color = Color.BLACK;
node1.color = new Color(255, 0, 0, 255);  // r,g,b,a(透明度) 所有参数[0-255]

不透明度文档链接

import { _decorator, Component, Node, Sprite,Label, UIOpacity, Color } from 'cc';
const opacityComp = this.getComponent(UIOpacity);
opacityComp.opacity = 157;

角度

this.node.angle = -45

属性装饰器官方文档

@property // JavaScript 原始类型，根据默认值自动识别为 Creator 的浮点数类型。
index = 0;@property(Node) // 声明属性 cc 类型为 Node。当属性参数只有 type 时可这么写，等价于 @property({type: Node})
targetNode: Node | null = null; // 等价于 targetNode: Node = null!;// 声明属性 children 的 cc 类型为 Node 数组
@property({type: [Node]
})
children: Node[] = [];

添加组件

// this.node.addComponent(类名);
this.node.addComponent(SayHello);

cocos2的动作系统在cocos3中替换为缓动系统官方链接文档里面示例最多,这里有一个例子

tween().target(this.node).to(1.0, { position: new Vec3(0, 10, 0) }).by(1.0, { position: new Vec3(0, -10, 0) }).delay(1.0).by(1.0, { position: new Vec3(0, -10, 0) }).start()

问了一下Ai, 如何区分什么时候使用缓动系统还是动画系统:

如果动画逻辑简单且需要动态调整，优先使用缓动系统。
如果动画复杂且需要精确控制，优先使用动画系统。

精灵组件之九宫格

九宫格的类型修改和视频中不一样,具体方法参考官网链接

其他内容或多或少也有些变动,但都和原来的相似,这里不重复记录.

脚本编程部分

精灵组件之九宫格

相关文章：