GUI要素についてはどうすればいいですか?


12

注:独自のGUIシステムを作成する予定です。学習に便利で、軽量で、必要なビットのみがあり、ゲームと関係があります。

私はそれを行う方法を考えていました。私が意味する要素は次のとおりです。

  • ラジオボタン
  • ここにテキストを入力してください
  • ボタン
  • スライダー
  • チェックボックス

私はまだそれらを作る方法を探していません。しかし、彼らがどのように行くかについての詳細。

考え

ものを必要とするそれぞれの状態があるので、ほとんどすべてに要素のコンテナがあります。各要素はGUIピースです。

これらにはそれぞれ、位置、グラフィックなどがあります。

私がもっと行き詰まっているのは、それらのロジックです。

そのための私の考えは、モジュール性とシンプルさを可能にするために、MainMenuStartButtonを避けることでした。OptionsOneBackButtonなど。代わりにSlider Slider1を実行できます。またはボタン開始;。

代わりに、Gui :: StartButtonClickやGUI :: ColourSliderHoverなどのGUI名前空間の関数へのboost :: functionがあります。

私はこれが非常に遅いかどうか疑問に思っていました。

さらに言えば、ゲーム用のGUIを実行する簡単で簡単な方法はありますか?Qt、wxWidgetsなどはありません。

回答:


15

GUIは簡単な問題でも単純な問題でもありません。特に、ゲームに興味があり、動的で興味深いメニューを用意したい場合はそうです。

できる「簡単な」ことの1つは、ミドルウェアの使用を試みることです。ここで質問があります

自分でロールバックする場合は、いくつか提案することがあります。

  • 通常、GUI要素には「親」、別のGUI要素または「ウィンドウ」、またはそのようなものがあります。上向きにするか、親を下向きにすることにより、子であるすべてのものに状態/位置などを設定できます。

  • 構成によってGUI要素を構築できます。多くのウィジェットにはラベルがあります(ほとんどすべて)ラベル機能付き。

  • いわゆる特殊なウィジェットの多くは、変装した単なるボタンです。チェックボックスは、状態と特別な画像を備えた単なるボタンです。ラジオボタンは、他のラジオボタンとメタ状態(常に1つだけがアクティブ)を持つチェックボックスです。これを活用してください。私が取り組んだあるゲームでは、「チェックボックス」は通常のボタンですべてスクリプトとアートを使って行われました。

  • 最初のプロジェクトでは、より直接的なルートを取ることを検討してください。はい、アクション可能なイベントをデリゲートし、要素の作成に必要なもの(onMouseButtonDown、onMouseButtonUp、onHoverなど)を割り当てますが、何かを取得するまで、そうでない場合(ホバーの色の変更、ボタンを押す音など)のハードコーディングのみを検討してください機能的。その時点で、ビヘイビアデータを作成することを検討してください(つまり、「プレスサウンド」用のボタンに変数を設定するか、UI要素がコンポーネントを作成するときにアタッチする動作を定義するためにコンポーネントを使用することを検討してください。

  • デリゲートはそれほど遅くありません。おそらく、ウィジェットがあまり多くないので問題になるでしょうし、メニューコードは一般的にそれほど大きな影響はありません。ゲームのこの時点でのパフォーマンスについてはあまり心配しません。コードを立ち上げて実行したら、単純なアルゴリズムとプロファイルを選択しないでください。


2
より複雑なGUIの場合は、すぐに何らかのレイアウト管理が必要になります。HBoxやVBoxなどの基本的なレイアウトは、すべての要素を絶対座標で配置するよりもはるかに使いやすいです。例:web.archive.org/web/20100410150433/http : //doc.qt.nokia.com/4.6/…これにより、GUIは使いやすくなりますが、実装はそれほど簡単ではありません;)
bummzack

8

過去数年にわたって、主流のUIツールキットにいくつかの本当に興味深いブレークスルーがありました。ゲームUIも進化していますが、やや遅いペースです。これは、フル機能のUIサブシステムの開発自体が重要な取り組みであり、リソースへの投資を正当化することが難しいためです。

私の個人的なお気に入りのUIシステムは、Windows Presentation Foundation(WPF)です。UIの差別化の可能性を次のレベルに引き上げます。以下に、より興味深い機能の一部を示します。

  1. コントロールはデフォルトで「ルックレス」です。通常、コントロールのロジックと外観は分離されています。すべてのコントロールには、デフォルトの外観と外観を記述するデフォルトのスタイルとテンプレートが付属しています。たとえば、ボタンは、外側のストローク、単色またはグラデーションの背景、およびコンテンツキャプター(キャプションを表示する)を備えた丸い長方形として表されます。開発者(または設計者)は、外観と(ある程度)コントロールの動作を変更するカスタムスタイルテンプレートを作成できます。スタイルを使用して、前景色/背景色、テンプレートなどのコントロールの単純なプロパティをオーバーライドできます。テンプレートは実際の視覚構造を変更します。

  2. スタイルとテンプレートには「トリガー」が含まれる場合があります。トリガーは、特定のイベントまたはプロパティ値(または値の組み合わせ)をリッスンし、スタイルまたはテンプレートの側面を条件付きで変更できます。たとえば、ボタンテンプレートは通常、マウスがボタンの上に移動したときに背景色を変更するために、「IsMouseOver」プロパティにトリガーを持ちます。

  3. UI要素には、最小限の機能を備えた軽量の要素から本格的な重量のあるコントロールに至るまで、いくつかの異なる「レベル」があります。これにより、UIの構造を柔軟に設定できます。最も単純なUI要素クラスにUIElementは、スタイルやテンプレートがなく、最も単純な入力イベントのみをサポートしています。ステータスインジケータのような単純な要素の場合、この機能で十分です。より広範な入力サポートが必要な場合は、派生することができますFrameworkElement(これはを拡張しますUIElement)。従来のウィジェットは一般的にから派生しControlFrameworkElementカスタムスタイルとテンプレートのサポートを(特に)拡張および追加します。

  4. WPFは、保持されたスケーラブルな解像度に依存しないベクトルグラフィックモデルを使用します。Windowsでは、Direct3Dを使用してWPFアプリケーションがレンダリングおよび構成されます。

  5. WPFの導入には、Xamlと呼ばれる新しい宣言型プログラミング言語が含まれていました。Xmlに基づくXamlは、UIの「シーン」を宣言するための優先言語です。実際には非常に滑らかで、一見似ているように見えますが、XULなどの既存の言語とは根本的に異なります(さらに強力です)。

  6. WPFには非常に高度なテキストサブシステムがあります。すべてではありませんが、ほとんどのOpenTypeフォント機能、双方向ClearTypeアンチエイリアス、サブピクセル配置などをサポートしています。

「わかりました、今、これはゲーム開発にどのように関連していますか?」

WPFがまだ開発中(「アバロン」として知られている)の頃、ジョージア工科大学でビデオゲームデザインコースを受講していました。私の最終プロジェクトはターンベースの戦略ゲームであり、非常に有能なUIが必要でした。WPF / Avalonは、フル機能のコントロールの完全なセットそれは私に完全にこれらのコントロールのルックアンドフィールを変更する機能をゲーム。その結果、通常は本格的なアプリケーションでしか見られないレベルの機能を備えた、美しく鮮明なUIを備えたゲームが完成しました。

現在、ゲームにWPFを使用する場合の問題は、かなり重いため、独自の「サンドボックス」でレンダリングされることです。つまり、Direct3DまたはOpenGLゲーム環境内でWPFをホストする方法はサポートされていません。WPFアプリケーション内でDirect3Dコンテンツをホストすることは可能ですが、WPFアプリケーションのフレームレートによって制限されます。これは一般に、必要とするよりも低いです。2D戦略ゲーム(私の現在のWPFゲームプロジェクトのスクリーンショット)など、一部の種類のゲームでは、引き続きうまく機能します。それ以外の場合は、それほどではありません。ただし、独自のUIフレームワークの開発には、WPFのより魅力的なアーキテクチャの概念の一部を適用できます。

「WPF / G(WPF for Games)」と呼ばれる、WPFのオープンソースのアンマネージC ++ / Direct3D実装もあります ]](http://wpfg.codeplex.com/)およびWindows Mobile。アクティブな開発は終了したように見えますが、最後にチェックアウトしたときは、かなり完全な実装でした。テキストサブシステムは、MicrosoftのWPF実装と比較して実際に欠けていた1つの領域でしたが、ゲームにとってはそれほど問題ではありません。WPF / GをDirect3Dベースのゲームエンジンと統合するのは比較的簡単だと思います。この方法を採用することで、UIのカスタマイズを幅広くサポートする、非常に高性能で解像度に依存しないUIフレームワークを提供できます。

WPFベースのゲームUIがどのように見えるかを知るために、私のペットプロジェクトのスクリーンショットを次に示します。

進行中のWPFベースのゲームプロジェクトのスクリーンショット


NoesisGUIはWPFを使用します。それはかなり良いですが、私はWPFを知らないので、学ぶのは苦痛です。私は個人的にウェブスタックアプローチを好むでしょう。
user441521

2

http://code.google.com/p/nvidia-widgets/のように、すぐにGUIを使用し ます。

nVidiaウィジェットは、MollyRocketのIMGUI(Immediate GUI)に基づいています。

これは、GUIが得ることができるほど簡単だと思います。

すべてはあなたのニーズに依存します。


1
シンプルであり、迅速なデバッグ作業やプロトタイピングには理想的ですが、UIとイミディエイトGUIのゲームロジックとの間のカップリングの量は私を怖がらせます。
tenpn

2

私が取り組んでいるゲームには、独自のカスタムGUIフレームワークがあります。非常にシンプルであることがわかりましたが、それでもやりたいことはすべてやっています。他の多くの人が使用している「パターン」であるかどうかはわかりませんが、うまく機能しています。

基本的に、すべてのボタン、チェックボックスなどはElementクラスのサブクラスです。要素にはイベントがあります。次に、他の要素を含むCompoundElements(それ自体がElementのサブクラス)があります。各サイクルで、processEvent(event)、tick(time)、draw(surface)の3つのメソッドが呼び出されます。各CompoundElementは、その子要素でこれらのメソッドを呼び出します。これらの呼び出し(特にprocessEventメソッド)で、関連するイベントを起動します。

これらはすべてPython(C ++よりもはるかに遅い言語)であり、完全に問題なく実行されます。


2

かなり洗練されたUIが必要な場合、最良の選択はおそらくHTMLレンダラーを埋め込むことです-あなたが慣れているすべての一般的なUIプリミティブを取得し、複雑なUIをゲームに簡単に追加できますユーザーは期待し、見栄えがよく、高速で実行されます(この時点でブラウザーはレンダリングパイプラインをかなり最適化しているため)。

ゲームにWebkitを埋め込むためのライブラリがいくつかあります。Berkeliumは私が推奨するライブラリであり、Awesomiumはかなり良い(EVE Onlineで使用)、CEF(Steamで使用)を聞いています。Geckoの埋め込みを試すこともできます。これは非常に困難ですが、いくつかの素晴らしい利点もあります。現在、すべてのゲームUIにBerkeliumを使用しています(カスタムUI要素とネイティブUIの組み合わせを置き換え、実行するために記述する必要があるコードの量を劇的に削減しました)。


^この100%。ゲームの実装に適したWebスタックが不足していることは残念です。WebスタックはUIに優れており、UIのすべてのゲームでより一般的になり始める必要があります。これまでのところ、私が使用しようとしたライブラリは、実装するのに苦労したか、100%trueのhtml / css / javascriptではありません。現在、Coherent Labsを検討していますが、有望そうに見えますが、かなりの費用がかかりますが、いくつかのエンジン用のインディーバージョンがあります。
user441521

2

ゲームに洗練されたGUIシステムが実際に必要であることを確認してください。コンピューターRPGを作成している場合、明らかにそれが要件になります。しかし、レーシングゲームのようなものについては、物事を複雑にしすぎないでください。テクスチャ(カスタムボタンイメージ)をレンダリングし、入力関数にハードコーディングされた座標を含む「if」ステートメントを含めるだけで、作業を完了することができます。ゲームステートマシン(FSM)は、この単純なアプローチに役立ちます。または、途中のどこかで、複雑な階層とシーングラフのアプローチを忘れて、上記のテクスチャと入力チェックを単純な関数呼び出しにパッケージ化する「ボタン」クラスがありますが、複雑なことはしません。

要件を明確にすることが重要です。よくわからない場合は、YAGNIを思い出してください。


1

ここでは具体的にするために、OpenGLのために構築されたGUIの一例(ソースコードおよびすべての)だSlick2Dが呼び出さThingleのポートであるThinletを

Slick2Dのもう1つのGUIは、SUIで、チェックアウトすることをお勧めします。

これらの例に従い、XML駆動のGUIを使用します。これらのプロジェクトは古い/死んでいますが、それらからいくつかのアイデアを拾うことができるかもしれません。


1

.NETのWindows Formsなど、高度に開発されたGUIフレームワークがどのように機能するかを見てみるのが、「それを図解する」最良の方法の1つだと思います。

たとえば、これらはすべてコントロールであり、場所、サイズ、子コントロールのリスト、その親への参照、 Text、コントロールが使用できるもののプロパティ、およびさまざまなオーバーライド可能な関数と事前定義されたアクションを持っています。

彼らはすべてのような様々なイベントを含みClickMouseOverそしてResizing

たとえば、子コントロールが変更されると、レイアウトが変更されたという通知をチェーンに送信し、すべての親が呼び出します PerformLayout()

同様に、自動サイジングと自動配置はこれらのGUIの一般的な機能であり、プログラマーはコントロールを追加するだけで、親コントロールはそれらを自動的に調整または配置できます。


1

興味のために、私はScaleformを捨てると思った。基本的に、アーティストはイラストレーター、フォトショップなどを使用し、UIデザイナーはFlashを使用してすべてのインタラクティブ機能をレイアウトします。次に、Scaleformはそれをエンジン用のコードに変換します(使用していないので理解できます)。Crysis Warheadは、このシステムをロビーに使用しました。

弊社のサイトを使用することにより、あなたは弊社のクッキーポリシーおよびプライバシーポリシーを読み、理解したものとみなされます。
Licensed under cc by-sa 3.0 with attribution required.