Ⅰ 一個操作讓游戲內存立減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。
Ⅱ 用cocos creator做小游戲截屏，大佬分享一下，謝謝！
var canvas = cc.game.canvas;
var width = cc.winSize.width;
var height = cc.winSize.height;
canvas.toTempFilePath({
x: 0,
y: 0,
width: width,
height: height,
destWidth: width,
destHeight: height,
success (res) {
//.可以保存該截屏圖片
console.log(res)
wx.shareAppMessage({
imageUrl: res.tempFilePath
})
}
})
Ⅲ Cocos2dx-js 在IOS上截圖/截屏要怎麼弄
一. 啟動終端（點擊Finder－前往－實用工具－終端）； 二.將你下載的zip包解壓，mac下直接雙擊，放到某一文件夾下； 三.在終端上進入剛解壓的文件夾，cd 到目錄cocos2d-x-3.2, 然後輸入如下命令運行：./setup.py; 四.輸入 source /Users/HQ（你的用戶名）/.bash_profile 這是用來刷新配置文件的; 五.cocos new MyProject -p com.YouCompany -l cpp -d Project/Games 註： MyProject項目名 可任意命名、com.YouCompany包名 可任意命名、Project/Games 保存文件夾路徑 可任意寫 運行後就創建新項目了，到xcode中打開
Ⅳ CocosCreator教程（入門篇）
自動釋放資源： 切換場景後，上一個場景中的資源，從內存中釋放。
延遲載入資源： 意味著不用等待所有資源載入完畢，才顯示場景。（快速切換場景，資源陸續在畫面顯示）
普通圖，子層為一張spriteFrame。
創建方式：拖拽場景節點，到資源管理器。
精靈圖，子層為多張spriteFrame。（精靈圖合成軟體：TexturePacker、Zwoptex）
打包時，將所在目錄中的所有碎圖，合成為圖集。
數字為內容的圖集。
動態字體：.ttf
點陣圖字體：.fnt + .png（存在於同一目錄）
小型動畫
模式： web audio、dom audio
操作流程：
（1）導出：文件 => 資源導出，選擇 .fire場景文件，輸出assets目錄的 .zip壓縮包。
（2）導入：文件 => 資源導入，選擇壓縮包源路徑、解壓路徑，輸出assets目錄內容。
基於size mode，盡量去除spriteFrame無像素的部分，減小圖片尺寸。
作用： 用於變換、子節點定位基準。
對攝像機、渲染組件的了解。
對widget、layout等UI組件的了解。
（1）創建動畫的基本流程
（2）時間曲線（雙擊動畫線，進入編輯窗口）
（3）事件管理（雙擊游標、加減按鈕控制參數個數）
（4）腳本控制
碰撞組件（普通碰撞）
（1）editing——是否為編輯模式
（2）regenerate points——計算圖形邊界，自定生成控制點，數值為控制點的生成密度 / 准確度
（3）ctrl + 點擊——刪除控制點
（4）組件類型：矩形、圓形、多邊形
（5）設置碰撞組（項目 => 項目設置 => 分組設置）：
制定分組 => 匹配分組 => 碰撞組件所在節點上，設置所屬分組
（6）腳本控制
Box2D物理引擎（高級碰撞）
（1）audioSource組件
（2）腳本控制
（1）定義 CCClass
（2）實例化
（3）判斷類型
（4）構造函數（ctor）
（5）實例方法
（6）繼承（extends）
（7）父構造函數
（8）完整聲明屬性
properties常用參數
（1）獲得組件所在的節點
（2）獲得其它組件
（3）獲得其它節點及其組件
（4）訪問已有變數里的值（通過模塊訪問）
（1）節點狀態和層級操作
（2）更改節點的變換（位置、旋轉、縮放、尺寸）
（3）顏色和不透明度
（4）常用組件介面
cc.Component 是所有組件的基類，任何組件都包括如下的常見介面：
（1）創建新節點
（2）克隆已有節點
（3）創建預制節點
（4）銷毀節點
（1）載入和切換
（2）通過常駐節點，進行場景資源管理和參數傳遞
（3）場景載入回調
（4）預載入場景
（1）資源屬性的聲明
（2）靜態載入（在屬性檢查器里設置資源）
（3）動態載入
（4）載入遠程資源和設備資源
（5）資源的依賴和釋放
（1）監聽事件
（2）關閉監聽
（3）發射事件
（4）派送事件
（5）事件對象（回調參數的event對象）
（1）滑鼠事件類型和事件對象
（2）觸摸事件類型和事件對象
（3）其它事件
（1）動作控制
（2）容器動作
（3）即時動作
（4）時間間隔動作
（5）動作回調
（6）緩動動作
（1）XMLHttpRequest——短連接
（2）WebSocket——長連接
對象池的概念
在同一場景中，需要多次進行節點的生成、消失時，假如直接進行創建、銷毀的操作，就會很浪費性能。因此，使用對象池，存儲需要消失的節點，釋放需要生成的節點，達到節點回收利用的目的。
工作流程
（1）初始化對象池
（2）從對象池請求對象
（3）將對象返回對象池
清除對象池
Ⅳ cocos creator 如何載入一張圖片並渲染出來的
導讀： ccc 我們在使用一張圖片的時候，使用cc.laod api ，回調傳回來cc.spriteFrame 或者cc.texture來供我們使用。下面的內容會解密中間到底經歷了哪些過程（native）。
載入：首先會在js引擎中，通過一些方式得到資源的完整信息，包括資源的完整路徑資源類型等（可以了解下load的載入過程）。
然後調用jsb_global_load_image方法，利用native來載入這張圖片到內存中，拿到內存首地址和內存大小。
把剛才拿到的信息轉為jsObject，內存地址和大小會被描述成arrayBuff，包裝好的對象回調回給js。
js引擎拿到回調後會創建一個texture來，然後調用 texture.initWithElement()方法，把之前包裝好的數據再傳回給native的texture對象（js的texture利用jsb來管理native的texture對象，並且是1對1的）。
渲染：native的texture接收到數據後會用OpenGL的api來開辟顯存，綁定紋理數據（分配一個紋理id給native的texture）。然後通過device（DeviceGraphics是單例，大多數的OpenGL api介面都是通過他調用）渲染到屏幕上。（OpenGL api可自行查找資料）
我們在js端讓一個精靈顯示圖片的時候，是在load的回調里 把cc.spriteFrame給精靈使用，spriteFrame里持有cc.texture對象，cc.texture又持有由native返回的數據。通過這種方式讓紋理數據和將要渲染的對象綁定起來。
還有許多包括頂點數據 node的位置 大小 shader 等等 都在RenderFlow等類中獲取和封裝（比較復雜），最後配合紋理數據 渲染出來。我們載入的一張圖片就這樣渲染到了屏幕上。
流程圖：
Ⅵ cocos_2dx 中setTexture可以改變圖片，但卻以原先圖片的尺寸為准，要怎麼改過來
lua代碼
local image = ccui.ImageView:create("xx.png") --這是你要變換的圖片100*200
原來的圖片:setTexture(image)
原來的圖片:setContentSize(image:getContentSize())
c++代碼
ImageView * image = ImageView::create("xx.png") --這是你要變換的圖片100*200
原來的圖片->setTexture(image)
原來的圖片->setContentSize(image->getContentSize())
Ⅶ 如何用Cocos引擎打造次世代3D畫質『游戲大觀
從Cocos 2d-x 3.0起我們已經可以在游戲中使用3D元素。Cocos引擎推出3D功能的時間不算太遲，我們已經可以看到越來越多的手機上能流暢地渲染3D游戲，而且這些機型正在成為主流。在最近兩年我們可以看到，高端手機游戲從2D轉到3D的傾向很明顯。許多游戲開發商試圖在競爭激烈的紅海里佔有一席之地，那麼選擇開發3D游戲或許會是一個強有力的競爭手段。
上面的視頻是我的下一款游戲作品《Food of the Gods》。這游戲使用了Cocos 2d-x 3.3，視頻是從我iPhone上錄制的實際運行效果。在這篇文章里我將要介紹我是如何製作它、如何把它跑在cocos引擎上的。對於熟悉cocos官方提供的3D示例游戲 《Fantasy Warrior》的開發者，將會看到以下一些主要不同點：
1. 光照貼圖（Light Mapping）：你將看到每件物體都有被照亮並且投射陰影。光影效果的質量是由你的3D工具軟體決定的，用3D軟體能烘焙出復雜的光效，包括直接光照，反射光照，以及陰影。
2. 頂點合並（Vertex Blending）：請注意看路、草地和懸崖交接的地方，看不到任何可見的接縫。
3. 透明遮罩（Alpha Masks）：灌木如果沒有透明遮罩就跟紙片一樣。
4. 濾色疊加的公告板（Billboards）：增加一些光束和其他環境的效果。
所有的模型都是用一個叫Modo的3D 軟體建模製作的，貼圖則是使用Photoshop。關於3D模型的製作和貼圖的繪制在此就不再贅述，網上已經有很多教程，在此主要介紹下跟Cocos 2d-x有關的部分。
模型網格和貼圖（Meshes and Textures）
如下圖所示，每個模型的貼圖都是由幾個256 x 256或者更小的貼圖組成的。同時你也會注意到我把所有的小圖片都合在了一張貼圖上，這是減少GPU繪制次數（draw call）最簡單的方法之一。貼圖是從http://www.cgtextures.com 或者網上找的。
為了把這些圖片拼接起來，我使用的是Photoshop的補償濾鏡（offset filter）然後在接縫的地方用修復畫筆來做一些自然的過渡。為了獲得一種油畫的視覺效果我會先使用cutout濾鏡（注意：cutout濾鏡也會使得png格式圖片的壓縮效果更好），然後在需要的地方繪制一些高光和陰影的效果。我發現如果直接拿照片當貼圖的話，當你把它尺寸縮小的時候會出現圖像噪點。
另一種方案是為每一個模型網格製作一整張獨立的貼圖。當網格比較小或者攝像機不是很靠近網格的時候這種方法是可行的。如果你的photoshop技術過硬的話，出來的效果會更好。附帶的好處是，因為只使用一張貼圖因此只有一次GPU繪制調用。但我不建議採用這種方法來製作第一人稱射擊游戲（FPS）中的建築，因為當你走得很靠近建築物的時候，貼圖解析度過低的問題就會顯露出來。我不喜歡用這種整張貼圖方法，因為這實在太費時耗力了。這個場景的製作花了我足足四天時間。
光照貼圖（Light Maps）
當你做好模型和貼圖之後，現在就可以來烘焙光照貼圖了。Cocos 2d-x目前還不像Unreal或Unity一樣在官方編輯器里提供烘焙光照貼圖的功能，但是別失望，大部分的製作3D模型的軟體都可以烘焙光照貼圖，並且效果比市面上任何游戲引擎的效果還好。首先，在你的3D工具軟體里，先給場景打好燈光，照亮場景，然後為每份網格製作第二張UV map。每份網格的表面都必須被映射在0到1范圍內的UV 平面上。這聽起來好像很復雜且耗時，但在Modo里這是非常簡單的。我先後使用 「Atlas map」的UV 工具和「Pack UV」工具，這兩個工具會自動將網格展開成一個相當不錯的排布圖。
這些都完成之後，設置3D工具軟體的渲染器為「只渲染烘焙的光照」，然後開始渲染。當然了，如果你想做一些環境光遮罩的效果也是可以的。
你也可以使用一些解析度較低的光照貼圖。有時候這樣的效果反而會看起來更好，因為相互混疊的模糊像素會讓陰影看起來更柔和。上面的這些建築都映射到一張512 x 512的光照貼圖上。整個場景總共使用了4 張512 x 512的光照貼圖。請確保每個小圖塊之間有一定的空隙，且讓你的渲染范圍比這些圖塊的邊界多出幾個像素。這樣可以防止當較低的mip-maps（一種紋理采樣）起作用時黑邊出現在網格周圍的角落裡。
最後一點聽起來像是3D技術的行話。如果是對Texture Packer熟悉的話，那麼其中的「Extrude」值起到的作用就是剛剛我所描述的。對貼圖的邊緣接縫做一些塗抹處理，這樣在精靈之間就不會有那些煩人的縫隙了，那些縫隙在這里會變成多邊形邊緣的黑邊。
如果你想犧牲內存和包大小來提高性能的話，你可以把顏色和光照信息都烘焙到一張貼圖上並避免共同使用一張光照貼圖。但是這樣做的話，同樣的像素密度，貼圖的大小至少得翻一倍。這完全取決於你個人、以及你游戲的要求。
接下來，添加頂點顏色。我在地形上提供了頂點顏色，這可以讓著色器在合成懸崖頂上的草地貼圖時，不會有任何可見的接縫。下圖中塗成白色的頂點部分可以合成你指定的貼圖。在這個例子里實際上我只使用紅色通道，當然了根據實際需要你可以使用4個通道（RGBA）去合成不同的貼圖。
最後，我把整個場景分成了很多獨立的網格（mesh）：每個建築都有自己獨立的網格，地形獨立一個網格，水也是獨立一個。帶透明遮罩的貼圖也會有一個網格——比如視頻中看到的植物葉子和小旗子。我這樣做有兩個原因，首先，讓地形、建築、水和帶透明遮罩的貼圖各自使用不同的著色器。其次，我們打算通過不渲染攝像機范圍外的對象來減少性能開支。很重要的一點是攝像機會根據網格的包圍盒來決定對象是否可見，因此盡量把網格弄成小塊，這樣包圍盒會比較小。
導出
完成了模型和貼圖之後，我們需要把每個mesh導出為一個.fbx文件。幸運的是，大多數的3D建模軟體都支持這個功能。Autodesk為此格式提供了一個免費SDK。但不幸的是，Modo 701在導出fbx格式時會出現相當多的錯誤。因此我必須自己寫一些腳本來保證第二組貼圖坐標和頂點顏色的正確導出。你可以從我個人網站上的「Modo Scripts」部分下載這個導出腳本。搞定fbx之後，你將需要用到Cocos 2d-x自帶的fbx-conv.exe命令行工具，它位於Cocos 2d-x根目錄的/tools下。
fbx-conv.exe -a your_mesh_name_here.fbx
使用「-a」參數後，工具會同時導出mesh的二進制文件(.c3b)和文本格式文件(.c3t)。文本格式的文件非常的有用，你可以利用它來查看所有的東西是否被正確導出，但千萬不要把它放到resource目錄下。如果所有的都被正確地導出的話，你將在c3t文件的開頭看到以下的內容：
「attributes」: [{
「size」: 3,
「type」: 「GL_FLOAT」,
「attribute」: 「VERTEX_ATTRIB_POSITION」
}, {
「size」: 3,
「type」: 「GL_FLOAT」,
「attribute」: 「VERTEX_ATTRIB_NORMAL」
}, {
「size」: 2,
「type」: 「GL_FLOAT」,
「attribute」: 「VERTEX_ATTRIB_TEX_COORD」
}, {
「size」: 2,
「type」: 「GL_FLOAT」,
「attribute」: 「VERTEX_ATTRIB_TEX_COORD1″
}]
注意VERTEX_ATTRIB_TEX_COORD1這個屬性。如果沒有它光照貼圖將無法顯示。如果你導出了一張帶頂點顏色的mesh，你也應該要看到一個類似的屬性才行。還有一點很重要，貼圖的坐標也必須按正確的順序才行。我通常採用的是第一個tex_coord是瓦片貼圖，最後一個tex_coord是光照貼圖。使用Modo的話，uv maps會按照字母順序排列。
著色器（Shaders）
我花了很長的一段時間來搞懂GLSL和著色器，但正如編程中經常遇到的，有時候一個點通了，其他的就都好理解了。一旦理解了其中的原理，你便會發現著色器真的很簡單。如果你不只是想用Cocos 2d-x來把貼圖套到模型網格上的話，你需要學會如何寫著色器。目前Cocos 2d-x沒有Unreal那樣好用的著色器可視化編輯器（visual shader editor），所以我們只能自己動手焊代碼。
本節我將講解我為視頻中的游戲場景所寫的著色器，並說明我做了什麼、為什麼這樣做。如果你對著色器已經非常熟悉了，那麼可以快速跳過本節。
首先，先來看一下如何將著色器應用到模型網格上。
這段代碼摘自Cocos 2d-x的測試集cpp-tests工程。如果你用不同的著色器來載入大量的meshes，那麼最好根據功能來進行，這樣可以避免冗餘。那麼現在我們只關心如下的代碼段，來看下這個著色器。
GLProgram* shader =GLProgram::createWithFilenames(「shaders/lightmap1.vert」,」shaders/lightmap2.frag」);
GLProgramState* state = GLProgramState::create(shader);
mesh->setGLProgramState(state);
Texture2D* lightmap =Director::getInstance()->getTextureCache()->addImage(「lightmap.png」);
state->setUniformTexture(「lightmap」,lightmap);
「lightmap1.vert」是頂點著色器（vertex shader）。如果將其應用到網格上，那麼每個頂點的每一幀都將執行這個操作。而「lightmap2.frag」是片段著色器（fragment shader），網格上貼圖的每個像素的每一幀都將執行這個操作。我不太確定為什麼將其命名為「片段著色器」，我一直認為應叫做「像素」著色器（pixel shader）。從這段描述，我們可以很容易理解為什麼大量著色器指令會降低幀率，尤其是你用片段著色器的話。
接下來我們詳細地分解頂點著色器：
attribute vec4 a_position;
attribute vec2 a_texCoord;
attribute vec2 a_texCoord1;
這些屬性是由渲染器提供的。「a_position」是頂點的位置。「a_texCoord」 和 「a_texCoord1」對應你那兩個UV坐標。還記得在.cbt文本格式文件中開頭部分的「VERTEX_ATTRIB_TEX_COORD」么？這些值與屬性對應起來了。你可以在渲染器中獲取更多其他的屬性，包括頂點法線（vertexnormal）和頂點顏色（vertex color）。請在cocos引擎的CCGLProgram.cpp中查看完整屬性列表。
varying vec2 v_texture_coord;
varying vec2 v_texture_coord1;
「varying」值將被傳到片段著色器中（fragment shader）。片段著色器所需要的任何變數前都需要添加「varying」限定符。這個例子中，我們僅需要知道這兩個貼圖的坐標。
void main(void)
{
gl_Position = CC_MVPMatrix * a_position;
v_texture_coord.x = a_texCoord.x;
v_texture_coord.y = (1.0 – a_texCoord.y);
v_texture_coord1.x = a_texCoord1.x;
v_texture_coord1.y = (1.0 – a_texCoord1.y);
}
設置頂點位置，拷貝貼圖的坐標給varying values，這樣片段著色器就可以使用這些值。現在我們一起來分解片段著色器。
#ifdef GL_ES
varying mediump vec2 v_texture_coord;
varying mediump vec2 v_texture_coord1;
#else
varying vec2 v_texture_coord;
varying vec2 v_texture_coord1;
#endif
聲明從頂點著色器傳遞過來的「varying」 值
uniform sampler2D lightmap;
還記得在將著色器應用到網格時所使用的 state->setUniformTexture(「lightmap「,light map); 語句么？這個值就是對應語句中的那個貼圖。
void main(void)
{
gl_FragColor = texture2D(CC_Texture0, v_texture_coord) *(texture2D(lightmap, v_texture_coord1) * 2.0);
}
這個語句設置像素顏色。首先你會注意到從未聲明過的 CC_Texture0變數。Cocos 2d-x中有大量可在著色器中使用的默認統一變數。再次強調，可在CCGLProgram.cpp中查看完整屬性列表。這個例子中，CC_Texture0對應在3D模型中所應用到網格中的貼圖。texture2D命令會在給定的貼圖坐標中去查找貼圖的像素顏色和透明度。它會返回一個包含了那個像素的RGBA值的vec4值 。所以這里我會在UV1中查找到瓦片貼圖的顏色值，然後在UV2中查到光照貼圖的顏色值，最後把兩個值相乘。
你應該注意到了我先是把光照貼圖的顏色值兩兩相乘了。因為貼圖顏色值范圍為0.0-1.0，所以很顯然，如果用白色值vec4(1.0, 1.0, 1.0, 1.0)去乘中間灰值vec4( 0.5, 0.5, 0.5,1.0 )，那麼你仍是得到一個中間灰值vec4( 0.5, 0.5, 0.5,1.0 )。將兩個值相乘可以使貼圖更亮，同時也可以使貼圖更暗，這將使你獲得一個很好的可變的亮度范圍。
Ⅷ cocos像素數據->轉JPG數據
因為格式的問題。
cocos引擎中，對於大的背景圖我們一般使用jpg文件格式，jpg壓縮比更大，是有損壓縮，而像素格式使用16位的RGB565格式，格式不一樣所以轉換後大小也不一樣。
圖片本身大小和其所佔內存大小是兩碼事。
Ⅸ cocos creator (1) ——幀動畫
幀動畫，就是通過一系列圖片定義動畫表現的動畫形式，首先我們需要動畫運行所需的所有幀。
這些幀通常以一張大圖的形式(如下)給出，並不附帶任何位置信息。
所以我們首先要將圖片處理成帶位置信息的大圖形式，以便能夠被cocos creator所用。
其次要創建一個承載動畫的節點，並綁定Animation組件。
編輯動畫，包括運行速度，幀事件，運行模式（順序、循環...）。
預覽。
動畫資源就對應於之前animation組件的 cc.AnimationClip 類型的屬性。在資源管理器中新建Animation資源。定義好動畫資源後，就可以直接把這個資源拖到對應的屬性 Default clip 上去。(如上圖)
在層級管理器中選中動畫節點，在動畫編輯器中就可以對動畫進行編輯了。
在動畫編輯器中點擊 編輯 按鈕。在下面的屬性列表中新建動畫需要改變的屬性。因為我們是幀動畫，所以自然要改變的就是 cc.Sprite.SpriteFrame 屬性了。
選中動畫所需的幀拖到該屬性的右邊去。點擊播放按鈕，即可看到動畫效果。
可以在動畫編輯器的右下角修改動畫的采樣率和速度，以改變動畫的幀變化速度。
保存動畫。
選中選中節點，Animation組件下的 Play on Load 屬性，即可在瀏覽器或者模擬器中查看動畫效果。