查看: 317|回复: 11

[编程指南] 【Slate概述 | Unreal Engine】

[复制链接]

1

主题

273

帖子

7万

积分

管理员

Rank: 9Rank: 9Rank: 9

积分
73034
发表于 2016-6-27 00:51:34 | 显示全部楼层 |阅读模式



editor.jpg



本页面的内容:

      
概述

声明式语法

构成

风格

输入

输出

布局图元

用户驱动的布局

开发者工具

引擎访问
     概述
Slate 是一种完全自定义的、平台无关的用户界面架构,其设计目的是使得构建工具及应用程序(比如虚幻编辑器)的用户界面或者游戏中的用户界面变得更加有趣、高效。它结合了一种可以轻松设计、布局及风格化组件的声明式语法,使得可以轻松地创建用户界面并进行迭代开发。

Slate用户界面解决方案使得为工具及应用程序创建图形用户界面变得非常简单,并且可以快速地在界面上进行迭代开发。
声明式语法
Slate的 声明式语法 使得程序员可以直接构建用户界面,而不需要添加中间层来进行处理。提供了一套完整的宏来简化声明及创建新控件的过程。

SLATE_BEGIN_ARGS( SSubMenuButton )    : _ShouldAppearHovered( false )    {}    /** The label to display on the button */    SLATE_ATTRIBUTE( FString, Label )    /** Called when the button is clicked */    SLATE_EVENT( FOnClicked, OnClicked )    /** Content to put in the button */    SLATE_NAMED_SLOT( FArguments, FSimpleSlot, Content )    /** Whether or not the button should appear in the hovered state */    SLATE_ATTRIBUTE( bool, ShouldAppearHovered )SLATE_END_ARGS()构成
Slate的构成架构使得可以轻松地快速排列用户界面元素来进行原型设计和迭代开发。

这里是一个正在构建的用户界面的片段:

// Add a new section for static meshesContextualEditingWidget-AddSlot().Padding( 2.0f )[    SNew( SDetailSection )    .SectionName("StaticMeshSection")    .SectionTitle( LOCTEXT("StaticMeshSection", "Static Mesh").ToString() )    .Content()    [
SNew( SVerticalBox )
+ SVerticalBox::Slot()
.Padding( 3.0f, 1.0f )
[
     SNew( SHorizontalBox )
     + SHorizontalBox::Slot()
     .Padding( 2.0f )
     [

  SNew( SComboButton )

  .ButtonContent()

  [

      SNew( STextBlock )

      .Text( LOCTEXT("BlockingVolumeMenu", "Create Blocking Volume") )


.Font( FontInfo )

  ]

  .MenuContent()

  [

      BlockingVolumeBuilder.MakeWidget()

  ]
     ]
]    ]];
上面的语法创建了以下用户界面元素:

Slate_composition.jpg


风格
您可以创建风格,并将其应用到一个控件的各个部分上。这使得在用户界面上迭代处理组件的外观、共享及重用风格变得更加容易。

// Tool bar{    Set( "ToolBar.Background", FSlateBoxBrush( TEXT("Common/GroupBorder"), FMargin(4.0f/16.0f) ) );    Set( "ToolBarButton.Normal", FSlateNoResource() );      // Note: Intentionally transparent background    Set( "ToolBarButton.Pressed", FSlateBoxBrush( TEXT("Old/MenuItemButton_Pressed"), 4.0f/32.0f ) );    Set( "ToolBarButton.Hovered", FSlateBoxBrush( TEXT("Old/MenuItemButton_Hovered"), 4.0f/32.0f ) );    // Tool bar buttons are sometimes toggle buttons, so they need styles for "checked" state    Set( "ToolBarButton.Checked", FSlateBoxBrush( TEXT("Old/MenuItemButton_Pressed"),  4.0f/32.0f, FLinearColor( 0.3f, 0.3f, 0.3f ) ) );    Set( "ToolBarButton.Checked_Hovered", FSlateBoxBrush( TEXT("Old/MenuItemButton_Hovered"),  4.0f/32.0f ) );    Set( "ToolBarButton.Checked_Pressed", FSlateBoxBrush( TEXT("Old/MenuItemButton_Pressed"),  4.0f/32.0f, FLinearColor( 0.5f, 0.5f, 0.5f ) ) );    // Tool bar button label font    Set( "ToolBarButton.LabelFont", FSlateFontInfo( TEXT("Roboto-Regular"), 8 ) );}
构建界面时使用的风格:

SNew( SBorder ).BorderImage( FEditorStyle::GetBrush( "ToolBar.Background" ) ).Content()[    SNew(SHorizontalBox)    // Compile button (faked to look like a multibox button)    +SHorizontalBox::Slot()    [
SNew(SButton)
.Style(TEXT("ToolBarButton"))
.OnClicked( InKismet2.ToSharedRef(), FKismet::Compile_OnClicked )
.IsEnabled( InKismet2.ToSharedRef(), FKismet::InEditingMode )
.Content()
[
     SNew(SVerticalBox)
     +SVerticalBox::Slot()
     .Padding( 1.0f )
     .HAlign(HAlign_Center)
     [

  SNew(SImage)

  .Image(this, SBlueprintEditorToolbar::GetStatusImage)

  .ToolTipText(this, SBlueprintEditorToolbar::GetStatusTooltip)
     ]
     +SVerticalBox::Slot()
     .Padding( 1.0f )
     .HAlign(HAlign_Center)
     [

  SNew(STextBlock)

  .Text(LOCTEXT("CompileButton", "Compile"))

  .Font( FEditorStyle::GetFontStyle( FName( "ToolBarButton.LabelFont" ) ) )

  .ToolTipText(LOCTEXT("CompileButton_Tooltip", "Recompile the blueprint"))
     ]
]    ]]输入
Slate支持接收鼠标和键盘输入。它提供了一个灵活的按键绑定系统,使得它可以将任何按键组合绑定到任何命令上;且提供了动态修改这些按键绑定的功能。
输出
Slate应用目标平台无关的渲染图元,使得它可以在任何平台上运行。它目前针对的平台是 Unreal Engine 4 RHI,所以它可以在任何虚幻引擎4运行的平台上运行。
布局图元
布局图元使得它可以轻松地创建静态及动态布局。

FString DefaultLayout =

  TEXT( " {" )

  TEXT( "     \"type\": \"tabstack\"," )

  TEXT( "     \"sizecoeff\": 1," )

  TEXT( "     \"children\":" )

  TEXT( "     [" )

  TEXT( "
  {" )

  TEXT( "
      \"type\": \"tab\"," )

  TEXT( "
      \"content\": \"Widget Inspector Tab\"" )

  TEXT( "
  }," )

  TEXT( "
  {" )

  TEXT( "
      \"type\": \"tab\"," )

  TEXT( "
      \"content\": \"Plugin Manager Tab\"" )

  TEXT( "
  }," )

  TEXT( "
  {" )

  TEXT( "
      \"type\": \"tab\"," )

  TEXT( "
      \"content\": \"Debug Tools\"" )

  TEXT( "
  }" )

  TEXT( "     ]" )

  TEXT( " }" );
上面的布局创建了以下用户界面:

Slate_layout.jpg


用户驱动的布局
Slate的 停靠布局 功能将布局设置的权利交到了用户的手中,允许用户重新排列选卡面板并停靠到任何可能的布局中。自定义用户工作环境的功能,使得用户可以按他们喜欢的方式来应用工具。

浮动的选卡

docking_before.jpg



拖拽选卡到停靠目标

docking_place.jpg



停靠后的选卡

docking_after.jpg


开发者工具
Slate Widget Inspector(Slate控件检查器) 提供了调试及分析用户界面和相关代码的方法。这可以辅助跟踪缺陷和不需要的行为,并且可以分析及优化您的用户界面。

widget_inspector.jpg


引擎访问
Slate用户界面系统为程序员提供了到引擎和编辑器的直接访问权;使得它可以更轻松地实现新功能和工具来适应任何开发团队的工作流程及任何项目的需求。
回复

使用道具 举报

0

主题

864

帖子

2858

积分

vip会员

Rank: 1

积分
2858
发表于 2016-7-2 19:33:57 | 显示全部楼层
这个屌,看看要多少金
回复 支持 反对

使用道具 举报

0

主题

923

帖子

3041

积分

vip会员

Rank: 1

积分
3041
发表于 2016-7-3 23:35:04 | 显示全部楼层
感谢楼主的大爱无私
回复 支持 反对

使用道具 举报

0

主题

925

帖子

2975

积分

vip会员

Rank: 1

积分
2975
发表于 2016-7-3 23:35:04 来自手机 | 显示全部楼层
感谢楼主的大爱无私
回复 支持 反对

使用道具 举报

0

主题

885

帖子

2946

积分

vip会员

Rank: 1

积分
2946
发表于 2016-7-4 11:30:57 来自手机 | 显示全部楼层
啊啊啊啊,好多好多好多
回复 支持 反对

使用道具 举报

0

主题

875

帖子

2914

积分

vip会员

Rank: 1

积分
2914
发表于 2016-7-9 14:09:03 来自手机 | 显示全部楼层
这个怎么用呢
回复 支持 反对

使用道具 举报

0

主题

894

帖子

2959

积分

vip会员

Rank: 1

积分
2959
发表于 2016-7-12 08:43:53 来自手机 | 显示全部楼层
看看效果,谢谢分享
回复 支持 反对

使用道具 举报

0

主题

840

帖子

2855

积分

vip会员

Rank: 1

积分
2855
发表于 2016-7-13 03:18:30 | 显示全部楼层
不错的资源啊
回复 支持 反对

使用道具 举报

0

主题

862

帖子

2864

积分

vip会员

Rank: 1

积分
2864
发表于 2016-7-15 12:59:09 来自手机 | 显示全部楼层
这个样子会打消我们的积极性的
回复 支持 反对

使用道具 举报

0

主题

879

帖子

2911

积分

vip会员

Rank: 1

积分
2911
发表于 2016-7-18 21:37:35 | 显示全部楼层
楼主辛苦
回复 支持 反对

使用道具 举报

您需要登录后才可以回帖 登录 | enginedx注册

本版积分规则

 
 



邮件留言:


 
返回顶部