cocos creator 3.8 下的 2D 改动

news2025/5/16 20:48:07

在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, 如何区分什么时候使用缓动系统还是动画系统: