美文网首页Cocos Creator小游戏CocosCreator优化
Cocos Creator之游戏多语言转换

Cocos Creator之游戏多语言转换

作者: 喜欢桃子的阿狸 | 来源:发表于2019-03-29 00:50 被阅读567次

    如果你的游戏需要推广到海外,游戏语言是中文那肯定是不行的。必须转换为相对应的语言,比如说你在欧美推广,那你就需要转换为英文,所以游戏中必须有切换语言的选项,相信大家玩过大部分大型的游戏都是有这个选项的,这里主要介绍英文的转换,其他语言也是一样的。不懂得或者有其他问题的可以加qq讨论群:706176551。

    1.我们需要去下载i18n转换语言的插件

    用Creator创建一个空白项目

    打开->扩展->扩展商店 image.png 点击creator插件 image.png 然后找到我们所需要的插件,点击他,里面会有下载按钮,点击下载 image.png image.png 下载完成后这里有安装按钮点击它 image.png 它会弹出对话框,询问你是安装到全局目录还是项目目录,“全局目录”指的是安装在你的系统,之后你所有的项目都可以用到,“项目目录”指可用于单个项目。我这里安装到项目目录。安装完成后你会发现控制台会显示绿色的一行字,来提示你安装成功。打开->扩展->你会发现多了i18n这个选项,如果没有你可以关闭项目重新打开。 image.png 我们的资源管理器也会多出一些文件 image.png

    2.创建自己需要的语言文件

    打开->扩展->i18n,它会弹出一个界面 image.png 现在这个界面什么都没有,需要我们创建。在这里我点击“+”创建“zh”和“en”这两种语言,也就是中文和英文。 image.png 它会标明语言文件所在的路径。 image.png

    3.编辑语言文件的内容

    双击打开zh.js脚本,我们为脚本增加一些内容


    image.png 再打开en.js脚本,进行同样的操作,只不过是把对应的内容翻译成英文。 image.png

    4.搭建一个简单的界面来测试

    界面如下,分别是单选框toggle组件和lable组件


    image.png 并且为文本组件添加一个“LocalizedLabel ”的组件,这个组件只有安装i18n插件才会有的。 image.png 并在组件的DataID写上我们创建好语言的ID,例如:label_text.hello image.png 也为中文和英文两个lable下的LocalizedLabel DataID写上中文和英文的key值,界面现在是这样子的 image.png

    5.语言的初始化和切换

    创建一个i18n的TypeScript脚本,挂载在Canvas下, image.png 写了两个点击toggle触发的事件,并为场景的toggle绑定相应的事件。接下来是测试成果。刚开始界面是这样的 image.png 运行后是这样的 image.png 它会默认是中文,我们点击切换英文看看有什么变化呢?咦!真的变了呢! image.png

    下面贴上涉及到的完整代码

    zh.js

    'use strict';
    
    if (!window.i18n) {
        window.i18n = {};
    }
    
    if (!window.i18n.languages) {
        window.i18n.languages = {};
    }
    
    window.i18n.languages['zh'] = {
        // write your key value pairs here
        "label_text": {
            "hello": "你好!",
            "bye": "再见!",
            "zh":"中文:",
            "en":"英文:"
        }
    };
    

    en.js

    'use strict';
    
    if (!window.i18n) {
        window.i18n = {};
    }
    
    if (!window.i18n.languages) {
        window.i18n.languages = {};
    }
    
    window.i18n.languages['en'] = {
        // write your key value pairs here
        "label_text": {
            "hello": "Hello",
            "bye": "Bye",
            "zh":"Chinese:",
            "en":"English:"
        }
    };
    

    i18n.ts

    
    import _i18n = require("LanguageData");
    const {ccclass, property} = cc._decorator;
    
    @ccclass
    export default class i18n extends cc.Component {
        
    
        onLoad () {
            _i18n.init("zh");   //初始化中文,参数是我们创建语言的名字
        }
    
        start () {
    
        }
    
        update (dt) {
            //如果切换了语言,会刷新文字
            _i18n.updateSceneRenderers();
        }
    
        //切换中文
        OnZHToggleClick(e){
            if (e.isChecked) {
                _i18n.init("zh")
            }
        }
    
        //切换英文
        OnENToggleClick(e){
            if (e.isChecked) {
                _i18n.init("en")
            }
        }
    }
    

    相关文章

      网友评论

        本文标题:Cocos Creator之游戏多语言转换

        本文链接:https://www.haomeiwen.com/subject/njohbqtx.html