在使用Layabox的2d精靈時,我們會需要很多渲染圖片的需求,那麼,如果做到使用最小的代價實現圖片的渲染呢。
合併圖集
爲什麼要合併圖集呢。如果你一個圖片是由多張圖片組成的,正常情況,在webgl模式下,渲染一張圖片,就是一次drawcall,但是呢,如果紋理沒有切換,只是切換渲染的位置,Layabox會自動給你合批,你相當於一次drawcall就實現了整張圖片的渲染。
這個問題發現是我之前測試過官網的瓦塊圖時,發現設置cacheAs爲normal時,它的drawcall只需要一次。而我自己設置的瓦塊圖,需要渲染多少個瓦塊,就有多少drawcall。後來就發現了這個,如果當前的瓦塊都屬於一張圖集,那麼,自動合批,會一次性給你渲染出來。
所以,如果都是一個精靈使用的,而且圖片還不大,可以合併成一張圖片使用,可以降低性能損耗。
設置cacheAs
如果出現多個單個圖片,或者無法合併成圖集的情況。我們還要想辦法降低性能。那就是用到cacheAs方法,這個屬性有三個值,'none’就是默認,不緩存。‘normal’就是正常緩存,會把你的精靈渲染的內容,生成graphics的命令模式,但是性能降低不是很多,多張圖片切換,還是有很多的drawcall。‘bitmap’直接將渲染完成的紋理緩存起來,這種會增加內存和緩存的佔用,如果你的一張精靈就幾千次drawcall渲染出來,使用這種方式你可以節省幾千次的drawcall。
那麼,如果地圖過大的話,我們就要靈活使用,即不能佔用太大的內存和緩存,還能減少drawcall的方法。
我的實現方式,是增加地圖塊對象,每個地圖塊固定寬高,把整個地圖分成多張地圖塊。根據當前地圖顯示範圍進行顯示隱藏。顯示,設置精靈的cacheAs爲’bitmap’,並渲染一次即可。而無法顯示的瓦塊,我們可以把cacheAs設置爲’none’,並且將其graphics調用clear事件清空畫布。
希望我總結的經驗,能讓大家有些收穫。