手機上如何寫html網(wǎng)頁seo搜索引擎優(yōu)化就業(yè)前景
一、為什么要使用九宮格圖像拉伸
相信做過前端的同學都知道,ui (圖片)資源對包體大小和內(nèi)存都有非常直接的影響。
-
通常ui 資源都是圖片,也是最占資源量的資源類型,游戲中的ui 資源還是人機交互的最重要的部分,因此質(zhì)量要求都非常高,通常都是使用rgb32位真彩色,這就導致資源量比較大。
-
通常ui資源在打包時,都會以圖集的形式展現(xiàn),在加載到內(nèi)存的時候,是整塊加載,如果ui 沒優(yōu)化好,則會增大內(nèi)存的開銷。
因此為了減少資源量,增強ui 資源的復用,解決圖片被拉伸變形、模糊的問題, 通常使用九宮格ui 的方式來對資源進行優(yōu)化。
如下圖:
我們可以看到,圖像周圍有一圈綠色的線條,表示當前九宮格分割線的位置。
將鼠標移動到分割線上,可以看到光標形狀改變了,這時候就可以按下并拖拽鼠標來更改分割線的位置。
我們分別拖動上下左右四條分割線,將圖像切分成九宮格,九個區(qū)域在 Sprite 尺寸(size
)變化時會應用不同的縮放策略。
二、九宮格圖像拉伸使用步驟
(1)、設(shè)置 Sprite 組件使用 Sliced 模式
(2)、在資源管理器中,選擇需要調(diào)整九宮格的 spriteFrame 資源
(3)、在屬性檢查器中,選擇最下方的“Edit”編輯按鈕
(4)、在九宮格編輯窗口,編輯上、下、左、右邊框的位置
三、九宮格圖像拉伸調(diào)整技巧
-
可以鼠標滾輪放大圖片預覽試圖,便于精準調(diào)整邊框位置。
-
如果不知道邊框位置應該調(diào)整到多少合適,可以參考美術(shù)設(shè)計圖的圓角角度進行調(diào)整。
如圖,我們需要以九宮格拉伸實現(xiàn)以下帶圓角的背景框效果:
我們根據(jù)藍湖上,設(shè)計圖的圓角角度(此處為12) ,依次調(diào)整邊框位置,即可達到預期效果:
編輯器調(diào)整: