[Tutorial][Work in progress] Hud elements

[IzNoGoD]

You can create 2 kinds of hud elements: a global one, or a client-based one.

Global:

hud = newHudElem();

Client:

hud = newClientHudElem(client_entity);

Above code might look trivial, but remember to store your hud elems in some proper variable so you can destroy() them when you dont need them anymore. However, if you think you might reuse a hud elem, just make it insivible instead of destroying (iirc there is a max on creation of hud elements)

Now, if you have a hud element, you want to place it somewhere. You can mainly do this using .vertAlign and .horzAlign:

hud.vertAlign = "some_string";
hud.horzAlign = "some_string";

In which the "some_string" is one of these, for vertAlign:

top
bottom
middle
center_safearea
fullscreen
subtop
noscale
alignto480

The easiest of this bunch is probably the fullscreen one. This makes your hud element stretch from top to bottom, having its zero-origin-point in the middle (as a horizontal line, as it still depends on the .horzAlign) of your screen. This means .y can range from +240 to -240 for the hud to be visible. The downside here is that the hud will be scaled (from 480 pixels to whatever you are using) and will probably look ugly on new, non-4:3 screens. Plus side is that it will cover the entire screen.

The top alignment is so the engine knows it can use the top 480 pixels (? or does it scale according to your aspec ratio?) of your screen, with the zero-origin-point at the top of your screen. This means that, in order for the hud to become visible, you have to give it a negative .y coordinate. Plus side is that it will not be scaled, downside is that you can probably not reach the bottom of the screen (?).

Bottom alignment is exactly the opposite of top-alignment: the hud will start at the bottom, having its zer-origin-point exactly there and requiring a positive .y to be visible.

center_safearea uses the middle 640x480 pixels of your screen (might scale according to aspect ratio also, unsure) and will have your hud visible (at least partially) if you have a .y between 240 and -240

If the middle alignment exists (unsure) it will not give much advantages over center_safearea, although it might be that middle scales according to aspect ratio while center_safearea does not (citation needed)


For the .horzalign:

right
left
center
center_safearea
fullscreen
subleft
noscale
alignto640

Most of above alignments are comparable to their vertAlign counterparts: left will start at the left of your screen, requiring a positive .x, while right starts at the right, requiring a negative .x.

It is advisable to use either fullscreen/fullscreen for both, or use any other for both (so dont use fullscreen/left or bottom/fullscreen) unless you know what you are doing and know its intended effect. It is also advisable to not use fullscreen for any text, unless you want it to look goddamn ugly, and the same goes for any image you want to have placed somewhere while not being scaled unevenly.

[part about setvalue/settext/.label/setshader goes here]

[part about .sort and .foreground goes here]

[part about scaleovertime/fadeovertime+alpha goes here]

[part about destroying goes here]

[part with some practical examples with example images of usage of vertalign/horzalign goes here]