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; }); }