Picture on Hud is rotating around bottom corner instead of middle

Troubleshooting graphics
1

Hey everyone, question here. This is the first time I’ve tried to animate something on the Gui node, and it’s driving me a little mad. I understand why my picture is rotating around the corner, but I can’t figure out how to fix it. I’ve read some related threads, and I know the scene graph like the back of my head, but nothing seems to be working. Here’s a picture to illustrate (the “dial” should be right in the center, but instead it’s doing a circle around the mouse).

Pasted image1275×719 666 KB

This is just a prototype, but here’s the relevant code:

pic2.setWidth(270);
pic2.setHeight(160);
                    
pic2.setImage(AVSingletons.getAssetManager(), "Interface/Focus dial.png", true);
                
// pic2.setPosition(click2d.x, click2d.y);

nodeItIsAttachedTo.attachChild(pic2);
nodeItIsAttachedTo.move(click2d.x, click2d.y, 0);
 //  AVSingletons.getGuiNode().attachChild(pic2);
AVSingletons.getGuiNode().attachChild(nodeItIsAttachedTo);

Then to rotate:

pic2.rotate(0, 0, 1*tpf);
//nodeItIsAttachedTo.rotate(0,0,1*tpf);

I’ve tried rotating the child, rotating the parent node, moving child, moving the parent, but I just have some order mixed up and I’m guessing at this point. If anyone has any ideas, I’d appreciate it! thanks

2

I don’t know the back of my head … it’s invisible to me most of the time ^^

Simple problem you have:

guiNode → gives you the general parent
nodeItIsAttachedTo → gives you a position in gui space
(Node that you are missing - called a pivot node)
You need another node “pivotNode” and then
pivotNode.setLocalTranslation(pic2.getWidth0.5f, pic2.getHeight0.5f)

I wonder how someone could make such a beautiful gui without ever having stumbled accross this problem… :chimpanzee_closedlaugh:

4

Here is some sample code that uses your identifier names:

package mygame;

import com.jme3.app.SimpleApplication;
import com.jme3.material.Material;
import com.jme3.math.ColorRGBA;
import com.jme3.scene.Geometry;
import com.jme3.scene.Node;
import com.jme3.scene.shape.Box;

/**
 * Simple rotation of a box, in the guiNode...
 * 
 * @author Ogli
 */
public class SimpleTest3 extends SimpleApplication {

    public int counter = 0;
    
    public static void main(String[] args) {
        SimpleTest3 app = new SimpleTest3();
        app.start();
    }
    
    public Geometry boxGeom;
    public Material boxMaterial;
    Node nodeItIsAttachedTo, pivotNode;
    
    @Override
    public void simpleInitApp() 
    {
        float scale = 100f;
        Box box = new Box(1f*scale,1f*scale,1f*scale);
        boxGeom = new Geometry("Box 2", box);
        boxMaterial = new Material(assetManager, "Common/MatDefs/Misc/Unshaded.j3md");
        boxMaterial.setColor("Color", ColorRGBA.LightGray);
        boxGeom.setMaterial(boxMaterial);
        nodeItIsAttachedTo = new Node();
        pivotNode = new Node();
        guiNode.attachChild(nodeItIsAttachedTo);
        float click2d_x = 420, click2d_y = 200;
        nodeItIsAttachedTo.setLocalTranslation(click2d_x, click2d_y, 0);
        nodeItIsAttachedTo.attachChild(pivotNode);
        pivotNode.attachChild(boxGeom);
        pivotNode.setLocalTranslation(-0.5f*scale,-0.5f*scale,0);
    }
    
    @Override
    public void simpleUpdate(float tpf) {
        
        pivotNode.rotate(0,0,tpf*1f);

    }
}

Just make a file called “SimpleTest3.java” , paste this code, run the file, watch the result…

5

Heheh… you should learn it like the back of your hand and then this kind of question will be easier. :smile:

Then “Ah, I need to put it under a node and center it under the node and then rotate the node” would have been the instant answer.

6

Just one of those days! :slight_smile:

7

Just an update, I had to modify the code above to get it to work right with a picture:

pic2.setWidth(100);
pic2.setHeight(100);
                    
pic2.setImage(AVSingletons.getAssetManager(), "Interface/Focus dial.png", true);
                
pic2.setPosition(-50, -50);
pivotNode.setLocalScale(1);
                
AVSingletons.getGuiNode().attachChild(nodeItIsAttachedTo);
                
nodeItIsAttachedTo.setLocalTranslation(click2d.x, click2d.y, 0);
nodeItIsAttachedTo.attachChild(pivotNode);
pivotNode.attachChild(pic2);

Then this worked for me… Thanks guys!