I implemented a minimap which works quite well and shows the camera cone in realtime etc.
But I got 2 questions:
Is it possible in nifty to scale an image with respect to proportions? If you look at the image you see that the minimap fills the whole panel although it is a quad and not a rectangle. What is the right way to accomplish this?
What is the most convenient way to enable clicking the minimap and getting the actual xy-position of the click? The screen controller gives me the event but I cannot retrieve the position inside the image. Of course I could “hack” my way around that problem but maybe there is a more elegant solution…
I don’t think you can do that with Nifty, but it might be worth a look at ImageMode. This could possibly work…
Haven’t tried it, but if you put an in the panel containing the image you could get mouse click location. There are methods to get the X and Y location of an Element. From there you can derive the mouse click using the Camera’s getScreenCoordinates. Of course since your image is rectangular and your map isn’t, you might want to use a panel with the right size and put it childLayout=“absolute”. That’s the element you would get the coordinates from.
I agree it’s somehow convoluted. I thought there was a built-in method to get the Element’s onClick coodinates but I couldn’t find it. You might want to check deeper than I did.
The only thing I can see is to force the image to a certain size with the [image … width=“fixedPixelWidth#” height=“fixedPixelHeight#”] but I’m not sure if that’s what you want or not. If you’re still using a rectangle this could cause some distortion you don’t want.
Hmm, I tried it out and it doesn’t work. If I use onClick then my function gets called. When I use onPrimaryClick the function does not get fired. Is it maybe a new feature which is not yet in the JME nightly?
thanks for your suggestions. But actually I create this minimap in every frame. I have provinces which can be captured and then they will appear in the minimap with the corresponding color of the owning faction. I am missing the borders right now, I know. But this will improve soon
The nifty-examples project has a dedicated example for the mouse events you can check for reference (the package is de.lessvoid.nifty.examples.mouse.MouseExampleMain and there is a mouse/mouse.xml file). It works there.
You can always center a panel in another panel by giving the parent panel the childLayout=“center” and the child panel the attributes align=“center” and valign=“center”. This only works if the child panel has a fixed width/height (percent or px).
thanks for your suggestions. But actually I create this minimap in every frame. I have provinces which can be captured and then they will appear in the minimap with the corresponding color of the owning faction. I am missing the borders right now, I know. But this will improve soon ;)
Yeah, then it's not that good. Please, do keep updates of your game coming :); I need inspiration for a game that might have a similar gui.
@void: Ahh, thanks a lot. The problem was that I have to write all interactions in one single tag-element. I wrote them all into one interact-tag each. That solved it Concerning the minimap centering: I tried what you wrote but that didn’t work out. I’ll look into further.
@makeshift: Here you see a newer version where I also drew the borders of the region. Looks ok to me if you consider the region as the only information needed to be displayed