Nifty gui rotation on custom effect

Troubleshooting gui
1

I’m trying to make a custom effect that rotates an image on the 3D Y axis, just like if it was on the 3D scene. I though on a card flipping effect (to see the back of it), making it a little bit bigger and rotating it on the 3D Y axis and finally restoring it size (all in a smooth way) but I can’t find any way of rotating the image (even in the 2D axes) using the NiftyRenderEngine on the de.lessvoid.nifty.effects.EffectImpl execute method.

Is there a way to accomplish this effect using Nifty GUI?.

Thanks for any help.

2

I don’t think there is a way to do this with the current version of Nifty. I remember reading somewhere that they are exposing it somehow in nifty 2.0 but I don’t think that is coming out anytime soon.

3

Tonegod GUI can do that through it’s subscreen class

4

I had a 2D effect that does the trick for my purposes:

/**
 * @author NemesisMate
 */
public class FlipEffect implements EffectImpl {

    private int size;
    private boolean contract, preDeactivate;
    private Element element, back;
    
    @Override
    public void activate(Nifty nifty, Element element, EffectProperties parameter) {
        this.element = element;
        
        String backId = parameter.getProperty("back");
        if(backId != null) {
            back = nifty.getCurrentScreen().findElementByName(backId);
            if(back.isEffectActive(EffectEventId.onCustom) && back.isVisible()) {
                preDeactivate = true;
                return;
            }
        }
        
        if(size == 0) size = element.getWidth(); // Prevents the size to get an erroneus value by clicking
                                                    //the element in the middle of the effect
        
        if(element.isVisible()) contract = true;
        else {
            contract = false;
            element.setWidth(0);
            element.showWithoutEffects();
        }
    }

    @Override
    public void execute(final Element element, final float effectTime, Falloff falloff, NiftyRenderEngine r) {
        if(preDeactivate) return;
        
        if(contract) element.setConstraintWidth(SizeValue.px((int)(size - (size * effectTime))));
        else element.setConstraintWidth(SizeValue.px((int)(size * effectTime)));
        
        element.getParent().layoutElements();
    }

    @Override
    public void deactivate() {
        if(preDeactivate) {
            preDeactivate = false;
            return;
        }
        
        if(contract) {
            element.hideWithoutEffect();
            element.setConstraintWidth(SizeValue.px(size));//.setWidth(size);
            if(back != null) back.startEffect(EffectEventId.onCustom);
        }
    }
}

It works if the element being flipped is under a “center” layout. I’s possible to use it with other layouts with some easy tweaks having in mind the X and Y axis (but is not needed with “center” as nifty gui already centers it for us).

To use it:

...
<registerEffect name="flipEffect" class="mygame.gui.FlipEffect" />

...
            <effect>
                <onCustom name="flipEffect" length="150" back="$back"/>
            </effect>
...

Where $back is the id of the “back” element of this element being flipped and vice versa. For example:

<controlDefinition name="front_card" controller="mygame.gui.CardController">
    ...
    <effect>
        <onCustom name="flipEffect" length="150" back="$back"/>
    </effect>
</controlDefinition>
<controlDefinition name="back_card" controller="mygame.gui.CardController">
    ...
    <effect>
        <onCustom name="flipEffect" length="150" back="$back"/>
    </effect>
</controlDefinition>

...

<screen>
    <layer childLayout="center">
    ...
                <panel childLayout="center" width="30%">
                    <control id="firstFront" name="front_card" back="firstBack" align="center"/>
                    <control id="firstBack" name="back_card" back="firstFront" align="center"/>
                </panel>
    ...
    </layer>
</screen>
...
1 Like