Bagaimana cara menjalankan elemen GUI?

Catatan: Saya berencana membuat sistem GUI saya sendiri. Ini akan bagus untuk belajar, ringan, hanya memiliki bit yang saya butuhkan, terkait dengan permainan, dll.

Saya sedang berpikir tentang bagaimana melakukannya. Elemen yang saya maksud adalah:

• Tombol radio
• Masukkan kotak teks di sini
• Tombol
• Bilah geser
• Kotak centang

Saya belum mencari cara membuatnya. Tetapi lebih dari bagaimana mereka akan pergi.

Ide

Saya akan meminta setiap negara bagian yang membutuhkan barang, sehingga hampir semua, memiliki wadah Elemen. Setiap Elemen adalah-bagian GUI.

Masing-masing memiliki posisi, grafik, dll.

Bagian yang membuat saya lebih terjebak adalah logika mereka.

Ide saya untuk itu, untuk memungkinkan modularitas dan kesederhanaan adalah untuk menghindari MainMenuStartButton; OptionsOneBackButton, dll. dan sebagai gantinya dapat melakukan slider1 Slider; atau Tombol start ;.

Sebaliknya, masing-masing akan memiliki fungsi boost :: ke fungsi dalam namespace GUI, seperti Gui :: StartButtonClick, atau GUI :: ColourSliderHover.

Saya hanya bertanya-tanya apakah ini akan sangat lambat atau tidak.

Dan dalam hal ini, apakah ada cara mudah dan sederhana untuk melakukan GUI untuk game? Tidak ada Qt, wxWidgets atau apa pun.

GUI bukanlah masalah yang mudah atau sederhana, terutama ketika Anda memasuki permainan dan keinginan mereka untuk memiliki menu yang dinamis dan menarik.

Satu hal "mudah" yang dapat Anda lakukan adalah mencoba menggunakan middleware. Ada pertanyaan tentang itu di sini .

Jika Anda ingin membuatnya sendiri, ada beberapa hal yang saya sarankan.

• Elemen GUI umumnya memiliki "induk", baik elemen GUI lain atau "jendela", atau sesuatu seperti itu. Entah dengan menunjuk ke atas atau membiarkan orangtua menunjuk ke bawah berarti Anda dapat mengatur status / posisi / dll pada semua yang anak-anak.

• Anda dapat membangun elemen GUI dengan komposisi. Banyak widget memiliki label (hampir semuanya), dan mungkin masuk akal untuk membuat konsep label sebagai komponen atau anak dari elemen UI Anda yang lain daripada menyalin / menempelkan kode atau mencoba mewarisi dari kelas dasar dengan fungsionalitas label.

• Banyak yang disebut widget khusus hanyalah tombol yang menyamar. Kotak centang hanyalah tombol dengan status dan gambar khusus. Tombol radio hanyalah kotak centang yang memiliki meta-state (satu dan hanya satu yang aktif pada waktu tertentu) dengan tombol radio lainnya. Gunakan ini untuk keuntungan Anda. Dalam satu permainan yang saya kerjakan, "kotak centang" dilakukan dengan tombol biasa seluruhnya melalui skrip dan seni.

• Untuk proyek pertama Anda, pertimbangkan untuk mengambil rute yang lebih langsung. Ya, buat delegasi acara yang dapat ditindaklanjuti dan tetapkan apa yang Anda butuhkan pada pembuatan elemen (mis. OnMouseButtonDown, onMouseButtonUp, onHover dll), tetapi pertimbangkan hanya pengodean keras apa yang Anda inginkan terjadi sebaliknya (mis. Bawa perubahan warna, tekan tombol suara) hingga Anda mendapatkan sesuatu fungsional. Setelah Anda berada di titik itu, pertimbangkan untuk membuat data perilaku tersebut (yaitu, ada variabel pada tombol untuk "tekan suara", atau mungkin mempertimbangkan memiliki komponen yang elemen UI Anda gunakan untuk mendefinisikan perilaku yang baru saja Anda lampirkan pada mereka ketika Anda membuatnya.

• delegasi tidak begitu lambat, Anda mungkin tidak akan memiliki begitu banyak widget yang akan menjadi masalah, dan kode menu umumnya tidak berdampak tinggi pula. Saya tidak akan terlalu khawatir tentang kinerja pada saat ini dalam permainan. Jangan memilih algoritme dan profil naif setelah kode Anda aktif dan berjalan.

Ada beberapa terobosan yang sangat menarik dalam toolkit UI utama selama beberapa tahun terakhir. Game UIs telah berevolusi juga, tetapi pada kecepatan yang agak lambat. Ini mungkin karena mengembangkan subsistem UI berfitur lengkap adalah usaha yang signifikan, dan sulit untuk membenarkan investasi sumber daya.

Sistem UI favorit pribadi saya adalah Windows Presentation Foundation (WPF). Ini benar-benar membawa potensi diferensiasi UI ke tingkat berikutnya. Berikut adalah beberapa fitur yang lebih menarik:

1. Kontrol "terlihat-kurang" secara default. Logika kontrol dan tampilan visual umumnya dipisahkan. Setiap kontrol dikirimkan dengan gaya dan templat default, yang menjelaskan tampilan visual standarnya. Misalnya, tombol dapat direpresentasikan sebagai persegi panjang bulat dengan goresan luar, warna solid atau latar belakang gradien, dan penyaji konten (untuk menyajikan keterangan). Pengembang (atau desainer) dapat membuat templat gaya khusus yang mengubah tampilan dan (sampai batas tertentu) perilaku kontrol. Gaya dapat digunakan untuk menimpa properti sederhana kontrol, seperti warna foreground / background, template, dll .; templat mengubah struktur visual yang sebenarnya.

2. Gaya dan template mungkin termasuk "Pemicu". Pemicu dapat mendengarkan peristiwa atau nilai properti tertentu (atau kombinasi nilai) dan mengubah aspek gaya atau templat secara kondisional. Misalnya, templat tombol biasanya memiliki pemicu pada properti "IsMouseOver" untuk tujuan mengubah warna latar belakang saat mouse melayang di atas tombol.

3. Ada beberapa "level" elemen UI yang berbeda, mulai dari elemen bobot yang lebih ringan dengan fungsionalitas minimal hingga kontrol berat penuh. Ini memberi Anda beberapa fleksibilitas dalam bagaimana Anda menyusun UI Anda. Kelas elemen UI yang paling sederhana UIElement,, tidak memiliki gaya atau templat dan hanya mendukung acara masukan yang paling sederhana. Untuk elemen sederhana seperti indikator status, fungsi ini mungkin yang Anda butuhkan. Jika Anda memerlukan dukungan input yang lebih luas, Anda dapat berasal dari FrameworkElement(yang meluas UIElement). Widget tradisional umumnya berasal dari Control, yang meluas FrameworkElementdan menambahkan gaya kustom dan dukungan template (antara lain).

4. WPF menggunakan model grafik vektor resolusi tetap, terukur, independen. Pada Windows, aplikasi WPF dirender dan disusun menggunakan Direct3D.

5. Pengenalan WPF termasuk bahasa pemrograman deklaratif baru yang disebut Xaml. Xaml, berdasarkan Xml, adalah bahasa yang disukai untuk mendeklarasikan "adegan" UI. Ini sebenarnya cukup apik, dan meskipun mungkin tampak serupa pada pandangan pertama, secara fundamental berbeda dari bahasa yang ada seperti XUL (dan jauh lebih kuat).

6. WPF memiliki subsistem teks yang sangat canggih. Ini mendukung sebagian besar jika tidak semua fitur font OpenType, antialiasing ClearType dua arah, penentuan posisi subpixel, dll.

"Ok, bagus, sekarang bagaimana ini relevan dengan pengembangan game?"

Kembali ketika WPF masih dalam pengembangan (dan dikenal sebagai "Avalon"), saya mengambil kursus desain video game di Georgia Tech. Tugas akhir saya adalah permainan strategi berbasis giliran, dan saya menginginkan UI yang sangat cakap. WPF / Avalon sepertinya rute yang baik untuk pergi karena memiliki satu set lengkap kontrol berfitur lengkap dan memberi saya kemampuan untuk sepenuhnya mengubah tampilan dan nuansa kontrol tersebut. Hasilnya adalah game dengan UI yang indah dan jernih dengan tingkat fungsionalitas yang biasanya hanya Anda lihat di aplikasi lengkap.

Sekarang, masalah dengan menggunakan WPF untuk game adalah itu cukup berat dan menjadikannya "kotak pasir" sendiri. Maksud saya, tidak ada cara yang didukung untuk hosting WPF dalam lingkungan game Direct3D atau OpenGL. Dimungkinkan untuk meng-host konten Direct3D dalam aplikasi WPF, tetapi Anda akan dibatasi oleh framerate dari aplikasi WPF, yang umumnya lebih rendah dari yang Anda inginkan. Untuk beberapa jenis gim, seperti gim strategi 2D (tangkapan layar proyek gim WPF saya saat ini), masih bisa berfungsi dengan baik. Untuk hal lain, jangan terlalu banyak. Tetapi Anda masih bisa menerapkan beberapa konsep arsitektur WPF yang lebih menarik dalam mengembangkan kerangka UI Anda sendiri.

Ada juga implementasi WPF / G3 / Direct3D open-source yang tidak dikelola yang disebut "WPF / G (WPF untuk Game)"] ( http://wpfg.codeplex.com/ ) yang dirancang khusus untuk digunakan dalam game di kedua Win32. dan Windows Mobile. Pengembangan aktif tampaknya telah berhenti, tetapi terakhir kali saya memeriksanya, itu adalah implementasi yang agak lengkap. Subsistem teks adalah satu bidang yang benar-benar kurang dibandingkan dengan implementasi WPF Microsoft, tapi itu kurang menjadi masalah untuk game. Saya akan membayangkan bahwa mengintegrasikan WPF / G dengan mesin game berbasis Direct3D akan relatif mudah. Pergi rute ini dapat memberi Anda kerangka kerja UI yang sangat mampu, resolusi-bebas dengan dukungan luas untuk penyesuaian UI.

Hanya untuk memberi Anda gambaran seperti apa UI game berbasis WPF, berikut adalah screenshot dari proyek kesayangan saya:

Saya akan menggunakan GUI langsung, seperti ini: http://code.google.com/p/nvidia-widgets/

Widget nVidia didasarkan pada IMGUI (GUI Langsung) dari MollyRocket.

Saya pikir itu sesederhana GUI yang pernah bisa.

Semua tergantung pada apa kebutuhan Anda.

Dalam game yang sedang saya kerjakan, kami memiliki kerangka kerja GUI khusus kami sendiri. Saya menemukan ini sangat sederhana, tetapi masih melakukan semua yang saya inginkan. Saya tidak tahu apakah itu "pola" yang digunakan banyak orang lain, tetapi itu bekerja dengan baik untuk kita.

Pada dasarnya, semua tombol, kotak centang, dll. Adalah subclass dari Elemen kelas; dan elemen memiliki Acara. Lalu kami memiliki CompoundElements (yang sendiri merupakan subkelas Elemen), yang berisi elemen lain. Dalam setiap siklus, tiga metode disebut: processEvent (event), tick (waktu), dan draw (surface). Setiap CompoundElement kemudian memanggil metode tersebut pada Elemen anaknya. Dalam panggilan tersebut (khususnya metode processEvent), kami memadamkan semua peristiwa yang relevan.

Semua ini dalam Python (bahasa yang jauh lebih lambat dari C ++), dan itu berjalan dengan baik.

Jika Anda akan membutuhkan UI yang cukup canggih, pilihan terbaik mungkin hanya dengan menanamkan renderer HTML - Anda mendapatkan semua primitif UI umum yang biasa Anda gunakan, dan Anda dapat menambahkan UI kompleks ke dalam gim Anda yang sepele. pengguna berharap, terlihat hebat, dan berlari cepat (karena browser memiliki jalur render yang cukup optimal pada saat ini).

Ada beberapa perpustakaan di luar sana untuk menanamkan Webkit dalam permainan: Berkelium adalah yang saya rekomendasikan, dan saya mendengar Awesomium cukup bagus (digunakan oleh EVE Online) dan begitu juga CEF (digunakan oleh Steam). Anda juga dapat mencoba menanamkan tokek - ini jauh lebih sulit untuk dilakukan tetapi memiliki beberapa kelebihan keren juga. Saat ini saya menggunakan Berkelium untuk semua UI permainan saya (menggantikan kombinasi elemen UI khusus dan UI asli, dan secara dramatis mengurangi jumlah kode yang harus saya tulis untuk membuat semuanya berjalan).

Pastikan Anda benar-benar membutuhkan sistem GUI yang canggih untuk gim Anda. Jika Anda membuat RPG komputer maka jelas itu akan menjadi persyaratan; tetapi untuk sesuatu seperti game balapan, jangan terlalu rumit. Kadang-kadang hanya rendering tekstur (gambar tombol kustom) dan memiliki beberapa pernyataan "jika" dengan koordinat hard-coded di fungsi input Anda dapat menyelesaikan pekerjaan. Game state machine (FSM) membantu dengan pendekatan sederhana ini. Atau, di suatu tempat di tengah, lupakan pendekatan hierarki dan grafik adegan yang rumit dan hanya memiliki kelas "Tombol" yang mengemas pemeriksaan input dan tekstur yang disebutkan di atas ke dalam pemanggilan fungsi sederhana, tetapi tidak melakukan hal yang rumit.

Memastikan kebutuhan Anda penting. Jika Anda tidak yakin, ingatkan diri Anda YAGNI .

Inilah salah satu contoh (kode sumber dan semua) dari GUI yang dibangun untuk OpenGL, khusus untuk Slick2D yang disebut Thingle yang merupakan port Thinlet .

GUI lain untuk Slick2D adalah SUI yang mungkin ingin Anda periksa.

Saya akan mengikuti contoh ini dan pergi dengan GUI berbasis XML. Meskipun proyek ini sudah tua / mati, Anda mungkin dapat mengambil beberapa ide dari mereka.

Saya pikir salah satu cara terbaik untuk "mencari tahu" adalah dengan melihat bagaimana kerangka kerja GUI yang sangat maju bekerja, seperti Formulir Windows di .NET.

Misalnya, mereka semua Kontrol, yang memiliki lokasi, ukuran, daftar kontrol anak, referensi ke induknya, Textproperti untuk apa pun kontrol dapat menggunakannya untuk, serta berbagai fungsi yang dapat ditimpa dan tindakan yang telah ditentukan sebelumnya.

Semuanya berisi berbagai acara seperti Click, MouseOverdan Resizing.

Misalnya, ketika kontrol anak diubah, ia mengirimkan pemberitahuan ke rantai bahwa tata letaknya telah berubah, dan semua orang tua kemudian memanggil PerformLayout().

Selain itu, pengaturan otomatis dan pengaturan otomatis adalah fitur umum dari GUI ini, yang memungkinkan programmer untuk hanya menambahkan kontrol dan kontrol induk menyesuaikan atau mengaturnya secara otomatis.

Demi kepentingan saya pikir saya akan membuang Scaleform . Pada dasarnya para seniman dapat menggunakan ilustrator, photoshop dll, maka desainer UI menggunakan Flash untuk menata semua interaktivitas. Kemudian Scaleform mengubahnya menjadi kode untuk mesin Anda (baik itu pemahaman saya tentang hal itu karena saya belum menggunakannya). Crysis Warhead menggunakan sistem ini untuk lobi mereka.