[SOLVED] Nifty and Scene not rendered correctly

[Woodworf]

Hello,

i have 1 issues in nifty on adnroid that i do not reproduce on my laptop

here is my XML file

<?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”>
<!-- +++++++++++++++++++++++++++++++++++++++ -->
<!-- start screen -->
<!-- +++++++++++++++++++++++++++++++++++++++ -->
<screen id=“start” controller=“bombastic.jme.hud.CountersUI”>

    <layer id="layer" childLayout="center">

        <!-- *********************************-->
        <!-- INFO Panel on the top Left Corner-->
        <!-- *********************************-->
        <panel id="InfoScore" height="25%" width="25%" align="left" valign="top"  childLayout="center" >
            <panel id="InfoPanel"  valign="center" align="left" childLayout="center"   height="100%" width="50%">
                <!-- TODO make the image resizable-->
                 <image filename="Interface/image/InfoFrame.png" align="center" valign="center" height="100%" width="100%"></image>
             </panel>
            <panel id="Score" align="right" valign="center"  childLayout="vertical" height="100%" width="50%">
                <panel id="P1Score" align="center" valign="top"  childLayout="center" visibleToMouse="true" height="50%" width="100%">
                    <text id="text_SCORE_lblP1" font="Interface/font/menu.fnt" color="#7475edff" text="SCORE" align="left" valign="top" />
                    <text id="text_SCORE_valP1" font="Interface/font/menu.fnt" color="#7475edff" text="00000000" align="left" valign="bottom" />
                </panel>
                <panel id="RECORD" align="center" valign="bottom"  childLayout="center"  height="50%" width="100%">
                    <text id="text_RECORD_lbl" font="Interface/font/menu.fnt" color="#7475edff" text="RECORD" align="left" valign="top" />
                    <text id="text_RECORD_val" font="Interface/font/menu.fnt" color="#7475edff" text="00000000" align="left" valign="bottom" />
                </panel>
             </panel>
           </panel>  
        <!-- *********************************-->
        <!-- LVL  Panel on the top centered   -->
        <!-- *********************************-->
        <panel id="LevelPanel" height="15%" width="20%" align="center" valign="top"  childLayout="vertical" >                          
            <text id="text_LEVEL_lbl" font="Interface/font/menu.fnt" color="#7475edff" text="LEVEL" align="center" valign="top" />
            <text id="text_LEVEL_val" font="Interface/font/menu.fnt" color="#7475edff" text="01" align="center" valign="bottom" />
        </panel>
        <panel id="BoardPanel" height="85%" width="60%" align="center" valign="bottom"  childLayout="center" >               
            <image filename="Interface/image/transparent.png"  width="100%" height="100%"/>
        </panel>
        
        
        <!-- *************************************-->
        <!-- CLASS Panel on the bottom Left Corner-->
        <!-- *************************************-->          
        <panel id="ClassComboPanel" height="25%" width="20%" align="right" valign="bottom" childLayout="center" >               
            <panel id="ClassPanel" height="50%" width="100%" align="right" valign="top" childLayout="center" >               
                <text id="text_CLASSP1_lbl" font="Interface/font/menu.fnt" color="#7475edff" text="CLASS" align="left" valign="top" />
                <text id="text_CLASS_valP1" font="Interface/font/menu.fnt" color="#7475edff" text="E" align="left" valign="bottom" />
            </panel>
            <panel id="ComboPanel" height="50%" width="100%" align="right" valign="bottom" childLayout="center">               
                <text id="text_COMBO_lblP1" font="Interface/font/menu.fnt" color="#7475edff" text="COMBO" align="left" valign="top" />
                <text id="text_COMBO_valP1" font="Interface/font/menu.fnt" color="#7475edff" text="X 000" align="left" valign="bottom" />
            </panel>
        </panel>
        
        
        <!-- *************************************-->
        <!-- CONTROL Panel on the bottom right Corner-->
        <!-- *************************************-->
        <panel id="ControlPanel" height="192" width="192" align="left" valign="bottom"  childLayout="center" visibleToMouse="true">       
            <panel id="ControlPanelLeft" height="100%" width="64" align="left" valign="center"  childLayout="center" visibleToMouse="true">
                <image filename="Interface/image/DPAD/LeftPAD.png"  align="right" valign="center" >
                    <interact onClickRepeat="left()" />
                    <interact onMouseOver="left()" />
                </image>
            </panel>
            <panel id="ControlPanelRight" height="100%" width="64" align="right" valign="center"  childLayout="center" visibleToMouse="true">
                <image filename="Interface/image/DPAD/RightPAD.png"  align="left" valign="center">
                     <interact onClickRepeat="right()" />
                     <interact onMouseOver="right()" />
                </image> 
            </panel>
            <panel id="ControlPanelUp" height="50%" width="64" align="center" valign="top"  childLayout="center" visibleToMouse="true">
                <image filename="Interface/image/DPAD/UpPAD.png" align="center" valign="top" >
                      <interact onClickRepeat="up()" />
                      <interact onMouseOver="up()" />
                </image>
            </panel>
            <panel id="ControlPanelDown" height="50%" width="64" align="center" valign="center"  childLayout="center" visibleToMouse="false">
                <image filename="Interface/image/DPAD/CenterPAD.png" align="center" valign="center" />
            </panel>
            <panel id="ControlPanelDown" height="50%" width="64" align="center" valign="bottom"  childLayout="center" visibleToMouse="true">
                <image filename="Interface/image/DPAD/DownPAD.png" align="center" valign="bottom" >
                      <interact onClickRepeat="down()" />
                      <interact onMouseOver="down()" />
                </image>
            </panel>
        </panel>
    </layer>
</screen>

</nifty>

here is the rendering i have on my laptop : http://hpics.li/204d148
here is the one on my android device : http://hpics.li/a906f0f

any idea about what should i do in order to make those 2 issues vanishing ?
Thanks for your help

Note: nifty.validateXml(HUDXmlFile); returns an exception but not on my laptop

[nehon]

Try to make your images power of two

[Woodworf]

Try to make your images power of two

it is already the case.

and it does not explain why the redering is so broken because while facing the second issue i don’t event try to load any image

[Momoko_Fan]

What does this have to do with Nifty exactly? The only difference I see is that on Android some of the game level is covered in black. And the game level is using textures, so @nehon’s suggestion still applies.

[Woodworf]

The scene is well rendered on android if i do not add the Nifty HUD, this is why i supposed nifty is causing the issue.
I’m trying to build a simple example reproducing the issue. i’ll get back to you with the sample.

[t0neg0d]

Not all power of 2 textures will work on all android devices… make sure they are the same dimensions width and height wise (i.e. square images)

[Woodworf]

here is my as sample to reproduce the bad rendering:

package test;

import com.jme3.app.SimpleApplication;
import com.jme3.light.DirectionalLight;
import com.jme3.material.Material;
import com.jme3.math.ColorRGBA;
import com.jme3.math.FastMath;
import com.jme3.math.Quaternion;
import com.jme3.math.Vector3f;
import com.jme3.niftygui.NiftyJmeDisplay;
import com.jme3.scene.Geometry;
import com.jme3.scene.shape.Box;
import de.lessvoid.nifty.Nifty;
import de.lessvoid.nifty.screen.Screen;
import de.lessvoid.nifty.screen.ScreenController;

public class HelloNiftyWithAnim extends SimpleApplication implements ScreenController
{

    public static void main(String[] args) 
    {
            HelloNiftyWithAnim app = new HelloNiftyWithAnim();
            app.start();
    }
 
    @Override
    public void simpleInitApp() 
    {
            setDisplayStatView(false);
            setDisplayFps(false);                      
            DirectionalLight sun = new DirectionalLight();
            sun.setDirection(new Vector3f(-0.1f, -0.7f, -1.0f));
            rootNode.addLight(sun);
            Box b = new Box(1, 1, 1);
            Geometry boardNode = new Geometry("blue cube", b);
            Material mat = new Material(assetManager,"Common/MatDefs/Misc/Unshaded.j3md");
            mat.setColor("Color", ColorRGBA.Blue);
            boardNode.setMaterial(mat);

            boardNode.setLocalScale(0.12f);
            rootNode.attachChild(boardNode);
            //No rendering Issue if next line is commented
            initNifty();
    }

    private void initNifty()
    {
        
            NiftyJmeDisplay niftyDisplay = new NiftyJmeDisplay(assetManager,inputManager,audioRenderer,guiViewPort);
            Nifty nifty = niftyDisplay.getNifty();
            String HUDXmlFile= "Interface/Nifty/HUDTest.xml";
            nifty.fromXml(HUDXmlFile, "start", this);
            guiViewPort.addProcessor(niftyDisplay);
    }
    
    @Override
    public void simpleUpdate(float tpf)
    {   
          Quaternion incr= new Quaternion();
          incr.fromAngleAxis(FastMath.DEG_TO_RAD*speed,new Vector3f(0,1f,0));
          Quaternion rot= rootNode.getLocalRotation();
          rot = rot.multLocal(incr);
          rootNode.setLocalRotation(rot);
    }

    public void bind(Nifty nifty, Screen screen) {
    }

    public void onStartScreen() {
    }

    public void onEndScreen() {
    }
}

and here is the nifty xml file

<?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=“bombastic.jme.hud.CountersUI”>
<layer id=“layer” childLayout=“center”>
<panel id=“P1Score” align=“center” valign=“top” childLayout=“center” visibleToMouse=“true” height=“50%” width=“100%”>
<text id=“text_SCORE_lblP1” font=“Interface/font/menu.fnt” color="#7475edff" text=“SCORE” align=“left” valign=“top” />
</panel>
</layer>
</screen>
</nifty>

If you launch it without calling inHUD() no rendering issue. The Board is well loaded and rotating. screenshot here: http://hpics.li/5a245d7
But if you call the initHUD method, nothing is well rendered anymore. screenshot here : http://hpics.li/73a300f

[Woodworf]

Ok i just undestood which part of the code is causing the issue, and the winner is : setDisplayStatView(false);
If I both deactivate the StatView and add a simple HUD with Nifty the rendering is KO.
If i set it back to true (which is the default value) everything goes well, and this issue is only reproducible on android.

Anyone could help me debug this any further ?

[nehon]

@Momoko_Fan I think that’s the issue you closed about empty guiNode because you were unable to reproduce it.

@Woodworf please, try to disable the statView and just add a blank BitmapText into the guiNode. Won’t fix your issue, but will help corner it down.

[Woodworf]

@Woodworf please, try to disable the statView and just add a blank BitmapText into the guiNode. Won’t fix your issue, but will help corner it down.

Thank you the Work Around worked for me
I’ll be gald to test the final fix.
thanks to all of you for your help