Minimap with NiftyGUI

Troubleshooting gui
1

Hi monkeys,

I implemented a minimap which works quite well and shows the camera cone in realtime etc.

But I got 2 questions:

  1. 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?




  2. 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…

    Cheers
2
  1. I don’t think you can do that with Nifty, but it might be worth a look at ImageMode. This could possibly work…


  2. 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.
3

Hi madjack,

concerning 1): I couldn’t think of an idea how to use the ImageMode for it. I now use this piece of code and it works flawlessly:

[java]

panelWidth = panel.getWidth();

panelHeight = panel.getHeight();

mapHeight = map.height;

mapWidth = map.width;

imageRatio = (float) mapWidth / (float) mapHeight;

panelRatio = (float) panelWidth / (float) panelHeight;

float ratio = (1f/imageRatio)(1f/panelRatio);

minimapElement.setWidth((int)(ratio(float)minimapElement.getWidth()));

[/java]

Problem right now is that the minimap is not centered anymore. Is there a nifty way? (Of course there is always the code way :wink: , but I want to use nifty functionality, if possible)



I tried to set align and valign attributes for the image, to no avail.

2) Your idea sounds nice. I will check it out. Thanks :slight_smile:

4

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.

5

Hey,



yeah my panel is still rectangular because the plan is to also use non-quadratic terrains. I will have to live with that for the moment…



The second problem got solved now with your suggestion. Thx a lot :slight_smile:

6

Glad I could help.

7

If you use interact onClick=“method()” and you define your method with this signature:



[java]public void method(final int mouseX, final int mouseY) {[/java]



Nifty will call you with the coordinates where the mouse click occured.



I’m not sure if this is the same solution that madjack proposed because I’ve read his proposal like 10 times and I didn’t understand it. I’m too stupid >_<

8
void256 said:
If you use interact onClick="method()" and you define your method with this signature:

[java]public void method(final int mouseX, final int mouseY) {[/java]

Nifty will call you with the coordinates where the mouse click occured.

I'm not sure if this is the same solution that madjack proposed because I've read his proposal like 10 times and I didn't understand it. I'm too stupid >_<

That's what I was looking for! *sigh* Oh well, better late than never.
9

Sorry about that madjack! :slight_smile:



I’ve started a new page in the Nifty wiki for the Interact-Tag that explains this thing now.

2 Likes
10

Oh wow, that makes it a lot easier! LOL



EDIT: OH WOW. I looked at the reference and now I can even query the mouse button WOWOWOWOWOWOW. Ich liebe dich :stuck_out_tongue:

How about the centering of the minimap image inside the minimap panel? Can you give me a hand here?

11

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?



The mouseX,mouseY works great though :slight_smile:

12

Your terrain looks very nice, but I noticed the map looks little 8bit, maybe it’s meant to be functional, not pretty.

Anyways, I thought I’ld mentioned this idea to you: http://hub.jmonkeyengine.org/groups/graphics/forum/topic/snapshot-of-camera-view-for-minimap-i-e-niftygui/, in case you haven’t had it. Extra information through “color coding” could be overlaid.

13

Hi makeshift,



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 :wink:

14

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).

15
Dodikles said:
Hi makeshift,
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.
16

@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 :slight_smile: 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 :wink:



Hosted by imgur.com1152Ă—720

1 Like
17

The borders helped a lot. For representing the regions, it can’t get better.