Qt?ImGUI?wxWidgets?私たちは

こんにちは、Khabrovites!私がゲームエンジン用に作成したUIシステムについて説明したいと思います。このシステムで、エディターを作成します。このような:

それで、私は何度もエンジンを書き始めました、そして今度は私がすべてをうまくそして正しくすることを固く決心しました。これらの「善良」の1つは、Unity3DのWYSIWYGエディターです。ちなみに、その前に私はすでに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