CocosCreator使用i18n實現多語種
前言:
如果要在游戲或者APP中可以根據不同地區顯示不同語言,或者能設置切換語言,這是怎么實現的?要如何處理應用中的圖片呢?當然方式有很多種,本文主要討論在CocosCreator中使用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);
后言:
時過境遷,游戲再不是之前國內 “自營自銷”,如今有很多游戲面向全世界,多語言系統也更多的成為很多游戲開發的必備模塊。
對於任何市場來說,本地化都是一個很重要的事情。所以從游戲體驗上說,大部分游戲都是需要多語言處理才能發揮出本來的樂趣的,而且質量越高越好。