Using wx to create game GUI?
BlitzMax Forums/Brucey's Modules/Using wx to create game GUI?
| ||
| So what are you opinions on using wx to create a game GUI for a strategy game? I think the biggest thing is to make the UI elements look good. So what is the best approach to "skinning" the UI elements in wx? Making your own components that look good from the start, or adjusting the look of wx components by recoding paint functions and such? Here are two screenshots from Empires of Steel for reference of what kind of GUI stuff I am talking about:   |
| ||
| I don't know much about Wx for Game GUI but you could also think about the powerful CEGUI and bring fast accelerated GUI in your game. This is for example the built-in level editor of my current game (with toolbar, skin, particles, inspector and tile editor all shown together):  100% Skinable with Falagard System and contain all those GUI Components : http://www.cegui.org.uk/wiki/index.php/SetProperty Maybe the Technology Tree will give you hard time to realise but any kind of tools can be achieved by combining those Components. But this require a good knowledge of the system. Other than that, every out-of-the-box components are greats and highly customizable. There is also a GUI Editor which is maybe not perfect but help a lot. |
| ||
| I spotted a tree widget for CE, so I suppose it's not a problem. I'd like to have a HTML widget as well though. Where do you get CEGUI module? Can't see it listed at Brucey's places. |
| ||
| Wow, brilliant editor Armitage! @ mr errors http://code.google.com/p/maxmods/ from the svn. As for cegui...it was a pretty quick scheme (pun not intended) to get something good looking out, but it seriously lacks flexibility, and I found there to be quite a few random bugs in it still, so I went with wxwidgets (mostly for better list control, being able to format text, and the amazing event flexibility) and with a tiny bit of workarounds was able to use it efficiently for a fair gui...and really, who knows if crazyeddie will always continue development on it. I didn't have time to wait on the 'possibility' that crazyeddie (cegui developer) would impliment the features that I needed. CEGUI isn't the devil or anything, but it doesn't yet seem like it's beyond an alpha stage. What you're looking for should be possible with wxwidgets, but you're looking at a bit of extra work. Using the events you'll probobly end up having to draw everything in most of the controls yourself to come up with something like the screenshot you posted. What I did was mix a bit of custom gui with wxwidgets. It might be easier to just create your own gui for certain controls, and just mix it with certain wx widgets (for example, you wanted the html widget). |
| ||
| Thanks retimer. As spotted in the showcase you could now try it for real :) http://arm42.free.fr/blog/index.php?2009/04/08/26-metagolf-019-alpha Effectively, there is still some bug in the current version of CEGui that will probably never disappear. It's pretty darn hard to create your own tool by editing a custom scheme / look'n'feel. But it's the only free, fast, pixel perfect, in-game and "complete" GUI I know which is pretty capable in standard cases. Even if I never use Wx before and based on your screenshot, Wx is probably more what you are looking for. Choose your GUI wisely ! By the way Retimer : I didn't think of this. Please, don't scare me ^^ CrazyEddie and Brucey are going to live and code forever ! Well, until I have half of their talents. |
| ||
| Haha we can only hope, and very polished game so far - just need some sounds now :) |
| ||
| That's a nice looking editor Armitage. Well done. I think it'd be difficult to get wx to produce the screenshots listed in the first post. Especially those treeviews. I'm sure it could be done - but I think you'd have to completely override the wx Render() routines on the treeviews and tabbers. There is a wxSkin module but I don't think it was ever finished by the author - and it doesn't cover all the gadgets. Oh - right - just realised I have simply echoed Retimer... What you're looking for should be possible with wxwidgets, but you're looking at a bit of extra work. Using the events you'll probobly end up having to draw everything in most of the controls yourself to come up with something like the screenshot you posted. |
| ||
| OK thanks all. I use wx then and see how much I have to rewrite stuff. What really sucks in this all for me is that I am fairly good in JavaScript, HTML and Flash, and it's pretty close to the point that I would do all this faster and with better results with those tools. If wx had better HTML widget I'd probably make those GUI elements with HTML + JavaScript (libraries like ExtJS). And then again, MaxGUI "has" a decent HTML control... |
| ||
| What do you need an HTML widget for? :-) |
| ||
With the wx widget to mix formatted text and graphics with easy layout (tables) and linking. I didn't yet test if that widget support background images for table cells though. Some examples by quick googling (note that I would make it more graphical that some of these screenshots): Those two white boxes, though I would have it more complex.  Basic idea of mixed text and images layout, though I would be heavier on text.  The basic idea, though again I would have it more complex.  Same with this. This looks too much like a grid. Add a couple bigger images and a paragraph or two of text. Yes, you can do it with images and text with sizers or grid, but it's way more handy with HTML. If there was a HTML widget that had true HTML support, I would do pretty much everything on earth with it. :) See for example the samples at www.extjs.com JavaScript library page and consider it's all "skinnable". |
| ||
| you might consider making your own GUI system, its easy I also have one in the code archives but it probably wont fit your needs |
| ||
| Part of my day job is making GUIs so no trouble there. I just don't want to be reinventing the wheel and I want to be sure the framework doesn't contain a show stopping bottleneck or limitation. So far wx looks real good. I didn't code at all during the holidays, and I just begun really looking at the wx docs. One part which caught my eye is that the docs say you shouldn't try to recode paint event handlers of standard widgets. Docs say it won't work all the time. So basicly I have to either use widgets that provide needed methods for tweaking the look or write my own custom widgets. I suspect it's the latter in most cases. Creating graphical look seems simple enough. Shapes and fills (especially bitmaps and gradients) combined with regions ought to get me far. Widgets like tree and grid seem flexible enough as to not requiring coding of my own custom widgets for their use. On the other hand wxHTMLListBox seems to be missing from wxMax. What I didn't yet get fully is how to use things like events and items with your own custom widgets, but as that stuff is covered by the docs I expect to get actually coding things pretty soon. One another thing I don't fully understand yet is layers and z-order, or containers in other words. No doubt I will torment the folks of this forum with silly questions. |
| ||
| I suppose I should add wxHTMLListBox to my TODO list :-) |
| ||
| No doubt I will torment the folks of this forum with silly questions. More likely you will end up teaching the rest of us how to do it :-) I don't think there's been much posted about custom widgets so far here. But I for one would love to learn more about it. |
| ||
| wxknob (ooerr) is an example of a custom widget - a rotating dial thing. Although the core is C++, it could as easily be written in pure BlitzMax - probably. |
| ||
| Oh... and I suppose my RadioBaH application is another example of a "skinned" wxWidgets - although it's not really a proper skin, since it is a single drawable surface, much like a graphics context, made up to be a proper UI... It has "buttons" and "dials"... |
| ||
| How does one make a widget transmit an event? How does the stuff below translate to wxMax? wxCommandEvent evt(wxEVT_THREAD, wxID_ANY); evt.SetInt(iError); m_pParent->AddPendingEvent(evt); I am trying to make a custom widget button send a wxEVT_COMMAND_BUTTON_CLICKED at wxEVT_LEFT_UP handler function with little luck. |
| ||
| Good point... wxMax is lacking in places - well, it's a bit of a monster so there are still bits that need some work. So, I've done some work on wxControl, which you can now extend from with your own custom widgets. You should call its CreateControl() method in order to create the underlying wxWidgets objects. I've added a small sample which demonstrates a basic use case : "customcontrol" is your base widget which you can configure how you like - imagine this as a wxButton. "mybutton" extends this custom widget, and lets you provide your particular implementation - like reacting to a button click event, for example. In the sample, you should be able to click anywhere on the window, since the control will default to filling the frame. Only tested on Mac, but it should work elsewhere... In theory you should now be able to create any kind of custom control by extending off the revised wxControl. Please let me know how you get on with it. |
| ||
| Looks good. Will test it later when at home and can use SVN. Thanks for your great work. EDIT: Couldn't make myself wait till I get home, so I got the needed changes with the web interface. The event stuff works great. :) |
| ||
| Is there a way to make a custom widget's background transparent? So that for example if I just draw a rect on a widget's wxEVT_PAINT on a wxBufferedPaintDC one could see what ever is beneath the widget on parts other than the drawn rect. |
| ||
| Argh. I can't figure a way to do it. wxRegions give the same effect as setting background transparent with style: transparent areas draw with solid background color. At first I thought I could trick myself out of this limitation by creating a system where I replace dc.Clear() with blitting from DCs of widgets beneath, or simply by making only rectangular widgets. But wx doesn't send paint events when the widgets beneath get repainted and the whole z-order thing is crude. Judging how some wx widgets repaint themselves only partially (like for example slider) I guess wx simply isn't designed for use where there's any kind of background other than single solid color. So to have functional z-order I would have to write it myself together with needed event system. If I am not missing something, which I very well might, the only practical solution is to make "super widgets" which draw everything they contain and handle events between them internally. So instead of making for example a round button widget, I would make a function that draws a round widget on a passed DC and returns some dimension information for internal event handling (mouse clicks etc). A "super widget" would then handle all the drawing and event handling internally. I guess this is what RadioBaH does. I don't know if it's worth the hassle just to get backgrounds that are transparent. I guess I have to design my game a bit further to see if I could do with solid color backgrounds. |
| ||
| Is there a way to make a custom widget's background transparent? I believe so, yes. Hold on... I'll see what I can come up with... |
| ||
| You may want to look into this post. You may also have more luck using wxGCDC, which I think also supports alpha blending - but perhaps see if you can get it working first before venturing into other areas... |
| ||
| Are there docs for wxGCDC somewhere? I didn't even know it exists as it's not listed on the alphabetical class reference. :) I'll check this stuff. That other post does what I ment with blitting from DC's of other widgets, except that it just uses a single bitmap. It's not real transparency. EDIT: Found the docs. I wasn't using trunk version. Now if I only could build modules - I am at work with no SVN access so I have to update files by copy&pasteing contents from google code. :) EDIT #2: Docs say alpha is supported on OS X, which I guess implies it's not supported on other OS. :( |
| ||
| What is wx? This is no complaint, but the screenshots look like they were done on a Macintosh. Were they? |
| ||
| There are no wxMax images here :-) wxMax is a language-binding (wrap) of wxWidgets - a cross-platform GUI toolkit. It is a bit like MaxGUI, only a little bit larger, with one or two more features. It uses the OS native widgets as its interface. The "Mac-like" image in the second post is an Aqua skin for CEGUI, a graphics-based UI system. This example runs on OpenGL. (I haven't added support for dx9 yet, as there isn't an official working driver for it ... currently). |
| ||
| It is a bit like MaxGUI, only a little bit larger, with one or two more features. Being a huge understatement ;) You should definitely check it, and the examples for it out Amanda. It has so many uses that can expand your application(s) beyond belief. http://code.google.com/p/wxmax/ |
   |