2D HUD deformations in real time

Troubleshooting gui
1

I create a loading screen using simple graphic elements. For example:

        rotatingRingPicture = new Picture("Ring");
        rotatingRingPicture.setImage(assetManager, "Textures/Loading.png", true);
        int w = settings.getWidth()/8;
        int h = w;
        rotatingRingPicture.setWidth(w);
        rotatingRingPicture.setHeight(h);
        rotatingRingPicture.setPosition(settings.getWidth()/2,settings.getHeight()/2);
        guiNode.attachChild(rotatingRingPicture);

I show to the user a rotating loading ring until the game scene is uploading in a separate thread.
I also want that the words: LOADING… PLEASE WAIT change their transparency from min up to max in according to a sinus dependency.
I could create it using LibGDX or Processing but in JMonkey engine I can not find methods to:

  1. change the transparency of a gui-child
  2. change the offset/anchor of a gui-child to rotate it around its center point.

How can I perform this actions? I need to change the guiChild transparency and rotate the guiChild around its center point.

2

Set the material color to something transparent. Set the material’s blend mode to alpha (see tutorials for how to do that).

Put it under a node that you will rotate and on the Picture call:

Edit: it sounds like maybe you are new to scene graphs… in which case this might help:
https://wiki.jmonkeyengine.org/tutorials/scenegraph/assets/fallback/index.html

3

@pspeed thanks, I created a node and added the rotating ring to it and it works. In simpleInitApp():

        rotatingRingPicture = new Picture("Ring");
        rotatingRingPicture.setImage(assetManager, "Textures/Loading.png", true);
        int w = settings.getWidth()/12;
        int h = w;
        rotatingRingPicture.setWidth(w);
        rotatingRingPicture.setHeight(h);        
        rotatingRingPicture.setLocalTranslation(-w/2, -h/2,0);
        rotatingRingNode = new Node();
        rotatingRingNode.setLocalTranslation(settings.getWidth()/2, settings.getHeight()/4, 0);
        rotatingRingNode.attachChild(rotatingRingPicture);
        guiNode.attachChild(rotatingRingNode);

in simpleUpdate(float):

             Quaternion rotation = new Quaternion();
             rotation.fromAngles(0,0,ringAngle);
             rotatingRingPicture.center().setLocalRotation(rotation);
             ringAngle-=0.02f;

About changing transparency. I have not understood yet how should I use materials with GUI-children.

4

In general, except just "LOADING… " text and etc i would suggest you doing all in Shader.

Transparency / offset / rotation / etc all can be done in shader easly.

Here is simple example that all it do is made in shader:

loader5

5

GUI children are not different than regular scene graph children. A Picture is just a hacky subclass of Geometry… it has a Material like any other Geometry.

It uses JME’s regular Unshaded.j3md material.

6

At the point someone is still learning how to use a scene graph, “easily” is probably not the term I would use for diving into shaders.

2 Likes
7

@pspeed I didn’t know that, thanks