关键词
跨平台APP 混合开发 技术分享 一次探索
前言（关于星旅和Plotter）
自从暑假花了两个星期从零开始开发了一个太空科幻题材的小游戏《星旅 StarTrek》之后，发现 Cocos Creator(下面简称 CCC ) 真香！从使用 CCC 编辑器进行游戏场景的可视化编辑，到用 Typescript 进行游戏代码的编写，调试非常容易，让我的开发效率异常的高！
星旅 StartTrek 上线后短短一个星期就获得了数千的玩家注册量，单日 CDN 流量最高甚至突破了4GB，当天我非常震惊，然后立马给企鹅充值续了服务器流量（手动滑稽）。
开发星旅之前，我也仅仅只是写过一点点 JavaScript，也从来没有正经和完整的开发一款游戏。在学校找同学组建了开发小组之后，我负责了大部分程序和游戏内容策划，从零开始上手 Typescript 和 CCC。由于 Typescript 和 CCC 这两个工具都特别优秀，所以我们都可以几乎很快的上手使用。
CCC 使用 Typescript 是一个很不错的选择，Typescript 是 Javascript 的超集，然而其有更好的类型推导能力，这让代码的编写过程中容易获得 IDE 的提示，大大减少了 debug 的次数和避免隐藏的错误。Typescript 可以编译生成任何版本的 Javascript 代码，而 JavaScript 代码可以运行在几乎任何平台，又由于现代 Javascript 引擎的优化，因此在大多数情况下 JavaScript 代码的执行效率非常高，可以比 Python 快甚至比未经优化的 C 代码还快。
开发了星旅之后，我就在想：借助 CCC 的优势，我能不能开发一个应用软件，而不是游戏呢？
并没有经过太多思考，我决定立刻开始开发试一试！
探索CCC的另外一些可能
——使用 CCC 开发跨平台应用软件
Plotter 原本是我以前用 HTML 和 JavaScript 写的一个科学计算的程序，特点在于非常强大的函数可视化能力，我曾想：使用前端技术开发的程序肯定移植特别容易，以后有机会把它移植到安卓平台。
多年前我接触过安卓开发，并且开发了很多简单的 APP ，还在酷安网上架了好几个（目前也有好多个已经下架了）。然而现在虽然已经把安卓那一套 XML 和 Java 忘了，但是我还是很想拾起来试一试：基于 CCC 开发一个安卓 APP 并上架应用市场。
在课余时间，陆陆续续开发一两个星期之后—— Plotter APP 终于诞生了！并且很快也上架了酷安网，功能如此硬核的一个 APP ，竟然在短短的一周内下载量就超过 2000 ，APP 的讨论热度在三天内就突破了3w，还多次上了酷安网话题头条，实属夸张！Plotter 也在更新后一周内收获了四位赞赏者。有一位赞赏者赞赏过后，第二天又把他的旧 Mac 电脑寄给了我，支持我发布 IOS 版本的软件，真的非常非常感谢！
那么 Plotter 是怎样开发出来的呢？它用到了哪些技术？它是怎样的，它的特点是什么？
用CCC开发APP的可行性
CCC 可以打包几乎任何平台（包括但不限于 Web、Windows、OS X、Linux、Android、IOS 和各种小程序平台），借助这个优势和 CCC 提供的大量 API，大多数代码一次编写就可以全平台运行，尤其是界面交互逻辑、网络操作和一些基础的底层操作（如读写本地文件、设备震动等），即便是需要更加底层或者原生平台的操作，也可以使用 CCC 提供的 jsb.reflection 接口，在 Javascript 中调用原生平台的方法：
-
Android 平台：Java 方法或者 C++ 函数
-
IOS 等平台：obj-C 或 C++ 函数
反过来，如果原生平台的程序要执行 Javascript 里的逻辑，不管是 Java、C++ 还是 obj-C 都可以使用
evalString方法执行 Javascript 里的逻辑。具体参考官方文档 Java 原生反射机制 · Cocos Creator下文的技术分享里，我会以复制文本到安卓平台剪贴板，隐藏安卓 Activity 里的一个 ImageView 为例，告诉大家如何使用 jsb 反射机制。
为什么我想用CCC来开发一个应用软件呢？它有何优势？
-
使用 CCC 构建软件的交互界面非常容易，可以可视化的编辑交互界面，并用脚本来控制交互逻辑
-
Canvas 的 fit Width 和 fit Height 可以保证渲染范围的自适应，利用
cc.view.getVisibleSize()我甚至可以知道目前软件的可视范围大小，以响应不同用户的屏幕尺寸来适配布局，也支持了设备的多分辨率。- 关于多分辨率适配还可以参考官方文档 多分辨率适配方案 · Cocos Creator
-
利用 CCC 现有的
Sprite, Layout, Canvas, ScrollView, ScrollBar, Button, Label, ProgressBar, EditBox等组件 ，我可以非常自由的设计出自己喜欢的UI控件并直接使用 -
使用 CCC 的缓动方法
cc.Tween，我可以很容易为软件增加符合用户感知和视觉引导以及提升用户舒适度的动画 -
软件界面以场景或者节点形式组织，每个脚本都是组件，每个控件都是一个具体的节点，而组件绑定在节点上，节点又可以绑定到组件上… 这种组织形式非常灵活和直观，让业务逻辑结构很清晰，易于管理和大型开发
-
用
npm安装需要的库并直接使用！众所周知，NPM 的库的数量非常非常的多，是一个非常大的宝藏，如果你想用到某一个复杂算法或某种特定程序，不要造轮子！去 NPM 查查有没有现成的库可以直接使用。但并不是所有 NPM 库都可以在 CCC 内稳定运行，后文会讲原因。 -
游戏引擎级别的图形渲染支持和物理支持
- 使用 CCC 开发出来的图形界面运行效率仍然很高，并且非常灵活
- 对于特定需求，如软件内2d或3d图形的渲染支持、shader 图形渲染、刚体或流体物理模拟等，游戏引擎无疑是一个巨大的优势，可以极大的减少工作量
记得曾有一家公司，为了让自己的网站达到原生级别的流畅度，他们完全使用 HTML 的 Canvas 来渲染整个网站的所有内容，最后效果确实很理想。那其实跟我使用游戏引擎差不多，所以这对于我来说还是有优势的。
那用CCC开发一个APP有什么劣势？
近段时间备受关注，让很多开发者和公司直喊真香的 Flutter ，本质上可以说也是一个游戏引擎。Flutter 是谷歌开发的移动平台UI框架，它使用谷歌的 Dart 语言来编写用户界面和交互逻辑。然而与原生 APP 不同，由于要载入 Flutter 支持库和初始化，Flutter 开发的 APP 安装包更大，启动时间要更久。
在这一点上，使用 CCC 开发一个 APP 也会遇到同样的问题，为了支持不同架构处理器的运行，兼容和适配更多机型，就得编译更多份 .so 二进制文件，安装包会变大比较大。同样 APP 第一次打开时要初始化支持库、OpenGL ES、JavaScript 引擎，所以启动时间会比原生 APP 更长。但经过我的测试，即便如此 APP 的启动时间仍然还是挺快的（至少比什么微信、淘宝和大多数游戏快得多了），与 Flutter 差别不会太大。对于 APP 启动时间的优化，以及对 CCC 打包的 APP 的启动屏优化，下文的技术分享会提到。
技术分享
使用NPM库
在 CCC 项目工程根目录中，可以直接使用 node.js 的包管理器 npm 安装可能需要用到的 Javascript 库。安装方式也特别简单，例如在命令行中输入 npm install numeric 就可以安装 numeric 这个数学求解库。
为什么像 math.js 这样的库可以正常导入 CCC 里并稳定发布呢？首先 math.js 不依赖于浏览器环境——也就是不需要 window document 等对象。其次 math.js 不依赖于JavaScript的 eval() 函数，保证了即便是在微信小程序上也能够正常运行。
多分辨率屏幕布局适配
Plotter 使用了三种方式进行不同屏幕布局的适配。
方法1：Canvas 的 fit Width 和 fit Height
对于这两个选项勾选的作用，引用自官方文档
| 选项 | 说明 |
|---|---|
| Design Resolution | 设计分辨率（内容生产者在制作场景时使用的分辨率蓝本） |
| Fit Height | 适配高度（设计分辨率的高度自动撑满屏幕高度） |
| Fit Width | 适配宽度（设计分辨率的宽度自动撑满屏幕宽度） |
由于要开发一个安卓手机 APP 这里，我默认屏幕尺寸是 9:16 并设定分辨率为 1080*1920 。但安卓早已进入全面屏时代了，手机屏幕变的更长了，如果我同时勾选这两个选项。就会使得我的 APP 界面无论在哪台设备都是固定长宽比，上下就会出现大黑边：
方法2：Widget
使用 Widget 组件可以使得一个节点对齐父节点的边缘
为了避免黑边的出现，我就只勾选 Canvas 的 fit Width，给背景色节点挂上 Widget 组件，并用 Widget 组件让它充满整个 Canvas ，这样就避免了黑边的出现。
方法3：JavaScript 代码动态更改控件位置
虽然解决了黑边问题，但是如果屏幕高度太小，控件离开了屏幕可视区域怎么办？
正如上图，对于 APP 顶端的 Top 按钮栏，如果是 Iphone X 就可以正常被现实出来，而如果是 Iphone 5， Top 按钮栏就会被遮挡：
因此，我这边在主脚本的 onLoad 函数里，利用 Javascript 代码判断屏幕尺寸，以更改控件布局，并更好的适配不同的屏幕。
this.setting_node.height = this.help_node.height = this.doc_node.height = cc.winSize.height;
// 屏幕适配
let size = cc.view.getVisibleSize();
let rate = size.height / size.width;
if (rate < 1.7) {
this.node.getComponent(cc.Canvas).fitHeight = true;
}
// 适应不同尺寸屏幕
if (this.topLayout.node.y > cc.winSize.height / 2 - 100) {
this.topLayout.isAlignVerticalCenter = true;
this.topLayout.verticalCenter = -360;
}
if (this.coord_widget.node.y < -cc.winSize.height / 2 + 60) {
this.coord_widget.isAlignVerticalCenter = true;
this.coord_widget.verticalCenter = 560;
this.coord_widget.node.getComponent(cc.Label).horizontalAlign = cc.Label.HorizontalAlign.RIGHT;
}
Android APP 启动速度优化
CCC 打包的安卓 APP 在启动时都会经历一小段黑屏加载时间，让人感觉特别迟钝，实际上我们可以对此进行优化，以达到更好的用户体验。
方法1：添加启动图
通过改变原生安卓启动 Activity 的 Theme 和主界面布局，可以为 APP 的启动增加一个启动图，这样打开 APP 立马就可以看到 LOGO 而不是黑屏了，让人感觉舒适很多。
这里有大佬写的文章特别细致，我就不在此累赘了
Cocos Creator Android 原生启动优化系列
区别在于我为 layer-list 中图标的下面加了一行字
另外，在 hideSplash 函数中，我使用 Android 的 animate 让启动图淡出消失，而不是瞬间消失，达到更好的效果。
/**
* CC JS 通过调用此静态方法，在主场景加载完成后隐藏原生启动图
*/
public static void hideSplash() {
app.runOnUiThread(new Runnable() {
@Override
public void run() {
if (sSplashBgImageView != null) {
// 淡出的动画
sSplashBgImageView.animate()
.alpha(0f)
.setDuration(400)
.setListener(new AnimatorListenerAdapter() {
@Override
public void onAnimationEnd(Animator animation) {
sSplashBgImageView.setVisibility(View.GONE);
}
});
}
}
});
}
上述代码是在 CCC JavaScript 这边主场景加载完成后，使用 jsb.reflection 调用 Java 方法，以隐藏原生界面里的启动图。
start() {
// 加载结束，让启动图淡出
if (cc.sys.os === cc.sys.OS_ANDROID) {
// 反射调用原生的隐藏方法
jsb.reflection.callStaticMethod(
"org/cocos2dx/javascript/AppActivity",
"hideSplash",
"()V"
);
}
// init logic
...
}
方法2：减少主场景的复杂度
通过减少主场景的节点以及组件数目，加快场景载入时间。优化主场景每个节点挂载脚本的 onLoad 函数的执行效率。用此优化方法，也可以大大加快 APP 的启动时间。
ScrollView优化
优化Content内节点数目
ScrollView 中在可视范围内的节点数目一般很少，然而如果 ScrollView 中要是有数千个项目，我就创建数千个节点的话，不仅消耗大量内存，而且会让运行效率变的特别低。所以不如让 ScrollView 内节点数目固定，刚刚好可以铺满就行，然后在滑动 ScrollView 时改变节点的位置，然后动态回收利用已有的节点进行展示。
对子节点所挂载脚本单独优化
在 Plotter APP 的上方，有一个寄存器列表，点击之后可以展开寄存器列表，查看寄存器中已有的变量。对于寄存器列表里的每一条项目，它们都是“活”的——响应式。即它们会知道当前运算内核中自己所属的变量值有没有改动，如果改动了，它们就会立刻改变此项目 label 里的文本内容，如果没有改动，它们就不做任何操作。另外，如果列表中这一条项目用户看不到，那它就处于休眠状态，不受响应。
使用反射机制实现复制文本到剪切板
CCC 提供的反射机制 jsb.reflection 可以调用原生宿主平台的方法（如 Java 方法、C++ 方法和 obj-C 方法），以实现与底层逻辑的交互。这里我以复制文本到剪贴板——一个应用软件的常见需求为例。
在构建的 Android Studio 工程目录下，找到 src/org/cocos2dx/javascript/APPActivity.java 文件，这是 CCC 打包的安卓 APP 的入口活动（Activity）。在 APPActivity 类底下加入私有静态变量 app
public class AppActivity extends Cocos2dxActivity {
@SuppressLint("StaticFieldLeak")
private static AppActivity app = null;
...
在 onCreate 方法的最下面为 app 设置引用
...
// DO OTHER INITIALIZATION BELOW
SDKWrapper.getInstance().init(this);
app = this;
...
然后在类中添加一个静态方法 JavaCopy
public static void JavaCopy(final String str){
app.runOnUiThread(new Runnable(){
@Override
public void run() {
ClipboardManager cm = (ClipboardManager)app.getSystemService(Context.CLIPBOARD_SERVICE);
ClipData clip = ClipData.newPlainText("plotter", str);
if(cm != null) {
cm.setPrimaryClip(clip);
}
}
});
}
上述代码中的 "plotter" 你可以随意改为你需要的 label。
然后当需要调用安卓 API 复制文本到剪贴板时，就通过 CCC 的 Java 反射实现。
jsb.reflection.callStaticMethod("org/cocos2dx/javascript/AppActivity", "JavaCopy", "(Ljava/lang/String;)V", value);
关于 jsb.reflection ，更加具体的信息可以查阅官方文档
使用类似的方法，我们还可以实现调用 IOS 的 API 复制到剪贴板
这里我写了一个支持浏览器、微信和安卓的方法，大家可以直接复制拿去使用~
/**
* 复制文本到剪贴板
* @param value 字符串
*/
public static copy(value: string): boolean {
if (cc.sys.isBrowser) {
let element = document.createElement('textarea');
element.readOnly = true;
element.style.opacity = '0';
element.value = value;
document.body.appendChild(element);
element.select();
let result = document.execCommand('copy');
element.remove();
return result;
} else if (cc.sys.platform === cc.sys.WECHAT_GAME) {
wx.setClipboardData({
data: value
});
return true;
} else if (cc.sys.isNative && cc.sys.os === cc.sys.OS_ANDROID) {
jsb.reflection.callStaticMethod("org/cocos2dx/javascript/AppActivity", "JavaCopy", "(Ljava/lang/String;)V", value);
return true;
}
return false;
}
设备震动API
有时候我们点击一个按钮，需要有震动反馈，那么应该如何实现呢？
对于浏览器平台，web 已有的 navigator.vibrate 接口提供了设备的震动方法，微信小程序也已有震动相关的 API ，那原生平台怎么办呢？
当然我也可以使用上述反射的方法自己实现，但查阅了 CCC 的源码之后，发现 CCC 已经有震动的API了，在 cocos2d-x/cocos/scripting/js-bindings/auto/jsb_cocos2dx_auto.cpp
这里我们也看到，在 jsb.Device 这个命名空间中，CCC 还提供了一些其它原生方法。
最后我这里实现了一个支持三个平台的震动的方法
/** * 震动 * @param time 震动的持续时间 */public static vibrate(time = 30) { if (cc.sys.isBrowser && navigator.vibrate) { navigator.vibrate(time); } else if (cc.sys.platform === cc.sys.WECHAT_GAME) { if (time < 35) { wx.vibrateShort(); } else { wx.vibrateLong(); } } else if (cc.sys.isNative) { (<any>jsb).Device.vibrate(time / 1000); }}
然而，如果仅仅是这样，调用震动方法之后 APP 会闪退！不能忘记在 AndroidManifest.xml 中给 APP 声明所需震动权限！
灵活使用缓动
在 Plotter 里，我大量使用了缓动函数 cc.Tween ，为 APP 添加更多的控件动画，并且利用缓动的性质，这些动画都是可以被中途打断并复原的，也就是各大手机厂商为自己系统吹的“打断动画”或者“补间动画”。
WebView的JS注入和使用WebView显示SVG
在 Plotter APP 中，有一个特色功能是将 \LaTeX 代码渲染成漂亮的书写体，这是怎么实现的呢？
我使用了 NPM 中 MathJax 这个开源库，利用它的 Tex2Svg.js 可以把 TeX 代码渲染为 SVG 格式的矢量图（实际上是一串字符串），然后将此 SVG 显示出来即可。
那么在 CCC 中，如何显示出 SVG 格式的矢量图呢？CCC 商城有一套 SVG 插件，然鹅我穷呀，所以就只能自己另辟蹊径了。我使用 CCC 支持的 WebView ，然后用 HTML、JS 和 CSS 注入的方法。
实际上 HTML、CSS 的注入本质上还是 JS 注入，通过执行指定的 JS 代码就可以改变网页的 DOM 。
上图代码中，我为了让网页中 svg 图片居中，注入了这样一段 JS 代码，改变了 svg 的 style。
实际上注入 JS 还有另一种奇怪的方法：通过改变 url 来注入 JS
上述两种方法也可以在 Java 安卓里以类似的方法同样实现
另外，通过改写 CCC 的 Cocos2dxWebView.java 实现 WebView 的透明背景以及自由缩放。
多线程和高性能计算
众所周知，Javascript 的 一大槽点是 Javascript 代码是单线程执行的。大部分并发都可以通过 Javascript 的异步实现，但在要进行 CPU 密集型运算时不可避免的需要用到多线程，以防止主线程的 UI 交互等逻辑卡死，可以通过 Web Worker 或者前文讲到的反射机制调用原生平台的 API 来实现多线程并行运算。
另外，还可以将需要执行的复杂 Javascript 程序放到 WebView 中，然后调用 WebView 的 evaluateJS 函数执行此程序。
当我们的程序需要非常高性能的计算时，还有两种方法。一种是使用 WebAssembly ，现有的工具可以把像 C 或者 Rust 这样的高性能程序编译为字节码，直接在浏览器内执行，运行效率非常高。另外一种是当需要大量并行的浮点运算、或大矩阵的运算时（通常是图形学计算、物理模拟、深度学习等所需要），可以通过利用 OpenGL ES、或者 WebGL 进行 GPU 加速运算。
总结来说就是：
- 多线程
- 对于浏览器平台可以使用 WebWorker
- 小程序平台所提供的 API （如微信小程序的
Worker） - 原生平台可以使用 WebView 的
evaluateJS函数 - 通过反射机制，调用原生平台的方法实现多线程
- 高性能
- 通过反射机制，调用 C++ 程序
- WebAssembly
- 使用 WebGL 等进行 GPU 加速运算
矢量图标的制作
以前我曾制作过一个 APP 的图标，但是由于时间久远，找不到原始素材了，然而现在的这个图标分辨率太低，我想将它转换为更加清晰的 LOGO 怎么办？
在网上可以找到标量图转矢量图的工具，将图标转换为无论方法多少倍都不会模糊的 SVG 矢量图，再对这个矢量图进行修改，就可以获得更加清晰的 LOGO 啦！
最后经过数次修改，得到了新的 APP 图标。
另外推荐两个获取好看的 APP 图标的网站
最后说说Plotter
Plotter 已经开源，应用市场链接和 GItHub 链接就放到文末了。
先说Plotter是什么：一个轻量级、跨平台、不依赖网络的便携性科学求解软件。事实上Plotter不是一个游戏，而是一种非常硬核，极少人愿意去做、或者做的好的软件——数模软件/计算器。
Plotter的特点使得它所面向的用户有：
-
中小学生：分数带单位的四则运算、简单的函数绘图、组合学运算、统计学运算
-
大学生：向量/矩阵的运算、数值微积分、多元函数的极值等
-
工程师：复数运算和求解，全平台——无论在哪台设备都能允许，且可以脱机运行
-
程序员：各种进制之间的转换和运算，超高精度浮点数或者大整数的运算
-
教育工作者：通过图像和更具化的运算方式带给学生更深刻的概念
-
科研工作者：
- 便携性使得无论何时何地产生了灵感，立马就可以拿出设备进行计算和实验
- 带单位的运算使得科研人员能在计算时带单位运算，在任何时候可以进行带单位数值的转换，还使得在计算数据时保证量纲不出错
- 在任何时候引入高精度带单位的常量进行运算，例如普朗克常数、阿伏伽德罗常数等
- 支持复数运算，多元函数最优化，解微分方程数值解等
Q: 教育工作者已经有像 Desmos、Geogebra 这样的专业软件了，不同的工程师也有各自领域的专业软件，科研工作者更是有像 MATLAB、Mathematica、Python 这样的专业工具了，那 Plotter 的意义何在？
A: Plotter 的愿景是让科学计算变的更加简单和容易。Plotter 封装了不同领域都可能用到的功能，使其受众较广泛，其设计使得它能够在任何平台上脱机运行，尤其是移动端，这使得软件的通用性和便携性很强。
Q: 让科学计算变的更加简单和容易能带来什么？
A: 现代科学技术的突飞猛进离不开计算机的产生。无论是对 DNA 的测序还是蛋白质结构的模拟，让现代生物学突飞猛进发展到新的阶段，产生了生物信息学。同样对大脑神经元的模拟推进了脑科学的发展，对医药数据的分析带来的科学发现造福了无数疾病中的苦难人群。有限元分析使得我们能够在计算机上模拟物理过程，广泛运用于工业。对天体运行的模拟造就了现在的天文学和航天学。对化学分子运动的模拟而发现了新的催化剂…不知道多少科学家用 MATLAB 分析实验数据，获取了一次又一次科研突破，多少数学家用 Mathematica 进行符号运算，减少了手工计算导致的出错率，提高了数学研究的效率…
因此可以说：新的科学发现是在以人类智慧驱动下的科学计算中产生的。
计算机科学家、粒子物理学家 Stephen Wolfram 曾提到计算本身也是一种新科学，存粹的计算也可能发现宇宙的规律…
Plotter 的体量并没有那么大，它仅仅是做到了轻量便携和脱机而已，但它的愿景仍是使得科学计算变的更加简单和容易~
关于 HK-SHAO
相关链接
-
《星旅》技术分享1：颤抖吧！零零后已经开始爆肝写游戏了！ (qq.com)
-
《星旅》技术分享2：爆肝的00后又来了！StarTrek 开发周记（下） (qq.com)
-
Plotter GitHub开源地址：https://github.com/HK-SHAO/Plotter
-
Plotter APP 应用市场链接：https://www.coolapk.com/apk/284166
《星旅》微信小游戏
PS
原文完稿时间 2021年4月29日
留给读者的思考问题
- 这样开发的APP会不会非常耗电，如何解决？
- 虽然能够全平台，但仍然需要一定的混合开发能力，这样做是不是鸡肋？
- 这种方法是不是性能肯定比不过原生？如果性能比不过原生，低一些的性能会不会非常影响用户体验？如果考虑生产力（编码难易程度、一次编码多平台运行），这样是不是利大于弊呢？
- …