GUI 요소는 어떻게 사용합니까?

참고 : 자체 GUI 시스템을 만들 계획입니다. 학습에 좋고, 가벼우 며, 필요한 비트 만 있고, 게임과 관련이 있습니다.

나는 그것을하는 방법에 대해 생각하고있었습니다. 내가 의미하는 요소는 다음과 같습니다.

• 라디오 버튼
• 여기에 텍스트를 입력하십시오
• 버튼
• 슬라이더
• 확인란

나는 그들을 만드는 방법에 대해 아직 찾고 있지 않습니다. 그러나 더 많은 방법이 있습니다.

생각

나는 물건이 필요한 각 상태를 가지게 될 것입니다. 각 요소는 GUI 조각입니다.

이들은 각각 위치, 그래픽 등을 가지고 있습니다.

내가 더 붙어있는 비트는 그 논리입니다.

모듈화와 단순성을 허용하는 나의 생각은 MainMenuStartButton을 피하는 것이 었습니다. OptionsOneBackButton 등 대신 슬라이더 슬라이더 1을 수행 할 수 있습니다. 또는 버튼 시작;.

대신, Gui :: StartButtonClick 또는 GUI :: ColourSliderHover와 같은 GUI 네임 스페이스의 함수에 대한 boost :: function이 있습니다.

나는 이것이 느리게 진행되는지 궁금해하고있었습니다.

그리고 그 문제에 대해 게임용 GUI를 수행하는 쉽고 간단한 방법이 있습니까? Qt, wxWidgets 등이 없습니다.

GUI는 쉽고 간단한 문제가 아닙니다. 특히 게임에 참여하고 역동적이고 흥미로운 메뉴를 원할 때 특히 그렇습니다.

"쉬운"작업 중 하나는 미들웨어를 사용하는 것입니다. 여기에 대한 질문이 있습니다 .

직접 굴리면 몇 가지 제안 할 것이 있습니다.

• GUI 요소에는 일반적으로 "부모", 다른 GUI 요소 또는 "창"또는 이와 유사한 요소가 있습니다. 부모 지점을 가리 키거나 아래로 향하게하면 자식 인 모든 것에 대해 상태 / 위치 등을 설정할 수 있습니다.

• 컴포지션별로 GUI 요소를 빌드 할 수 있습니다. 많은 위젯에는 레이블이 있습니다 (거의 모든 것). 코드의 복사 / 붙여 넣기 또는 기본 클래스에서 상속하려고 시도하는 것보다 레이블 개념을 다른 UI 요소의 구성 요소 또는 자식으로 만드는 것이 합리적 일 수 있습니다 라벨 기능.

• 소위 특수 위젯은 대부분 버튼 형태입니다. 확인란은 상태 및 특수 이미지가있는 버튼 일뿐입니다. 단일 선택 단추는 다른 단일 선택 단추와 함께 메타 상태 (한 시간에 하나만 활성화 됨)가있는 확인란입니다. 이를 활용하십시오. 제가 한 게임에서 "체크 박스"는 스크립팅과 아트를 통해 일반 버튼으로 이루어졌습니다.

• 첫 번째 프로젝트의 경우 더 직접적인 경로를 고려하십시오. 예, 실행 가능한 이벤트를 위임하고 요소 생성에 필요한 것을 할당하십시오 (예 : onMouseButtonDown, onMouseButtonUp, onHover 등). 무언가를 얻을 때까지 다른 방식으로 하드 코딩하는 것을 고려하십시오 (예 : 색상 변경, 버튼 누름 소리) 기능의. 일단 그 시점에 행동 데이터를 만들거나 (예 : "소리 누르기"버튼에 변수가 있거나, UI 요소가 생성 할 때 첨부하는 행동을 정의하기 위해 UI 요소가 사용하는 구성 요소를 갖는 것을 고려하십시오.

• 델리게이트는 느리지 않습니다. 위젯이 많지 않아 문제가 될 수 있으며 메뉴 코드는 일반적으로 그렇게 큰 영향을 미치지 않습니다. 이 시점에서 나는 성능에 대해 너무 걱정하지 않을 것입니다. 코드를 작성하고 실행 한 후에는 순진한 알고리즘과 프로파일을 선택하지 마십시오.

지난 몇 년 동안 주류 UI 툴킷에서 정말 흥미로운 돌파구가있었습니다. 게임 UI도 발전하고 있지만 다소 느리게 진행되고 있습니다. 모든 기능을 갖춘 UI 하위 시스템을 개발하는 것은 자체적으로 중요한 작업이므로 리소스 투자를 정당화하기가 어렵 기 때문일 수 있습니다.

내가 가장 좋아하는 UI 시스템은 WPF (Windows Presentation Foundation)입니다. UI 차별화의 잠재력을 한 단계 끌어 올립니다. 보다 흥미로운 기능은 다음과 같습니다.

1. 컨트롤은 기본적으로 "look-less"입니다. 컨트롤의 논리와 시각적 모양은 일반적으로 분리되어 있습니다. 모든 컨트롤에는 기본 시각적 모양을 설명하는 기본 스타일과 템플릿이 제공됩니다. 예를 들어, 버튼은 외부 획, 단색 또는 그라데이션 배경 및 컨텐츠 발표자 (캡션 표시)가있는 둥근 사각형으로 표시 될 수 있습니다. 개발자 (또는 디자이너)는 컨트롤의 모양과 동작을 변경하는 사용자 지정 스타일 템플릿을 만들 수 있습니다. 스타일을 사용하여 전경 / 배경색, 템플릿 등과 같은 컨트롤의 간단한 속성을 재정의 할 수 있습니다. 템플릿은 실제 시각적 구조를 변경합니다.

2. 스타일과 템플릿에는 "트리거"가 포함될 수 있습니다. 트리거는 특정 이벤트 나 속성 값 (또는 값의 조합)을 수신하고 스타일 또는 템플릿의 측면을 조건부로 변경할 수 있습니다. 예를 들어, 단추 템플릿은 일반적으로 마우스를 단추 위로 가져갈 때 배경색을 변경하기 위해 "IsMouseOver"속성에 트리거를 갖습니다.

3. 최소한의 기능을 가진 가벼운 요소부터 본격적인 무거운 컨트롤까지 다양한 UI 요소 레벨이 있습니다. 이를 통해 UI를 구성하는 방법에 약간의 유연성이 제공됩니다. 가장 간단한 UI 요소 클래스 UIElement는 스타일이나 템플릿이 없으며 가장 간단한 입력 이벤트 만 지원합니다. 상태 표시기와 같은 간단한 요소의 경우이 기능 만 있으면됩니다. 보다 광범위한 입력 지원이 필요한 경우 FrameworkElement(에서 확장 UIElement) 에서 파생 될 수 있습니다 . 기존 위젯은 일반적으로에서 파생되며 사용자 정의 스타일 및 템플릿 지원 Control을 확장 FrameworkElement하고 추가합니다 (다른 것 포함).

4. WPF는 확장 가능하고 해상도 독립적 인 벡터 그래픽 모델을 사용합니다. Windows에서 WPF 응용 프로그램은 Direct3D를 사용하여 렌더링 및 구성됩니다.

5. WPF에는 Xaml이라는 새로운 선언적 프로그래밍 언어가 도입되었습니다. Xml을 기반으로하는 Xaml은 UI "장면"을 선언하기 위해 선호되는 언어입니다. 실제로는 매끄럽고 언뜻보기에는 비슷하지만 XUL (및 훨씬 더 강력한)과 같은 기존 언어와 근본적으로 다릅니다.

6. WPF는이 매우 고급 텍스트 서브 시스템을. 모든 OpenType 글꼴 기능, 양방향 ClearType 앤티 앨리어싱, 서브 픽셀 위치 지정 등 대부분을 지원합니다.

"좋아, 이제 게임 개발과 어떤 관련이 있는가?"

WPF가 아직 개발 중일 때 (그리고 "Avalon"으로 알려짐), Georgia Tech에서 비디오 게임 디자인 과정을 수강하고있었습니다. 마지막 프로젝트는 턴제 전략 게임이었고, 유능한 UI를 원했습니다. WPF / 아발론은 완전한 기능을 갖춘 컨트롤의 완전한 세트를했기 때문에 가서 좋은 경로처럼 보였다 과 완전히 모양을 변경하고 해당 컨트롤의 느낌이 나에게 능력을 게임. 그 결과 일반적으로 본격적인 응용 프로그램에서만 볼 수있는 기능 수준의 아름답고 선명한 UI를 갖춘 게임이 탄생했습니다.

이제 게임에 WPF를 사용할 때의 문제는 상당히 무겁고 자체 "샌드 박스"로 렌더링된다는 것입니다. 즉, Direct3D 또는 OpenGL 게임 환경에서 WPF를 호스팅하는 지원되는 방법이 없습니다. WPF 응용 프로그램 내에서 Direct3D 컨텐트를 호스팅 할 수 있지만 WPF 응용 프로그램의 프레임 속도에 따라 제한을받습니다. 일반적으로 원하는 것보다 낮습니다. 2D 전략 게임 (현재 WPF 게임 프로젝트의 스크린 샷)과 같은 일부 유형의 게임의 경우 여전히 훌륭하게 작동 할 수 있습니다. 그 밖의 다른 것에는 그렇게하지 않습니다. 그러나 여전히 고유 한 UI 프레임 워크를 개발할 때 WPF의보다 강력한 아키텍처 개념을 적용 할 수 있습니다.

또한 W32의 오픈 소스 관리되지 않는 C ++ / Direct3D 구현 인 "WPF / G (게임용 WPF)"]] ( http://wpfg.codeplex.com/ )가 있으며 이는 Win32 모두에서 게임에 사용하도록 특별히 설계되었습니다. 그리고 Windows Mobile. 활발한 개발은 중단 된 것으로 보이지만, 마지막으로 체크 아웃했을 때는 다소 완전한 구현이었습니다. 텍스트 하위 시스템은 Microsoft의 WPF 구현과 비교할 때 실제로 부족한 영역 중 하나 였지만 게임에는 문제가되지 않았습니다. WPF / G를 Direct3D 기반 게임 엔진과 통합하는 것이 비교적 간단하다고 생각합니다. 이 경로를 사용하면 UI 사용자 정의를 광범위하게 지원하는 성능이 뛰어난 해상도 독립적 UI 프레임 워크를 제공 할 수 있습니다.

WPF 기반 게임 UI의 모양에 대한 아이디어를 제공하기 위해 내 애완 동물 프로젝트의 스크린 샷은 다음과 같습니다.

나는 다음과 같은 즉각적인 GUI를 원할 것입니다 : http://code.google.com/p/nvidia-widgets/

nVidia 위젯은 MollyRocket의 IMGUI (Immediate GUI)를 기반으로합니다.

나는 그것이 GUI가 얻을 수있는만큼 간단하다고 생각합니다.

모두 당신의 요구에 달려 있습니다.

작업중인 게임에는 자체 사용자 정의 GUI 프레임 워크가 있습니다. 나는 그것이 매우 간단하다는 것을 알았지 만 여전히 내가 원하는 모든 것을하고 있습니다. 다른 사람들이 사용하는 "패턴"인지는 잘 모르지만 우리에게는 잘 작동합니다.

기본적으로 모든 버튼, 확인란 등은 Element 클래스의 하위 클래스입니다. 요소에는 이벤트가 있습니다. 그런 다음 다른 요소를 포함하는 CompoundElements (자체는 Element의 하위 클래스 임)가 있습니다. 각 사이클에서 processEvent (event), tick (time) 및 draw (surface)의 세 가지 메소드가 호출됩니다. 그런 다음 각 CompoundElement는 해당 하위 요소에서 해당 메소드를 호출합니다. 이러한 호출 (특히 processEvent 메소드)에서 관련 이벤트가 발생합니다.

이 모든 것은 Python (C ++보다 훨씬 느린 언어)이며 완벽하게 실행됩니다.

상당히 정교한 UI가 필요한 경우 HTML 렌더러를 임베드하는 것이 가장 좋습니다. 일반적인 UI 프리미티브를 모두 사용하고 복잡한 UI를 게임에 추가하여 그 방식대로 작동 할 수 있습니다 브라우저는이 시점에서 렌더링 파이프 라인을 상당히 최적화했기 때문에 사용자는 기대하고, 멋지게 보이고, 빠르게 실행합니다.

웹킷을 게임에 임베드하기위한 라이브러리가 몇 가지 있습니다. Berkelium은 제가 추천하는 것입니다. Awesomium이 꽤 좋고 (EVE Online에서 사용) CEF (Steam에서 사용)를 들었습니다. Gecko를 포함시킬 수도 있습니다.이 작업은 훨씬 어렵지만 멋진 장점도 있습니다. 나는 현재 모든 게임 UI에 Berkelium을 사용하고 있습니다 (사용자 정의 UI 요소와 기본 UI의 조합을 대체하고 실행하기 위해 작성 해야하는 코드의 양을 크게 줄였습니다).

실제로 게임을위한 정교한 GUI 시스템이 필요합니다. 컴퓨터 RPG를 만들고 있다면 분명히 요구 사항이 될 것입니다. 그러나 레이싱 게임과 같은 것에 대해서는 너무 복잡하지 마십시오. 때로는 텍스처 (커스텀 버튼 이미지)를 렌더링하고 입력 함수에 하드 코딩 된 좌표가있는 "if"문을 사용하여 작업을 수행 할 수 있습니다. 게임 상태 머신 (FSM)은이 간단한 접근 방식을 지원합니다. 또는 중간 어딘가에서 복잡한 계층 구조 및 장면 그래프 접근 방식을 잊어 버리고 위에서 언급 한 텍스처 및 입력 검사를 간단한 함수 호출로 패키지하지만 복잡한 작업은 수행하지 않는 "Button"클래스 만 있습니다.

요구 사항을 정리하는 것이 중요합니다. 확실하지 않은 경우 YAGNI를 상기 시키십시오 .

다음은 OpenGL 용으로 빌드 된 GUI의 한 가지 예 (소스 코드 및 모두)입니다. 특히 Thinlet 포트 인 Thingle 이라는 Slick2D 용 입니다 .

Slick2D의 또 다른 GUI는 SUI 였습니다 .

이 예제를 따라 XML 기반 GUI를 사용하겠습니다. 이 프로젝트는 오래되었지만 죽었지 만 아이디어를 얻을 수 있습니다.

"그림을 만드는"가장 좋은 방법 중 하나는 .NET의 Windows Forms와 같이 고도로 개발 된 GUI 프레임 워크가 어떻게 작동하는지 살펴 보는 것입니다.

예를 들어, 모든 컨트롤은 위치, 크기, 자식 컨트롤 목록, 부모 컨트롤에 대한 참조 Text, 컨트롤에 사용할 수 있는 속성, 다양한 재정의 가능한 기능 및 미리 정의 된 작업이 있습니다.

그들은 모두 같은 다양한 이벤트를 포함 Click, MouseOver하고 Resizing.

예를 들어 자식 컨트롤이 변경되면 해당 레이아웃이 변경되었다는 알림을 체인에 보내고 모든 부모가을 호출 PerformLayout()합니다.

또한 자동 크기 조정 및 자동 정렬은 이러한 GUI의 일반적인 기능으로, 프로그래머가 컨트롤을 추가하기 만하면 부모 컨트롤이 자동으로 조정하거나 정렬 할 수 있습니다.

이해를 위해 Scaleform을 버릴 것이라고 생각했습니다 . 기본적으로 아티스트는 일러스트 레이터, 포토샵 등을 사용할 수 있으며, UI 디자이너는 Flash를 사용하여 모든 인터랙티비티를 레이아웃합니다. 그런 다음 Scaleform은 엔진 코드로 변환합니다 (잘 사용하지 않았으므로 이해했습니다). Crysis Warhead는이 시스템을 로비에 사용했습니다.