unreal 自定义 Slate Style Sets

搜集到的最有价值的一篇教学,按照作者的方法尝试中遇到了一些问题。【感谢这位作者!

网址:https://wiki.unrealengine.com/Slate_Style_Sets_Part_2

在此,我将详述我的制作过程。本文原创,转载请写明出处,违者必究!

首先创建 xxStyle, 我这里测试就以 Test命名。

 1 #pragma once
 2 #include "SlateStyle.h"
 3
 4 class TestStyles
 5 {
 6 public:
 7     static void Initialize();
 8
 9     static void Shutdown();
10
11     static const class ISlateStyle& Get();
12
13     static FName    GetStyleSetName();
14
15 private:
16
17     static TSharedRef<class FSlateStyleSet>    Create();
18
19     static TSharedPtr<class FSlateStyleSet>    Instance;
20 };

这个类是自己创建的,没有经过 UnrealEditor 的创建向导。(当然你也可以使用向导)

 1 #include "Test05.h"
 2 #include "TestStyles.h"
 3 #include "SlateGameResources.h"
 4
 5
 6 TSharedPtr<FSlateStyleSet> TestStyles::Instance = nullptr;
 7
 8
 9 void TestStyles::Initialize()
10 {
11     if (!Instance.IsValid())
12     {
13         Instance = Create();
14
15         FSlateStyleRegistry::RegisterSlateStyle(*Instance);
16     }
17 }
18
19 void TestStyles::Shutdown()
20 {
21     FSlateStyleRegistry::UnRegisterSlateStyle(*Instance);
22     ensure(Instance.IsUnique());
23     Instance.Reset();
24 }
25
26 const class ISlateStyle& TestStyles::Get()
27 {
28     return *Instance;
29 }
30
31 FName TestStyles::GetStyleSetName()
32 {
33     static FName StyleSetName(TEXT("TestStyles"));
34     return StyleSetName;
35 }
36
37 TSharedRef<class FSlateStyleSet> TestStyles::Create()
38 {
39     return FSlateGameResources::New(TestStyles::GetStyleSetName(), "/game/ui", "/game/ui");
40 }

这里需要注意:FSlateGameResources 资源路径的相对位置。 /game 代替了 /context, 存放在 /context 目录下的资源,统一在地址路径中更名为 /game。

这个路径很重要!遇到错误的时候,一定要回来看看这个路径,看看能否找到 style 资源。

在这里,我没有按照网页中作者的方式创建 GameModule。(事实上我尝试了,但我失败了,暂时不想在此花费时间,所以改路。我放在了自定义的GameMode中)。

我认为只要能合理化的让 TestStyles 初始化,放哪都不是问题,(当然或许需要考虑创建的时序性,但目前我还没此顾虑)。

1 AMyGameMode::AMyGameMode()
2 {
3    this->HUDClass = AMyHUD::StaticClass();
4    FSlateStyleRegistry::UnRegisterSlateStyle(TestStyles::GetStyleSetName());// 参考网页的作者。只为防重复注册。
5    TestStyles::Initialize();
6 }

下面这个类,是由 UnrealEditor 向导生成的,操作如下:

在 Class 目录下创建 New Class。

 1 #pragma once
 2
 3
 4 #include "Styling/SlateWidgetStyle.h"
 5 #include "SlateWidgetStyleContainerBase.h"
 6
 7 #include "GlobalTestWidgetStyle.generated.h"
 8
 9 /**
10  *
11  */
12 USTRUCT()
13 struct TEST05_API FGlobalTestStyle : public FSlateWidgetStyle
14 {
15     GENERATED_USTRUCT_BODY()
16 public:
17
18     FGlobalTestStyle();
19     virtual ~FGlobalTestStyle();
20
21     // FSlateWidgetStyle
22     virtual void GetResources(TArray<const FSlateBrush*>& OutBrushes) const override;
23     static const FName TypeName;
24     virtual const FName GetTypeName() const override { return TypeName; };
25     static const FGlobalTestStyle& GetDefault();
26
27     UPROPERTY(EditAnywhere, Category = Appearance)
28     FTextBlockStyle textBlockStyle;
29 };
30
31 /**
32  */
33 UCLASS(hidecategories=Object, MinimalAPI)
34 class UGlobalTestWidgetStyle : public USlateWidgetStyleContainerBase
35 {
36     GENERATED_BODY()
37
38 public:
39     /** The actual data describing the widget appearance. */
40     UPROPERTY(Category=Appearance, EditAnywhere, meta=(ShowOnlyInnerProperties))
41     FGlobalTestStyle WidgetStyle;
42
43     virtual const struct FSlateWidgetStyle* const GetStyle() const override
44     {
45         return static_cast< const struct FSlateWidgetStyle* >( &WidgetStyle );
46     }
47 };
 1 #include "Test05.h"
 2 #include "GlobalTestWidgetStyle.h"
 3
 4
 5 FGlobalTestStyle::FGlobalTestStyle()
 6 {
 7
 8 }
 9
10 FGlobalTestStyle::~FGlobalTestStyle()
11 {
12 }
13
14 const FName FGlobalTestStyle::TypeName(TEXT("FGlobalTestStyle"));
15
16 const FGlobalTestStyle& FGlobalTestStyle::GetDefault()
17 {
18     static FGlobalTestStyle Default;
19     return Default;
20 }
21
22 void FGlobalTestStyle::GetResources(TArray<const FSlateBrush*>& OutBrushes) const
23 {
24
25 }

  

这里是重点, 我自己在作者的网页中没有看懂,最终咨询了同事后试验才找到正路。

在 Content 目录中创建 Style. 这个地址一定要是之前提到的 FSlateGameResources::New(  中使用的 地址,目前我用的是 /Game/ui 位置的地址,(参照上文解释)/Game/ui 的位置应该被替换成 /content/ui,如图:

得到一个资源,这个名字也很重要,之后要对应上。

现在就双击修改里面的内容。

这个东西会存在,就是因为自定义的 FSlateWidgetStyle 中定义了

1  UPROPERTY(EditAnywhere, Category = Appearance)
2
3  FTextBlockStyle textBlockStyle; 

这正是它。

我修改了字体和字体大小。

到了最后一步,实例化显示了,测试代码片段如下,我写在

void AMyHUD::BeginPlay()
{
        // 注意,这里的 "TestButtonStyle01" 是资源的名字
        auto ss = TestStyles::Get().GetWidgetStyle<FGlobalTestStyle>("TestButtonStyle01");  

       textBlock = SNew(STextBlock)
                    .TextStyle(&ss.textBlockStyle)
                    .Text(FText::FromString("Hello World !"));   

      GEngine->GameViewport->AddViewportWidgetContent(SNew(SWeakWidget).PossiblyNullContent(textBlock.ToSharedRef()));
}

所有步骤都做完了。可以显示了。效果如图:

原文中提到需要用到 Brush 的地方,以上代码不能工作,需要有其他步骤。测试成功后另写博文。

时间: 2024-08-25 11:03:57

unreal 自定义 Slate Style Sets的相关文章

自定义弹窗Style样式

由于系统默认alert弹出窗口不能自定义样式,有可能不符合网站的风格,虽然网上应该有很多这样的JS 但是还是自己写的比较放心,顺便练习一下对DOM的操作 支持IE6下的SELECT不能遮罩的问题,谷歌支持圆角,IE6下就比较丑了,四四方方的,不过可以自定义自己喜欢的样式 听取建议后,修改了position:fixed, IE6下用hack处理了. 点击看效果: 点击模拟Alert弹出框 点击模拟Alert弹出框 点击模拟Alert弹出框 所需CSS: <style type="text/c

深入理解Android 自定义attr Style styleable以及其应用

相信每一位从事Android开发的猿都遇到过需要自己去自定义View的需求,如果想通过xml指定一些我们自己需要的参数,就需要自己声明一个styleable,并在里面自己定义一些attr属性,这个过程相信大家都比较了解.当然,属性其实也不一定需要和View配合使用,比如我想通过一个Theme中的style对一个库进行一些简单参数的配置,这应该怎么做呢?我今天在封装一个库时在这个地方浪费了较多时间,最后没办法,到处搜搜资料,记录在这里吧,相信对大家都有帮助. attr和styleable的关系 首

WPF 自定义Metro Style窗体

为了使WPF程序在不同版本的操作系统上保持一致的显示效果,我们需要重写WPF控件样式.这篇博客将展示如何创建一个Metro Style的WPF窗体. 首先先看一下最终窗体的效果图, 通过截图我们可以看出来这个窗体由两部分组成,顶部为最小化和关闭按钮,其他区域为窗体的显示区域.请看下面的具体实现代码, MetroWindow样式: <ResourceDictionary xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentat

UNREAL ENGINE 4.12 正式发布!下载地址

UNREAL ENGINE 4.12 正式发布! 下载地址:https://www.unrealengine.com/ Alexander Paschall 在 June 1, 2016 |功能新闻社区 Share on Facebook Share on Twitter Share on Google+ Share on LinkedIn 此版本内含虚幻引擎 4 的数百个更新,以及 GitHub 虚幻引擎开发者社区提交的 106 项改良!特此对虚幻引擎 4.12 版本的贡献者们表达诚挚谢意:

android 自定义Style初探---ProgressBar

系统自带的ProgressBar太丑了,所以我决定自定义一个Style. 原来的Style <?xml version="1.0" encoding="utf-8"?><layer-list xmlns:android="http://schemas.android.com/apk/res/android"> <item android:id="@android:id/background">

Google map自定义style(午夜蓝等)

最近有个项目调用google map,希望用午夜蓝样式的地图,找了好久找到下面这个网站,提供了很多自定义的style https://snazzymaps.com/explore

ActionBar 自定义布局定义

Android系统中ActionBar默认的布局不美观且难于控制,通过为ActionBar自定义布局的方式可以灵活控制ActionBar. 效果: 工具/原料 android集成开发环境eclipse.ADT android sdk 3.0及以上 方法/步骤 自定义Activity主题和ActionBar样式 在新建的android工程的res/values/styles.xml添加自定义ActionBar样式的代码和自定义Activity主题的代 码,并在AndroidMainfest.xml

WPF 创建自定义窗体

在前面的一篇博客"WPF 自定义Metro Style窗体",展示了如何创建一个类似于Metro Style的Window,并在程序中使用.但是这个窗体不能够自由的改变大小.今天的博客中将展示如何创建一个可以通过拖拽来改变大小的Metro Style窗体. 实现思路,在Windows ControlTemplate中增加8个背景透明Rectangle,分别放置于Left, Right, Top, TopLeft, TopRight, Bottom, BottomLeft, Bottom

Progressbar自定义大小

1.默认的圆形进度条有点大,自己可以改小一点 (1)引用自定义的style <ProgressBar android:id="@+id/footer_progressbar" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_marginRight="10dp" style="@styl