CanvasWebgl項目介紹


CanvasWebgl 介紹

CanvasWebgl 是一個基於webgl 開發的2d繪圖框架,使用TypeScript開發

 

CanvasWebgl的功能,是在屏幕空間 或者 3D空間產生一個畫布

畫布的坐標系采用最直觀的左上角0,0,右下角(w,h)的模式

封裝了圖片集和字體的支持

 

1.屏幕空間

2.3D空間

 

CanvasWebgl 和 引擎的適配需要一個適配器,這個適配器我們已經編寫了BabylonJS 和 Egret3D的版本(egret3d 的 屏幕空間視頻需要稍微修改一下egret3d源碼,已經向egret方面反饋,希望他們給出擴展預留接口)

Babylonjs的版本

 

ScreenCanvas 的尺寸自動使用 屏幕webgl區域的像素分辨率

3DCanvas 需要指定 像素寬、高,會創建一個3D實體,改變此實體的位置,即可移動3DCanvas的位置

 

 

CanvasWebgl代碼用法

第一步是初始化材質,第二步是注冊資源

材質就是一個txt文件,你可以在例子中找到

Svn地址http://code.taobao.org/svn/falconconv/trunk/babylonfan/webgl/canvas

貼圖 支持 jpg png,這些瀏覽器支持的格式,雖然也可以直接注冊貼圖。

通常高級的用法是注冊圖集與字體。這里各提供一個示例。

第三步是創建畫布

我們提供兩種畫布,屏幕空間的和3D空間的,用一個就行了,一般從屏幕空間的開始吧,

那個MyCanvasAction是你自己寫代碼的地方,他繼承自接口 canvasAction

Onresize 尺寸變化通知

Onpointevent 是指針事件,簡潔易懂

Ondraw里面自己發揮了

 

在ondraw里面可以有三類操作

1.直接畫一個貼圖

 

2. 畫一個sprite(圖集中的一塊稱為一個sprite)

"1"是圖集的名字,前面注冊的,第二個參數 是 sprite的名字,最后是一個rect

 

3.畫一行文字

"f1"是字體的名字,第二個參數是顯示的文本,最后是一個rect

用rect的高度作為字體的大小,用rect的左上角開始繪制文字

 

如何制作canvasWebgl的圖集

CanvasWebgl 使用著名工具TexturePacker 制作圖集

通過給tp增加兩個文件,來增加我們的導出格式

可以從svn位置

http://code.taobao.org/svn/falconconv/trunk/babylonfan/webgl/ext_texturepacker

取得這兩個文件

 

Tp的使用略

導出后會得到兩個文件

丟進項目使用即可

如何制作canvasWebgl的字體

我們專門開發了一個字體導出工具

Svn地址

http://code.taobao.org/svn/falconconv/trunk/babylonfan/webgl/fonttool

只需要選擇ttf字體,可以自己將ttf字體 copy 到 font目錄

然后選擇准備導出的文字,默認從word.txt中讀取

然后點菜單里面的export 選擇 合適的貼圖大小 導出即可

導出的資料如圖

放入項目中使用即可

這是sdf字體,不用考慮字號,導出的30點陣的,可以適應很大范圍的縮放,各種字號都不會出問題

通過優化字體shader,可以很容易的實現抗鋸齒、描邊、投影。現在只是簡單做了這個字體shader,還沒有優化

 

小鳥例子

http://101.81.249.255:8039/canvasWebgl_Demo2/

加一個例子


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM