1. 程式人生 > >屏幕適配

屏幕適配

發現 分辨率 title cto 對齊 nbsp color 解決 不用

屏幕適配

1.一款遊戲能適應不同的手機分辨率,這個就是屏幕適配

2.creator屏幕適配策略:1固定高度,2固定寬度,3固定寬高度

3.cc.Canvas組件:

決定屏幕的適配策略

大小為屏幕的大小

4.美術設計分辨率:

美術任意在一個固定的分辨率下來設計資源,我們在canvas組件配置好進行釋放.

什麽是固定高度和固定寬度?

技術分享圖片


技術分享圖片



固定高度適配詳解

技術分享圖片




設計分辨率


1:設計分辨率與固定寬度和高度策略:

橫屏遊戲藍色16:9的比例,橙色4:3

固定高度,我們適配的時候會把所有的屏幕的比例

縮放到高度是一樣的,唯一不用的是在寬度這個地方.

技術分享圖片


如果是固定寬度,就把寬度設計成一樣的,唯一不同的就是高度

技術分享圖片



界面適配

1背景圖做到能適配任何主流的手機分辨率

2將界面布局分為9大停靠點

技術分享圖片


3.首先將設計分辨率設置為640x960 豎屏我們使用固定寬度為縮放比例

那麽他在寬度的方向都是完全一致的,不一致的可能都是高度

技術分享圖片


首先你放背景圖的時候,要先調整這個背景圖調整他的縮放,

一定使用縮放來調整,然後就是縮放寬高也要一致最好。

比如我們放大到1.25倍

技術分享圖片


我們看到,因為是固定寬度適配,所以他的寬度要和邊一致

高度就是按照比例來了,這時候你發現無論哪種分辨率他都可以適配了.

這就符合了第一個要求,背景圖適配任何手機分辨率.

把背景圖上下流出來一節,這樣適配同的時候,就會有擴展的余地

技術分享圖片



9個停靠點

現在我們在top的位置 放一個東西

技術分享圖片


在Canvas最下面也放一個 節點

技術分享圖片

中間放一個

技術分享圖片

這時候在測試一下,發現一個問題:

在不同分辨率下雖然背景 適配了,但是裏面的內容病沒有適配

技術分享圖片

技術分享圖片

也就是說 上中下你沒有對應的停靠點,這時候就要加上

一個組件就是cc.Widget





cc.Widget組件

1cc.Widget組件幫助解決停靠點的問題

2cc.Widget能夠幫助解決和父親大小保持一致的問題

3指定要相對的節點,必須是父節點或父節點以上的節點


我們在要相對父節點停靠的節點添加一個cc.Widget組件

技術分享圖片

1target就是參考點:指定的對齊目標.只能是當前節點的

父節點,以上的節點, 為空默認就是父節點

2.Horizontal Center 對準父節點的水平中點

技術分享圖片

3.Vertical Center 對準父節點的 垂直終點

技術分享圖片


選擇這個表示以父親的頂上 來進行停靠


技術分享圖片

這時候 無論如何改變 都是居於父節點的頂部 停靠

技術分享圖片


如果你節點是左上 就這樣 以此類推

技術分享圖片


中心點這樣表示 就行

技術分享圖片


還有一種情況 就是當上下位置改變後,中間紅色區域

如何連著上下兩個區域.

技術分享圖片 技術分享圖片


這時候 中間這個紅色的就需要一個單獨的widget組件

這樣設置 就ok啦

技術分享圖片



所以widget可以解決兩個問題:

1 停靠點對齊問題

2 相對父親節點大小拉伸問題


這樣 就是隨著父節點的大小變化而變化

技術分享圖片


而這樣就只 解決垂直方向的大小

技術分享圖片





屏幕適配