大家還記得暑假花兩個星期從零開發(fā)太空科幻小游戲《星旅 StarTrek》的零零后燒風嗎？是的，他帶著新作品 Plotter 又來了！

燒風是華南師范大學軟件學院大一學生（2002 班），興趣廣泛并喜歡肝自己感興趣的事情，這次他帶來的 Plotter 前身是用 HTML 和 JavaScript 寫的一個科學計算的程序，特點在于非常強大的函數(shù)可視化能力。

Plotter 不是一個游戲，而是一種非常硬核、極少人愿意去做，或者做好的軟件——數(shù)模軟件 / 計算器。它是一個輕量級、跨平臺、不依賴網(wǎng)絡(luò)的便攜性科學求解軟件。

Plotter 已經(jīng)開源，應用市場鏈接和 GitHub 鏈接見文末。

那么這款使用 CCC 開發(fā)跨平臺應用軟件是怎樣開發(fā)出來的呢？它用到了哪些技術(shù)？它是怎樣的，它的特點是什么？

燒風帶來了非常詳盡的技術(shù)分享，是 jare 看了深夜置頂?shù)某潭?，建議大家閱讀收藏。

為保證閱讀體驗，參考鏈接見文末。

暑假花兩周爆肝開發(fā)《星旅 StarTrek》之后，發(fā)現(xiàn) Cocos Creator（下面簡稱 CCC ）真香！

從使用 CCC 編輯器進行游戲場景的可視化編輯，到用 TypeScript 進行游戲代碼的編寫，調(diào)試非常容易，讓我的開發(fā)效率異常高！

星旅 StartTrek 上線后短短一個星期就獲得了數(shù)千的玩家注冊量，單日 CDN 流量最高甚至突破了 4GB，當天我非常震驚，然后立馬給企鵝充值續(xù)了服務器流量。

開發(fā)星旅之前，我僅僅寫過一點點 JavaScript，也從來沒有正經(jīng)和完整地開發(fā)一款游戲。

在學校找同學組建了開發(fā)小組之后，我負責了大部分程序和游戲內(nèi)容策劃，從零開始上手 TypeScript 和 CCC。由于 TypeScript 和 CCC 這兩個工具都特別優(yōu)秀，所以我們都可以幾乎很快地上手使用。

CCC 使用 TypeScript 是一個很不錯的選擇，TypeScript 是 JavaScript 的超集，有更好的類型推導能力，這讓代碼在編寫過程中容易獲得 IDE 的提示，大大減少了 debug 的次數(shù)和避免隱藏的錯誤。

TypeScript 可以編譯生成任何版本的 JavaScript 代碼，而 JavaScript 代碼可以運行在幾乎任何平臺，又由于現(xiàn)代 JavaScript 引擎的優(yōu)化，因此在大多數(shù)情況下 JavaScript 代碼的執(zhí)行效率非常高，可以比 Python 快甚至比未經(jīng)優(yōu)化的 C 代碼還快。

開發(fā)了星旅之后，我就在想：借助 CCC 的優(yōu)勢，我能不能開發(fā)一個應用軟件，而不是游戲呢？

并沒有經(jīng)過太多思考，我決定立刻開始開發(fā)試一試！

Plotter 原本是我以前用 HTML 和 JavaScript 寫的一個科學計算的程序，特點在于非常強大的函數(shù)可視化能力。

多年前我接觸過安卓開發(fā)，并且開發(fā)了很多簡單的 APP ，還在酷安網(wǎng)上架了好幾個，于是我想試一試：基于 CCC 開發(fā)一個安卓 APP 并上架應用市場。

在課余時間，陸陸續(xù)續(xù)開發(fā)一兩個星期之后—— Plotter APP 終于誕生了！并且很快上架了酷安網(wǎng)。

功能如此硬核的一個 APP ，竟然在短短的一周內(nèi)下載量就超過 2000 ，APP 的討論熱度在三天內(nèi)就突破了 3w，還多次上了酷安網(wǎng)話題頭條，實屬夸張！

CCC 可以打包幾乎任何平臺（包括但不限于 Web、Windows、OS X、Android、iOS 和各種小游戲平臺），借助這個優(yōu)勢和 CCC 提供的大量 API，大多數(shù)代碼一次編寫就可以全平臺運行，尤其是界面交互邏輯、網(wǎng)絡(luò)操作和一些基礎(chǔ)的底層操作（如讀寫本地文件、設(shè)備震動等）。

即便是需要更加底層或者原生平臺的操作，也可以使用 CCC 提供的 jsb.reflection 接口，在 JavaScript 中調(diào)用原生平臺的方法：

• Android 平臺：Java 方法或者 C++ 函數(shù)

• iOS 等平臺：Objective-C 或 C++ 函數(shù)

  反過來，如果原生平臺的程序要執(zhí)行 JavaScript 里的邏輯，不管是 Java、C++ 還是 obj-C 都可以使用 evalString 方法執(zhí)行 JavaScript 里的邏輯。具體參考官方文檔 Java 原生反射機制 · Cocos Creator 。

  下文的技術(shù)分享里，我會以復制文本到安卓平臺剪貼板，隱藏安卓 Activity 里的一個 ImageView 為例，告訴大家如何使用 JSB 反射機制。

為什么我想用 CCC 來開發(fā)一個應用軟件呢？它有何優(yōu)勢？

• 使用 CCC 構(gòu)建軟件的交互界面非常容易，可以可視化的編輯交互界面，并用腳本來控制交互邏輯

• Canvas 的 Fit Width 和 Fit Height 可以保證渲染范圍的自適應，利用 cc.view.getVisibleSize() 我甚至可以知道目前軟件的可視范圍大小，以響應不同用戶的屏幕尺寸來適配布局，也支持了設(shè)備的多分辨率。

  關(guān)于多分辨率適配還可以參考官方文檔多分辨率適配方案 · Cocos Creator 4 

• 利用 CCC 現(xiàn)有的 Sprite、Layout、Canvas、ScrollView、ScrollBar、Button、Label、ProgressBar、EditBox 等組件 ，我可以非常自由地設(shè)計出自己喜歡的 UI 控件并直接使用

• 使用 CCC 的緩動方法 cc.Tween，我可以很容易為軟件增加符合用戶感知和視覺引導以及提升用戶舒適度的動畫

• 軟件界面以場景或者節(jié)點形式組織，每個腳本都是組件，每個控件都是一個具體的節(jié)點，而組件綁定在節(jié)點上，節(jié)點又可以綁定到組件上… 這種組織形式非常靈活和直觀，讓業(yè)務邏輯結(jié)構(gòu)很清晰，易于管理和大型開發(fā)

• 用 npm 安裝需要的庫并直接使用！眾所周知，npm 的庫的數(shù)量非常非常的多，是一個非常大的寶藏，如果你想用到某一個復雜算法或某種特定程序，不要造輪子！去 npm 查查有沒有現(xiàn)成的庫可以直接使用。但并不是所有 npm 庫都可以在 CCC 內(nèi)穩(wěn)定運行，后文會講原因

• 游戲引擎級別的圖形渲染支持和物理支持

  使用 CCC 開發(fā)出來的圖形界面運行效率仍然很高，并且非常靈活 

  對于特定需求，如軟件內(nèi) 2D 或 3D 圖形的渲染支持、Shader 圖形渲染、剛體或流體物理模擬等，游戲引擎無疑是一個巨大的優(yōu)勢，可以極大的減少工作量

記得曾有一家公司，為了讓自己的網(wǎng)站達到原生級別的流暢度，他們完全使用 HTML 的 Canvas 來渲染整個網(wǎng)站的所有內(nèi)容，最后效果確實很理想。

其實跟我使用游戲引擎差不多，所以這對于我來說還是有優(yōu)勢的。

那用 CCC 開發(fā)一個 APP 有什么劣勢？

近段時間備受關(guān)注，讓很多開發(fā)者和公司直喊真香的 Flutter ，本質(zhì)上可以說也是一個游戲引擎。

Flutter 是谷歌開發(fā)的移動平臺 UI 框架，它使用谷歌的 Dart 語言來編寫用戶界面和交互邏輯。然而與原生 APP 不同，由于要載入 Flutter 支持庫和初始化，F(xiàn)lutter 開發(fā)的 APP 安裝包更大，啟動時間要更久。

在這一點上，使用 CCC 開發(fā)一個 APP 也會遇到同樣的問題，為了支持不同架構(gòu)處理器的運行，兼容和適配更多機型，就得編譯更多份 .so 二進制文件，安裝包會變大比較大。

同樣 APP 第一次打開時要初始化支持庫、OpenGL ES、JavaScript 引擎，所以啟動時間會比原生 APP 更長。

但經(jīng)過我的測試，即便如此 APP 的啟動時間仍然還是挺快的（至少比什么微信、淘寶和大多數(shù)游戲快得多了），與 Flutter 差別不會太大。

對于 APP 啟動時間的優(yōu)化，以及對 CCC 打包的 APP 的啟動屏優(yōu)化，下文的技術(shù)分享會提到。

使用 npm 庫 

在 CCC 項目工程根目錄中，可以直接使用 node.js 的包管理器 npm 安裝可能需要用到的 JavaScript 庫。

安裝方式也特別簡單，例如在命令行中輸入 npm install numeric 就可以安裝 numeric 這個數(shù)學求解庫。

為什么像 math.js 這樣的庫可以正常導入 CCC 里并穩(wěn)定發(fā)布呢？

首先 math.js 不依賴于瀏覽器環(huán)境——也就是不需要 window document 等對象。其次 math.js 不依賴于JavaScript的 eval() 函數(shù)，保證了即便是在微信小游戲上也能夠正常運行。

多分辨率屏幕布局適配 

Plotter 使用了三種方式進行不同屏幕布局的適配。

方法1：Canvas 的 Fit Width 和 Fit Height

對于這兩個選項勾選的作用，引用自官方文檔。

由于要開發(fā)一個安卓手機 APP，這里我默認屏幕尺寸是 9:16 并設(shè)定分辨率為 1080*1920 。

但安卓早已進入全面屏時代了，手機屏幕變的更長了，如果我同時勾選這兩個選項。就會使得我的 APP 界面無論在哪臺設(shè)備都是固定長寬比，上下就會出現(xiàn)大黑邊：

方法2：Widget

使用 Widget 組件可以使得一個節(jié)點對齊父節(jié)點的邊緣。

為了避免黑邊的出現(xiàn)，我就只勾選 Canvas 的 Fit Width，給背景色節(jié)點掛上 Widget 組件，并用 Widget 組件讓它充滿整個 Canvas ，這樣就避免了黑邊的出現(xiàn)。

方法3：JavaScript 代碼動態(tài)更改控件位置 

雖然解決了黑邊問題，但是如果屏幕高度太小，控件離開了屏幕可視區(qū)域怎么辦？

正如上圖，對于 APP 頂端的 Top 按鈕欄，如果是 iPhone X 就可以正常被現(xiàn)實出來，而如果是 iPhone 5，Top 按鈕欄就會被遮擋：

因此，我這邊在主腳本的 onLoad 函數(shù)里，利用 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;}

APP 啟動速度優(yōu)化 

CCC 打包的安卓 APP 在啟動時都會經(jīng)歷一小段黑屏加載時間，讓人感覺特別遲鈍，實際上我們可以對此進行優(yōu)化，以達到更好的用戶體驗。

方法1：添加啟動圖 

通過改變原生安卓啟動 Activity 的 Theme 和主界面布局，可以為 APP 的啟動增加一個啟動圖，這樣打開 APP 立馬就可以看到 Logo 而不是黑屏了，讓人感覺舒適很多。

這里有大佬寫的文章特別細致，我就不在此贅述了

Cocos Creator Android 原生啟動優(yōu)化系列：

1. Cocos Creator Android 原生啟動優(yōu)化系列 1—— 黑屏原因分析

2. Cocos Creator Android 原生啟動優(yōu)化系列 2—— 自定義啟動頁

區(qū)別在于我在 layer-list 中圖標的下面加了一行字。

另外，在 hideSplash 函數(shù)中，我使用 Android 的 animate 讓啟動圖淡出消失，而不是瞬間消失，達到更好的效果。

/** * CC JS 通過調(diào)用此靜態(tài)方法，在主場景加載完成后隱藏原生啟動圖 */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);                        }                    });            }        }    });}

start() {    // 加載結(jié)束，讓啟動圖淡出    if (cc.sys.os === cc.sys.OS_ANDROID) {        // 反射調(diào)用原生的隱藏方法        jsb.reflection.callStaticMethod(            "org/cocos2dx/javascript/AppActivity",            "hideSplash",            "()V"        );    }    // init logic...}

方法2：減少主場景的復雜度 

通過減少主場景的節(jié)點以及組件數(shù)目，加快場景載入時間。優(yōu)化主場景每個節(jié)點掛載腳本的 onLoad 函數(shù)的執(zhí)行效率。用此優(yōu)化方法，也可以大大加快 APP 的啟動時間。

ScrollView優(yōu)化 

優(yōu)化 Content 內(nèi)節(jié)點數(shù)目 

ScrollView 在可視范圍內(nèi)的節(jié)點數(shù)目一般很少，然而如果 ScrollView 中有數(shù)千個項目，我就創(chuàng)建數(shù)千個節(jié)點的話，不僅消耗大量內(nèi)存，而且會讓運行效率變得特別低。

所以不如讓 ScrollView 內(nèi)節(jié)點數(shù)目固定，剛剛好可以鋪滿就行，然后在滑動 ScrollView 時改變節(jié)點的位置，然后動態(tài)回收利用已有的節(jié)點進行展示。

對子節(jié)點所掛載腳本單獨優(yōu)化 

在 Plotter APP 的上方，有一個寄存器列表，點擊之后可以展開寄存器列表，查看寄存器中已有的變量。

對于寄存器列表里的每一條項目，它們都是“活”的——響應式。即它們會知道當前運算內(nèi)核中自己所屬的變量值有沒有改動，如果改動了，它們就會立刻改變此項目 Label 里的文本內(nèi)容，如果沒有改動，它們就不做任何操作。

另外，如果列表中這一條項目用戶看不到，那它就處于休眠狀態(tài)，不受響應。

使用反射機制實現(xiàn)復制文本到剪切板 

CCC 提供的反射機制 jsb.reflection 可以調(diào)用原生宿主平臺的方法（如 Java 方法、C++ 方法和 Objective-C 方法），以實現(xiàn)與底層邏輯的交互。這里我以復制文本到剪貼板——一個應用軟件的常見需求為例。

在構(gòu)建的 Android Studio 工程目錄下，找到 src/org/cocos2dx/javascript/APPActivity.java 文件，這是 CCC 打包的安卓 APP 的入口活動（Activity）。

在 APPActivity 類底下加入私有靜態(tài)變量 App。

public class AppActivity extends Cocos2dxActivity {
    @SuppressLint("StaticFieldLeak")    private static AppActivity app = null;...

在 onCreate 方法的最下面為 app 設(shè)置引用。

...// DO OTHER INITIALIZATION BELOWSDKWrapper.getInstance().init(this);
app = this;...

然后在類中添加一個靜態(tài)方法 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。

然后當需要調(diào)用安卓 API 復制文本到剪貼板時，就通過 CCC 的 Java 反射實現(xiàn)。

jsb.reflection.callStaticMethod("org/cocos2dx/javascript/AppActivity", "JavaCopy", "(Ljava/lang/String;)V", value);

關(guān)于 jsb.reflection ，更加具體的信息可以查閱官方文檔。

使用類似的方法，我們還可以實現(xiàn)調(diào)用 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;}

設(shè)備震動 API 

有時候我們點擊一個按鈕，需要有震動反饋，那么應該如何實現(xiàn)呢？

對于瀏覽器平臺，Web 已有的 navigator.vibrate 接口提供了設(shè)備的震動方法，微信小游戲也已有震動相關(guān)的 API ，那原生平臺怎么辦呢？

當然我也可以使用上述反射的方法自己實現(xiàn)，但查閱了 CCC 的源碼之后，發(fā)現(xiàn) CCC 已經(jīng)有震動的API，在 cocos2d-x/cocos/scripting/js-bindings/auto/jsb_cocos2dx_auto.cpp

這里我們也看到，在 jsb.Device 這個命名空間中，CCC 還提供了一些其它原生方法。

最后我這里實現(xiàn)了一個支持三個平臺的震動的方法：

/** * 震動 * @param time 震動的持續(xù)時間 */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);    }}

然而，如果僅僅是這樣，調(diào)用震動方法之后 APP 會閃退！

不能忘記在 AndroidManifest.xml 中給 APP 聲明所需震動權(quán)限！

靈活使用緩動 

在 Plotter 里，我大量使用了緩動函數(shù) cc.Tween ，為 APP 添加更多的控件動畫，并且利用緩動的性質(zhì)，這些動畫都是可以被中途打斷并復原的，也就是各大手機廠商為自己系統(tǒng)吹的“打斷動畫”或者“補間動畫”。

WebView 的 JS 注入和使用 WebView 顯示 SVG 

在 Plotter APP 中，有一個特色功能是將 L A T E X 代碼渲染成漂亮的書寫體，這是怎么實現(xiàn)的呢？

我使用了 npm 中 MathJax 這個開源庫，利用它的 Tex2Svg.js 可以把 TeX 代碼渲染為 SVG 格式的矢量圖（實際上是一串字符串），然后將此 SVG 顯示出來即可。

那么在 CCC 中，如何顯示出 SVG 格式的矢量圖呢？CCC 商城有一套 SVG 插件，然鵝我窮呀，所以就只能自己另辟蹊徑了。

我使用 CCC 支持的 WebView ，然后用 HTML、JS 和 CSS 注入的方法。

實際上 HTML、CSS 的注入本質(zhì)上還是 JS 注入，通過執(zhí)行指定的 JS 代碼就可以改變網(wǎng)頁的 DOM 。

上圖代碼中，我為了讓網(wǎng)頁中 svg 圖片居中，注入了這樣一段 JS 代碼，改變了 svg 的 style。

實際上注入 JS 還有另一種奇怪的方法：通過改變 url 來注入 JS

上述兩種方法也可以在 Java 安卓里以類似的方法同樣實現(xiàn)。

另外，通過改寫 CCC 的 Cocos2dxWebView.java 實現(xiàn) WebView 的透明背景以及自由縮放。

多線程和高性能計算 

眾所周知，JavaScript 的 一大槽點是 JavaScript 代碼是單線程執(zhí)行的。

大部分并發(fā)都可以通過 JavaScript 的異步實現(xiàn)，但在要進行 CPU 密集型運算時不可避免的需要用到多線程，以防止主線程的 UI 交互等邏輯卡死，可以通過 Web Worker 或者前文講到的反射機制調(diào)用原生平臺的 API 來實現(xiàn)多線程并行運算。

另外，還可以將需要執(zhí)行的復雜 JavaScript 程序放到 WebView 中，然后調(diào)用 WebView 的 evaluateJS 函數(shù)執(zhí)行此程序。

當我們的程序需要非常高性能的計算時，還有兩種方法。

一種是使用 Web-Assembly ，現(xiàn)有的工具可以把像 C 或者 Rust 這樣的高性能程序編譯為字節(jié)碼，直接在瀏覽器內(nèi)執(zhí)行，運行效率非常高。

另外一種是當需要大量并行的浮點運算、或大矩陣的運算時（通常是圖形學計算、物理模擬、深度學習等所需要），可以通過利用 OpenGL ES、或者 WebGL 進行 GPU 加速運算。

總結(jié)來說就是：

多線程 

對于瀏覽器平臺可以使用 WebWorker 所提供的 API（如微信小游戲的 Worker ） 原生平臺可以使用 WebView 的 evaluateJS 函數(shù)通過反射機制，調(diào)用原生平臺的方法實現(xiàn)多線程 。

高性能 

通過反射機制，調(diào)用 C++ 程序 WebAssembly 使用 WebGL 等進行 GPU 加速運算 。

矢量圖標的制作 

以前我曾制作過一個 APP 的圖標，但是由于時間久遠，找不到原始素材了，然而現(xiàn)在的這個圖標分辨率太低，我想將它轉(zhuǎn)換為更加清晰的 Logo 怎么辦？

在網(wǎng)上可以找到標量圖轉(zhuǎn)矢量圖的工具，將圖標轉(zhuǎn)換為無論方法多少倍都不會模糊的 SVG 矢量圖，再對這個矢量圖進行修改，就可以獲得更加清晰的 Logo 啦！

最后經(jīng)過數(shù)次修改，得到了新的 APP 圖標。

另外推薦兩個獲取好看的 APP 圖標的網(wǎng)站：

Icon 圖標在線制作工具（p2hp.com）

Material Design Icons 

Plotter 的特點使得它所面向的用戶有：

1. 中小學生：分數(shù)帶單位的四則運算、簡單的函數(shù)繪圖、組合學運算、統(tǒng)計學運算

2. 大學生：向量 / 矩陣的運算、數(shù)值微積分、多元函數(shù)的極值等

3. 工程師：復數(shù)運算和求解，全平臺——無論在哪臺設(shè)備都能允許，且可以脫機運行

4. 程序員：各種進制之間的轉(zhuǎn)換和運算，超高精度浮點數(shù)或者大整數(shù)的運算

5. 教育工作者：通過圖像和更具化的運算方式帶給學生更深刻的概念

6. 科研工作者：

• 便攜性使得無論何時何地產(chǎn)生了靈感，立馬就可以拿出設(shè)備進行計算和實驗 

• 帶單位的運算使得科研人員能在計算時帶單位運算，在任何時候可以進行帶單位數(shù)值的轉(zhuǎn)換，還使得在計算數(shù)據(jù)時保證量綱不出錯 

• 在任何時候引入高精度帶單位的常量進行運算，例如普朗克常數(shù)、阿伏伽德羅常數(shù)等 

• 支持復數(shù)運算，多元函數(shù)最優(yōu)化，解微分方程數(shù)值解等 

在此也回答一些大家可能困惑的問題：

Q: 教育工作者已經(jīng)有像 Desmos、Geogebra 這樣的專業(yè)軟件了，不同的工程師也有各自領(lǐng)域的專業(yè)軟件，科研工作者更是有像 MATLAB、Mathematica、Python 這樣的專業(yè)工具了，那 Plotter 的意義何在？

A: Plotter 的愿景是讓科學計算變得更加簡單和容易。Plotter 封裝了不同領(lǐng)域都可能用到的功能，使其受眾較廣泛，其設(shè)計使得它能夠在任何平臺上脫機運行，尤其是移動端，這使得軟件的通用性和便攜性很強。

Q: 讓科學計算變得更加簡單和容易能帶來什么？

A: 現(xiàn)代科學技術(shù)的突飛猛進離不開計算機的產(chǎn)生。無論是對 DNA 的測序還是蛋白質(zhì)結(jié)構(gòu)的模擬，讓現(xiàn)代生物學突飛猛進發(fā)展到新的階段，產(chǎn)生了生物信息學。

同樣對大腦神經(jīng)元的模擬推進了腦科學的發(fā)展，對醫(yī)藥數(shù)據(jù)的分析帶來的科學發(fā)現(xiàn)造福了無數(shù)疾病中的苦難人群。

有限元分析使得我們能夠在計算機上模擬物理過程，廣泛運用于工業(yè)。對天體運行的模擬造就了現(xiàn)在的天文學和航天學。

對化學分子運動的模擬而發(fā)現(xiàn)了新的催化劑…不知道多少科學家用 MATLAB 分析實驗數(shù)據(jù)，獲取了一次又一次科研突破，多少數(shù)學家用 Mathematica 進行符號運算，減少了手工計算導致的出錯率，提高了數(shù)學研究的效率…

因此可以說：新的科學發(fā)現(xiàn)是在以人類智慧驅(qū)動下的科學計算中產(chǎn)生的。

計算機科學家、粒子物理學家 Stephen Wolfram 曾提到計算本身也是一種新科學，純粹的計算也可能發(fā)現(xiàn)宇宙的規(guī)律…

Plotter 的體量并沒有那么大，它僅僅是做到了輕量便攜和脫機而已，但它的愿景仍是使得科學計算變的更加簡單和容易~

感興趣的同學歡迎戳鏈接閱讀我的其他文章：

《星旅》技術(shù)分享1：顫抖吧！零零后已經(jīng)開始爆肝寫游戲了！

《星旅》技術(shù)分享2：爆肝的00后又來了！StarTrek 開發(fā)周記（下）

Plotter GitHub 開源地址

https://github.com/HK-SHAO/Plotter

Plotter APP 應用市場鏈接

https://www.coolapk.com/apk/284166

Java 原生反射機制 · Cocos Creator 

https://docs.cocos.com/creator/manual/zh/advanced-topics/java-reflection.html

多分辨率適配方案 · Cocos Creator

https://docs.cocos.com/creator/manual/zh/ui/multi-resolution.html

npm

https://www.npmjs.com/

Canvas 組件

https://docs.cocos.com/creator/manual/zh/components/canvas.html#%E9%80%89%E9%A1%B9

Cocos Creator Android 原生啟動優(yōu)化系列 1 —— 黑屏原因分析

https://www.jianshu.com/p/2df139d48539

Cocos Creator Android 原生啟動優(yōu)化系列 2 —— 自定義啟動頁

https://www.jianshu.com/p/21d269c8ef09

Icon 圖標在線制作工具

http://icon.p2hp.com/

Material Design Icons 

https://materialdesignicons.com/