首页 > 其他分享 >CocosCreator使用i18n实现多语种

CocosCreator使用i18n实现多语种

时间:2023-09-15 14:56:33浏览次数:41  
标签:en 多语种 绑定 LanguageData CocosCreator window let i18n

实现:

  这是官方给出的i18n插件下载地址:GitHub - cocos-creator-packages/i18n: i18n for Label and Sprites

  解压后可以将一整个文件拖到项目的assets文件夹里,如果嫌文件太多可以只保留i18n和runtime-scripts文件夹,如下:

 

  在目录里,i18n文件里的en和zh文件分别是英文配置和中文配置,而在runtime-scripts夹里的诸多文件,我们真正需要操作也只有LanguageData.js文件,而LocalizedLabel和LocalizedSprite则是用于挂载的组件。

en和zh

         这两个文件是用于配置项目中文本的显示内容,如果还需要有其他语言,可以增加配置。在不同语种配置文件里用同样的key来表明是同一字段,在此处配置文本内容。

 

         在添加文本时按初始的格式就可以添加。

LanguageData

  LanguageData文件需要配置en和zh的路径,将代码修改成:

复制代码
let polyInst = null;
if (!window.i18n) {
    window.i18n = {
        languages: {
            'zh': require('../i18n/ch'),
            'en': require('../i18n/en')
        },
        curLang: ''
    };
}
复制代码

         LanguageData文件中需要删除这段代码,这是为了在项目开始时初始化,但这里会报错。

复制代码
if (CC_EDITOR) {
    Editor.Profile.load('profile://project/i18n.json', (err, profile) => {
        window.i18n.curLang = profile.data['default_language'];
        if (polyInst) {
            let data = loadLanguageData(window.i18n.curLang) || {};
            initPolyglot(data);
        }
    });
}
复制代码

  在原来的位置加上:

复制代码
window.i18n.curLang = cc.sys.language;
initPolyglot(loadLanguageData(window.i18n.curLang) || {});
 
function loadLanguageData (language) {
    return window.i18n.languages[language];
}
复制代码

  这样就能在项目运行时初始化系统语言,这里的cc.sys.langaue是当前系统语言字符串。

初始化语言

//初始化语言
let i18n = require('LanguageData');
i18n.init('en');
i18n.updateLanguageRender();

切换语言

//切换语言
let i18n = require('LanguageData');
i18n.init('en');
i18n.updateLanguageRender();

LocalizedLabel和LocalizedSprite组件

  上面部分仅仅只是切换语言,但文本或图片对象还没绑定,在i18n里可以通过代码或插件自带的组件进行语言的绑定和切换。

组件绑定:

  点击需要绑定的文本节点,添加自定义组件->LocalizedLabel,将文本配置的key写上去即可绑定。

  点击需要绑定的图片节点,添加自定义组件->LocalizedSprite,将对应的图片和语种名名(如en/zh)写上去即可绑定。

代码绑定:

  用i18n的t函数即可获取对应key值的文本内容如下,如果想要实现部分文字或图片语言切换,可以在代码里实现:

let i18n = require('LanguageData');
let hello= i18n.t('label_text.hello');
cc.log(hello);

标签:en,多语种,绑定,LanguageData,CocosCreator,window,let,i18n
From: https://www.cnblogs.com/zyh2333/p/17705006.html

相关文章

  • 关于Spring i18n国际化 报错No message found under code * for locale 'zh_CN'.的解
    第一步创建资源文件国际化文件命名格式:基本名称_语言_国家.properties 这里我建了两个配置文件,一个是zh_CN中文的,一个是en_GB英文的,然后在里面随便写点测试文本语句第二步bean.xmlspring配置文件1<?xmlversion="1.0"encoding="UTF-8"?>2<beansxmlns="http:/......
  • vue-i18n
    https://kazupon.github.io/vue-i18n/zh/introduction.html开始如果使用模块系统(例如通过vue-cli),则需要导入Vue和VueI18n,然后调用Vue.use(VueI18n)。格式化在某些情况下,你可能希望将翻译呈现为HTML信息而不是静态字符串。在你的网站上动态插入任意HTML可能......
  • 游戏开发入门——CocosCreator实现
    课程介绍课前介绍为什么要开这门课?其实市面上已经有很多关于游戏开发的课程了,而且都各有千秋。但是。目前市面上的编程课很多标榜的零基础,但是很多名词都没有做相应的解释。我觉得对于初学者来说,可能还是有些难度。课程和课程之间没有一个循序渐进的关系。学员无法通过学习......
  • Chrome Extension Develop: i18n
    Internationalizationandlocalization1Beginchrome.i18n-ChromeDevelopers如果是使用开发框架,需要检查是否将_locales文件夹拷贝到了输出目录,有可能需要自己配置。newCopyWebpackPlugin({patterns:[{from:"src/_locales",to:path.join(__dirname,"......
  • CocosCreator ProejctSetting Macro Configurations 各项设置有何功能
     通过官方对应IDE版本的API文档可知:CocosCreator3.8API-Macro......
  • Web 国际化:新增越南语语系(vue i18n)
     前提:1.在src/locales文件夹中,新增vi.json文件背景:1.vue步骤:1.在main.js中,importVueI18nfrom'vue-i18n'Vue.use(VueI18n)consti18n=newVueI18n({locale:localStorage.getItem('lang')||'zh',messages:{ .........
  • vue3 使用 vue-i18n 配置多语言环境
    1.插件地址:VueI18n官方文档GitHub地址2.安装:在Vue之后引入vue-i18n,它会自动安装:<scriptsrc="https://unpkg.com/vue/dist/vue.js"></script><scriptsrc="https://unpkg.com/vue-i18n/dist/vue-i18n.js"></script>NPM:npminstallv......
  • 在Express中使用i18next
    背景框架:Express语法:TypeScript配置插件:i18next安装npminstalli18next--savenpminstalli18next-http-middleware--save项目配置装饰器src根目录创建装饰器i18next.d.ts:import"i18next";importenLocalesfrom"./locales/en";importzhLocalesfrom"./......
  • uniapp中使用i18n
    1.安装vue-i18n 2.根目录下新建locale文件夹,创建index.jsimport{createI18n}from'vue-i18n'importenfrom'./en.json'//locale文件夹下的英文配置importzhfrom'./zh.json'//中文配置importzhFanfrom'./zh-fan.json'//繁体配置const......
  • 前端系列16集-vue3范型,vue-i18n-next,watch,watchEffect
    中台落地手记——业务服务化与数据资产化vue-i18n-nextvue3中使用i18n需要安装的是 [vue-i18nv9] 的版本npminstallvue-i18n@9创建src\lang\index.ts,使用 createI18n 创建i18n实例://src\lang\index.tsimport{createI18n}from'vue-i18n'import{LANG_......