RPHud, as simple hud/gui system

Development community-plugins
1

Hello,



the purpose of this project was to get a small, fast, easy to use hud system for JME3. This system is not ment to replace Nifty since it will probably never incorportate that amout of features.



The system is targeting programmers, since the only way to generate them is currently trought code.



The whole system is ‘percentage based’, so it will always adjut automatically to the selected resolution. Additionally the system is build so that you can register 4 different listeners on each HudObject, and for the simplicity they are automatically called on the render thread.



Here is a short video showing a simple mouseover effect, simple buttons, and toggleButtons



http://www.youtube.com/watch?v=8inME7x9KHU




The usage is quite simple:

Load the HudManager and attach it
[java]
hudManager = new RPHudManager(this);
this.stateManager.attach(hudManager);
[/java]

Create a Sceen:
[java]
RPHudScreen screen1 = new RPHudScreen("Screen1", this.cam);
[/java]

Now you can add content to the screen, a simple colored background would be:
[java]
RPHudBackground rpHudBackground = new RPHudBackground("BG1", new Vector2f(0.25f, 0.25f), new Vector2f(0.5f, 0.5f), material);
screen1.addChildComponent(rpHudBackground);
[/java]

Note the two Vector2f's. The fist one is the relative position to the parent component, while the second one is the relative size. (Position is starting from bottom left), according to this the above code creates a colored quad in the center of the screen with size x*0.5, y*0.5)

Once done with the layout the call of
[java]
screen1.doLayout(0);
[/java]

Calculated the absolute layout of each component. The 0 is the starting depth, each subcompnent has depth+1 of its parent component by default. It is also possible to set a depthmodifier for each component.

If you want to show the screen simply activate it with following command:
[java]
hudManager.activateScreen(screen1);
[/java]

At last, it is easily possible to register actions for the hudsystem
[java]
hudManager.addMouseInputAction(MouseInput.BUTTON_LEFT, "ButtonLeft");
[/java]

This is just for a brief explanation.
If there is interest in such a system i will make a plugin out of it and contribute it.
Also if it get's contributed what default features should it have?
Planned are sliders and tab's-
2 Likes
2

To show further the easiness of the system, i will show you some default components.



This for example is the simple background:



[java]

public class RPHudBackground extends RPHudComponent implements RPHudLayoutListener{

Geometry background;

Material material;



public RPHudBackground(String name, Vector2f positionRelative, Vector2f sizeRelative,Material material) {

super(name, positionRelative, sizeRelative);

this.material = material.clone();

this.registerLayoutListener(this);

background=new Geometry(name+":background",new Quad(1,1));

background.setMaterial(this.material);

this.attachChild(background);

}



public void onLayoutChange(int depth) {

this.background.setLocalScale(this.sizeAbsolute.x, this.sizeAbsolute.y, 0);

}





public Material getMaterial() {

return material;

}

}

[/java]



And for making the pulsing mouseover effect only this extension is needed:



[java]

public class RPHudPulsingBackground extends RPHudBackground implements RPHudMouseInOutListener,RPHudUpdateListener{

ColorRGBA finalColor;

ColorRGBA color1;

ColorRGBA color2;



float value;

float speedModifier=1f;

boolean mouseOver;

public RPHudPulsingBackground(String name, Vector2f positionRelative, Vector2f sizeRelative, Material material,ColorRGBA color1, ColorRGBA color2) {

super(name, positionRelative, sizeRelative, material);

this.registerUpdateListener(this);

this.registerMouseInOutListener(this);

this.color1 = color1;

this.color2 = color2;

finalColor=new ColorRGBA();

}







public void onUpdate(float tpf, Vector2f mousePosition) {

if(this.mouseOver){

this.value+=tpfspeedModifier;

if(this.value<0){

this.speedModifier=-1;

this.value+=tpfspeedModifier;

}

if(this.value>1){

this.speedModifier=-1;

this.value+=tpfspeedModifier;

}

}else{

if(this.value>0){

if(this.speedModifier>0){

this.speedModifier=-1;

}

this.value+=tpf*speedModifier;

}

}

finalColor.interpolate(color1, color2, value);

this.material.setColor("Color", finalColor);

}



public void onMouseOverChange(boolean isMouseOver) {

this.mouseOver=isMouseOver;

}



}

[/java]



This example also shows the usage of the Listeners, note, you can register more then one listener for each type…

3

hehe its really simple, true.



i made similar system, but much more extended. it can even read XML files to parse view like in nifty.



maybe later i could “separate” it from my other projects libs and share.

4

The simplicity is the key, sometimes i simple want a button to test something, sure, i could setup nifty or whatever, but it is easier to write 4 lines and then i don’t have to care about threads or whatever and i can start using that button…



I use it very often for debugging / adjusting settings at runtime

5

yes, true.

that is why i said that “i have similar system”.



no need to configure, can make hud via XML or code. also Event managing like mouse over/out/click/etc and other events.



but i use it for a GUI. :slight_smile:

6

For a full hud system my version lacks of some basic ability’s.

For example a freely scrollable area is not possible, i can only draw, or not draw something but not drawing only the half. Also if a component want’s to draw outside of a parent, it does.

Drag&Drop is possible, but it already requires a spezific layout to work nicely.

And so on…

7

Nice.

Did you consider batching the elements?

8
@nehon said:
Nice.
Did you consider batching the elements?


Sure, it is possible depending on the material/material's used..
9

Definitely sounds like a handy plugin to me.

10

Yes, with low work you can setup some nice hud features, specially if your goal is to get something small done and running in low time, pretty neat.