LazyAn-cocos插件开发实战
编辑器里扩展—开发一个实时翻译插件
公众号原文原文
Cocos从零开发一个翻译插件
背景
在 Cocos Creator 开发过程中，对我这种英文水平一般的人来说，在对变量起名或者适配多语言的时候可能经常需要打开网页或者翻译软件进行翻译，所以萌生了开发一个翻译插件的想法。
这是我针对公司项目开发的翻译软件，但并不通用，所以重写了一个。
实现
翻译插件开发主要以下几步：
插件基础框架
导入npm
开发插件面板
实现翻译
插件基础框架
这个就不细说了，详细可查看官方文档或者我之前发布的文章
文档：https://docs.cocos.com/creator/2.4/manual/zh/extension/your-first-extension.html
文章：CocosCreator插件-初探编辑器扩展
CocosCreator插件-Vue和Node.js-npm的使用
导入npm
插件的翻译部分用的是npm的bing-translate-api包，npm中其他翻译包选择还有google-translate-api（谷歌翻译）、baidu-translate-api（百度翻译）、translate（混合包，可手动选择），但是在开发时候发现谷歌的api返回不到翻译结果，经查有可能是谷歌需要科学上网才可使用，这样不太方便，遂放弃；百度的api在频繁访问的时候会报错，可能百度侦测了到了咱们想白嫖的行为，所以做了应对~ 所以最后选择了bing（必应）的api。
导入方法：
npm install bing-translate-api
使用方法：
const { translate } = require('bing-translate-api');
translate('你好', null, 'en', true).then(res => {
console.log(res.translation);
}).catch(err => {
console.error(err);
});
translate方法需要传入四个参数：
需要翻译的文本
文本的语言
需要翻译到什么语言
是否纠正输入文本
这里我们只需要填入第一个和第三个参数即可，第二个null代表自动识别文本语言类型。“en”代表英文，其他的语言代号可在bing-tranlate-api的包中看到。
const LANGS = {
'auto-detect': 'Auto-detect',
af: 'Afrikaans',
am: 'Amharic',
ar: 'Arabic',
as: 'Assamese',
az: 'Azerbaijani',
bg: 'Bulgarian',
bn: 'Bangla',
bs: 'Bosnian',
ca: 'Catalan',
cs: 'Czech',
cy: 'Welsh',
da: 'Danish',
de: 'German',
el: 'Greek',
en: 'English',
es: 'Spanish',
et: 'Estonian',
fa: 'Persian',
fi: 'Finnish',
fil: 'Filipino',
fj: 'Fijian',
fr: 'French',
'fr-CA': 'French (Canada)',
ga: 'Irish',
gu: 'Gujarati',
he: 'Hebrew',
hi: 'Hindi',
hr: 'Croatian',
ht: 'Haitian Creole',
hu: 'Hungarian',
hy: 'Armenian',
id: 'Indonesian',
is: 'Icelandic',
it: 'Italian',
iu: 'Inuktitut',
ja: 'Japanese',
kk: 'Kazakh',
km: 'Khmer',
kmr: 'Kurdish (Northern)',
kn: 'Kannada',
ko: 'Korean',
ku: 'Kurdish (Central)',
lo: 'Lao',
lt: 'Lithuanian',
lv: 'Latvian',
mg: 'Malagasy',
mi: 'Maori',
ml: 'Malayalam',
mr: 'Marathi',
ms: 'Malay',
mt: 'Maltese',
mww: 'Hmong Daw',
my: 'Myanmar',
nb: 'Norwegian',
ne: 'Nepali',
nl: 'Dutch',
or: 'Odia',
otq: 'Querétaro Otomi',
pa: 'Punjabi',
pl: 'Polish',
prs: 'Dari',
ps: 'Pashto',
pt: 'Portuguese (Brazil)',
'pt-PT': 'Portuguese (Portugal)',
ro: 'Romanian',
ru: 'Russian',
sk: 'Slovak',
sl: 'Slovenian',
sm: 'Samoan',
sq: 'Albanian',
'sr-Cyrl': 'Serbian (Cyrillic)',
'sr-Latn': 'Serbian (Latin)',
sv: 'Swedish',
sw: 'Swahili',
ta: 'Tamil',
te: 'Telugu',
th: 'Thai',
ti: 'Tigrinya',
'tlh-Latn': 'Klingon (Latin)',
'tlh-Piqd': 'Klingon (pIqaD)',
to: 'Tongan',
tr: 'Turkish',
ty: 'Tahitian',
uk: 'Ukrainian',
ur: 'Urdu',
vi: 'Vietnamese',
yua: 'Yucatec Maya',
yue: 'Cantonese (Traditional)',
'zh-Hans': 'Chinese Simplified',
'zh-Hant': 'Chinese Traditional'
}
开发插件面板
开发插件面板需要web的相关知识，我也处于初学阶段，对比一下效果和代码吧
将上面的设计转成代码如下：
这里我只选了21种初始翻译语言
多语言翻译
目标语言
输入文本
翻译结果
关于插件面板设计可以参考编辑器中的UI-Kit Preview，里面有大量示例，打开面板按Ctrl+Alt+I打开开发者面板，选中想用的部分即可查看源码；
或者查看官方文档：https://docs.cocos.com/creator/2.4/manual/zh/extension/using-ui-kit.html
https://developer.mozilla.org/zh-CN/docs/Web/HTML/Global_attributes/class
实现翻译
利用confirm和change绑定到translateFun，执行翻译方法
ready() {
this.plugin = new window.Vue({
el: this.shadowRoot,
created() {},
data: {
text: "",
translateResult: "",
targetLanguage: "en"
},
methods: {
translateFun() {
// Editor.log("开始翻译")
//翻译
translate(this.text, null, this.targetLanguage, true).then(res => {
this.translateResult = res.translation;
}).catch(err => {
console.error(err);
});
},
}
})
},
最后结果
插件已上架cocosstore并且免费-。-
最后
下载地址:
http://store.cocos.com/app/detail/3479
相关文章
CocosCreator插件-初探编辑器扩展
CocosCreator插件-Vue和Node.js-npm的使用
更多精彩欢迎关注微信公众号 An的世界