Nifty custom fade effect does nothing

Hi all,

I’m just trying to implement a simple Nifty GUI, where a score is displayed temporarily on the screen and then fades away. I’ve been through the Nifty manual, and cruised several forums, and was pretty sure my code is correct… except that there is no effect :confused:

I do know from placing breakpoints that the Effect is being executed, and the EndNotify function is also being called, but no fade out is happening. I’m hoping there’s something simple I’m missing here??

I’m building the GUI from Java instead of XML, mostly because I want to get it working first.

Here’s my code:

protected void initGui(){
		
	    NiftyJmeDisplay niftyDisplay = NiftyJmeDisplay.newNiftyJmeDisplay(
							sim.getAssetManager(), 
							sim.getInputManager(), 
							sim.getAudioRenderer(), 
							guiViewPort);
		
	    nifty = niftyDisplay.getNifty();
	    
	    nifty.loadStyleFile("nifty-default-styles.xml");
	    nifty.loadControlFile("nifty-default-controls.xml");
	   
	    nifty.addScreen("start", new ScreenBuilder("start"){{
	        controller(new DefaultScreenController());
	       
	        layer(new LayerBuilder("background") {{
	            childLayoutCenter();
	            //backgroundColor("#000000");
	            // <!-- ... -->
	        }});

	        layer(new LayerBuilder("foreground") {{
	        	childLayoutHorizontal();
                
                // Spacer left
                panel(new PanelBuilder("panel_left") {{
                    childLayoutVertical();
                    //backgroundColor("#000000");
                    height("100%");
                    width("80%");
                }});
                
	            // panel added
	            panel(new PanelBuilder("panel_right") {{
	                childLayoutVertical();
	                alignCenter();
	                //backgroundColor("#000000");
	                height("100%");
	                width("20%");
	                
	                panel(new PanelBuilder("score_panel") {{
	                    childLayoutCenter();
	                    //backgroundColor("#00f8");
	                    height("15%");
	                    width("100%");
	                    
	                    onCustomEffect(new EffectBuilder("fade"){{
	                    	length(1000);
				startDelay(2000);	
				effectParameter("start","#f");
				effectParameter("stop","#0");
				inherit(true);
				}});
	                
	                    control(new LabelBuilder("score_label"){{
	                        color("#ff0000");
	                        text("Hello!");
	                        width("100%");
	                        height("100%");
	                        font("Interface/Fonts/Typewriter_red_70-hd.fnt");
	                    }});
	                }});
	            }});
	        }});
	        
	      }}.build(nifty));
	    
	    guiViewPort.addProcessor(niftyDisplay);
	    
	    nifty.gotoScreen("start");
		
	    screen = nifty.getCurrentScreen();
	    score_label = screen.findNiftyControl("score_label", Label.class);
	    score_panel = screen.findElementById("score_panel");
	   
	}
	
	public void registerMessage(String message, int delay, int duration){
	
		score_panel.startEffect(EffectEventId.onCustom, new FadeOutEnded());
		score_label.setText(message);
		
	}

Try moving the effect to the label and calling it on your label. Unless you have a reason to do it this way it is probably a little cleaner to move the effect to onHide instead of custom. Then you could call showWithoutEffects on the panel and immediately call hide in order to execute it.

If it still doesn’t work try to move this specific code into a stand alone example so I can take a closer look.

Thanks for your advice.

I tried your suggestions but still no dice. It appears to be a fault with the fade effect itself. Here is a self-contained example, where I use “onStartScreenEffect” instead. The callback gets called after the specified delay, but no fade effect occurs. It doesn’t matter if the event handler is placed in the panel or the label.

public class NiftyTest extends SimpleApplication {

    public static void main(String[] args){
    	NiftyTest app = new NiftyTest();
        app.start(); // start the game
    }

    @Override
    public void simpleInitApp() {
        Box b = new Box(1, 1, 1); // create cube shape
        Geometry geom = new Geometry("Box", b);  // create cube geometry from the shape
        Material mat = new Material(assetManager,
          "Common/MatDefs/Misc/Unshaded.j3md");  // create a simple material
        mat.setColor("Color", ColorRGBA.Blue);   // set color of material to blue
        geom.setMaterial(mat);                   // set the cube's material
        rootNode.attachChild(geom);              // make the cube appear in the scene
        
        initGui();
        
    }
    
    protected void initGui(){
		
	    NiftyJmeDisplay niftyDisplay = NiftyJmeDisplay.newNiftyJmeDisplay(
					 this.getAssetManager(), 
					 this.getInputManager(), 
					 this.getAudioRenderer(), 
				         this.getGuiViewPort());
		
	    Nifty nifty = niftyDisplay.getNifty();
	    
	    nifty.loadStyleFile("nifty-default-styles.xml");
	    nifty.loadControlFile("nifty-default-controls.xml");
	   
	    nifty.addScreen("start", new ScreenBuilder("start"){{
	        controller(new MyScreenController());
	       
	        layer(new LayerBuilder("background") {{
	            childLayoutCenter();
	        }});
	        
	        
	        layer(new LayerBuilder("foreground") {{
	             childLayoutHorizontal();
                
                     // Spacer left
                     panel(new PanelBuilder("panel_left") {{
                         childLayoutVertical();
                         height("100%");
                         width("80%");
                     }});
                
	            // panel added
	            panel(new PanelBuilder("panel_right") {{
	                childLayoutVertical();
	                alignCenter();
	                height("100%");
	                width("20%");
	                
	                panel(new PanelBuilder("score_panel") {{
	                    childLayoutCenter();
	                    backgroundColor("#00f8");
	                    height("15%");
	                    width("100%");
	                    
	                    onStartScreenEffect(new EffectBuilder("fade"){{
	                    	                        length(1000);
							startDelay(2000);	
							effectParameter("start","#f");
							effectParameter("stop","#0");
							inherit(true);
							onEndEffectCallback("callback()");
							}});
	                    
	                    control(new LabelBuilder("score_label"){{
	                        color("#ff0000");
	                        text("Hello!");
	                        width("100%");
	                        height("100%");
	                        
	                    }});
	                }});
	            }});
	        }});
	        
	      }}.build(nifty));
	    
	    this.getGuiViewPort().addProcessor(niftyDisplay);
	    nifty.gotoScreen("start");
    
    }
    
    public static class MyScreenController extends DefaultScreenController {
    	
    	public void callback(){
             System.out.println("Callback reached.");
        }
    	
    }
    
}

I’m curious for another reason… can you show what your panel looks like?

What version of JME are you using?

The effect parameter is “end” not stop. So you were setting the alpha to #F and it was interpolating between #F and #F.

1 Like

Facepalm I knew it would end up being something silly, thanks a million!

@pspeed

Here’s a video of the scores being shown:

I’m using JME 3.1.0-alpha5, according to the jars. I am building on another third party API (https://www.opends.eu/), so I am kind of stuck with the version they’re using for the moment.

So, it’s just the number that appears in the upper right and fades out?

If you are ever interested, I could show you how to do that with Lemur using about 5% of the amount of code it took in Nifty.

Sure, I’d definitely be interested! I plan to add some more controls as well, that’s just a starter (it’s meant to be an experimental task actually, so I need to balance pretty with practical).

I can’t tell what font nifty is using for the score text… so I’ll leave that as kind of a placeholder.

The following will also assume that the “Getting Started” stuff has already been done on through at least “Initializing the GUI layer”

Then, if you just want to create a label somewhere:

Label score = new Label("Hello!");
score.setTextColor(ColorRGBA.Green);
score.setFont("font/asset/path"); // both this and the color could have been defined in a style, also
score.setLocalTranslation(somewhere on the screen);
guiNode.attachChild(score);

If you want it to layout automatically right justified to the edge of the screen or something then I can show that, too… but I thought I started with the simple way.

To fade it from one alpha to another, say from 0 to 1 over 2 seconds:

Tween fade = PanelTweens.fade(score, 0f, 1f, 2.0);
GuiGlobals.getInstance().getAnimationState().add(fade);

That’s kind of just the tip of the iceberg, I guess.

Thanks, I’ll look into that. Looks like a great library :slight_smile: