ue4设置图片大小_【UE4】C++基础【04】DPI屏幕适配/菜单布局

【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);

绑定一个任意函数，该函数将被调用来根据需要生成该属性的值。