Picture on Hud is rotating around bottom corner instead of middle

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).

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

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

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

Then to rotate:

pic2.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

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:

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();
    public Geometry boxGeom;
    public Material boxMaterial;
    Node nodeItIsAttachedTo, pivotNode;
    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);
        nodeItIsAttachedTo = new Node();
        pivotNode = new Node();
        float click2d_x = 420, click2d_y = 200;
        nodeItIsAttachedTo.setLocalTranslation(click2d_x, click2d_y, 0);
    public void simpleUpdate(float tpf) {


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

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.

Just one of those days! :slight_smile:

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

pic2.setImage(AVSingletons.getAssetManager(), "Interface/Focus dial.png", true);
pic2.setPosition(-50, -50);
nodeItIsAttachedTo.setLocalTranslation(click2d.x, click2d.y, 0);

Then this worked for me… Thanks guys!