【UE4 C++基础系列】:
【视频教程】:
【导图】:
第一部分、DPI屏幕适配
一、SOverlay来做UI的布局。
【1.1】自定义SlateWidgetStyle.h中再添加一个SlateBrush以放置屏幕中央菜单背景图片
//FShitMenuStyle 即ShitMenuWidgetStyle样式中添加两个SlateBrush,存放图片。UPROPERTY(EditAnywhere,Category=MenuHUD)
FSlateBrush ShitMenuHUDBackGroundBrush;
UPROPERTY(EditAnywhere, Category = MenuHUD)
FSlateBrush ShitMenuBackGroundBrush;
【1.2】自定义HUDWidget.cpp中添加Overlay层并包含两图片
【1】Overlay小知识
首先介绍一下Overlay,简单来说,Overlay就相当于一个盒子,它可以像PS图层那样布置组件,图层最上面置底,最下面置顶,我们要用的就是它的多槽,对齐和Padding功能。
比如举个例子,比如说我们的Button,Button.Style.Image是会跟Button变的,我们如果要在Button周围添加些小图片、还要给Button里面添加文字就需要用到Overlay了,毕竟Button组件只有一个槽。
我们本节用它来作为基础层来加Widget(也就是没有Canvas Panel,直接Overlay作为底层上)
【2】代码实现
这个跟UMG做UI差不多啦,网页也是,C++代码属性名和UMG Widget属性名差不多,相互对应。SNew(SOverlay)——从Palette拽一个Overlay到Hierarchy层级
+SOverlay::Slot()——给Overlay Widget下面放东西,添加槽
.H/VAlign——如子组件的父层Slot(Overlay Slot) 对齐方式
[...]——给UI添加Image组件,然后把WidgetStyle.SlateBrush中存的图片添加到屏幕上
注意ChildSlot[];(分号结尾,常常加着加着就没了或忘了)
MenuStyle是从头文件来的。
const struct FShitMenuStyle* MenuStyle;
ChildSlot
[
SNew(SOverlay)
+SOverlay::Slot()
.HAlign(HAlign_Fill)
.VAlign(VAlign_Fill)
[
SNew(SImage)
.Image(&MenuStyle->ShitMenuHUDBackGroundBrush)
]
+ SOverlay::Slot()
.HAlign(HAlign_Center)
.VAlign(VAlign_Center)
[
SNew(SImage)
.Image(&MenuStyle->ShitMenuBackGroundBrush)
]
];//分号结尾
【1.3】ShitController源文件中把第一篇中的鼠标选项设置为不打锁。
自适应要拖动边框,所以Do Not Lock。
InputMode.SetLockMouseToViewportBehavior(EMouseLockMode::DoNotLock);
然后编译Build一下。
【1.4】可以自定义设置图片大小
因为我们【1.2】代码中已经定义了HUD背景图铺满屏幕、Menu菜单背景图居中。所以我们可以自定义设置Menu菜单背景图的图片大小,如20、20就是个小不点,我们需要使用图片的默认尺寸大小,所以黄色小箭头归零。(也可以在代码里写死,但在SlateWidgetStyle中调节我们是可以直接预览到变化的,而且后面不是要DPI适配嘛,所以不能代码中写死。)
二、DPI Scaling 屏幕自适应
【2.1】项目默认设置
在项目设置中进行设置,默认是这样的
【操作】全部删掉,只剩下屏幕尺寸(Resolution=xxx,Scale=1.0),我们马上要通过代码来自适应。
【知识点】:DPI Scale Rule ,默认是Shortest Rule 根据最短边来进行计算。
屏幕尺寸比例大多为16:9,所以按它来算:720:480
1280:720
1920:1080
3840:2160
大多屏幕都是1080P的,所以它是按照
的规则进行缩放的,4K的屏幕,就以2160作分母。
默认的是480就停了,也就是窗口到720*480的时候就不再进行自适应缩放了。可以看到下方屏幕宽度小于480以后背景图片都没了。
其实我们只需要加个(Res=0,Scale=0)的关键帧就行了,但是为了掌握 UE4 C++基础,还得啃一下代码,两种方法其实最终效果都一样。
我们在学习网页大数据展示的时候也遇到过屏幕适配知识,可以综合着一起学习应用程序、网页、手机APP的DPI相关知识点。
【2.2】代码设置
【头文件】:
我们再在自定义SlateWidget.h中添加如下:变量和函数的声明分开,便于分辨。
private:// 函数声明float GetUIScaler() const;
FVector2D GetViewportSize() const;
private: //变量声明TAttributeUIScaler;
【源文件】:
源文件Construct函数中:绑定缩放规则方法。
GetUIScaler方法我们会在下面实现。
UIScaler.Bind(this, &SShitMenuHUDWidget::GetUIScaler);
绑定一个任意函数,该函数将被调用来根据需要生成该属性的值。