cocos create i18n 本地化

前言cocos create本身支持 i18n。用户起来也很友好。官方有自带的插件。很好就能实现。官网文档文档地址但是它本身只支持文本Label图片Sprite我这边对插件进行了扩展让他支持富文本输入框(Placeholder)按钮文本支持占位符。这边刚好记录下。具体使用 官方文档已经有详细介绍了。我们主要从扩展的方面进行介绍。文章后面会上传对于代码富文本扩展富文本的支持import * as i18n from ./LanguageData; import { _decorator, Component, Label, RichText } from cc; const { ccclass, property, executeInEditMode } _decorator; ccclass(LocalizedRichText) executeInEditMode export class LocalizedRichText extends Component { richText: RichText | null null; property({ visible: false }) key: string ; property({ displayName: Key, visible: true }) get _key() { return this.key; } set _key(str: string) { this.updateLabel(); this.key str; } onLoad() { if (!i18n.ready) { i18n.init(zh_cn); } this.fetchRender(); } fetchRender () { let richText this.getComponent(cc.RichText) as RichText; if (richText) { this.richText richText; this.updateLabel(); return; } } updateLabel () { this.richText (this.richText.string i18n.t(this.key)); } }使用和官方风格统一输入框 扩展主要解决 占位提示:import * as i18n from ./LanguageData; import { _decorator, Component, SpriteFrame, Sprite, Button, EditBox } from cc; const { ccclass, property, executeInEditMode } _decorator; ccclass(LocalizedEditBox) executeInEditMode export class LocalizedEditBox extends Component { editBox: EditBox | null null; property({ visible: false }) key: string ; property({ displayName: Key, visible: true }) get _key() { return this.key; } set _key(str: string) { this.updateLabel(); this.key str; } onLoad() { if (!i18n.ready) { i18n.init(zh_cn); } this.fetchRender(); } fetchRender() { let editBox this.getComponent(cc.EditBox) as EditBox; if (editBox) { this.editBox editBox; this.updateLabel(); return; } } updateLabel() { this.editBox (this.editBox.placeholder i18n.t(this.key)); } }使用和官方风格统一按钮 扩展import * as i18n from ./LanguageData; import { _decorator, Component, SpriteFrame, Sprite, Button } from cc; const { ccclass, property, executeInEditMode } _decorator; ccclass(LocalizedButtonItem) class LocalizedButtonItem { property language: string zh; property({ type: SpriteFrame, }) normalSprite: SpriteFrame | null null; property({ type: SpriteFrame, }) pressedSprite: SpriteFrame | null null; } ccclass(LocalizedButton) executeInEditMode export class LocalizedButton extends Component { button: Button | null null; property({ type: LocalizedButtonItem, }) spriteList []; onLoad() { if (!i18n.ready) { i18n.init(zh); } this.fetchRender(); } fetchRender() { let button this.getComponent(cc.Button) as Button; if (button) { this.button button; this.updateSprite(); return; } } updateSprite() { for (let i 0; i this.spriteList.length; i) { const item this.spriteList[i]; // ts-ignore if (item.language i18n._language) { // ts-ignore this.button.normalSprite item.normalSprite; this.button.pressedSprite item.pressedSprite break; } } } }文本的占位符 扩展使用文本:/** * 占位符 * param key * param args * returns */ export function format(key: string, ...args): string { const win: any window; if (!win.languages) { return key; } const searcher key.split(.); let data win.languages[_language]; for (let i 0; i searcher.length; i) { data data[searcher[i]]; if (!data) { return -*-; } } if (!data) { return -*-; } return data.replace(/\{(\d)\}/g, (match, index) { return args[index] ! undefined ? args[index] : match; }); }