cocos creator 3学习记录01——如何替换图片

一、动态加载本地图片

1、通过将图片关联到CCClass属性上来进行代码切换。

1、这种方法,需要提前在脚本文件中声明好代表图片的CCClass属性。

2、然后拖动图片资源,到脚本内声明好的属性上以进行关联。

3、然后通过程序,来进行切换展示。

不过吧,这种方法我并不推荐,因为需要提前声明好属性,甚至需要提前关联好。

如果图片数量多了,就挺难绷。

之所以记录一下,是因为之前啥都不会的时候,搜索来去都只有这一种方法,就挺无语。

2、使用resources.load来动态加载本地SpriteFrame 图片

1、使用resources.load API,需要先在assets目录下新建一个文件夹:resources

2、调用resources.load API,路径是默认在resources文件夹下,所以直接写后面的路径即可。

3、对于图片类型,直接访问路径所对应的图片地址,得到的图片类型会是ImageAsset,此时必须指定具体的子资源。这里我们希望得到的是精灵帧,因此加上/spriteFrame

4、测试效果。

官方文档里说的 注意:从 v2.4 开始,loader 等接口不再建议使用,请使用最新的 assetManager 相关接口,

指的是 loader.loaderRes、loader.loadResDir、loader.release等loader开头的API,并不是 resources.load,因此无需担心。

点击跳转官方文档

二、动态加载远程图片

1、使用assetManager.loadRemote API,加载带图片后缀名的远程url

需要注意的是,远程url需要带图片后缀名

2、若不带图片后缀的时候,则需要指定远程图片文件的类型。

相关推荐
GuWenyue28 分钟前
不用第三方SDK!Vue3原生Fetch实现DeepSeek流式输出,90%前端都会踩的分片解析坑一次性解决
前端·人工智能·llm
独隅30 分钟前
前端离线暂停更新策略:Service Worker 与 PWA 实战指南
前端
不如摸鱼去1 小时前
Wot UI 2.3.0 发布:二维码组件来了,Open Wot 与 wot-starter 同步更新
前端·ui·微信小程序·前端框架·uni-app
Cloud_bread1 小时前
从ReAct到自主闭环:Agentic Coding核心执行引擎的技术演进
前端·react.js·前端框架
cidy_982 小时前
OptMem 使用教程
前端
杉氧2 小时前
用 Compose 挑战交互与动效天花板:ComposeCraftLab 开源实验室全解析
android·前端·kotlin
Canace2 小时前
AI 生成到 90% 突然断了:你的解决方案是?
前端·人工智能
TinssonTai2 小时前
Vite 8 版 Chrome 插件全家桶,popup/options/sidepanel 一次集齐
前端·vue.js
玉鸯2 小时前
让 Agent 面向用户:AG-UI 协议构建 Agent 前端
前端·python·agent
程序员黑豆2 小时前
鸿蒙应用开发 @Extend 装饰器使用教程
前端·harmonyos