Nifty button problems on galaxy tablet

On my galaxy tab I have an issue with nifty buttons. The button is in one place, but to click it you have to touch the screen slightly below where the button actually is. (The visual location and the clickable location do not match). I’m guessing this is because the bottom status bar (with the home, back buttons etc) on tablets takes up a bit of screen space and the gui does not account for this. Anyway does anyone know how to fix this issue? Is there a way I can change my layout to make it work?



Layout is below.




<?xml version="1.0" encoding="UTF-8"?>


















































































































[xml]<?xml version="1.0" encoding="UTF-8"?>

<nifty>





<!-- background style -->

<style id="backgroundNoEffects">

<attributes childLayout="vertical" width="100%" height="100%" />

</style>



<style id="background" base="backgroundNoEffects">

</style>





<style id="topInternal">

<attributes width="100%" height="8%" childLayout="horizontal" align="center" valign="center" />

</style>



<style id="centerInternal">

<attributes width="100%" height="84%" childLayout="horizontal" align="center" valign="center" />

</style>



<style id="bottomInternal">

<attributes width="100%" height="8%" childLayout="horizontal" align="center" valign="center" />

</style>







<!-- main style -->

<style id="main">

<attributes width="100%" height="*" childLayout="center" valign="center" align="center" />

</style>







<style id="backButton">

<attributes filename="tutorial/buttons/back.png" align="left" valign="center" visibleToMouse="true" visible="true" width="100" height="100" />

<effect>

<onClick name="imageOverlay" post="true" filename="tutorial/buttons/back-click.png" length="50" />

<onHover name="imageOverlay" post="true" filename="tutorial/buttons/back-hover.png">

<hover hoverFalloffType="linear" hoverFalloffConstraint="both" hoverWidth="150%" hoverHeight="150%"/>

</onHover>

<!-- <onClick name="playSound" sound="select" /> -->

<onHide name="fade" start="#f" end="#0" length="500" />

<onShow name="fade" start="#0" end="#f" length="500" />

</effect>

</style>



<style id="nextButton">

<attributes filename="tutorial/buttons/next.png" align="right" valign="center" visibleToMouse="true" visible="true" width="100" height="100" />

<effect>

<onClick name="imageOverlay" post="true" filename="tutorial/buttons/next-click.png" length="50" />

<onHover name="imageOverlay" post="true" filename="tutorial/buttons/next-hover.png">

<hover hoverFalloffType="linear" hoverFalloffConstraint="both" hoverWidth="150%" hoverHeight="150%"/>

</onHover>

<!-- <onClick name="playSound" sound="select" /> -->

</effect>

</style>







<screen id="start" controller="jme3test.niftygui.TestNiftyGui">

<layer id="layer" backgroundColor="#ffff" childLayout="center">



<panel id="panel" height="100%" width="100%" align="center" valign="center" backgroundColor="#ffff" childLayout="center" visibleToMouse="true">

<text id="text" font="aurulent-sans-36-bold-with-shadow.fnt" color="#000f" text="Loading" align="center" valign="center" />

</panel>

</layer>

</screen>





<!-- main page screen -->

<screen id="mainPage" controller="mygame.Main">

<layer childLayout="center">

<panel style="backgroundNoEffects">



<panel style="topInternal">



</panel>



<panel style="centerInternal" >

<text id="text" font="aurulent-sans-36-bold-with-shadow.fnt" color="#000f" width="100%" align="center" valign="center" />

</panel>



<panel style="bottomInternal" >

<image id="backButton" style="backButton">

<interact onClick="previousTurret()" />

</image>

<image id="nextButton" style="nextButton">

<interact onClick="nextTurret()" />

</image>

</panel>

</panel>

</layer>





</screen>



















<screen id="end">

</screen>











</nifty>

[/xml]

I’m trying to track this down. I think there might be an issue with the GLSurfaceView not updating Nifty correctly when the view changes its size during initialization. On my phone (with your xml file) I see the same problem, but if I rotate the screen (MainActivity sets orientation to SENSOR in my app) the problem goes away. Also on my phone, I have FULLSCREEN in MainActivity set to false and SHOWTITLE set to true. In this case, the buttons at the bottom are off the screen.



I’ll let you know what I find unless someone else finds it first :slight_smile:

1 Like

If you look at the android log, you’ll see something like the following towards the begining of the creation process:

[java]03-11 23:40:30.305 13379 13379 I AndroidHarness: INFO AndroidHarness 11:40:30 PM Settings: Width 540 Height 960[/java]

This is creating the surfaceview at the fullscreen resolution. The fullscreen size is used here because the android activity has not drawn the surfaceview yet, so the actual size is not yet known.



Some time later, you’ll see another line like the following:

[java]03-11 23:40:31.368 13379 13398 I OGLESContext: GL Surface changed, width: 540 height: 884[/java]

This is where the surface is drawn to the size the activity allows (fullscreen minus the status bar size) and it reports back to JME what the new size is.



It’s important to note that somewhere between these 2 lines is where the simpleAppInit is being run in the main game class. If you have the nifty display being created

[java]niftyDisplay = new NiftyJmeDisplay(assetManager, inputManager, audioRenderer, viewPort);[/java]

in simpleAppInit, then nifty is being created with the fullscreen size, not the actual size of the surfaceview.



It appears that when the surfaceview is resized by the activity, Nifty is not being resized appropriately so it is still being drawn with the fullscreen resolution.



If the MainActivity is using

[java]screenOrientation = ActivityInfo.SCREEN_ORIENTATION_SENSOR;[/java]

and the device is rotated causing the resolution to change after the game is started, then Nifty is notified of the change and it appears that it starts drawing the screen correctly. However, if

[java]screenOrientation = ActivityInfo.SCREEN_ORIENTATION_LANDSCAPE;[/java]

then the resolution is never changed and Nifty continues to draw with the wrong resolution.



What I do is have a Nifty screen controller that is also an AppState. I create and attached the AppState in simpleAppInit, but I don’t create the NiftyJmeDisplay until the initialize of the nifty screen controller AppState. The initialize of the AppState is called after simpleAppInit as well as after the OGLESContext: GL Surface changed happens so that Nifty is created with the correct resolution to start with.



I’m still trying to track down why Nifty is not resizing when OGLESContext: GL Surface changed is called while the game is starting.



@nehon I believe you did some work on the Nifty rendering lately, have you ever seen this?

No i didn’t, I tested it on my tablet and don’t have this issue.



But…i have nifty’s Autoscale feature enabled, don’t know if that makes a difference…