Hover Effect on MenuButtonControlDefinition – Basic

Hi All,



I am using the Nifty Examples - MenuButtonControlDefinition. I am trying to add a menu button. However the Hover Effect and Button Clicked Event is not working. I am a Nifty-gui newbie. Could you please help me?



I am posting parts of the code…

[java]

public class MenuState extends BasicGameState {



@Override

public void init(GameContainer container, StateBasedGame sbGame)

throws SlickException {

this.container = container;

this.game = sbGame;

nifty = new Nifty(new LwjglRenderDevice(), new OpenALSoundDevice(),

new InputSystem() {



public void forwardEvents(

final NiftyInputConsumer inputEventConsumer) {

for (MouseEvent event : mouseEvents) {

event.processMouseEvents(inputEventConsumer);

}

mouseEvents.clear();



}



public void setMousePosition(int x, int y) {

}

}, new TimeProvider());





nifty.loadStyleFile("nifty-default-styles.xml");

nifty.loadControlFile("nifty-default-controls.xml");

nifty.registerMouseCursor("hand", "ca/concordia/conquest/core/gui/resources/sword.png", 5, 4);

nifty.registerSound("intro", "sound/19546__tobi123__Gong_mf2.wav");

nifty.registerMusic("credits", "sound/Loveshadow_-_Almost_Given_Up.ogg");

registerMenuButtonHintStyle(nifty);

registerStyles(nifty);

MenuButtonControlDefinition.register(nifty);

createIntroScreen(nifty);

createMainScreen(nifty);

nifty.gotoScreen("start");

}



private Screen createMainScreen(final Nifty nifty) {

nifty.setDebugOptionPanelColors(false);

mainScreen = new ScreenBuilder("main") {

{

controller(new ScreenControllerExample());

layer(new LayerBuilder("layer") {

{

backgroundImage("ca/concordia/conquest/core/gui/resources/logo.png");

childLayoutVertical();

panel(new PanelBuilder("navigation") {

{

childLayoutHorizontal();

width("100%");

height("100%");

panel(builders.hspacer("500px"));

panel(new PanelBuilder("buttonSet") {

{

childLayoutVertical();

width("300px");

height("500px");

panel(builders.vspacer("150px"));

control(MenuButtonControlDefinition.getControlBuilder("menuButtonPlayCampaign",

"Play Campaign",

"Play Campaign. Set of 10 Levels of Continuous Game Play.nNew Campaign Packages can be downloaded from our website."));

panel(builders.vspacer("15px"));

control(MenuButtonControlDefinition.getControlBuilder("menuButtonPlayArcade",

"Play Arcade",

"Custom Maps created by Map Editor can be loaded using Arcade Game Mode."));

panel(builders.vspacer("15px"));



control(MenuButtonControlDefinition.getControlBuilder("menuButtonOptions",

"Options",

"Options for Sound and Keyboard Mapping & Profile Selection"));

panel(builders.vspacer("15px"));



control(MenuButtonControlDefinition.getControlBuilder("menuButtonMapEditor",

"Map Editor",

"Map Editor Tool is used to create a new Map.nThese can be used for Arcade Game Mode."));

panel(builders.vspacer("15px"));



control(MenuButtonControlDefinition.getControlBuilder("menuButtonCharacterEditor",

"Character Editor",

"Character Editor Tool is used to create new Characters. nBoth Players and Non Player Characters"));

panel(builders.vspacer("15px"));



control(MenuButtonControlDefinition.getControlBuilder("menuButtonExit",

"Exit Game",

"Exit the game"));



}

});

}

});

}

});

}

}.build(nifty);

return mainScreen;

}



class ScreenControllerExample implements ScreenController, KeyInputHandler {



public void bind(Nifty nifty, Screen screen) {

}



public void onEndScreen() {

}



public void onStartScreen() {

}



@NiftyEventSubscriber(pattern = "menuButton.*")

public void onMenuButtonListBoxClick(final String id, final NiftyMousePrimaryClickedEvent clickedEvent) {

if ("menuButtonPlayCampaign".equals(id)) {

game.enterState(LevelsSelectState.ID);

} else if ("menuButtonPlayArcade".equals(id)) {

game.enterState(MapSelectState.ID);

} else if ("menuButtonOptions".equals(id)) {

game.enterState(OptionsState.ID);

} else if ("menuButtonMapEditor".equals(id)) {

game.enterState(InGameState.ID);

} else if ("menuButtonCharacterEditor".equals(id)) {

game.enterState(InGameState.ID);

} else if ("menuButtonExit".equals(id)) {

game.enterState(InGameState.ID);

}

// Goto State

}



@Override

public boolean keyEvent(NiftyInputEvent nie) {

return false;

}

}

[/java]

I think it has to do with Alpha settings? The Hand Cursor is also not working :frowning:





What I have is,

https://docs.google.com/open?id=0BxDscS93ya4eNDdmZmZjNzEtMzU1NS00OTE5LWIyNDEtMjc1N2RlY2M2MGFl



What I want is the same effect as the Nifty GUI Example - MenuButtonControlDefinition with a ToolTip

https://docs.google.com/open?id=0BxDscS93ya4eZGIyOTg5MWEtYmZjMi00MTNlLTllYWEtNWFmNWNjYmEzN2Fj

I wonder why you’re instancing a new nifty object by hand, once you can create it easily with jme :



[java]

NiftyJmeDisplay niftyDisplay = new NiftyJmeDisplay(assetManager, inputManager, audioRenderer, viewPort);

Nifty nifty = niftyDisplay.getNifty();

[/java]



Also, for static controls and elements creation, the best way is using xml, and for dynamic controls / elements, the best way is using java.



Btw, I thought your code a little complicated for a nifty newbie.

The code you’ve included doesnt have any effects declared?



I would do the layout of your GUI in XML and interact with it using Java. Personally I think its bad practice to lay GUIs out using code because maintenance is so much more difficult.

Hi!

Thank you so much for your reply, both of you. I agree. But I do not have to choice. I dont have enough time to switch it all xml.



I found out the issue. It was the InputSystem problem. Now the problem is that Input Mouse Clicks are being suppressed. :frowning:



Could someone good with Nifty Event Handling (EventBus?), please help me?



[java]package ca.concordia.conquest.engine.gameplay.states;



import ca.concordia.conquest.base.ManagerMap;

import ca.concordia.conquest.core.gui.controls.CommonComponentFactory;

import ca.concordia.conquest.core.gui.controls.MenuButtonControlDefinition;

import de.lessvoid.nifty.input.NiftyInputEvent;

import org.newdawn.slick.GameContainer;

import org.newdawn.slick.Graphics;

import org.newdawn.slick.Input;

import org.newdawn.slick.SlickException;

import org.newdawn.slick.state.BasicGameState;

import org.newdawn.slick.state.StateBasedGame;

import org.newdawn.slick.state.transition.FadeInTransition;

import org.newdawn.slick.state.transition.FadeOutTransition;



import de.lessvoid.nifty.Nifty;

import de.lessvoid.nifty.NiftyEventSubscriber;

import de.lessvoid.nifty.NiftyInputConsumer;

import de.lessvoid.nifty.builder.EffectBuilder;

import de.lessvoid.nifty.builder.HoverEffectBuilder;

import de.lessvoid.nifty.builder.ImageBuilder;

import de.lessvoid.nifty.builder.LayerBuilder;

import de.lessvoid.nifty.builder.PanelBuilder;

import de.lessvoid.nifty.builder.ScreenBuilder;

import de.lessvoid.nifty.builder.StyleBuilder;

import de.lessvoid.nifty.builder.TextBuilder;

import de.lessvoid.nifty.controls.button.builder.ButtonBuilder;

import de.lessvoid.nifty.elements.events.NiftyMousePrimaryClickedEvent;

import de.lessvoid.nifty.input.keyboard.KeyboardInputEvent;

import de.lessvoid.nifty.lwjglslick.input.LwjglKeyboardInputEventCreator;

import de.lessvoid.nifty.nulldevice.NullSoundDevice;

import de.lessvoid.nifty.renderer.lwjgl.render.LwjglRenderDevice;

import de.lessvoid.nifty.screen.KeyInputHandler;

import de.lessvoid.nifty.screen.Screen;

import de.lessvoid.nifty.screen.ScreenController;

import de.lessvoid.nifty.slick.MouseEvent;

import de.lessvoid.nifty.sound.openal.OpenALSoundDevice;

import de.lessvoid.nifty.spi.input.InputSystem;

import de.lessvoid.nifty.tools.Color;

import de.lessvoid.nifty.tools.TimeProvider;

import java.util.ArrayList;

import java.util.List;

import org.newdawn.slick.KeyListener;

import org.newdawn.slick.MouseListener;

import org.newdawn.slick.opengl.SlickCallable;



/**

*

  • @author Jerry
  • @version $Revision: 1.1 $

    *

    /

    public class MenuState extends BasicGameState implements

    KeyListener, MouseListener {



    public static final int ID = 1;

    private GameContainer container;

    private StateBasedGame game;

    private List<MouseEvent> mouseEvents = new ArrayList<MouseEvent>();

    private List<KeyboardInputEvent> keyEvents = new ArrayList<KeyboardInputEvent>();

    private LwjglKeyboardInputEventCreator inputEventCreator = new LwjglKeyboardInputEventCreator();

    private Nifty nifty;

    private Screen mainScreen;

    private Input input;

    private static CommonComponentFactory builders = new CommonComponentFactory();

    private int mouseX;

    private int mouseY;

    protected boolean mouseDown;



    public MenuState() {

    }



    @Override

    public void init(GameContainer container, StateBasedGame sbGame)

    throws SlickException {

    this.container = container;

    this.game = sbGame;



    nifty = new Nifty(new LwjglRenderDevice(), new OpenALSoundDevice(),

    new InputSystem() {



    public void forwardEvents(

    final NiftyInputConsumer inputEventConsumer) {

    for (MouseEvent event : mouseEvents) {

    event.processMouseEvents(inputEventConsumer);

    }

    mouseEvents.clear();



    for (KeyboardInputEvent event : keyEvents) {

    inputEventConsumer.processKeyboardEvent(event);

    }

    keyEvents.clear();

    }



    public void setMousePosition(int x, int y) {

    }

    }, new TimeProvider());





    nifty.loadStyleFile("nifty-default-styles.xml");

    nifty.loadControlFile("nifty-default-controls.xml");

    nifty.registerMouseCursor("hand", "other/mouse-cursor-hand.png", 5, 4);

    nifty.registerSound("intro", "sound/19546__tobi123__Gong_mf2.wav");

    nifty.registerMusic("credits", "sound/Loveshadow_-_Almost_Given_Up.ogg");

    registerMenuButtonHintStyle(nifty);

    registerStyles(nifty);

    MenuButtonControlDefinition.register(nifty);

    //createIntroScreen(nifty);

    createMainScreen(nifty);

    nifty.gotoScreen("main");



    }



    private Screen createIntroScreen(final Nifty nifty) {

    Screen screen = new ScreenBuilder("start") {



    {

    controller(new ScreenControllerExample() {



    @Override

    public void onStartScreen() {

    nifty.gotoScreen("main");

    }

    });

    layer(new LayerBuilder("layer") {



    {

    childLayoutCenter();

    onStartScreenEffect(new EffectBuilder("fade") {



    {

    length(3000);

    effectParameter("start", "#0");

    effectParameter("end", "#f");

    }

    });

    onStartScreenEffect(new EffectBuilder("playSound") {



    {

    startDelay(1400);

    effectParameter("sound", "intro");

    }

    });

    onActiveEffect(new EffectBuilder("gradient") {



    {

    effectValue("offset", "0%", "color", "#66666fff");

    effectValue("offset", "85%", "color", "#000f");

    effectValue("offset", "100%", "color", "#44444fff");

    }

    });

    panel(new PanelBuilder() {



    {

    alignCenter();

    valignCenter();

    childLayoutHorizontal();

    width("856px");

    panel(new PanelBuilder() {



    {

    width("300px");

    height("256px");

    childLayoutCenter();

    text(new TextBuilder() {



    {

    text("Nifty 1.3 Core");

    style("base-font");

    alignCenter();

    valignCenter();

    onStartScreenEffect(new EffectBuilder("fade") {



    {

    length(1000);

    effectValue("time", "1700", "value", "0.0");

    effectValue("time", "2000", "value", "1.0");

    effectValue("time", "2600", "value", "1.0");

    effectValue("time", "3200", "value", "0.0");

    post(false);

    neverStopRendering(true);

    }

    });

    }

    });

    }

    });

    panel(new PanelBuilder() {



    {

    alignCenter();

    valignCenter();

    childLayoutOverlay();

    width("256px");

    height("256px");

    onStartScreenEffect(new EffectBuilder("shake") {



    {

    length(250);

    startDelay(1300);

    inherit();

    effectParameter("global", "false");

    effectParameter("distance", "10.");

    }

    });

    onStartScreenEffect(new EffectBuilder("imageSize") {



    {

    length(600);

    startDelay(3000);

    effectParameter("startSize", "1.0");

    effectParameter("endSize", "2.0");

    inherit();

    neverStopRendering(true);

    }

    });

    onStartScreenEffect(new EffectBuilder("fade") {



    {

    length(600);

    startDelay(3000);

    effectParameter("start", "#f");

    effectParameter("end", "#0");

    inherit();

    neverStopRendering(true);

    }

    });

    image(new ImageBuilder() {



    {

    filename("other/yin.png");

    onStartScreenEffect(new EffectBuilder("move") {



    {

    length(1000);

    startDelay(300);

    timeType("exp");

    effectParameter("factor", "6.f");

    effectParameter("mode", "in");

    effectParameter("direction", "left");

    }

    });

    }

    });

    image(new ImageBuilder() {



    {

    filename("other/yang.png");

    onStartScreenEffect(new EffectBuilder("move") {



    {

    length(1000);

    startDelay(300);

    timeType("exp");

    effectParameter("factor", "6.f");

    effectParameter("mode", "in");

    effectParameter("direction", "right");

    }

    });

    }

    });

    }

    });

    panel(new PanelBuilder() {



    {

    width("300px");

    height("256px");

    childLayoutCenter();

    text(new TextBuilder() {



    {

    text("Nifty 1.3 Standard Controls");

    style("base-font");

    alignCenter();

    valignCenter();

    onStartScreenEffect(new EffectBuilder("fade") {



    {

    length(1000);

    effectValue("time", "1700", "value", "0.0");

    effectValue("time", "2000", "value", "1.0");

    effectValue("time", "2600", "value", "1.0");

    effectValue("time", "3200", "value", "0.0");

    post(false);

    neverStopRendering(true);

    }

    });

    onStartScreenEffect(new EffectBuilder("imageSize") {



    {

    length(600);

    startDelay(3000);

    effectParameter("startSize", "1.0");

    effectParameter("endSize", "2.0");

    inherit();

    neverStopRendering(true);

    }

    });

    onStartScreenEffect(new EffectBuilder("imageSize") {



    {

    length(600);

    startDelay(3000);

    effectParameter("startSize", "1.0");

    effectParameter("endSize", "2.0");

    inherit();

    neverStopRendering(true);

    }

    });

    }

    });

    }

    });

    }

    });

    }

    });

    layer(new LayerBuilder() {



    {

    backgroundColor("#ddff");

    onStartScreenEffect(new EffectBuilder("fade") {



    {

    length(1000);

    startDelay(3000);

    effectParameter("start", "#0");

    effectParameter("end", "#f");

    }

    });

    }

    });

    }

    }.build(nifty);

    return screen;

    }



    private Screen createMainScreen(final Nifty nifty) {

    nifty.setDebugOptionPanelColors(false);

    mainScreen = new ScreenBuilder("main") {



    {

    controller(new ScreenControllerExample());

    inputMapping("de.lessvoid.nifty.input.mapping.DefaultInputMapping");

    layer(new LayerBuilder("layer") {



    {

    backgroundImage("ca/concordia/conquest/core/gui/resources/logo.png");

    childLayoutVertical();

    panel(new PanelBuilder("navigation") {



    {

    childLayoutHorizontal();

    width("100%");

    height("100%");

    panel(builders.hspacer("530px"));

    panel(new PanelBuilder("buttonSet") {



    {

    childLayoutVertical();

    width("300px");

    height("500px");

    panel(builders.vspacer("175px"));

    control(new ButtonBuilder("appendButton", "Append"));

    panel(builders.vspacer("15px"));

    control(MenuButtonControlDefinition.getControlBuilder("menuButtonPlayCampaign",

    "Play Campaign",

    "Play Campaign. Set of 10 Levels of Continuous Game Play.nNew Campaign Packages can be downloaded from our website."));

    panel(builders.vspacer("15px"));

    control(MenuButtonControlDefinition.getControlBuilder("menuButtonPlayArcade",

    "Play Arcade",

    "Custom Maps created by Map Editor can be loaded using Arcade Game Mode."));

    panel(builders.vspacer("15px"));



    control(MenuButtonControlDefinition.getControlBuilder("menuButtonOptions",

    "Options",

    "Options for Sound and Keyboard Mapping & Profile Selection"));

    panel(builders.vspacer("15px"));



    control(MenuButtonControlDefinition.getControlBuilder("menuButtonMapEditor",

    "Map Editor",

    "Map Editor Tool is used to create a new Map.nThese can be used for Arcade Game Mode."));

    panel(builders.vspacer("15px"));



    control(MenuButtonControlDefinition.getControlBuilder("menuButtonCharacterEditor",

    "Character Editor",

    "Character Editor Tool is used to create new Characters. nBoth Players and Non Player Characters"));

    panel(builders.vspacer("15px"));



    control(MenuButtonControlDefinition.getControlBuilder("menuButtonExit",

    "Exit Game",

    "Exit the game"));



    }

    });

    }

    });

    }

    });

    }

    }.build(nifty);

    return mainScreen;

    //nifty.addScreen("mainScreen", mainScreen);

    //nifty.gotoScreen("mainScreen");

    //nifty.setDebugOptionPanelColors(false);

    // Element element = nifty.getScreen("mainScreen").findElementByName(

    // "panel-chat");

    // element.setConstraintX(new SizeValue("5"));

    // element.setConstraintY(new SizeValue("440"));

    }



    private static void registerStyles(final Nifty nifty) {

    new StyleBuilder() {



    {

    id("base-font-link");

    base("base-font");

    color("#8fff");

    interactOnRelease("$action");

    onHoverEffect(new HoverEffectBuilder("changeMouseCursor") {



    {

    effectParameter("id", "hand");

    }

    });

    }

    }.build(nifty);

    }



    private void registerMenuButtonHintStyle(Nifty nifty) {

    new StyleBuilder() {



    {

    id("special-hint");

    base("nifty-panel-bright");

    childLayoutCenter();

    onShowEffect(new EffectBuilder("fade") {



    {

    length(150);

    effectParameter("start", "#0");

    effectParameter("end", "#d");

    inherit();

    neverStopRendering(true);

    }

    });

    onShowEffect(new EffectBuilder("move") {



    {

    length(150);

    inherit();

    neverStopRendering(true);

    effectParameter("mode", "fromOffset");

    effectParameter("offsetY", "-15");

    }

    });

    onCustomEffect(new EffectBuilder("fade") {



    {

    length(150);

    effectParameter("start", "#d");

    effectParameter("end", "#0");

    inherit();

    neverStopRendering(true);

    }

    });

    onCustomEffect(new EffectBuilder("move") {



    {

    length(150);

    inherit();

    neverStopRendering(true);

    effectParameter("mode", "toOffset");

    effectParameter("offsetY", "-15");

    }

    });

    }

    }.build(nifty);



    new StyleBuilder() {



    {

    id("special-hint#hint-text");

    base("base-font");

    alignLeft();

    valignCenter();

    textHAlignLeft();

    color(new Color("#000f"));

    }

    }.build(nifty);

    }



    @Override

    public void inputEnded() {

    // TODO Auto-generated method stub

    }



    @Override

    public void inputStarted() {

    // TODO Auto-generated method stub

    }



    @Override

    public boolean isAcceptingInput() {

    // TODO Auto-generated method stub

    return true;

    }



    @Override

    public void setInput(Input arg0) {

    // TODO Auto-generated method stub

    }



    @Override

    public void keyPressed(final int key, final char c) {

    // N�o passo para o niftygui ocontrole das setas do teclado

    if (key != Input.KEY_UP && key != Input.KEY_DOWN

    && key != Input.KEY_RIGHT && key != Input.KEY_LEFT) {

    keyEvents.add(inputEventCreator.createEvent(key, c, true));

    }

    }



    @Override

    public void keyReleased(final int key, final char c) {

    // N�o passo para o niftygui ocontrole das setas do teclado

    if (key != Input.KEY_UP && key != Input.KEY_DOWN

    && key != Input.KEY_RIGHT && key != Input.KEY_LEFT) {

    keyEvents.add(inputEventCreator.createEvent(key, c, false));

    }

    }



    private void forwardMouseEventToNifty(final int mouseX, final int mouseY,

    final boolean mouseDown) {

    mouseEvents.add(new MouseEvent(mouseX, mouseY, mouseDown, 0));



    }



    @Override

    public void mouseMoved(final int oldx, final int oldy, final int newx,

    final int newy) {

    mouseX = newx;

    mouseY = newy;

    forwardMouseEventToNifty(mouseX, mouseY, mouseDown);

    }



    @Override

    public void mousePressed(final int button, final int x, final int y) {

    mouseX = x;

    mouseY = y;

    mouseDown = true;

    if (button == ca.concordia.conquest.base.Variables.MOUSE_BUTTON_LEFT) {

    ca.concordia.conquest.base.Variables.MOUSE_CLICK_POSITION_XY.setLocation(mouseX, mouseY);

    }

    forwardMouseEventToNifty(mouseX, mouseY, mouseDown);

    }



    @Override

    public void mouseReleased(final int button, final int x, final int y) {

    mouseX = x;

    mouseY = y;

    mouseDown = false;

    forwardMouseEventToNifty(mouseX, mouseY, mouseDown);

    }



    @Override

    public void mouseClicked(int arg0, int x, int y, int arg3) {

    mouseX = x;

    mouseY = y;

    mouseDown = true;

    forwardMouseEventToNifty(mouseX, mouseY, mouseDown);



    }



    @Override

    public void mouseDragged(int arg0, int arg1, int arg2, int arg3) {

    // TODO Auto-generated method stub

    }



    @Override

    public void mouseWheelMoved(int arg0) {

    // TODO Auto-generated method stub

    }



    class MouseEvent {



    private int mouseX;

    private int mouseY;

    private int mouseWheel;

    private int button;

    private boolean buttonDown;



    public MouseEvent(final int mouseX, final int mouseY,

    final boolean mouseDown, final int mouseButton) {

    this.mouseX = mouseX;

    this.mouseY = mouseY;

    this.buttonDown = mouseDown;

    this.button = mouseButton;

    this.mouseWheel = 0;

    }



    public void processMouseEvents(

    final NiftyInputConsumer inputEventConsumer) {

    inputEventConsumer.processMouseEvent(mouseX, mouseY, mouseWheel,

    button, buttonDown);

    }

    }



    class ScreenControllerExample implements ScreenController, KeyInputHandler {



    public void bind(Nifty nifty, Screen screen) {

    }



    public void onEndScreen() {

    }



    public void onStartScreen() {

    }



    @NiftyEventSubscriber(pattern = "menuButton.
    ")

    public void onMenuButtonListBoxClick(final String id, final NiftyMousePrimaryClickedEvent clickedEvent) {

    if ("menuButtonPlayCampaign".equals(id)) {

    game.enterState(LevelsSelectState.ID);

    } else if ("menuButtonPlayArcade".equals(id)) {

    game.enterState(MapSelectState.ID);

    } else if ("menuButtonOptions".equals(id)) {

    game.enterState(OptionsState.ID);

    } else if ("menuButtonMapEditor".equals(id)) {

    game.enterState(InGameState.ID);

    } else if ("menuButtonCharacterEditor".equals(id)) {

    game.enterState(InGameState.ID);

    } else if ("menuButtonExit".equals(id)) {

    game.enterState(InGameState.ID);

    }

    }



    @Override

    public boolean keyEvent(NiftyInputEvent nie) {

    return false;

    }

    }



    public void setContainer(GameContainer container) {

    this.container = container;

    }



    @Override

    public void render(GameContainer container, StateBasedGame sbGame,

    Graphics g) throws SlickException {

    SlickCallable.enterSafeBlock();

    nifty.render(false);

    SlickCallable.leaveSafeBlock();

    }



    @Override

    public void update(GameContainer container, StateBasedGame sbGame, int delta)

    throws SlickException {

    nifty.update();

    }



    @Override

    public int getID() {

    return ID;

    }

    }[/java]

-.- It’s not jme at all!!!

Yes I understand. But could you please tell me how/why the InputSystem is not firing the NiftyEventSubscribers?