Qt?ImGUI?wxWidgets?我们写我们的

您好,Khabrovites!我想向您介绍我为游戏引擎编写的UI系统,并在其中创建编辑器。像这样:

因此,在无数次我开始编写引擎时,我坚决决定这次我会做一切正确的事情。这些“好而正确”之一是Unity3DWYSIWYG编辑器。顺便说一句,在此之前,我已经在Qt上开发此类编辑器的经验。到那时,我已经知道,如果我想成为一个真正的好编辑者,这项任务并不容易。这需要一个非常好的和灵活的UI系统,在这个系统中我将非常精通并且了解各种微妙之处。确实,在这样的编辑器中,将有很多自定义小部件,控件等。因此,编辑器的质量和系统UI的功能之间不应有任何妥协。

UI. .. 2D , (- , , , ..), UI .

" , ?" - .

, , , - . - . . , .

UI :

  • UI-

.

UI- : . . - .

UI - , ..

(): , , , . (draw call), , , . API , - .

- , - . , . : , , .

9-slice . , 9 :

, , , , . , .

- , ? ( ) . , - . - .

, , :

简单的精灵,只需伸展
,
9片精灵,按比例拉伸
9-slice ,
显示圆形填充的进度
垂直填充
水平填充
纹理重复
保留长宽比和适合

- . , , . .

.

, - .

:

:

  • ,

  • FreeType

, .. . - , . - , , , - . - , -. , , .

, , . . :

. , . : , , , . . , . , , . , "...", .

, .

- . , , .

.

IRectDrawable

, IRectDrawable. , ( 23), , , . IRectDrawable IDrawable ( ) Transform ( 23, Basis).

, Graphic API , , . , UI . , , , . , . , . , , .

. : , . . . , .

, - . -, . . , .

- , .

IDrawable , .

, - . - .

( , touch-screen), , , . . .

. -, , . , . - - . , , .

CursorAreaEventsListener. , . , , . , EventsSystem, CursorAreaEventListenersLayer.

? ? ? . , . , , . - , , , , , .

. , . , , .. . , . , "" , , .

. , , .

, . , , . , . , , . . .. IRectDrawable.

替代重叠渲染

, , "" . , , , . - , . , .

, , , , .

. ( , IRectDrawable), IDrawable::OnDrawn(). .

. - Actor, , , , , , Actor'. . - Actor'.

Actor' . , . , , , , Actor'.

UI . , UI - Actor'. Widget.

Widget

"" . Actor , , , , Widget' .

Widgt' WidgetLayout, ActorTransform. , , Actor'.

. . . . , "" , . Unity GUI.

WidgetLayer

Actor', Widget' WidgetLayer. - Widget, IRectDrawable WidgetLayout' WidgetLayerLayout.

, . , .. .

Widget', Widget'. , , . , , .

- Widget', Widget'.

WidgetState

- . , . , .. .

Widget' - WidgetState'. -. - , . . . , . . , . .

. - Actor', Widget', Layout', WidgetLayer' .. , - . , children/0/transform/anchor.

, . ,

  • -

  • -

  • -

  • -

, , ..

Widget', .

Widget'

, Widget' Widget, . . - Widget, . - .

, , . Widget', Widget', "" Widget'. , Widget' .

Layout-Widget'

Widget', Widget'. , HorizontalLayout . VerticalLayout, . GridLayout, .

组合水平/垂直布局
Horizontal/VerticalLayout

Layout' ( , ), , . .

选项编辑器中响应式布局的示例

Layout' :

  • Widget'. , .

  • , . Layout', , . ", "

  • . - , ,

  • , WidgetLayout

Widget'

UI , . , Widget . Widget , KeyboardEventsListener, CursorAreaEventsListener.

:

  • Checkbox

  • ,

  • / progress-bar

  • / scroll bar

- , . .

PopupWidget. . . . , . , , : , .

分层上下文菜单

, .

: anti-aliased

. , OpenGL D3D, , "". .

anti-aliasing'. : , , . , , , .

, . , 8 . . ""

, , , . , , . , . , , . , , 60 .

, . ++ .

Unity3D, . Unity3D " ", , , "", . . , Canvas', , Unity3D.

, , . . , Actor', . - Widget. . .

Widget'

, - Widget', . , . , , . - .

. , API , . , . .

, - Widget , , . - , , .

, Widget' CheckClipping, . : , . , Widget'. - -, . .

Widget' . , , . , .

, . , , .

. , . "" . Widget - , , . Widget' , , . , "" , , . , , , .

, , . , .. .

, ? ? , . , .

:

  • Widget' . Widget'

  • Actor'

UI , . .

6 -. . ImGUI, , "" , .

PS: - 2D , . . , .




All Articles