[Solved] GUI components wobbling/stuttering when positioned based on camera.getScreenCoordinates()

Troubleshooting gui
1

I am using this code below to position an interface element (a gold exclamation point ! ) over the head of an NPC related to a quest/objective. I’m using Lemur so the gold exclamation point image is created using a Container that gets attached to the GUINode.

public void update(float tpf){
    if(iconNode != null){ //iconNode is a blank node attached to the rootNode and located above NPC's head
        if(iconNode.getParent() != null && app != null && app.getCamera() != null){          
            Camera camera = app.getCamera();

            Vector3f screenPos = camera.getScreenCoordinates(iconNode.getWorldTranslation());

            if(screenPos != null){                                       
                                                        
                float width, height;
                width = camera.getWidth() * 0.05f;
                height = camera.getHeight() * 0.13f;
                
                Vector3f newSize = new Vector3f(width, height, 1);
                Vector3f newScreenLoc = screenPos.clone();
                
                //adjust size based on distance from camera
                float distFromCamera = camera.getLocation().distance(iconNode.getWorldTranslation());
                
                float distScalar = 20 / distFromCamera;
                if(distScalar <= 0.02f){
                    distScalar = 0f;
                }
                
                newSize.multLocal(distScalar);
                
                newScreenLoc.subtractLocal(width * distScalar * 0.5f, 0, 0);
                
                iconImageContainer.setLocalTranslation(newScreenLoc);
                iconImageContainer.setPreferredSize(newSize);

              // iconImageContainer.setLocalTranslation(screenPos); //  issue still occurs if I uncomment this and use screenPos before centering and scaling
                
                 
            }
           
        }
    }
}

However, when the camera rotates, the exclamation point seems to wobble left/right in a stuttery and unpleasant way. The FPS isn’t shown in my screencap but its at a steady 55-60 for the whole video, and nothing else in the scene is stuttering

The health bars above the NPC’s head do not have the stuttery issue because I did those differently using a Geoemtry with an unshaded material that gets attached to the root node and always faces the camera, although that also isn’t perfect for other reasons… So I am in the process of trying to figure out which way is better for things like this.

2

There may be a few problems… but one of the key ones may have to do with where you update. Because to my eye, the position seems to lag the camera movement… as if the position was set before whatever is setting the camera position was run.

1 Like
3

That seems to have been it.
It looks like the camera code was being called first because my camera manager class’ update method is called from an appState that gets attached before a seperate appState that does all the game related stuff.

But its all working now that I fixed the order to update the camera before all the game related stuff has been updated. thanks for the quick help :slightly_smiling_face:

Edit: accidentally interchanged the words “before” and “after” in my response here, so what I said above is the opposite order of what you said to do lol, but regardless I understand what you mean and fixed my code appropriately.

4

Hahah… I was really scratching my head about how you got it to work totally backwards from what I expected. So thanks for the follow up. :slight_smile:

1 Like