«Waste Land» is a short first-person exploration adventure. Stranded in a deserted place, you need to find a way out.

Post news Report RSS Creating a menu with Nifty GUI - Devblog #1

The last few weeks I've been working on a basic menu system and I thought it might be worthwhile to share some of the lessons learned. Hopefully this might help others overcome similar issues. Additionally, it might be useful for my future self, should I forget any of this stuff.

Posted by on

I have been working on Wasteland for almost an year now. So, I thought it's about time to start a devblog! In case you don't know what Wasteland is, then you can find out more here. Go ahead and give it a try. I'll be happy to hear what you think.

As you might know Wasteland is powered by jMonkeyEngine. Though the engine doesn't provide a framework for building menu systems itself there is a very nice integration with Nifty GUI. So technologically I was all set. Conceptually though I've had to do some research and sketching first. Reading thru various modeling tutorials I've learned that it's important to have a good reference before jumping into actually modeling something. So I've figured that might apply for my game menu as well and I went ahead and fired up Inkscape. After an hour or two (or maybe more) that's what I came up with:

Draft created in Inkscape

Though pretty basic, I was quite happy with the result. Personally I think that the background image which I got from Shadowhouse Creations really makes it shine. Together with the font Tangerine of course.

Finally, I was ready to actually implementing my nifty GUI! I have to say that the documentation is really extensive. There are some good pages on the jMonkeyEngine wiki and together with the "Nifty GUI bible" there is really enough quality documentation to solve most issues. The following is an in-game screen shot of the current result.

As you can see it's still very close to the draft and I think it was worth investing some time creating that.The in-game end resultThe following is a list of "not so obvious" issues which I've had to solve and thought they are worth sharing. Please keep in mind that these are solutions I've found working for me, but there might well be better approaches.

Layouting: Empty text

In my menu screen I have various text elements which retrieve their text dynamically. That means I didn't set any initial value for them. The problem with this approach is, that some layouting methods depend on the size of a given element. In my case some elements ended up being layouted incorrectly. Because there was no initial value Nifity GUI couldn't layout the text element properly. My simple workaround was to set fill the initial value with a space text=" " on them and all was fine. Not very elegant, but good enough.

Issues with sprites

Using sprites was pretty straight-forward. But in one case the last one of a 1x4 sprite sheet showed up only as a grey rectangle with blurry edges. Obviously I've verified if I'd made a mistake with the parameters for the image element but couldn't find any. It turned out that the last pixel column was missing and got lost during the export from Inkscape. So instead of 300px the PNG was only 299px wide. After correctly exporting it all looked fine.

Hide & show screen

One of the options for hiding & showing the menu would be to create & exit the Nifty context. But I figured that would be overkill. So I was looking for an alternative and it seemed like attach & detach of the NiftyJmeDisplay screen processor was an option. However, that resulted in unwanted side-effects (Mouse events were not properly processed anymore). So instead I chose to add an additional screen without any content and a transparent background. At a later stage this might make for a inventory system.

Cursor position

Early on I realized that the mouse cursor position and the various effects had some miss-alignments. OnHover and onClick events worked but they were triggered when the mouse cursor was actually at the wrong place. That means when hovering in the top-left area of a button no event was triggered. Then again events were still triggered when hovering way out of the buttons' areas.

At first I thought it might be an issue with Nifty GUI and layouting. However, as it turns out it was my fault after all. Mouse cursors initially have there hotspot set on the top-left by default. That might work for the default arrow cursor but because I'm using a custom cursor, I've had to set the hotspot to the center and all worked as intended!

I hope this gave you some insight on what I've been up to the last weeks. Next I'd like do a write up how to override the styles for Nifty GUI.

(This is a cross-post from White-ibex.com)

Post a comment

Your comment will be anonymous unless you join the community. Or sign in with your social account: