This is my first attempt at doing such a thing and I guess I didn’t pick the easiest one either. 
I’ve modified the preview panel of my game so it can be draggable. It works fine but the way things behave right now isn’t the way I want them to be.
So, I modified the default window style like so:
[xml]
<?xml version=“1.0” encoding=“UTF-8”?>
<nifty-styles>%MINIFYHTMLd905abba960756030bdadae18b4e270814%%MINIFYHTMLd905abba960756030bdadae18b4e270815%%MINIFYHTMLd905abba960756030bdadae18b4e270816%%MINIFYHTMLd905abba960756030bdadae18b4e270817%%MINIFYHTMLd905abba960756030bdadae18b4e270818%</nifty-styles>
[/xml]
The relevant part of the screen XML is like this:
[xml]
<layer id=“lowerPanel” childLayout=“absolute” width=“225px” visibleToMouse=“false”>
<control id=“previewDraggable” name=“window” style=“preview-panel-style” width=“225px” height=“331px” x=“225px” y=“311px” valign=“top”>
<panel id=“preview-panel-style#bar” childLayout=“horizontal”>
</panel>
<panel id=“preview-panel-style#frame” childLayout=“center”>
<interact onHover=“hovering()”/>
<interact onEndHover=“endHovering()”/>
<panel id=“preview-panel-style#content” childLayout=“vertical”>
<panel id=“panelPreview” childLayout=“absolute” x=“0px” y=“0px” width=“225px” height=“311px”>
<panel id=“insidePanelButtons” childLayout=“absolute” backgroundColor="#000f" width=“215px” height=“92px” x=“5px” y=“214px”>
<control id=“moreInfoButton” type=“button” width=“199px” x=“9px” y=“5px” label=“More Information” textHAlign=“left”>
<interact onClick=“moreInfo()”/>
</control>
<control id=“PlotCourseButton” type=“button” width=“199px” x=“9px” y=“35px” label=“Plot course” textHAlign=“left”>
<interact onClick=“plotCourse()”/>
</control>
<control id=“testButton” type=“button” width=“199px” x=“9px” y=“65px” label=“Enter Solar System” textHAlign=“left”>
<interact onClick=“enterSystem()”/>
</control>
</panel>
</panel>
</panel>
</panel>
</control>
</layer>
[/xml]
This works fine. I can drag it, everything is aligned, etc.
The problem lies in the effect I want to achieve. It should go like this:
- The mouse moves OVER (onHover) the "frame" part of the window.
- A fade, from transparent black to almost fully opaque white on the "bar" to indicate where it can be dragged from.
- The mouse moves OUT (onEndHover) of the "frame"
- Another fade but this time from the almost opaque white to transparent black to restore it to its original state.
Now, if I trigger this while hovering on the "frame" and apply the effect on the "frame" it works, but if I want to affect the "bar" it seems I can't directly do that.
So I've come up with the above. In short as I hover over the "frame", it should trigger this:
[xml]
<interact onHover="hovering()"/>
<interact onEndHover="endHovering()"/>
[/xml]
but nothing happens.
If I change it to onClick="hovering()" Nifty enters the method when the "frame" is clicked on, but the effect isn't applied. Here's the java for that, but I highly suspect this to be wrong but I'm just not sure how to trigger it:
[java]
public void hovering() {
System.out.println("On hovering...");
nifty.getCurrentScreen().findElementByName("preview-panel-style#bar").startEffect(EffectEventId.onCustom.onHover);
}
public void endHovering() {
System.out.println("On out of hovering...");
nifty.getCurrentScreen().findElementByName("preview-panel-style#bar").startEffect(EffectEventId.onCustom.onEndHover);
}
[/java]
I feel I'm pretty close but... Unsure where to look. Searching the forums didn't help sadly. Hopefully I didn't forget anything.
Any taker?
Thanks a ton.
