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 两种方向。前者会按照节点在 层级管理器 中显示顺序从上到下排列;后者会按照节点显示从下到上排列。


作者留言:
今天自己的微信公众号上市了,虽然后面的还很艰难,但今天还是开心的!

如果你看到了这篇文字不妨帮我加个关注《码农云库》微信公众号!
里面主要免费提供计算机相关的电子书籍!

发布了40 篇原创文章 · 获赞 48 · 访问量 1万+

猜你喜欢

转载自blog.csdn.net/qq_45021180/article/details/104662689