屏幕適配

屏幕適配

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 相對父親節點大小拉伸問題

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

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