Làm thế nào để đi về các yếu tố GUI?

Lưu ý: Tôi có kế hoạch tạo hệ thống GUI của riêng tôi. Nó sẽ tốt cho việc học, nhẹ, chỉ có bit tôi cần, quan hệ với trò chơi, v.v.

Tôi đã suy nghĩ về cách làm điều đó. Các yếu tố tôi muốn nói là:

• Nút radio
• Nhập văn bản vào đây
• nút
• Thanh trượt
• Hộp kiểm

Tôi chưa tìm cách tạo ra chúng. Nhưng nhiều hơn về cách họ sẽ đi.

Ý tưởng

Tôi sẽ có mỗi trạng thái cần những thứ cần thiết, vì vậy hầu như tất cả, đều có một thùng chứa các yếu tố. Mỗi phần tử là một mảnh GUI.

Những cái này có vị trí, một đồ họa, vv

Cái tôi bị mắc kẹt hơn là logic của chúng.

Ý tưởng của tôi cho điều đó, để cho phép tính mô đun và đơn giản là tránh MainMothyStartButton; một OptionsOneBackButton, v.v. và thay vào đó có thể thực hiện thanh trượt Slider1; hoặc Nút bắt đầu;.

Thay vào đó, mỗi cái sẽ có chức năng boost :: cho một chức năng trong không gian tên GUI, chẳng hạn như Gui :: StartButtonClick hoặc GUI :: ColourSliderHover.

Tôi chỉ tự hỏi liệu điều này sẽ đặc biệt chậm hay không.

Và đối với vấn đề đó, có cách nào dễ dàng, đơn giản để làm GUI cho trò chơi không? Không có Qt, wxWidgets hoặc bất cứ điều gì.

GUI không phải là một vấn đề dễ dàng hay đơn giản, đặc biệt là khi bạn tham gia vào các trò chơi và họ muốn có các menu thú vị, năng động.

Một điều "dễ dàng" bạn có thể làm là cố gắng sử dụng phần mềm trung gian. Có một câu hỏi về điều đó ở đây .

Nếu bạn sẽ tự cuộn nó, có một vài điều tôi muốn đề xuất.

• Các phần tử GUI thường có "cha mẹ", một phần tử GUI khác hoặc "cửa sổ" hoặc một cái gì đó tương tự. Bằng cách chỉ lên hoặc để cha mẹ chỉ xuống có nghĩa là bạn có thể đặt trạng thái / vị trí / vv trên mọi thứ mà trẻ em.

• Bạn có thể xây dựng các yếu tố GUI theo thành phần. Rất nhiều widget có nhãn (khá nhiều trong số chúng) và có thể hợp lý để biến khái niệm nhãn thành thành phần hoặc con của các thành phần UI khác của bạn thay vì sao chép / dán mã hoặc cố gắng kế thừa từ lớp cơ sở với chức năng nhãn.

• Rất nhiều cái gọi là vật dụng chuyên dụng chỉ là các nút được ngụy trang. Hộp kiểm chỉ là các nút có trạng thái và hình ảnh đặc biệt. Các nút radio chỉ là các hộp kiểm có trạng thái meta (một và chỉ một hoạt động tại bất kỳ thời điểm nào) với các nút radio khác. Sử dụng cái này cho lợi thế của bạn. Trong một trò chơi tôi đã làm việc, "các hộp kiểm" được thực hiện với các nút thông thường hoàn toàn thông qua kịch bản và nghệ thuật.

• Đối với dự án đầu tiên của bạn, hãy xem xét đi theo con đường trực tiếp hơn. Có, làm cho các sự kiện có thể hành động của bạn được ủy quyền và chỉ định những gì bạn cần khi tạo phần tử (ví dụ: onMouseButtonDown, onMouseButtonUp, onHover, v.v.), nhưng hãy xem xét chỉ mã hóa cứng những gì bạn muốn xảy ra nếu không (ví dụ như thay đổi màu di chuột, nhấn nút âm thanh) cho đến khi bạn nhận được thứ gì đó chức năng. Khi bạn đang ở thời điểm đó, hãy cân nhắc việc tạo dữ liệu hành vi đó (tức là có một nút trên nút "nhấn âm thanh" hoặc có thể xem xét việc có các thành phần mà các thành phần UI của bạn sử dụng để xác định hành vi mà bạn chỉ gắn vào chúng khi bạn tạo chúng.

• các đại biểu không chậm đến mức đó, có lẽ bạn sẽ không có quá nhiều vật dụng mà nó sẽ là một vấn đề và mã menu thường không có tác động cao. Tôi sẽ không lo lắng quá nhiều về hiệu suất tại thời điểm này trong trò chơi. Đừng chọn các thuật toán và hồ sơ ngây thơ một khi bạn nhận được mã của mình và chạy.

Đã có một số đột phá thực sự thú vị trong bộ công cụ UI chính trong vài năm qua. Giao diện người dùng trò chơi cũng đang phát triển, nhưng với tốc độ chậm hơn một chút. Điều này có thể xảy ra bởi vì việc phát triển một hệ thống con UI đầy đủ tính năng là một công việc quan trọng trong chính nó và rất khó để biện minh cho việc đầu tư tài nguyên.

Hệ thống UI yêu thích cá nhân của tôi là Windows Presentation Foundation (WPF). Nó thực sự đưa tiềm năng phân biệt UI lên cấp độ tiếp theo. Dưới đây là một số tính năng thú vị hơn của nó:

1. Điều khiển là "ít nhìn" theo mặc định. Logic và hình thức trực quan của điều khiển thường được tách rời. Mỗi điều khiển vận chuyển với một kiểu và mẫu mặc định, mô tả sự xuất hiện trực quan mặc định của nó. Ví dụ, một nút có thể được biểu diễn dưới dạng hình chữ nhật tròn với một nét bên ngoài, màu nền hoặc màu nền và trình bày nội dung (để trình bày chú thích). Các nhà phát triển (hoặc nhà thiết kế) có thể tạo các mẫu kiểu tùy chỉnh thay đổi giao diện và (ở một mức độ) hành vi của điều khiển. Kiểu có thể được sử dụng để ghi đè các thuộc tính đơn giản của điều khiển, như màu nền trước / nền, mẫu, v.v.; mẫu thay đổi cấu trúc hình ảnh thực tế.

2. Kiểu và mẫu có thể bao gồm "Triggers". Kích hoạt có thể lắng nghe một số sự kiện hoặc giá trị thuộc tính (hoặc kết hợp các giá trị) và thay đổi điều kiện các khía cạnh của một kiểu hoặc mẫu. Chẳng hạn, một mẫu nút nói chung sẽ có một kích hoạt trên thuộc tính "IsMouseOver" cho mục đích thay đổi màu nền khi chuột di chuyển qua nút.

3. Có một số "cấp độ" khác nhau của các thành phần UI khác nhau, từ các yếu tố trọng lượng nhẹ hơn với chức năng tối thiểu đến các điều khiển trọng lượng nặng đầy đủ. Điều này cho phép bạn linh hoạt trong cách bạn cấu trúc giao diện người dùng của mình. Đơn giản nhất trong các lớp phần tử UI UIElement, không có kiểu hoặc mẫu và chỉ hỗ trợ các sự kiện đầu vào đơn giản nhất. Đối với các yếu tố đơn giản như chỉ báo trạng thái, chức năng này có thể là tất cả những gì bạn cần. Nếu bạn cần hỗ trợ đầu vào rộng hơn, bạn có thể xuất phát từ FrameworkElement(mở rộng UIElement). Các vật dụng truyền thống thường có nguồn gốc từ Control, mở rộng FrameworkElementvà thêm hỗ trợ mẫu và kiểu tùy chỉnh (trong số những thứ khác).

4. WPF sử dụng mô hình đồ họa vector độc lập, có thể mở rộng, có độ phân giải. Trên Windows, các ứng dụng WPF được kết xuất và soạn thảo bằng Direct3D.

5. Sự ra đời của WPF bao gồm một ngôn ngữ lập trình khai báo mới gọi là Xaml. Xaml, dựa trên Xml, là ngôn ngữ ưa thích để khai báo "cảnh" UI. Nó thực sự khá hấp dẫn và mặc dù thoạt nhìn có vẻ giống nhau, nhưng về cơ bản nó khác với các ngôn ngữ hiện có như XUL (và mạnh hơn nhiều).

6. WPF có một hệ thống con văn bản rất tiên tiến. Nó hỗ trợ hầu hết nếu không phải tất cả các tính năng phông chữ OpenType, khử răng cưa ClearType hai chiều, định vị pixel phụ, v.v.

"Ok, tuyệt, bây giờ điều này có liên quan đến phát triển trò chơi như thế nào?"

Quay lại khi WPF vẫn đang trong quá trình phát triển (và được gọi là "Avalon"), tôi đã tham gia khóa học thiết kế trò chơi video tại Georgia Tech. Dự án cuối cùng của tôi là một game chiến thuật theo lượt và tôi muốn có một giao diện người dùng rất có khả năng. WPF / Avalon dường như là một hướng đi tốt vì nó có một bộ điều khiển đầy đủ tính năng và nó cho tôi khả năng thay đổi hoàn toàn giao diện của các điều khiển đó. Kết quả là một trò chơi với giao diện người dùng đẹp và sắc nét với mức độ chức năng mà bạn thường chỉ thấy trong các ứng dụng chính thức.

Bây giờ, vấn đề với việc sử dụng WPF cho các trò chơi là nó khá nặng và hiển thị trong "hộp cát" của chính nó. Do đó, ý tôi là không có cách nào hỗ trợ lưu trữ WPF trong môi trường trò chơi Direct3D hoặc OpenGL. Có thể lưu trữ nội dung Direct3D trong ứng dụng WPF, nhưng bạn sẽ bị giới hạn bởi tốc độ khung hình của ứng dụng WPF, thường thấp hơn bạn muốn. Đối với một số loại trò chơi, như trò chơi chiến lược 2D (ảnh chụp màn hình dự án trò chơi WPF hiện tại của tôi), nó vẫn có thể hoạt động tốt. Đối với bất cứ điều gì khác, không quá nhiều. Nhưng bạn vẫn có thể áp dụng một số khái niệm kiến ​​trúc hấp dẫn hơn của WPF trong việc phát triển khung UI của riêng bạn.

Ngoài ra còn có một triển khai WPF / Direct3D mã nguồn mở, không được quản lý của WPF có tên là "WPF / G (WPF cho trò chơi)"] ( http://wpfg.codeplex.com/ ) được thiết kế riêng để sử dụng trong các trò chơi trên cả Win32 và Windows Mobile. Sự phát triển tích cực dường như đã chấm dứt, nhưng lần cuối cùng tôi kiểm tra nó, đó là một triển khai khá hoàn chỉnh. Hệ thống con văn bản là một lĩnh vực thực sự thiếu so với triển khai WPF của Microsoft, nhưng đó không phải là vấn đề đối với các trò chơi. Tôi sẽ tưởng tượng rằng việc tích hợp WPF / G với công cụ trò chơi dựa trên Direct3D sẽ tương đối đơn giản. Đi theo lộ trình này có thể cung cấp cho bạn một khung UI độc lập, có độ phân giải cực kỳ có khả năng với sự hỗ trợ rộng rãi cho việc tùy chỉnh UI.

Chỉ để cung cấp cho bạn ý tưởng về giao diện người dùng trò chơi dựa trên WPF trông như thế nào, đây là ảnh chụp màn hình từ dự án thú cưng của tôi:

Tôi sẽ dùng GUI ngay lập tức, như thế này: http://code.google.com.vn/p/nvidia-widgets/

Các widget nVidia dựa trên IMGUI (GUI ngay lập tức) từ MollyRocket.

Tôi nghĩ đó là điều đơn giản như GUI có thể nhận được.

Tất cả phụ thuộc vào nhu cầu của bạn là gì.

Trong trò chơi tôi đang làm việc, chúng tôi có khung GUI tùy chỉnh của riêng mình. Tôi đã thấy nó rất đơn giản, nhưng vẫn làm mọi thứ tôi muốn nó làm. Tôi không biết liệu đó có phải là "mẫu" mà nhiều người khác sử dụng hay không, nhưng nó hoạt động tốt với chúng tôi.

Về cơ bản, tất cả các nút, hộp kiểm, v.v. là các lớp con của Element Element; và các yếu tố có Sự kiện. Sau đó, chúng ta có CompoundElements (bản thân chúng là một lớp con của Element), chứa các phần tử khác. Trong mỗi chu kỳ, ba phương thức được gọi là: processEvent (sự kiện), đánh dấu (thời gian) và vẽ (bề mặt). Mỗi CompoundE bổ sung sau đó gọi các phương thức đó trên các phần tử con của nó. Trong các cuộc gọi đó (đặc biệt là phương thức processEvent), chúng tôi sẽ loại bỏ mọi sự kiện có liên quan.

Tất cả điều này là bằng Python (một ngôn ngữ chậm hơn nhiều so với C ++) và nó chạy hoàn toàn tốt.

Nếu bạn sẽ cần các UI khá phức tạp, lựa chọn tốt nhất có lẽ là chỉ cần nhúng trình kết xuất HTML - bạn có được tất cả các nguyên hàm UI phổ biến mà bạn đã quen và bạn có thể thêm giao diện người dùng phức tạp vào trò chơi của mình theo cách của bạn. Người dùng mong đợi, nhìn tuyệt vời và chạy nhanh (vì các trình duyệt có đường ống kết xuất được tối ưu hóa khá tốt tại thời điểm này).

Có một vài thư viện để nhúng Webkit trong các trò chơi: Berkelium là thư viện tôi khuyên dùng và tôi nghe Awesomium khá tốt (được EVE Online sử dụng) và CEF (được Steam sử dụng). Bạn cũng có thể thử nhúng Tắc kè - khó hơn rất nhiều nhưng cũng có một số lợi thế tuyệt vời. Tôi hiện đang sử dụng Berkelium cho tất cả giao diện người dùng trò chơi của mình (nó đã thay thế kết hợp các yếu tố UI tùy chỉnh và giao diện người dùng gốc và giảm đáng kể số lượng mã tôi phải viết để chạy mọi thứ).

Hãy chắc chắn rằng bạn thực sự cần một hệ thống GUI tinh vi cho trò chơi của bạn. Nếu bạn đang làm một game nhập vai trên máy tính thì rõ ràng đó sẽ là một yêu cầu; nhưng đối với một cái gì đó giống như một trò chơi đua xe, đừng quá phức tạp. Đôi khi chỉ cần kết xuất họa tiết (hình ảnh nút tùy chỉnh) và có một số câu lệnh "nếu" có tọa độ được mã hóa cứng trong hàm đầu vào của bạn có thể hoàn thành công việc. Một máy trạng thái trò chơi (FSM) giúp với phương pháp đơn giản này. Hoặc, ở đâu đó ở giữa, hãy quên cách tiếp cận biểu đồ phân cấp và biểu đồ cảnh phức tạp và chỉ có một lớp "Nút" đóng gói kết cấu và kiểm tra đầu vào được đề cập ở trên vào các lệnh gọi hàm đơn giản, nhưng không làm gì phức tạp.

Đóng đinh yêu cầu của bạn là quan trọng. Nếu bạn không chắc chắn, chỉ cần nhắc nhở bản thân YAGNI .

Dưới đây là một ví dụ (mã nguồn và tất cả) của GUI được xây dựng cho OpenGL, đặc biệt dành cho Slick2D có tên Thingle , một cổng của Thinlet .

Một GUI khác cho Slick2D là SUI mà bạn có thể muốn kiểm tra.

Tôi sẽ làm theo các ví dụ này và đi với GUI điều khiển XML. Mặc dù các dự án này đã cũ / đã chết, bạn có thể có thể lấy một số ý tưởng từ chúng.

Tôi nghĩ rằng một trong những cách tốt nhất để "tìm ra" sẽ là xem xét cách các khung GUI phát triển cao hoạt động, chẳng hạn như Windows Forms trong .NET.

Ví dụ: tất cả chúng đều là Điều khiển, có vị trí, kích thước, danh sách các điều khiển con, tham chiếu đến cha mẹ của nó, một Text tính cho bất kỳ điều khiển nào có thể sử dụng nó, cũng như các chức năng có thể ghi đè khác nhau và các hành động được xác định trước.

Chúng đều chứa các sự kiện khác nhau như Click, MouseOvervàResizing .

Ví dụ: khi thay đổi điều khiển con, nó sẽ gửi một thông báo lên chuỗi rằng bố cục của nó đã thay đổi và tất cả các bậc cha mẹ sau đó gọi PerformLayout() .

Đồng thời, tự động định cỡ và tự động sắp xếp là các tính năng phổ biến của các GUI này, cho phép các lập trình viên chỉ cần thêm các điều khiển và các điều khiển chính điều chỉnh hoặc sắp xếp chúng tự động.

Vì lợi ích tôi nghĩ tôi sẽ ném ra Scaleform . Về cơ bản các nghệ sĩ có thể sử dụng vẽ tranh minh họa, photoshop, v.v., sau đó người thiết kế UI sử dụng Flash để bố trí tất cả các tương tác. Sau đó, Scaleform chuyển đổi nó thành mã cho công cụ của bạn (đó là sự hiểu biết của tôi về nó khi tôi chưa sử dụng nó). Crysis Warhead đã sử dụng hệ thống này cho sảnh của họ.