屏幕適配

屏幕適配

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

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

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