CocosCreator 屏幕適配、UI佈局排版 (第十二篇)

前言:
這篇文章將會提及屏幕的適配問題、Widget(對齊組件)的使用、Label組件的文字排版、以及容器Layout 組件。

一、屏幕適配

1.屏幕適配主要是用來解決不同的手機分辨率不同的問題。因爲我們在遊戲開發的時候那個畫布Canvas就設置好了,雖然一般在設置分辨率的時候都是適合大部分的手機,但還是有一部分手機不匹配。對於不匹配的分辨率就要進行等比的縮放操作,這個時候就出現了遊戲界面寬度縮放到和手機屏幕一樣寬或者遊戲界面高度縮放到和手機屏幕一樣高,這樣可能會出現黑邊或者顯示不全的現象。

設計分辨率( Design Resolution )
適配高度( Fit Height )
適配寬度( Fit Width )

在這裏插入圖片描述

這裏可以根據自己的需要來選擇屏幕適配方案!


二、Widget 組件處理位置對齊

剛剛前面提到的屏幕適配方案,它有時會出現顯示不全的問題。舉個例子:本來我們的遊戲界面左下角有一個跳躍的按鈕,由於屏幕適配界面顯示不全,那有可能這個按鈕就會被裁剪掉。這樣的結果肯定是不行的,那麼解決這個問題就需要用到Widget組件了。
你先看一下下面這個組件的屬性,你大致可以猜到這個組件使用幹嘛的了~
在這裏插入圖片描述

這個組件的作用是:使得這個節點相對屏幕來說在什麼位置!
這裏有幾個值得注意的地方:

  1. Widget組件控制的是節點相對屏幕的位置。
  2. 通過需要勾選不同的屬性來控制位置,當然可以是以像素爲單位,也可以是以%百分比來衡量。
  3. 當我們勾選的左右或者上下的時候,這個節點就會自動的拉伸放大。

三、這裏介紹一下Sprite組件的Sliced(九宮格)模式

Sliced模式在Sprite組件裏面可以找到,它的主要作用就是拉伸放大一個圖形,放大後的圖形基本的輪廓是不變的。 舉個例子:就像我們QQ的聊天氣泡,不管我們輸入多少的文字,那個氣泡的輪廓還是沒有發生改變的,改變的只是中間部分的大小。

在選擇九宮格模式後,就可以點擊右邊的編輯按鈕就能進入下面的界面:

在這裏插入圖片描述
通過調節水平和垂直各兩根分隔線從而控制縮放與不縮放的部位!


四、Label 組件的文字排版問題

屬性介紹:
string 文本內容
Horizontal Align (水平對齊)
Vertical Align (垂直對齊)
Font Size 字體大小
Line Height 行高

Overflow(排版模式)

模式 含義
截斷(Clamp) 截斷模式下,文字首先按照對齊模式和尺寸的要求進行渲染,而超出約束框的部分會被隱藏(截斷)。
自動縮小(Shrink) 自動縮小模式下,如果文字按照原定尺寸渲染會超出約束框時,會自動縮小文字尺寸以顯示全部文字
自動適應高度(Resize Height) 自動適應高度模式會保證文字的約束框貼合文字的高度,不管文字有多少行。這個模式非常適合顯示內容量不固定的大段文字,配合 ScrollView 組件可以在任意 UI 區域中顯示無限量的文字內容。

在這裏插入圖片描述

文字節點的錨點:
文字節點的錨點和文字在約束框中的對齊模式是需要區分的兩個概念。在需要靠文字內容將約束框撐大的排版模式中(如 Resize Height ),要正確設置錨點位置,才能讓約束框向我們期望的方向調整。
例如,如果希望文字約束框向下擴展,需要將錨點( Anchor )的 y 屬性設爲 1 。如下圖所示:
文字可以配合對齊掛件(Widget)


五、Layout組件(自動佈局)

這個佈局在創建那些什麼人物列表可以非常好用~

1. 水平排列方向(Horizontal Direction)

可以設置 Left to Right 或 Right to Left 兩種方向,前者會按照節點在 層級管理器 中顯示順序從左到右排列;後者會按照節點顯示從右到左排列。

2. 垂直排列方向(Vertical Direction)

可以設置 Top to Bottom 或 Bottom to Top 兩種方向。前者會按照節點在 層級管理器 中顯示順序從上到下排列;後者會按照節點顯示從下到上排列。


作者留言:
今天自己的微信公衆號上市了,雖然後面的還很艱難,但今天還是開心的!

如果你看到了這篇文字不妨幫我加個關注《碼農雲庫》微信公衆號!
裏面主要免費提供計算機相關的電子書籍!

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章