cocosjs腳本壓縮的簡單介紹

本文目錄一覽：

• 1、Cocos Creator 最簡易例子，場景切換，節點掛載腳本
• 2、cocos腳本出錯
• 3、一個操作讓遊戲內存立減50+%-CocosCreator性能優化之壓縮紋理
• 4、如何在cocos3d-js遊戲中實現文件讀寫
• 5、如何使用Code IDE調試Cocos2d-JS開發的遊戲
• 6、cocos-js 寫完怎麼打包成win32

Cocos Creator 最簡易例子，場景切換，節點掛載腳本

節點怎麼掛載腳本？

點選 層級管理器 中的任意 節點，查看 右側 屬性檢查器，拉到最下面，可以看到 添加組件 按鈕，點擊，選擇 用戶腳本組件，可以看到 當前所有的js腳本文件，選擇 想要 掛載 的腳本，完成 節點和腳本的 掛載。

資源管理器 中任何地方，鼠標右鍵，新建–JavaScript。留意js文件放在統一的目錄下面，比如Script[目錄需要自行建立]

層級管理器 中任何地方，鼠標右鍵，創建節點

SceneMain.js

Scene1.js

2.5.1 CanvasScene1節點【見文中20220317160146_1.png截圖】 首先掛載腳本Scene1.js

雙擊資源管理器中的 場景 Scene1【路徑Scene–Scene1】,層級管理器中，找到 CanvasScene1節點，點擊，查看右側 屬性檢查器，拉到最下面，點擊 添加組件 — 用戶腳本組件 — Scene1。完成掛載。

2.5.2 BtnGoToNextScene節點【按鈕類型】【見文中20220317160146_1.png截圖】 設置點擊響應函數

層級管理器中，找到 BtnGoToNextScene節點，點擊，查看右側 屬性檢查器，拉到最下面，

Click Events 中的值修改為1，表示有一個點擊事件響應。

最初第一個顯示框空着時，提示為 cc.Node ，表示，這個地方需要拖拽一個 節點類型。節點類型，在 層級管理器中，只有 CanvasScene1節點 掛載了腳本，而且掛載的腳本中，有我們需要的響應函數 onBtnGoToNextScene()。

這個時候，只能使用拖拽形式，把 層級管理器中的 CanvasScene1節點 拖拽到 這個 顯示框區域。完成之後，這個顯示框中，顯示的就是 CanvasScene1。

這一步做好之後，水平並列在後面的兩個下拉框就有選擇項了。一個選擇腳本，一個選擇響應函數。

–the end

cocos腳本出錯

電腦重裝了系統，然後裝上vs2010，準備安裝cocos2d-x 2.0時，運行批處理提示如下錯誤:輸入錯誤: 沒有文件擴展“.js”的腳本引擎。

在裝vs2010之前，電腦還安裝了UE、notpad++等文本編輯工具，從而是js文件默認打開方式發生了變化，處理方法:

打開註冊表編輯器，定位[HKEY_CLASSES_ROOT\.js]這一項，雙擊默認值將其改為“JSFile”。

重新運行批處理，一切OK。

一個操作讓遊戲內存立減50+%-CocosCreator性能優化之壓縮紋理

在遊戲中，紋理不僅佔據大量的包體，也佔據了大量的內存。傳統的圖片壓縮格式（如JPEG、PNG等）雖能減少資源大小，但是不能被GPU直接識別，還是需要先加載到內存通過CPU解碼，轉換成RGB/RGBA等能被GPU識別的格式，才能傳送到GPU進行渲染。

為避免這些問題，壓縮紋理，指的是一種針對GPU的紋理壓縮方案，使紋理能夠直接被GPU識別並進行渲染，它具有以下優點。

傳統的圖片壓縮主要目的是 存儲 和 傳輸 ，為了儘可能的高效壓縮，使用了可變的壓縮比率，因此在解壓時需要解壓更多的像素位才能讀取某個像素的位置，不適合隨機和快速讀取，也發揮不了GPU的並行處理優勢。

而壓縮紋理使用一個固定的壓縮比率，將紋理劃分成多個像素塊，每個像素塊包含 2*2 或 4*4 個像素，然後對每個像素塊進行壓縮，被壓縮的像素信息存儲在一個像素集合中，每個像素塊的索引位置存儲在一個塊索引圖中。讀取時，首先將紋理坐標轉化為塊索引值，然後在像素集合中查找對應的像素塊，最後在這個像素塊中找到紋理顏色值。

因為採用了固定的壓縮比率，GPU內部可以並行處理，從而快速的解壓縮。與之相對的是，紋理的壓縮過程發生在程序運行之前，並不在意編碼速度，因此在壓縮時會遍歷所有可能性，找到和原始像素差值最小的編碼，這也是紋理壓縮耗時較久的原因。

順便說一下，普通圖片格式中，PNG是無損壓縮，JPEG是有損壓縮。而壓縮紋理都是有損壓縮，只是在絕大部分情況下，手機上看不出來而已。

手機上使用壓縮紋理依賴於OpenGL ES的支持，OpenGL ES 2.0本身並沒有定義任何紋理壓縮格式，它僅提供 glCompressTexImage2D() 方法供應用程序上傳壓縮紋理，壓縮紋理的格式由各個GPU廠商定義和實現。

OpenGL ES 3.0提供了壓縮紋理標準，使各個平台都可以使用同一種壓縮紋理，但市面上的設備還需要很長時間才會全部過渡到OpenGL ES 3.0。因此，仍然需要對不同的平台和設備使用不同的壓縮紋理格式。

手機遊戲中常用的有以下格式。

ETC1把 4*4 的像素塊壓縮成固定的64位編碼（8個字節）， 4*4 像素塊是16個像素，每個像素4字節，一共佔64個字節，所以壓縮比是 64/8=8。但是ETC1隻能存儲RGB信息，不適用帶透明度的紋理，為解決這個問題，Creator在ETC1文件中額外寫入了透明度信息，即ETC1+A格式，它的壓縮比是 64/16=4。

ETC1/ETC1+A需要OpenGL ES 2.0（對應WebGL 1.0）環境，目前幾乎所有Android手機都支持ETC1，但是iOS不支持。

ETC1/ETC1+A紋理的長寬可以不相等，但要求是2的冪次方。

ETC2是ETC1的擴展，壓縮比率一樣，但壓縮質量更高，而且支持透明通道，能完整存儲RGBA信息。

ETC2需要OpenGL ES 3.0（對應WebGL 2.0）環境，目前還有不少低端Android手機不兼容，iOS方面從 iPhone5S 開始都支持OpenGL ES 3.0。

ETC2和ETC1一樣，長寬可以不相等，但要求是2的冪次方。

Creator中常用的是PVRTC4+A，壓縮比和ETC一樣，iOS全系列支持，但是Android不支持。另外PVR要求紋理長寬相等（正方形）且是2的冪次方，例如 1280*720 的PNG圖片，轉換後變成 2048*2048 ，這一點會大大增加內存消耗。在實測中還發現轉換後的圖片質量不如ETC1，存在模糊、毛邊現象，對畫面要求高的遊戲不適合。

壓縮紋理的使用非常簡單，根據構建平台添加需要的格式即可，具體參見Creator官方文檔，本文不再重複了。

Creator編輯器還提供了轉換壓縮紋理的選項，根據轉換速度分為Fast、Slow等好幾檔，速度越慢則畫面質量越好。但不管選哪個，隻影響顯示效果和轉換時長，顯存佔用都是一樣的。一般情況下，顯存佔用就是壓縮紋理的文件大小，例如文件大小是1.5M，則它佔用的顯存也是1.5M。

在設置壓縮紋理格式時，目前Creator 2.x版本還需手動一個一個設置。如果想一次性設置所有或部分資源，自己寫個腳本遍歷修改對應的 .meta 文件也比較方便，這裡是一個我寫好的腳本 一鍵自動化設置壓縮紋理格式

在實際項目中的測試結果是，單圖、自動圖集、TexturePack合圖加起來超過兩千張圖片的Creator工程，使用PNG時打出來的apk包大小近500M，內存佔用1.3G。採用壓縮紋理後，包體大小降到150M，內存佔用降到600M。

如何在cocos3d-js遊戲中實現文件讀寫

因為文件系統就涉及操作系統和環境了。 不像通常的js腳本只涉及瀏覽器。 在win下，純jscript腳本可以用FSO進行文件讀寫， 比如，在一個test.js文件中寫上 var fso = new ActiveXObject(“Scripting.FileSystemObject”); var f = fso.OpenTextFile。

如何使用Code IDE調試Cocos2d-JS開發的遊戲

運行、測試遊戲

1. 新建一個名為 CocosJSGame 的 Cocos JavaScript 工程

2. 點擊工具欄上的 debug 按鈕

3. 默認情況下腳本會運行在我們提供的 mac 版本預編譯 runtime 上。為了簡單起見，我們不對默認值進行任何改動。如果你想要在其他我們支持的目標平台上調試程序，可參考下文的“在其它目標平台上調試”

如何調試

斷點支持

可以在 javascript 腳本文件中增加斷點

當斷點被觸發時選擇 “Yes” 打開 Debug Perspective 透視圖，可以看到很多與調試相關的視圖，調用棧、變量和斷點等等。

支持 Step over, Step into, Step out 等調試方式。

代碼熱更新

想更改右下角的 close 按鈕的位置？closeItem.attr 方法是控制該按鈕的顯示位置的。

closeItem.attr({

x: size.width – 20,

y: 20,

anchorX: 0.5,

anchorY: 0.5

});

修改“x”上面的值，把”size.width-20″ 改成 “”size.width/2” 然後保持修改, 你會發現，在沒有重啟的情況下 close 按鈕的位置已經改變了，在屏幕底部的中間!

在其他目標平台上調試

通過工具欄上的打開 Debug Configurations 打開 Debug Configurations 頁面

在頁面的左側，選擇之前我們為你創建的名為CocosJSGame的configuration

在 iOS Simulator 上調試

選擇iOS Simulator單選項

選擇正確的runtime app

點擊 Debug 按鈕，預編譯的 runtime 會被自動安裝到模擬器中

在iOS設備上調試

首先，你需要一個 runtime IPA， 從 1.0.0-rc1 版本開始，你可以通過 Code IDE 自己編譯一個，然後安裝IPA到設備中

在 iOS 設備上啟動 runtime

在 “Debug Configuration” 界面選擇 Remote Debug 單選項

platform 選擇 “iOS”

將設備的 ip 地址填寫在 Device IP 上

最後點擊Debug按鈕

在 Android 設備上使用 ADB 模式調試

在 “Debug Configuration” 界面選擇 Android ADB Mode 單選項

選擇正確的 runtime apk

點擊Debug按鈕

IDE 會自動安裝配置中的 runtime apk 到你的連接設備上並啟動runtime開始調試

在 Android 設備上使用網絡模式調試

手動安裝 runtime 到你的設備上，它被存放在 CocosLuaGame/runtime/android 目錄中

手動啟動 runtime，停留在 waiting 頁面

在 “Debug Configuration” 界面選擇 Remote Debug 單選項

platform 選擇 “Android”

將設備的 ip 地址填寫在 Device IP 上

點擊Debug按鈕

如何調試C++

從 1.0.0-rc1 版本開始，支持使用 XCode/Visual Studio 調試 C++ 代碼的同時使用 Cocos Code IDE 調試 C++ 代碼。

以調試 Mac 為例：

如果你還沒有 C++ 代碼，那麼需要先添加（右擊工程，Cocos Tools-Add Native Codes Support…）

使用 Xcode 打開 frameworks/runtime-src/proj.ios_mac 工程，並啟動調試

回到 Cocos Code IDE，打開 “Debug Configuration” 頁面，選擇 Remote Debug 單選項

platfrom 選擇 “Mac”

Target IP 填寫 “127.0.0.1”

點擊Debug按鈕..

cocos-js 寫完怎麼打包成win32

不知道你的應用場景是什麼，如果是瀏覽器打開，那麼是不分系統的。如果要嵌入到安卓或蘋果手機裡面，只需要接入對應的平台ndk就可以了。cocos js sdk for IOS cocos js sdk for

android cocos js sdk for

win32