Qt? ImGUI? wxWidgets? Nós escrevemos nosso

Olá, Khabrovites! Quero falar sobre meu sistema de IU, que escrevi para meu mecanismo de jogo, no qual fiz um editor para ele. Como isso:

Então, pela enésima vez, comecei a escrever o motor e decidi firmemente que desta vez faria tudo bem e corretamente. Um desses "bons e certos" é um editor WYSIWYG à la Unity3D. A propósito, antes disso eu já tinha experiência no desenvolvimento de tais editores no Qt. E naquela época eu já entendi que a tarefa não é fácil se eu quiser ser um editor realmente bom. E isso requer um sistema de IU muito bom e flexível, no qual estarei muito bem versado e conheço todos os tipos de sutilezas. Na verdade, em tal editor, haverá muitos widgets personalizados, controles, etc. Portanto, não deve haver compromisso entre a qualidade do editor e os recursos da IU do sistema.

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

" , ?" - .

, , , - . - . . , .

UI :

  • UI-

.

UI- : . . - .

UI - , ..

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

- , - . , . : , , .

9-slice . , 9 :

, , , , . , .

- , ? ( ) . , - . - .

, , :

Sprite simples, apenas alongamentos
,
Sprite de 9 fatias, alonga-se proporcionalmente
9-slice ,
Mostra o progresso com preenchimento circular
Enchimento vertical
Preenchimento horizontal
Repetição de textura
Preservar proporção e ajuste

- . , , . .

.

, - .

:

:

  • ,

  • FreeType

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

, , . . :

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

, .

- . , , .

.

IRectDrawable

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

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

. : , . . . , .

, - . -, . . , .

- , .

IDrawable , .

, - . - .

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

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

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

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

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

. , , .

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

Renderização de sobreposição alternativa

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

, , , , .

. ( , 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, .

Combinação Horizontal / VerticalLayout
Horizontal/VerticalLayout

Layout' ( , ), , . .

Um exemplo de layout responsivo no editor de opções

Layout' :

  • Widget'. , .

  • , . Layout', , . ", "

  • . - , ,

  • , WidgetLayout

Widget'

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

:

  • Checkbox

  • ,

  • / progress-bar

  • / scroll bar

- , . .

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

Menu de contexto hierárquico

, .

: 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