Jak poruszać się po elementach GUI?

Uwaga: Planuję stworzyć własny system GUI. Będzie dobry do nauki, lekki, ma tylko potrzebne bity, wiąże się z grą itp.

Myślałem o tym, jak to zrobić. Mam na myśli elementy:

• Przyciski radiowe
• Wpisz tutaj pola tekstowe
• guziki
• Suwaki
• Pola wyboru

Nie szukam jeszcze, jak je zrobić. Ale więcej o tym, jak by poszły.

Pomysł

Miałbym każdy stan, który potrzebował rzeczy, więc prawie wszystkie mają pojemnik z elementami. Każdy element jest elementem GUI.

Każdy z nich ma pozycję, grafikę itp.

Trochę bardziej utknąłem w ich logice.

Moim pomysłem, aby pozwolić na modułowość i prostotę, było uniknięcie przycisku MainMenuStartButton; OptionOneBackButton itp. i zamiast tego można zrobić Slider slider1; lub przycisk Start ;.

Zamiast tego każdy miałby funkcję boost :: do funkcji w przestrzeni nazw GUI, takiej jak Gui :: StartButtonClick lub GUI :: ColourSliderHover.

Zastanawiałem się tylko, czy byłoby to wyjątkowo wolne, czy nie.

A jeśli chodzi o tę kwestię, czy jest jakiś prosty i prosty sposób obsługi GUI dla gier? Bez Qt, wxWidgets lub czegokolwiek.

GUI nie jest łatwym ani prostym problemem, szczególnie gdy wchodzisz w gry i ich chęć posiadania dynamicznych, interesujących menu.

Jedną z „łatwych” rzeczy, które możesz zrobić, jest próba użycia oprogramowania pośredniego. Jest to pytanie na które tutaj .

Jeśli chcesz rzucić to sam, zasugeruję kilka rzeczy.

• Elementy GUI mają na ogół „element nadrzędny”, inny element GUI lub „okno” lub coś w tym rodzaju. Albo przez skierowanie w górę, albo przytrzymanie punktu nadrzędnego w dół oznacza, że ​​możesz ustawić stan / pozycję / etc na wszystkim, co jest dzieckiem.

• Elementy GUI można budować według kompozycji. Wiele widżetów ma etykiety (prawie wszystkie), i może być sensowne uczynić koncepcję etykiety komponentem lub dzieckiem innych elementów interfejsu użytkownika niż kopiowanie / wklejanie kodu lub próba dziedziczenia z klasy podstawowej z funkcją etykietowania.

• Wiele tak zwanych specjalistycznych widżetów to po prostu przyciski w przebraniu. Pola wyboru to tylko przyciski ze stanami i specjalnymi obrazami. Przyciski opcji to tylko pola wyboru, które mają meta-stan (jeden i tylko jeden jest aktywny w danym momencie) z innymi przyciskami opcji. Wykorzystaj to na swoją korzyść. W jednej grze, nad którą pracowałem, „pola wyboru” były wykonywane zwykłymi przyciskami całkowicie za pomocą skryptów i grafiki.

• W przypadku pierwszego projektu rozważ wybranie bardziej bezpośredniej trasy. Tak, przydziel swoich możliwych do akcji zdarzeń i przydzielaj to, czego potrzebujesz przy tworzeniu elementu (tj. OnMouseButtonDown, onMouseButtonUp, onHover itp.), Ale rozważ tylko zakodowanie na sztywno tego, co chcesz się wydarzyć (np. Zmiana koloru aktywacji, dźwięki naciskania przycisków), dopóki nie otrzymasz czegoś funkcjonalny. Kiedy już będziesz w tym momencie, zastanów się nad stworzeniem danych tego zachowania (tj. Posiadaj zmienną na przycisku, aby „nacisnąć dźwięk”, lub może rozważ komponenty, których używają twoje elementy interfejsu użytkownika, aby zdefiniować zachowanie, które po prostu do nich dołączasz podczas ich tworzenia.

• delegaci nie są tak powolni, prawdopodobnie nie będziesz mieć tak wielu widżetów, że byłby to problem, a kod menu i tak nie ma tak dużego wpływu. W tym momencie gry nie przejmowałbym się zbytnio wydajnością. Nie wybieraj naiwnych algorytmów i profilu po uruchomieniu kodu.

W ciągu ostatnich kilku lat dokonano kilku naprawdę przełomowych odkryć w zestawach narzędzi głównego interfejsu użytkownika. Interfejsy gry również ewoluują, ale w nieco wolniejszym tempie. Jest to prawdopodobne, ponieważ opracowanie w pełni funkcjonalnego podsystemu interfejsu użytkownika jest samo w sobie znaczącym przedsięwzięciem i trudno uzasadnić inwestycję w zasoby.

Moim osobistym ulubionym systemem interfejsu użytkownika jest Windows Presentation Foundation (WPF). To naprawdę przenosi potencjał różnicowania interfejsu użytkownika na wyższy poziom. Oto niektóre z jego ciekawszych funkcji:

1. Elementy sterujące są domyślnie „pozbawione wyglądu”. Logika i wygląd kontrolki są na ogół oddzielone. Każda kontrolka jest dostarczana z domyślnym stylem i szablonem, który opisuje jej domyślny wygląd. Na przykład przycisk może być reprezentowany jako zaokrąglony prostokąt z zewnętrznym obrysem, jednolitym kolorem lub gradientem tła oraz prezenter zawartości (do przedstawienia podpisu). Programiści (lub projektanci) mogą tworzyć szablony niestandardowych stylów, które zmieniają wygląd i (do pewnego stopnia) zachowanie kontrolki. Stylów można używać do nadpisywania prostych właściwości kontrolki, takich jak kolor pierwszego planu / tła, szablon itp .; szablony zmieniają faktyczną strukturę wizualną.

2. Style i szablony mogą zawierać „Wyzwalacze”. Wyzwalacze mogą nasłuchiwać określonych zdarzeń lub wartości właściwości (lub kombinacji wartości) i warunkowo zmieniać aspekty stylu lub szablonu. Na przykład szablon przycisku miałby zwykle wyzwalacz we właściwości „IsMouseOver” w celu zmiany koloru tła, gdy kursor myszy znajdzie się nad przyciskiem.

3. Istnieje kilka różnych „poziomów” elementów interfejsu użytkownika, od elementów o mniejszej wadze z minimalną funkcjonalnością do pełnowymiarowych ciężkich elementów sterujących. Daje to pewną elastyczność w strukturze interfejsu użytkownika. Najprostsza z klas elementów interfejsu użytkownika UIElement, nie ma stylu ani szablonu i obsługuje tylko najprostsze zdarzenia wejściowe. W przypadku prostych elementów, takich jak wskaźniki stanu, ta funkcja może być wszystkim, czego potrzebujesz. Jeśli potrzebujesz szerszej obsługi danych wejściowych, możesz czerpać z nich FrameworkElement(co się rozszerza UIElement). Zwykle pochodzą od tradycyjnych widżetów Control, które rozszerzają FrameworkElementi dodają niestandardowe style i obsługę szablonów (między innymi).

4. WPF wykorzystuje zachowany, skalowalny, niezależny od rozdzielczości model grafiki wektorowej. W systemie Windows aplikacje WPF są renderowane i tworzone przy użyciu Direct3D.

5. Wprowadzenie WPF obejmowało nowy deklaratywny język programowania o nazwie Xaml. Xaml, oparty na Xml, jest preferowanym językiem do deklarowania „scen” interfejsu użytkownika. W rzeczywistości jest dość zręczny i chociaż na pierwszy rzut oka może wydawać się podobny, zasadniczo różni się od istniejących języków, takich jak XUL (i znacznie potężniejszy).

6. WPF ma bardzo zaawansowany podsystem tekstowy. Obsługuje większość, jeśli nie wszystkie funkcje czcionek OpenType, dwukierunkowe antyaliasing ClearType, pozycjonowanie subpikseli itp.

„Ok, świetnie, jak to się ma do tworzenia gier?”

Kiedy WPF był jeszcze w fazie rozwoju (i znany jako „Avalon”), brałem udział w kursie projektowania gier wideo w Georgia Tech. Mój ostatni projekt był turową grą strategiczną i chciałem mieć bardzo sprawny interfejs użytkownika. WPF / Avalon wydawało się dobrym szlaku iść, ponieważ miała komplet pełni funkcjonalny kontroli i to mi możliwość gry całkowicie zmienić wygląd tych kontroli. Rezultatem była gra z pięknym i wyraźnym interfejsem użytkownika o poziomie funkcjonalności, który zwykle widzi się tylko w pełnoprawnych aplikacjach.

Problem z użyciem WPF do gier polega na tym, że jest dość ciężki i renderuje we własnym „piaskownicy”. Rozumiem przez to, że nie ma obsługiwanego sposobu hostowania WPF w środowisku gier Direct3D lub OpenGL. Możliwe jest hostowanie treści Direct3D w aplikacji WPF, ale będziesz ograniczony przez ilość klatek na sekundę aplikacji WPF, która jest ogólnie niższa niż byś chciał. W przypadku niektórych rodzajów gier, takich jak gry strategiczne 2D (zrzut ekranu z mojego obecnego projektu gry WPF), może nadal działać świetnie. Cokolwiek innego, nie tak bardzo. Ale nadal możesz zastosować niektóre z bardziej przekonujących koncepcji architektonicznych WPF przy opracowywaniu własnego frameworku interfejsu użytkownika.

Istnieje również otwarta, niezarządzana implementacja C ++ / Direct3D WPF o nazwie „WPF / G (WPF dla gier)”] ( http://wpfg.codeplex.com/ ), która jest specjalnie zaprojektowana do użytku w grach na obu systemach Win32 i Windows Mobile. Wygląda na to, że aktywne tworzenie się zakończyło, ale kiedy ostatni raz to sprawdziłem, było to raczej pełne wdrożenie. Podsystem tekstowy był jedynym obszarem, którego naprawdę brakowało w porównaniu z implementacją WPF Microsoftu, ale to mniejszy problem dla gier. Wyobrażam sobie, że zintegrowanie WPF / G z silnikiem gry opartym na Direct3D byłoby stosunkowo proste. Wybranie tej trasy może zapewnić niezwykle sprawny, niezależny od rozdzielczości framework interfejsu użytkownika z szerokim wsparciem dostosowywania interfejsu użytkownika.

Aby pokazać, jak może wyglądać interfejs użytkownika gry opartej na WPF, oto zrzut ekranu z mojego projektu dla zwierząt domowych:

Chciałbym skorzystać z natychmiastowego interfejsu GUI, takiego jak: http://code.google.com/p/nvidia-widgets/

Widżety nVidia są oparte na IMGUI (Immediate GUI) od MollyRocket.

Wydaje mi się, że jest to tak proste, jak tylko GUI.

Wszystko zależy od twoich potrzeb.

W grze, nad którą pracuję, mamy własną niestandardową platformę GUI. Uważam, że jest to bardzo proste, ale wciąż robię wszystko, co chcę. Nie wiem, czy jest to „wzorzec”, którego używa wiele innych osób, ale działa dobrze dla nas.

Zasadniczo wszystkie przyciski, pola wyboru itp. Są podklasami elementu klasy; a elementy mają zdarzenia. Następnie mamy CompoundElements (które same są podklasą elementu), które zawierają inne elementy. W każdym cyklu wywoływane są trzy metody: processEvent (zdarzenie), tik (czas) i rysowanie (powierzchnia). Każde CompoundElement wywołuje następnie te metody na elementach potomnych. W tych wywołaniach (szczególnie w metodzie processEvent) uruchamiamy wszelkie istotne zdarzenia.

Wszystko to jest w języku Python (znacznie wolniejszym języku niż C ++) i działa idealnie dobrze.

Jeśli będziesz potrzebować dość zaawansowanych interfejsów użytkownika, najlepszym wyborem jest prawdopodobnie osadzenie mechanizmu renderującego HTML - otrzymujesz wszystkie typowe operacje podstawowe, do których jesteś przyzwyczajony, i możesz w prosty sposób dodać do gry skomplikowany interfejs, który będzie się zachowywał tak, jak chcesz użytkownicy oczekują, wyglądają świetnie i działają szybko (ponieważ przeglądarki mają w tej chwili dość zoptymalizowane potoki renderowania).

Istnieje kilka bibliotek do osadzania Webkita w grach: Berkelium to ta, którą polecam, i słyszę, że Awesomium jest całkiem niezły (używany przez EVE Online), podobnie jak CEF (używany przez Steam). Możesz także spróbować osadzić Gecko - jest to o wiele trudniejsze, ale ma też kilka fajnych zalet. Obecnie używam Berkelium do wszystkich gier interfejsu użytkownika (zastąpił on kombinację niestandardowych elementów interfejsu użytkownika i natywnego interfejsu użytkownika, a także znacznie zmniejszył ilość kodu, który musiałem napisać, aby wszystko działało).

Upewnij się, że naprawdę potrzebujesz zaawansowanego systemu GUI do swojej gry. Jeśli tworzysz komputerową grę RPG, będzie to oczywiście wymaganie; ale w przypadku gry wyścigowej nie komplikuj rzeczy. Czasami po prostu renderowanie tekstur (niestandardowe obrazy przycisków) i posiadanie niektórych instrukcji „if” ze sztywnymi współrzędnymi w funkcji wprowadzania danych może wykonać zadanie. Maszyna stanu gry (FSM) pomaga w tym prostym podejściu. Lub, gdzieś pośrodku, zapomnij o skomplikowanej hierarchii i grafie scen i po prostu miej klasę „Button”, która pakuje wyżej wspomnianą kontrolę tekstury i danych wejściowych do prostych wywołań funkcji, ale nie robi nic skomplikowanego.

Spełnienie wymagań jest ważne. Jeśli nie jesteś pewien, po prostu przypomnij sobie YAGNI .

Oto jeden przykład (kod źródłowy i wszystko) GUI zbudowanego dla OpenGL, specjalnie dla Slick2D o nazwie Thingle, który jest portem Thinleta .

Innym GUI dla Slick2D był SUI, który możesz chcieć sprawdzić.

Podążę za tymi przykładami i korzystam z GUI opartego na XML. Chociaż te projekty są stare / martwe, możesz być w stanie wyłowić z nich kilka pomysłów.

Myślę, że jednym z najlepszych sposobów, aby to „rozgryźć” byłoby przyjrzenie się, jak działają wysoko rozwinięte GUI, takie jak Windows Forms w .NET.

Na przykład wszystkie są formantami, które mają położenie, rozmiar, listę kontrolek potomnych, odniesienie do jego elementu nadrzędnego, Textwłaściwość do tego, do czego formant może go użyć, a także różne nadrzędne funkcje i predefiniowane akcje.

Wszystkie one zawierają różne zdarzenia, takie jak Click, MouseOveri Resizing.

Na przykład, gdy kontrola podrzędna zostanie zmieniona, wysyła powiadomienie w górę łańcucha, że ​​jej układ się zmienił, a następnie wszyscy rodzice dzwonią PerformLayout().

Ponadto automatyczne dostosowywanie i automatyczne rozmieszczanie są powszechnymi cechami tych interfejsów GUI, umożliwiając programistom proste dodawanie elementów sterujących, a elementy nadrzędne dostosowują je lub ustawiają automatycznie.

Dla dobra, myślałem, że wyrzucę Scaleform . Zasadniczo artyści mogą korzystać z programu Illustrator, Photoshop itp., A następnie projektant interfejsu użytkownika używa Flasha do układania całej interaktywności. Następnie Scaleform przekształca go w kod dla twojego silnika (cóż, rozumiem go, ponieważ go nie użyłem). Crysis Warhead używał tego systemu do swojego lobby.