cocos creator 新人踩坑 (prefad 如何使用, 创建节点, 替换精灵, 加载资源)

cocos creator 新人踩坑 (prefad 如何使用, 创建节点, 替换精灵, 加载资源)

cocos create 版本 3.1.2 言语 typescript

用脚本创建节点

创建精灵不再像 2dx 一样，每个组件，节点对象等都有一个统一的父节点

用编辑器创建一个精灵对象，会自带 Node 和 cc.UITransform , 用 getCompoment(Sprite)， 返回当前节点下所有 Sprite 组件。一般 这个精灵对象 Node 只有一个 Sprite

用代码创建精灵需要自己先创建 Node ，再往 Node 中添加精灵

const node = new Node("New Sprite");
const sprite = node.addComponent(Sprite);
const spriteFrame = new SpriteFrame();
const tex = imageAsset._texture;
spriteFrame.texture = tex;
sprite.spriteFrame = spriteFrame;
node.parent = self.node;

在 已有的节点上替换精灵 SpriteFrame

注意 CellphoneLogin 文件放在

项目/assets/resources/LoginSceneTexture/CellphoneLogin.splist

resources.load 方法找 resources 目录下的文件

import { Sprite, resources } from "cc"
start(){
    // 先获得改精灵的节点
    this.isBearNode = this.loginView!.getChildByName("rememBtn");
}
phoneDoBtnClick(){
    // 再由节点获取 Sprite 组件
	let sprite = this.isBearNode?.getComponent(Sprite);
	let isSel = "Cellphone_shifoujizhu_"
	resources.load("LoginSceneTexture/CellphoneLogin", SpriteAtlas, (err, atlas)=>{
		if(err) return new Error(err);
		let fram =  atlas.getSpriteFrame(isSel + (this.isBear? "sel": "nor"));
		sprite!.spriteFrame = fram;
	})
}

加载远程资源

原有的 cc.loader 已被废弃，加载资源改用 assetManager 或 resources (本地)

assetManager.loadRemote<ImageAsse> ImageAsset 为泛型,约束 typescript 编辑器,调用指定泛型的方法。

可以写 Texture2D，或其他，但对调函数 texture 实参返回 类型为 ImageAsset，写其他的没用

let url = "http://.../logo" 当前http 资源没有 文件后缀时,传入参数定义声明后缀 {ext: ".jpg"}, 带后缀不用加
assetManager.loadRemote<ImageAsset>(url, {ext: ".jpg"}, (err, texture) => {
    if(err) return
    if(texture.loaded){
        let sprite = this.verify?.getComponent(Sprite);
        let sptiteframe = new SpriteFrame();
        sptiteframe.texture = texture._texture
        sprite!.spriteFrame = sptiteframe
    }
});

问题

为什么不能直赋值，非得 new SpriteFrame？

let sprite = this.verify?.getComponent(Sprite);
sprite!.spriteFrame = texture

texture 类型为 ImageAsset，spriteFrame 类型为 spriteFrame 两者类型不一致

sprite 中使用 png图片

方式1 通过编辑器修改 图片属性

sprite 一般用 引用 plist图集&#x