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

cocosCreator 之 i18n多语言插件

版本: v3.4.0

环境: Mac


简介

i18n国际化的简称, 全名:internationalization;取首尾字符in18代表单词中间的字符数目。

该插件不需要产品做太多的改变,通过语言的设置,实现不同地区之间页面的切换。

官方提供的i18n插件,支持LabelSprite的多语言国际化。

更多内容可参考: i18n 多语言支持


安装

cocos Dashboard -> 商城 -> 搜索i18n免费插件 下载成功后,如果为zip压缩包,可打开编译器的扩展管理器i18n导入进来。

然后通过终端命令进入到项目的extensions/i18n目录下, 执行安装命令:

npm install

如果安装很慢,可能是因为安装镜像为国外,导致网络卡顿,可以运行更换镜源的命令:

npm config set registry https://registry.npm.taobao.org

然后再重新运行npm install,稍等片刻,等命令执行结束后,再执行构建命令:

npm run build

安装完成后,建议重启下Creator编译器。如果发现控制台有错误,可以忽略掉,在配置完成后,错误会自动消失。


多语言配置

打开编译器,选择主菜单上的扩展 -> i18 Settings, 打开本地化控制面板

请添加图片描述

选择**+**号新增配置,比如输入zh代表中文,输入en代表英文,最后按回车键确认。

比如新增语言zh后,会在你的assets/resources目录下生成i18n\zh的配置文件。打开该文件内容:

const win = window as any;
export const languages = {// Data
};if (!win.languages) {win.languages = {};
}win.languages.zh = languages;

export const languages下输入内容:

export const languages = {"test": {"main": "测试","hello": "你好",}
};

然后回到编译器,创建一个Label文本, 将资源管理器的i18n/LocalizedLabel组件拖到文本节点中。

并输入key内容test.main,如下所示:

请添加图片描述

文本内容完成替换。

然后我们通过扩展 -> i18 Settings, 打开本地化控制面板,新增en的内容相关。

// assets/resources/i18n/en.ts
const win = window as any;export const languages = {"test": {"main": "Debug","hello": "Hello",}
};if (!win.languages) {win.languages = {};
}win.languages.en = languages;

通过本地化控制面板的那个眼睛( i18n-display 表示当前语言, i18n-undisplay表示不显示)进行切换语言:

请添加图片描述

如此就可以实现文本多语言功能了。


图片的配置

在编译器中创建一个Sprite,然后将资源管理器/i18n/LocalizedSprite的组件拖曳到该节点下。

SpriteList 有几种语言就输入数字几,大概如图所示:

请添加图片描述

通过本地化控制面板的那个眼睛( i18n-display 表示当前语言, i18n-undisplay表示不显示)进行切换即可。


动态切换

项目运行时,需要支持语言的动态切换, 我们创建一个按钮,并增加点击事件,如下代码:

// import * as i18n from '../extensions/i18n/assets/LanguageData'
import * as i18n from 'db://i18n/LanguageData';@ccclass('loginScene')
export class loginScene extends Component {// 点击多语言切换public clickChangeLanguage() {// 通过init设置当前语言类型if (i18n._language === "en") {i18n.init("zh");}else if (i18n._language === "zh") {i18n.init("en");}// 用于更新场景中的对应的LocalizedLabel和LocalizedSprite的内容// 以实现多语言的替换相关i18n.updateSceneRenderers();}
}

大概的实现原理:

  • 通过i18n.init初始化语言类型
  • 通过LocalizedLabel下的Key声明语言标记; 通过LocalizedSprite下的spriteList设置图片SpriteFrame
  • 除图片外,通过i18n.t根据当前语言类型和key想过获取文本内容
  • 最后通过i18n.updateSceneRenderers 对所有符合条件组件进行强制刷新。

简单看下代码的实现相关:

// from '../extensions/i18n/assets/LocalizedLabel'@ccclass('LocalizedLabel')
@executeInEditMode
export class LocalizedLabel extends Component {label: Label | null = null;@property({ visible: false })key: string = '';// 声明property属性Key@property({ displayName: 'Key', visible: true })get _key() {return this.key;}set _key(str: string) {this.key = str;this.updateLabel();}onLoad() {// 初始化语言类型为zhif (!i18n.ready) {i18n.init('zh');}this.fetchRender();}fetchRender () {// 获取文本Label组件let label = this.getComponent('cc.Label') as Label;if (label) {this.label = label;this.updateLabel();return;} }updateLabel () {// 通过LanguageData的方法接口,根据语言类型和key获取指定的内容// 然后改变内容的显示this.label && (this.label.string = i18n.t(this.key));}
}

里面的i18n指的就是文件LanguageData,它的主要实现:

// from '../extensions/i18n/assets/LanguageData'import { director } from 'cc';
// 默认的语言类型
export let _language = 'zh';
export let ready: boolean = false;// 初始化语言类型,比如zh,en等
export function init(language: string) {ready = true;_language = language;
}// 获取内容
export function t(key: string) {const win: any = window;if (!win.languages) {return key;}const searcher = key.split('.');// 根据语言类型获取不同的内容数据let data = win.languages[_language];// 遍历获取到对应key的内容for (let i = 0; i < searcher.length; i++) {data = data[searcher[i]];if (!data) {return '';}}return data || '';
}// 更新场景渲染器
export function updateSceneRenderers() { const rootNodes = director.getScene()!.children;// walk all nodes with localize label and updateconst allLocalizedLabels: any[] = [];// 遍历所有节点获取LocalizedLabel组件for (let i = 0; i < rootNodes.length; ++i) {let labels = rootNodes[i].getComponentsInChildren('LocalizedLabel');Array.prototype.push.apply(allLocalizedLabels, labels);}// 更新内容显示for (let i = 0; i < allLocalizedLabels.length; ++i) {let label = allLocalizedLabels[i];if(!label.node.active)continue;label.updateLabel();}// 遍历所有节点获取LocalizedSprite组件,对图片进行更新const allLocalizedSprites: any[] = [];for (let i = 0; i < rootNodes.length; ++i) {let sprites = rootNodes[i].getComponentsInChildren('LocalizedSprite');Array.prototype.push.apply(allLocalizedSprites, sprites);}for (let i = 0; i < allLocalizedSprites.length; ++i) {let sprite = allLocalizedSprites[i];if(!sprite.node.active)continue;sprite.updateSprite();}
}

图片的更新方法:updateSprite

// from '../extensions/i18n/assets/LocalizedSprite'updateSprite () {for (let i = 0; i < this.spriteList.length; i++) {const item = this.spriteList[i];if (item.language === i18n._language) {this.sprite.spriteFrame = item.spriteFrame;break;}}
}

相关文章:

cocosCreator 之 i18n多语言插件

版本&#xff1a; v3.4.0 环境&#xff1a; Mac 简介 i18n是国际化的简称&#xff0c; 全名&#xff1a;internationalization&#xff1b;取首尾字符i和n&#xff0c;18代表单词中间的字符数目。 该插件不需要产品做太多的改变&#xff0c;通过语言的设置&#xff0c;实现不…...

redis 如何保证数据一致性

前言 日常开发中常会使用redis作为项目中的缓存&#xff0c;只要我们使用 Redis 缓存&#xff0c;就必然会面对缓存和数据库间的一致性保证问题。而且如果数据不一致&#xff0c;那么应用从缓存中读取的数据就不是最新数据&#xff0c;可能会导致严重的业务问题。 为什么会数…...

因果推断(三)双重差分法(DID)

因果推断&#xff08;三&#xff09;双重差分法&#xff08;DID&#xff09; 双重差分法是很简单的群体效应估计方法&#xff0c;只需要将样本数据随机分成两组&#xff0c;对其中一组进行干预。在一定程度上减轻了选择偏差带来的影响。 因果效应计算&#xff1a;对照组y在干预…...

neo4j入门实例介绍

使用Cypher查询语言创建了一个图数据库&#xff0c;其中包含了电影《The Matrix》和演员Keanu Reeves、Carrie-Anne Moss、Laurence Fishburne、Hugo Weaving以及导演Lilly Wachowski和Lana Wachowski之间的关系。 CREATE (TheMatrix:Movie {title:The Matrix, released:1999,…...

CGAL-2D和3D线性几何内核-点和向量-内核扩展

文章目录 1.介绍1.1.鲁棒性 2.内核表示2.1.通过参数化实现泛型2.2.笛卡尔核2.3.同质核2.4.命名约定2.5.内核作为trait类2.6.选择内核和预定义内核 3.几何内核3.1.点与向量3.2.内核对象3.3.方位和相对位置 4.谓语和结构4.1.谓词4.2.结构4.3.交集和变量返回类型4.4.例子4.5.构造性…...

Ubuntu 22.04 安装docker

参考&#xff1a; https://docs.docker.com/engine/install/ubuntu/ 支持的Ubuntu版本&#xff1a; Ubuntu Lunar 23.04Ubuntu Kinetic 22.10Ubuntu Jammy 22.04 (LTS)Ubuntu Focal 20.04 (LTS) 1 卸载旧版本 非官方的安装包&#xff0c;需要先卸载&#xff1a; docker.io…...

电脑维护进阶:让你的“战友”更强大、更持久!

前言 无论是学习还是工作&#xff0c;电脑已经成为了IT人必不可少的得力助手。然而&#xff0c;电脑的性能和寿命需要经过细心的维护来保证。本文将详细探讨如何维护你的电脑&#xff0c;延长它的寿命&#xff0c;以及一些实用建议。 硬件保养篇 内部清洁 灰尘会导致电脑散热…...

【Leetcode】75.颜色分类

一、题目 1、题目描述 给定一个包含红色、白色和蓝色、共 n 个元素的数组 nums ,原地对它们进行排序,使得相同颜色的元素相邻,并按照红色、白色、蓝色顺序排列。 我们使用整数 0、 1 和 2 分别表示红色、白色和蓝色。 必须在不使用库内置的 sort 函数的情况下解决这个问…...

Pytesseract学习笔记

函数 pytesseract.image_to_string(image: Any, lang: Any None, …) 识别图像中的文本。 Parameters image(Any)&#xff1a;输入图像&#xff0c;不接受bytes类型。...

cnvd通用型证书获取姿势

因为技术有限&#xff0c;只能挖挖不用脑子的漏洞&#xff0c;平时工作摸鱼的时候通过谷歌引擎引擎搜索找找有没有大点的公司有sql注入漏洞&#xff0c;找的方法就很简单&#xff0c;网站结尾加上’&#xff0c;有异常就测试看看&#xff0c;没有马上下一家&#xff0c;效率至上…...

elasticsearch的副本和分片的区别

es/elasticsearch的副本和分片的区别 一&#xff1a;概念 &#xff08;1&#xff09;集群&#xff08;Cluster&#xff09;&#xff1a; ES可以作为一个独立的单个搜索服务器。不过&#xff0c;为了处理大型数据集&#xff0c;实现容错和高可用性&#xff0c;ES可以运行在许多互…...

Docker部署Gitlab

Docker部署Gitlab 文章目录 Docker部署Gitlab前置环境部署步骤初始化配置文件80端口部署方式&#xff08;二选一&#xff09;非80端口需要的部署方式&#xff08;二选一&#xff09;修改 gitlab.rb修改 gitlab.yml刷新配置 前置环境 docker 19.03.13 es 7.2.0 部署步骤 初始…...

ABeam News | ABeam大中华区新人入社式,开启崭新的职场探索之旅吧!

ABeam News | ABeam大中华区新人入社式&#xff0c;开启崭新的职场探索之旅吧&#xff01; 隔空投送 很高兴认识你 7月3日&#xff0c;FY24 ABeam大中华区新人入社式在西安隆重举办&#xff0c;ABeam大中华区董事长兼总经理中野洋辅先生专程莅临入社式现场&#xff0c;与89名…...

【C++】开源:sqlite3数据库配置使用

&#x1f60f;★,:.☆(&#xffe3;▽&#xffe3;)/$:.★ &#x1f60f; 这篇文章主要介绍sqlite3数据库配置使用。 无专精则不能成&#xff0c;无涉猎则不能通。——梁启超 欢迎来到我的博客&#xff0c;一起学习&#xff0c;共同进步。 喜欢的朋友可以关注一下&#xff0c;下…...

[Docker实现测试部署CI/CD----Jenkins集成相关服务器(3)]

目录 7、 Jenkins 集成 SonarQubeJenkins 中安装 SonarScanner下载移动修改配置文件 8、Jenkins配置SonarQube安装插件添加SonarQube添加 SonarScanner 9、Jenkins集成目标服务器 7、 Jenkins 集成 SonarQube Jenkins 中安装 SonarScanner SonarScanner 是一种代码扫描工具&am…...

【Shell】基础语法(二)

文章目录 一、Shell基本语法文件名代换命令代换算术代换转义字符引号 二、Shell脚本语法条件测试分支结构循环 三、总结 一、Shell基本语法 文件名代换 用于匹配的字符称为通配符&#xff08;Wildcard&#xff09;&#xff0c;如&#xff1a;* ? [ ] 具体如下&#xff1a; *…...

Unity之webgl端通过vue3接入腾讯云联络中心SDK

腾讯云联络中心SDK:云联络中心 Web-SDK 开发指南-文档中心-腾讯云 (tencent.com) 1 首先下载Demo ​ 1.1 对其进行解压 ​ 1.2根据文档操作 查看README.md,根据说明设置server下的dev.js里的相关参数。 然后打开电脑终端&#xff0c;cd到项目的路径&#xff1a; ​ 安装…...

《算法竞赛·快冲300题》每日一题:“连接草坪(II)”

《算法竞赛快冲300题》将于2024年出版&#xff0c;是《算法竞赛》的辅助练习册。 所有题目放在自建的OJ New Online Judge。 用C/C、Java、Python三种语言给出代码&#xff0c;以中低档题为主&#xff0c;适合入门、进阶。 文章目录 题目描述题解C代码Java代码Python代码 “ 连…...

LNMP及论坛搭建(第一个访问,单节点)

LNMP&#xff1a;目前成熟的一个企业网站的应用模式之一&#xff0c;指的是一套协同工作的系统和相关软件 能够提供静态页面服务&#xff0c;也可以提供动态web服务&#xff0c;LNMP是缩写 L&#xff1a;指的是Linux操作系统。 N&#xff1a;指的是nginx&#xff0c;nginx提…...

EXCEL,多条件查询数字/文本内容的4种方法

目录 1 问题&#xff1a;如何根据多条件查询到想要的内容 2 方法总结 2.1 方法1&#xff1a; sumif() 和sumifs() 适合查找符合条件的多个数值之和 2.2 方法2&#xff1a;使用lookup(1,0/((区域1条件1)*(区域2条件2)*....),结果查询区域) 2.3 方法3&#xff1a;使用 ind…...

测试微信模版消息推送

进入“开发接口管理”--“公众平台测试账号”&#xff0c;无需申请公众账号、可在测试账号中体验并测试微信公众平台所有高级接口。 获取access_token: 自定义模版消息&#xff1a; 关注测试号&#xff1a;扫二维码关注测试号。 发送模版消息&#xff1a; import requests da…...

内存分配函数malloc kmalloc vmalloc

内存分配函数malloc kmalloc vmalloc malloc实现步骤: 1)请求大小调整:首先,malloc 需要调整用户请求的大小,以适应内部数据结构(例如,可能需要存储额外的元数据)。通常,这包括对齐调整,确保分配的内存地址满足特定硬件要求(如对齐到8字节或16字节边界)。 2)空闲…...

React第五十七节 Router中RouterProvider使用详解及注意事项

前言 在 React Router v6.4 中&#xff0c;RouterProvider 是一个核心组件&#xff0c;用于提供基于数据路由&#xff08;data routers&#xff09;的新型路由方案。 它替代了传统的 <BrowserRouter>&#xff0c;支持更强大的数据加载和操作功能&#xff08;如 loader 和…...

前端倒计时误差!

提示:记录工作中遇到的需求及解决办法 文章目录 前言一、误差从何而来?二、五大解决方案1. 动态校准法(基础版)2. Web Worker 计时3. 服务器时间同步4. Performance API 高精度计时5. 页面可见性API优化三、生产环境最佳实践四、终极解决方案架构前言 前几天听说公司某个项…...

Qt Widget类解析与代码注释

#include "widget.h" #include "ui_widget.h"Widget::Widget(QWidget *parent): QWidget(parent), ui(new Ui::Widget) {ui->setupUi(this); }Widget::~Widget() {delete ui; }//解释这串代码&#xff0c;写上注释 当然可以&#xff01;这段代码是 Qt …...

什么是库存周转?如何用进销存系统提高库存周转率?

你可能听说过这样一句话&#xff1a; “利润不是赚出来的&#xff0c;是管出来的。” 尤其是在制造业、批发零售、电商这类“货堆成山”的行业&#xff0c;很多企业看着销售不错&#xff0c;账上却没钱、利润也不见了&#xff0c;一翻库存才发现&#xff1a; 一堆卖不动的旧货…...

ESP32 I2S音频总线学习笔记(四): INMP441采集音频并实时播放

简介 前面两期文章我们介绍了I2S的读取和写入&#xff0c;一个是通过INMP441麦克风模块采集音频&#xff0c;一个是通过PCM5102A模块播放音频&#xff0c;那如果我们将两者结合起来&#xff0c;将麦克风采集到的音频通过PCM5102A播放&#xff0c;是不是就可以做一个扩音器了呢…...

Spring Boot+Neo4j知识图谱实战:3步搭建智能关系网络!

一、引言 在数据驱动的背景下&#xff0c;知识图谱凭借其高效的信息组织能力&#xff0c;正逐步成为各行业应用的关键技术。本文聚焦 Spring Boot与Neo4j图数据库的技术结合&#xff0c;探讨知识图谱开发的实现细节&#xff0c;帮助读者掌握该技术栈在实际项目中的落地方法。 …...

CMake控制VS2022项目文件分组

我们可以通过 CMake 控制源文件的组织结构,使它们在 VS 解决方案资源管理器中以“组”(Filter)的形式进行分类展示。 🎯 目标 通过 CMake 脚本将 .cpp、.h 等源文件分组显示在 Visual Studio 2022 的解决方案资源管理器中。 ✅ 支持的方法汇总(共4种) 方法描述是否推荐…...

微软PowerBI考试 PL300-在 Power BI 中清理、转换和加载数据

微软PowerBI考试 PL300-在 Power BI 中清理、转换和加载数据 Power Query 具有大量专门帮助您清理和准备数据以供分析的功能。 您将了解如何简化复杂模型、更改数据类型、重命名对象和透视数据。 您还将了解如何分析列&#xff0c;以便知晓哪些列包含有价值的数据&#xff0c;…...