How to Implement Fade Effect into Nifty-GUI

Hi,
I am wondering if there is any way to create a fade effect in Nifty-GUI. Can the fade go from black to an image? How would you implement this into XML?

Thanks

put a black panel on top and fade that from 1 to 0 alpha. Or have a black background, and do it vice versa

I don’t think I am doing it correctly as it is not working for me. The fade effect does not occur at the start. It only fades out to black after 5 seconds. Here is XML file:

start.xml:
[java]<?xml version=“1.0” encoding=“UTF-8”?>
<nifty xmlns=“http://nifty-gui.sourceforge.net/nifty-1.3.xsd” xmlns:xsi=“http://www.w3.org/2001/XMLSchema-instance” xsi:schemaLocation=“http://nifty-gui.sourceforge.net/nifty-1.3.xsd http://nifty-gui.sourceforge.net/nifty-1.3.xsd”>
<screen id=“start” controller=“mygame.Main”>
<layer id=“layer” backgroundColor="#000f" childLayout=“center”>

        &lt;panel id="panel" align="center" backgroundColor="#000f" &gt;
            &lt;effect&gt;
                &lt;onStartScreen name="fade" startDelay="2000" start="#f" end="#0" length="3000" /&gt;
            &lt;/effect&gt;
        &lt;/panel&gt;
        
        &lt;panel id="panel" align="center" valign="center" backgroundImage="Interface/image.JPG"&gt;
            &lt;effect&gt;
                &lt;onStartScreen name="fade" startDelay="10000" start="#f" end="#0" length="3000" neverStopRendering="true"/&gt;
            &lt;/effect&gt;
        &lt;/panel&gt;
    &lt;/layer&gt;
&lt;/screen&gt;

</nifty>[/java]

Can you explain to me what I am doing wrong? Thanks

I am an idiot. I got it. I had to move the first panel under the second panel. This is my code:

[java]<?xml version=“1.0” encoding=“UTF-8”?>
<nifty xmlns=“http://nifty-gui.sourceforge.net/nifty-1.3.xsd” xmlns:xsi=“http://www.w3.org/2001/XMLSchema-instance” xsi:schemaLocation=“http://nifty-gui.sourceforge.net/nifty-1.3.xsd http://nifty-gui.sourceforge.net/nifty-1.3.xsd”>
<screen id=“start” controller=“mygame.Main”>
<layer id=“layer” backgroundColor="#000f" childLayout=“center”>

        &lt;panel id="panel" align="center" valign="center" backgroundImage="Interface/image.JPG"&gt;
            &lt;effect&gt;
                &lt;onStartScreen name="fade" startDelay="8000" start="#f" end="#0" length="3000" neverStopRendering="true"/&gt;
            &lt;/effect&gt;
        &lt;/panel&gt;
        
        &lt;panel id="panel" align="center" backgroundColor="#000f" &gt;
            &lt;effect&gt;
                &lt;onStartScreen name="fade" startDelay="3000" start="#f" end="#0" length="3000" neverStopRendering="true"/&gt;
            &lt;/effect&gt;
        &lt;/panel&gt;
    &lt;/layer&gt;
&lt;/screen&gt;

</nifty>[/java]

try this. :slight_smile:
[java]<?xml version=“1.0” encoding=“UTF-8”?>
<nifty>
<screen id=“start” controller=“mygame.Main”>
<layer id=“layer” backgroundColor="#000f" childLayout=“center”>
<panel id=“panel” align=“center” valign=“center” backgroundImage=“Interface/Leaf.png” >

            &lt;effect&gt;
                &lt;onStartScreen name="fade" start="#0" end="#f" length="5000" /&gt;
            &lt;/effect&gt;
        &lt;/panel&gt;
        &lt;/layer&gt;
&lt;/screen&gt;

</nifty>[/java]

Ops, I didn’t see your second post :slight_smile: yes you could do it also that way!