《V7投稿 | Cocos 3.x 组件化拓展开发之多语言图片组件-开发过程分享(含核心源码)》
引述: 临近五一了, 赶一篇帖子参加下论坛活动,
前言: 不知道大家有没有在多语言的图片的开发中遇到过这种问题（如果用官方的那个 i18n 来处理图片的话, 场景里面会有多个不同语言的图片的引用关系, 有点增加内存, 而且切换起来也不甚方便) ，由此而来我产生了做个开源在编辑器里面快速切换不同版本的多语言的小插件的想法，但是基于某些情况来说，插件的面向用户来说，小白入门还是有一定难度，所以个人感觉组件化开发会更合适点，所以后面做成了下方这个样式的，组件化的源码版（支持 Cocos 2.x 和 Cocos 3.x）, 可在编辑器里面预览和使用，全局使用的的话，也不需要绑定到每个图片节点上面.
https://store.cocos.com/app/detail/6191
Cocos 多语言组件-图片文本多语言展示(cc2.x+cc3.x) - Store - Cocos中文社区
0. 现在开始分享下核心的开发过程（Cocos 3.8.0 做讲解）::
1.1 自定义一个编辑器内可以运行和查看效果的组件
@executeInEditMode //编辑器内要看效果必须加上
@disallowMultiple //如果是想保持让这个节点只能加上这一个组件就加上这个属性
/**
* 引入 cc, 兼容 Cocos Creator 3.x [cc 长存] - Cocos Store [小有]
*/
import * as cc from 'cc'; //Cocos 3.x
@ccclass("LoadLanguageSprite") //Cocos 3.x
/**
* 编辑器内预览时，需要执行此脚本，否则无法预览语言切换效果 executeInEditMode
*/
@executeInEditMode
/**禁止添加同类型的组件 */
@disallowMultiple
export class LoadLanguageSprite extends cc.Component {
}
1.2 核心的逻辑 (就是用代码替换手动操作和修改图片节点上的图片)
2.1 开始分析这个操作的过程中发生了什么（方便写对应的 Editor 里面的逻辑）
2.1.1 打开 Cocos 3.8.0 的这 2 个顶部的菜单
开发者/消息调试工具 //这个方便调试和查看对应的请求和内容
开发者/消息列表 //这个方便查看 API 和对应的参数
2.1.2 启动消息调试工具开始调试
2.1.3 开始拖个图片到图片节点上
2.1.4 可以看到这里多了很多消息, 现在可以暂停了
2.1.5 简单分析后, 可以发现这个就是设置图片的消息, 查阅消息列表这个即可知道参数
关键词: browser request set-property
set-property
设置某个元素内的属性
- options {SetPropertyOptions}
- uuid {string} 修改属性的对象的 uuid
- path {string} 属性挂载对象的搜索路径
- dump {IProperty} 属性 dump 出来的数据
2.1.6 查阅到这些，根据 Cocos 3.x 的系列的定义规则，即可开始写新的省力方案：
// 核心逻辑
await Editor.Message.request('scene', 'set-property', {
uuid: getThis.node.uuid, //这个传的是要修改属性的那个节点的 uuid, 一般在编辑器环境或者构建后的环境都可以拿到
path: "__comps__.1.spriteFrame",//要修改的属性, 这个是固定不变的定义,具体可以看调试那个面板
dump: {
type: "cc.SpriteFrame", //固有命名,因为修改的是图片
value: { "uuid": uuid }, //这里传入的是那个要修改的图片资源的 uuid , 可以根据情况自定义下,也可以用 Editor 的 path 进行查询
}
});
END
暂时没有想到要补充的内容了，欢迎大家留言讨论
