GUI öğeleri hakkında nasıl bilgi verilir?


12

Not: Kendi GUI sistemimi yapmayı planlıyorum. Öğrenmek, hafif, sadece ihtiyacım olan bitler, oyunla bağlar vb.İçin iyi olacak.

Nasıl yapılacağını düşünüyordum. Demek istediğim unsurlar:

  • Radyo düğmeleri
  • Metinleri buraya girin kutuları
  • Düğmeler
  • kaydırıcılar
  • Onay kutuları

Henüz nasıl yapılacağına bakmıyorum. Ama nasıl gideceklerinden daha fazlası.

Fikir

Her şeye ihtiyaç duyan her duruma sahip olurdum, bu yüzden neredeyse hepsinin bir Element konteyneri var. Her Öğe bir GUI parçasıdır.

Bunların her birinin konumu, grafiği vb. Vardır.

Daha fazla takıldığım şey onların mantığı.

Benim fikrim, modülerlik ve basitlik sağlamak için MainMenuStartButton'dan kaçınmaktı; a OptionsOneBackButton, vb. yerine bunun yerine Slider slider1 yapabilirsiniz; veya Düğme başlangıcı ;.

Bunun yerine, her biri bir GUI ad alanındaki Gui :: StartButtonClick veya GUI :: ColourSliderHover gibi bir işleve bir boost :: işlevi içerir.

Sadece bunun son derece yavaş olup olmayacağını merak ediyordum.

Ve bu nedenle, oyunlar için GUI yapmanın kolay ve basit bir yolu var mı? Qt, wxWidgets veya başka bir şey yok.

Yanıtlar:


15

GUI, özellikle oyunlara girdiğinizde ve dinamik, ilginç menülere sahip olma arzusu olduğunda kolay veya basit bir sorun değildir.

Yapabileceğiniz bir "kolay" şey, ara katman yazılımı kullanmaya çalışmaktır. Burada bir soru var .

Eğer kendiniz yuvarlayacaksanız, önerebileceğim birkaç şey var.

  • GUI öğelerinin genellikle "üst" öğesi, başka bir GUI öğesi veya "pencere" veya bunun gibi bir şeye sahiptir. Yukarı veya üst noktayı aşağıya çevirerek, çocuk olan her şeye durum / konum / vb. Ayarlayabilirsiniz.

  • GUI öğelerini kompozisyona göre oluşturabilirsiniz. Pek çok widget'ın etiketleri vardır (hemen hemen hepsi) ve bir etiket kavramını, kodu kopyalamak / yapıştırmak veya bir temel sınıftan miras almaya çalışmaktan ziyade bir bileşen veya diğer UI öğelerinizin bir alt öğesi yapmak mantıklı olabilir. etiket işlevselliği ile.

  • Sözde özel widget'ların çoğu sadece kılık değiştirmiş düğmelerdir. Onay kutuları yalnızca durumları ve özel görüntüleri olan düğmelerdir. Radyo düğmeleri yalnızca diğer radyo düğmeleriyle meta durumu olan (belirli bir anda yalnızca bir tane etkin olan) onay kutularıdır. Bunu kendi yararınıza kullanın. Üzerinde çalıştığım bir oyunda "kutucuklar" tamamen senaryo ve sanatla normal düğmelerle yapıldı.

  • İlk projeniz için daha doğrudan bir rota izlemeyi düşünün. Evet, eyleme geçirilebilir etkinlik temsilcilerinizi oluşturun ve öğe oluşturma konusunda ihtiyaç duyduğunuz şeyleri atayın (ör. OnMouseButtonDown, onMouseButtonUp, onHover vb.), Ancak başka bir şey olmasını istediğinizi yalnızca sabit kodlamayı düşünün (örneğin, fareyle üzerine gelindiğinde renk değişiklikleri, düğme basma sesleri) fonksiyonel. Bu noktaya geldikten sonra, bu davranış verilerini oluşturmayı düşünün (örneğin, "basın sesi" için bir değişkene sahip olun veya belki UI öğelerinizin oluştururken onlara eklediğiniz davranışı tanımlamak için kullandıkları bileşenleri kullanmayı düşünün.

  • delegeler o kadar yavaş değil, muhtemelen bir sorun olacak kadar çok widget'ınız olmayacak ve menü kodu genellikle bu kadar yüksek bir etki değil. Oyunun bu noktasında performans konusunda fazla endişelenmem. Kodunuzu çalıştırıp çalıştırdıktan sonra saf algoritmalar ve profil seçmeyin.


2
Daha karmaşık GUI şeyler için, yakında bir tür düzen yönetimine ihtiyacınız olacak. HBox ve VBox gibi temel mizanpajların kullanımı, mutlak koordinatlara sahip tüm öğelerin konumlandırılmasından çok daha kolaydır. Örnek: web.archive.org/web/20100410150433/http://doc.qt.nokia.com/4.6/… Bu, GUI'nizin kullanımını kolaylaştırır, ancak uygulaması o kadar kolay değildir;)
bummzack

8

Son birkaç yıldır genel kullanıcı arayüzü araç setlerinde gerçekten ilginç atılımlar oldu. Oyun arayüzleri de gelişiyor, ancak biraz daha yavaş. Bunun nedeni, tam özellikli bir UI alt sistemi geliştirmek kendi başına önemli bir girişim olması ve kaynak yatırımını haklı çıkarmak zor olmasıdır.

Benim kişisel favori arayüz sistemim Windows Presentation Foundation (WPF). UI farklılaşması potansiyelini bir sonraki seviyeye taşıyor. İşte daha ilginç özelliklerinden bazıları:

  1. Kontroller varsayılan olarak "bakımsız" dır. Bir kontrolün mantığı ve görsel görünümü genellikle birbirinden ayrılır. Her kontrol, varsayılan görsel görünümünü tanımlayan varsayılan bir stil ve şablonla birlikte gelir. Örneğin, bir düğme dış kontur, düz renk veya gradyan arka planı ve içerik sunumu (resim yazısı sunmak için) bulunan yuvarlatılmış bir dikdörtgen olarak temsil edilebilir. Geliştiriciler (veya tasarımcılar), bir denetimin görünümünü ve (bir ölçüde) davranışını değiştiren özel stiller şablonları oluşturabilir. Stiller, ön plan / arka plan rengi, şablon vb. Gibi bir kontrolün basit özelliklerini geçersiz kılmak için kullanılabilir; şablonları gerçek görsel yapıyı değiştirir.

  2. Stiller ve şablonlar "Tetikleyiciler" içerebilir. Tetikleyiciler belirli olayları veya özellik değerlerini (veya değer birleşimlerini) dinleyebilir ve bir stilin veya şablonun koşullarını koşullu olarak değiştirebilir. Örneğin, bir düğme şablonu genellikle fare düğmenin üzerine geldiğinde arka plan rengini değiştirmek amacıyla "IsMouseOver" özelliği üzerinde bir tetikleyiciye sahiptir.

  3. Minimal işlevselliğe sahip daha hafif ağırlık elemanlarından tam gelişmiş ağır ağırlık kontrollerine kadar birkaç farklı UI öğesi seviyesi vardır. Bu, kullanıcı arayüzünüzü nasıl yapılandırdığınız konusunda size esneklik sağlar. UI öğesi sınıflarının en basiti, UIElementstili veya şablonu yoktur ve yalnızca en basit girdi olaylarını destekler. Durum göstergeleri gibi basit öğeler için, bu işlev tek ihtiyacınız olabilir. Daha kapsamlı giriş desteğine ihtiyacınız varsa, FrameworkElement(bu da genişler UIElement) türetilebilir . Geleneksel widget'lar genellikle özel stil ve şablon desteğini (diğer şeylerin yanı sıra) Controlgenişleten FrameworkElementve ekleyen türden gelir.

  4. WPF korunmuş, ölçeklenebilir, çözünürlükten bağımsız vektör grafik modeli kullanır. Windows'da, WPF uygulamaları Direct3D kullanılarak oluşturulur ve oluşturulur.

  5. WPF'nin tanıtımı Xaml adında yeni bir bildirimsel programlama dili içeriyordu. Xml tabanlı Xaml, UI "sahneleri" bildirmek için tercih edilen dildir. Aslında oldukça kaygan ve ilk bakışta benzer görünse de, XUL (ve çok daha güçlü) gibi mevcut dillerden temelde farklı.

  6. WPF'nin çok gelişmiş bir metin alt sistemi vardır. Tüm OpenType yazı tipi özelliklerini, çift yönlü ClearType kenar yumuşatma, alt piksel konumlandırma vb.

"Tamam, harika, şimdi bu oyun geliştirme ile ne kadar ilgili?"

WPF hala gelişmekte iken (ve "Avalon" olarak bilinir), Georgia Tech'te bir video oyunu tasarım dersi alıyordum. Son projem sıra tabanlı bir strateji oyunuydu ve çok yetenekli bir kullanıcı arayüzü istedim. WPF / Avalon gitmek için iyi bir rota gibi görünüyordu, çünkü tam özellikli kontrollerden oluşan eksiksiz bir sete sahipti ve bana bu kontrollerin görünümünü ve hissini tamamen değiştirebilme yeteneğini kazandırdı. Sonuç, normalde yalnızca tam teşekküllü uygulamalarda gördüğünüz işlevsellik düzeyine sahip güzel ve net bir kullanıcı arayüzüne sahip bir oyundu.

Şimdi, WPF'yi oyunlar için kullanmanın sorunu oldukça ağır olması ve kendi "sanal alanında" görüntülenmesidir. Yani, Direct3D veya OpenGL oyun ortamında WPF'yi barındırmanın desteklenen bir yolu yoktur. Direct3D içeriğini bir WPF uygulaması içinde barındırmak mümkündür, ancak genellikle istediğinizden daha düşük olan WPF uygulamasının kare hızı ile sınırlı kalacaksınız. 2D strateji oyunları (mevcut WPF oyun projemin ekran görüntüsü) gibi bazı oyun türleri için yine de harika olabilir. Başka bir şey için, o kadar değil. Ancak yine de WPF'nin daha ilgi çekici mimari konseptlerinden bazılarını kendi UI çerçevenizi geliştirmede uygulayabilirsiniz.

Ayrıca WPF'nin "WPF / G (Oyunlar için WPF)"] ( http://wpfg.codeplex.com/ ) adında açık kaynaklı, yönetilmeyen bir C ++ / Direct3D uygulaması da vardır. ve Windows Mobile. Aktif gelişim sona ermiş gibi görünüyor, ancak en son kontrol ettiğimde oldukça eksiksiz bir uygulama oldu. Metin alt sistemi, Microsoft'un WPF uygulamasına kıyasla gerçekten eksik olan tek alandı, ancak bu oyunlar için daha az bir sorun. WPF / G'yi Direct3D tabanlı bir oyun motoruyla entegre etmenin nispeten basit olacağını hayal ediyorum. Bu rotaya geçmeniz, kullanıcı arayüzünü özelleştirme için kapsamlı desteğe sahip, son derece yetenekli, çözünürlükten bağımsız bir UI çerçevesi sağlayabilir.

Sadece WPF tabanlı bir oyun arayüzünün nasıl görünebileceği hakkında bir fikir vermek için, evcil hayvan projemin bir ekran görüntüsü:

Devam eden WPF tabanlı oyun projemin ekran görüntüsü


NoesisGUI, WPF kullanır. Oldukça iyi ama WPF bilmiyorum ve öğrenmesi için bir acı buluyorum. Şahsen bir web yığını yaklaşımını tercih ederim.
user441521

2

Anında bir GUI için gitmek istiyorum, http://code.google.com/p/nvidia-widgets/

NVidia widget'ları MollyRocket'tan IMGUI'ye (Anında GUI) dayanır.

Bunun bir GUI'nin alabileceği kadar basit olduğunu düşünüyorum.

Hepsi ihtiyaçlarınızın ne olduğuna bağlıdır.


1
Basit evet ve hızlı hata ayıklama çalışması veya prototipleme için ideal, ancak UI ile Anında GUI'lerde oyun mantığınız arasındaki bağlantı miktarı beni korkutuyor.
tenpn

2

Üzerinde çalıştığım oyunda kendi özel GUI çerçevemiz var. Çok basit buldum, ama yine de yapmasını istediğim her şeyi yapıyorum. Birçoğunun kullandığı bir "kalıp" olup olmadığını bilmiyorum, ama bizim için iyi çalışıyor.

Temel olarak, tüm düğmeler, onay kutuları vb. Element sınıfının alt sınıflarıdır; ve öğelerin Olayları vardır. Sonra diğer elemanları içeren CompoundElements (kendileri Element'in bir alt sınıfı olan) var. Her döngüde üç yöntem çağrılır: processEvent (event), tick (zaman) ve draw (yüzey). Her CompoundElement öğesi daha sonra bu yöntemleri alt Öğeleri üzerinde çağırır. Bu çağrılarda (özellikle processEvent yöntemi) ilgili olayları tetikleriz.

Tüm bunlar Python'da (C ++ 'dan çok daha yavaş bir dil) ve mükemmel çalışıyor.


2

Oldukça sofistike kullanıcı arayüzlerine ihtiyacınız olacaksa, en iyi seçim muhtemelen sadece bir HTML oluşturucu yerleştirmektir - alışkın olduğunuz tüm genel UI ilkelerini alırsınız ve oyununuza yol gösterecek karmaşık UI'yi ekleyebilirsiniz. kullanıcılar bekler, harika görünür ve hızlı çalışır (çünkü tarayıcılar bu noktada oldukça optimize edilmiş oluşturma boru hatlarına sahiptir).

Webkit'i oyunlara gömmek için birkaç kütüphane var: Berkelium tavsiye ettiğim ve Awesomium'un oldukça iyi olduğunu duyuyorum (EVE Online tarafından kullanılıyor) ve CEF (Steam tarafından kullanılıyor). Ayrıca Gecko'yu yerleştirmeyi de deneyebilirsiniz - bunu yapmak çok daha zordur, ancak bazı harika avantajları da vardır. Şu anda tüm oyun kullanıcı arayüzüm için Berkelium kullanıyorum (özel UI öğeleri ve yerel UI'nin bir kombinasyonunun yerini aldı ve işleri çalıştırmak için yazmak zorunda kaldığım kod miktarını önemli ölçüde azalttı).


^ Bu% 100. Oyun uygulamaları için iyi web yığını eksikliğinden dolayı üzüldüm. Web yığını kullanıcı arayüzü için mükemmel ve kullanıcı arayüzü için tüm oyunlarda daha yaygın olmaya başlaması gerekiyor. Şimdiye kadar birlikte çalıştığım kütüphaneler% 100 gerçek html / css / javascript uygulamak ya da uygulamak için eşek bir ağrı vardı. Şu anda Coherent Labs'a bakıyorum ve umut verici görünüyor ama makul bir maliyete sahip, ancak birkaç motor için indie versiyonları var.
user441521

2

Oyununuz için gerçekten gelişmiş bir GUI sistemine ihtiyacınız olduğundan emin olun. Bir bilgisayar RPG yapıyorsanız açıkçası bu bir gereklilik olacaktır; ama bir yarış oyunu gibi bir şey için fazla karmaşık olmayın. Bazen yalnızca doku oluşturma (özel düğme görüntüleri) ve giriş işlevinizde sabit kodlu koordinatlara sahip bazı "if" ifadelerine sahip olmak işi tamamlayabilir. Bir oyun durumu makinesi (FSM) bu basit yaklaşıma yardımcı olur. Ya da, ortada bir yerde, karmaşık hiyerarşi ve sahne grafiği yaklaşımını unutun ve yukarıda belirtilen doku ve giriş kontrollerini basit işlev çağrılarına paketleyen ancak karmaşık bir şey yapmayan bir "Düğme" sınıfına sahip olun.

İhtiyaçlarınızı azaltmak önemlidir. Emin değilseniz, sadece kendinize YAGNI'yi hatırlatın .


1

İşte özel olarak, OpenGL için inşa edilmiş bir GUI bir örnek (kaynak kodu ve tüm) var Slick2D denilen Thingle bir liman Thinlet .

Slick2D için başka bir GUI , kontrol etmek isteyebileceğiniz SUI idi .

Bu örnekleri takip eder ve XML güdümlü bir GUI ile devam ederdim. Bu projeler eski / ölü olmasına rağmen, onlardan bazı fikirler alabilirsiniz.


1

Bence "çözmenin" en iyi yollarından biri, .NET'te Windows Forms gibi son derece gelişmiş GUI çerçevelerinin nasıl çalıştığına bir göz atmak olacaktır.

Örneğin, hepsi bir konum, boyut, alt denetimler listesi, üst Textöğeye başvuru , denetimin kullanabileceği her şey için bir özelliğe ve çeşitli geçersiz kılınabilir işlevlere ve önceden tanımlanmış eylemlere sahip olan Kontrollerdir.

Hepsi Click, MouseOverve gibi çeşitli etkinlikler içerir Resizing.

Örneğin, bir alt denetim değiştirildiğinde, zincirinin düzeninin değiştiğine dair bir bildirim gönderir ve ardından tüm ebeveynler arar PerformLayout().

Ayrıca, otomatik boyutlandırma ve otomatik düzenleme, bu GUI'lerin ortak özellikleridir ve programcıların basitçe kontroller eklemesine izin verir ve üst kontroller bunları otomatik olarak ayarlar veya düzenler.


1

Çıkarlar uğruna, Ben Ölçeği atmak düşündüm . Temel olarak sanatçılar illustrator, photoshop vb. Kullanabilir, ardından UI tasarımcısı tüm etkileşimi düzenlemek için Flash'ı kullanır. Daha sonra Scaleform bunu motorunuz için koda dönüştürür (bunu kullanmadığım için benim anlayışım budur). Crysis Warhead bu sistemi lobileri için kullandı.

Sitemizi kullandığınızda şunları okuyup anladığınızı kabul etmiş olursunuz: Çerez Politikası ve Gizlilik Politikası.
Licensed under cc by-sa 3.0 with attribution required.