Nifty Gui (absolute drag'n'drop)

Troubleshooting gui
1

Hi monkeys,



First, sorry for my english speaking, don’t lynch me…i’ll try to express myself as clear as possible.



I try to incorporate a repositionning system for my gui elements. I use Nifty Gui and i want users can shape their gui to their liking.



To resume my code with a simple piece of code…why my 2 draggables will directly move to the center of my layer after the click release (drag’n’ drop) whereas my layout and my droppable are both in absolute childLayout mode???



[xml]<screen id=“test” controller=“Interfaces.TestScreen”>

<layer id=“foreground” childLayout=“absolute” backgroundColor="#21f8">

<control id=“myDroppable” name=“droppable” childLayout=“absolute” x=“1%” y=“1%” width=“98%” height=“98%” backgroundColor="#44f6">

</control>

<control id=“myDraggable” name=“draggable” x=“60%” y=“60%” width=“20%” height=“20%” backgroundColor="#1f0f">

</control>

<control id=“myDraggable2” name=“draggable” x=“30%” y=“30%” width=“20%” height=“20%” backgroundColor="#0f0f">

</control>

</layer>

</screen>[/xml]



I probably missed something but whatever i do i always get the same result :s.



Does anyone have already tried to create this kind of systeme for his game?

2

Nobody can answer me ?



I just want a simple example - or an explanation - (3-4 elements are sufficient) which show a nifty dra’n’drop with absolute position…i already have an inventory in my game and the drag’n’drop works fine with center position (potions, stuff and all loots are centered in my inventory cases) but i’m really blocked on that absolute drag’n’drop.



i’ve seen this topic : http://hub.jmonkeyengine.org/groups/user-code-projects/forum/topic/wip-mmo-game-play-video/ and it’s exactly what i expect



…if t0neg0d goes through there… :slight_smile:

3

Please wait at least a day before bumping your post, normally theres no need to bump at all, you even bail your thread out of the “unanswered posts” filter.

4

@t0neg0d may be able to help you. I’ve never used the drag-and-drop stuff, sorry.

5

[xml]

<screen id=“test” controller=“Interfaces.TestScreen”>

<layer id=“foreground” childLayout=“absolute” backgroundColor="#21f8">

<control id=“myDraggable” name=“draggable” x=“60%” y=“60%” width=“20%” height=“20%” backgroundColor="#1f0f">

<interact onClick=“clicked(myDraggable)” />

</control>

</layer>

</screen>[/xml]



Now make a method called:

[java]public void clicked(String object){

System.out.println("Clicked on: "+object);

Element e = nifty.findPopupByName(object);

}[/java]

Put it inside your controller (Interfaces.TestScreen)

Then you can modify e by constantly getting the mouse position using:

[java]getInputManager().getCursorPosition()[/java]



Havn’t actually tried this so let me know how it works out :smiley:

6

ow sorry, I will indeed wait a bit of course.



I’m too impatient to be able to continue my project that I seemed to have waited much longer ^ ^.



Thanks @Zarch, you’re right, it will surely be easier to write him a pm :slight_smile:



EDIT: Thanks @Addez too, i’ll try that and i’ll tell you if it works :p.

7

Sry. To get the element do:

[java]String screen;

String element;

nifty.getScreen(screen).findElementByName(element);[/java]

8

Well I just tagged her on this thread so most likely she’ll see it next time she checks the forums.

9

Are you sure that tonegod isnt using windows rather than panels?



From what I read the windows are draggable and repositionable.

10

Thanks @zarch …She ??? Chris isn’t a guy?



Otherwise, @Addez, your solution is not exactly right but it was a good idea…i do that:



[xml]<control id=“myDraggable” name=“draggable” x=“20%” y=“20%” width=“10%” height=“20%” backgroundColor="#1f0f" childLayout=“absolute”>

<interact onRelease=“released(myDraggable)”/>

</control>[/xml]



the onClick event consumed the draggable nifty event so i let nifty make the drag and when the mouse left button is released i apply your solution :



[java]public void released(String object){

System.out.println(“released object:” + object);

Element e = nifty.getScreen(screen).findElementByName(object);

e.setConstraintX(new SizeValue(String.valueOf(inputManager.getCursorPosition().x)));

e.setConstraintY(new SizeValue(String.valueOf(inputManager.getCursorPosition().y)));

}[/java]



I don’t know if it’s the best way to do that but it work so Thank you :slight_smile:



We’ll see what @t0neg0d think about it :p.

11

@Perfecticus, you’re right, windows are draggable and repositionable but windows have a title bar that we can’t remove :s



So windows would be a good idea if we could affect this bar with a parameter…I use them for some parts of my ui like the statsPlayerPanel where i need a title but playerPanel…targetPanel…chat…and a lot of others don’t need it…

12
@haze said:
Thanks @zarch ...She ??? Chris isn't a guy?



I could be wrong as it's not something I pay a lot of attention to but:
http://hub.jmonkeyengine.org/groups/general/forum/topic/um/#post-160177
http://hub.jmonkeyengine.org/groups/user-code-projects/forum/topic/been-a-while-using-mesh-deformation-as-water-effect/#post-181549

etc...
13

Ow, you’re right…my mistake :slight_smile:



It’s pleasant to see women in video games but much more in development :wink:

14

Unfortunately, I don’t use drag/drop for the game I’m working on. In my case, your cursor is a slot as well, since items can be held and used (plus if there is a server failure, the item they are holding doesn’t “go away”. You pick up items up clicking them (this adds them to your cursor slot), then click somewhere to drop the item, put in a bag, etc.



There are consideration for multiplayer scenarios and drag/drop type interface (see above). Anyways… good luck with this. I’d be interested in see the solution.



Chris



Ooops… just read the rest of this… not guy.



EDIT again… I just realized that I didn’t answer this completely true. I do use drag & drop… just not the drag & drop provided by Nifty… because it didn’t exist at the time (as far I can remember). My implementation was for building out custom movable, resizable windows. It is ugly, because it required bypassing Nifty event handling and I had to implement a way of registering “window” classes and added a method for determining if the mouse was over one of these (this was unfortunately different from “mouse contains” provided by Nifty).



I can share all I have, but I’m not entirely sure you would want the code as it is not only a TOTAL hack, but has not been cleaned up or optimized.

1 Like
15

Hum, ok i see what you mean.



If nifty didn’t include this drag’n’drop system I’d probably gone on something similar. I think I’ll try to continue in this way.

At the moment the above solution works well but for one element only… when we clicked and moved an item it is possible to reselect this same element to infinity but it’s impossible to access the rest interface only the camera reacts outside this element :s … maybe a problem of focus or something like that.



I continue to look on it … and I tell you if I ended up with something usable :wink:



However, as I also try to get closer to the mmorpg world (more futuristic than yours but the features are similar) I’d be indeed interested if you actually want to share some tips and conversely when I have something that runs well course.

Your videos are awesome… want the job done on your project is really impressive.



Two quick questions:

  • Are you using an entity system like monkeyZone for the network (i feel my network code becomes messy.)?
  • Have you developed an editor for maps creation (terrain, lights, audioNodes, vegetation, NPC placement with path attributes for example …)?



    I didn 't find anything really complete and I’m reluctant to engage in the creation of mine … this is a really big task 8O



    EDIT:
    @t0neg0d said:

    Oo ops… just read the rest of this… not guy.


    …I’ll try to remember :p.
1 Like