Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

HUD System #6

Closed
wants to merge 21 commits into from
Closed

HUD System #6

wants to merge 21 commits into from

Conversation

esk33
Copy link
Contributor

@esk33 esk33 commented Jun 5, 2024

A system for implementing HUD elements. Most details of how it works can be found in the included documentation file (./src/hud/HUD.md)

Please don't merge yet, could use review, polishing, and example implementation. Let me know what you think.

Copy link
Member

@platz1de platz1de left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

In the future this should probably be merged with the normal ui system (they mostly differ in how positioning works, ui elements could also need the extra control)

src/hud/Hud.ts Outdated Show resolved Hide resolved
src/hud/Hud.ts Outdated Show resolved Hide resolved
src/hud/Hud.ts Outdated Show resolved Hide resolved
src/hud/Hud.ts Outdated Show resolved Hide resolved
src/hud/Hud.ts Outdated Show resolved Hide resolved
src/hud/Hud.ts Outdated Show resolved Hide resolved
src/hud/HUD.md Outdated Show resolved Hide resolved
src/hud/HUD.md Outdated Show resolved Hide resolved
src/hud/Hud.ts Outdated Show resolved Hide resolved
src/hud/HudElement.ts Outdated Show resolved Hide resolved
src/hud/HudElement.ts Outdated Show resolved Hide resolved
Co-authored-by: platz1de <51201131+platz1de@users.noreply.github.com>
@esk33
Copy link
Contributor Author

esk33 commented Jun 7, 2024

Will change spawn() and destroy() to show() and hide() to reflect the change

@esk33
Copy link
Contributor Author

esk33 commented Jun 9, 2024

I think it should be all good now, I'll do some testing and double-checking later today when I have more spare time.

@platz1de
Copy link
Member

platz1de commented Jun 9, 2024

documentation needs to be updated to mention show/hide instead of spawn, rest looks good

@esk33
Copy link
Contributor Author

esk33 commented Jun 9, 2024

Yes I will do that

@esk33
Copy link
Contributor Author

esk33 commented Jun 10, 2024

Making some last changes, adding a HudManager.ts file for initializing HUD elements.

It looks something like this:

import ExampleElement from "./elements/ExampleElement";

export function initHudElements() {
	new ExampleElement();
}

All HUD elements should have their constructors called here. initHudElements() is called in Loader.ts. The element's constructor should assume it is being called when the game is first loaded.

Registering elements could potentially be automated during the build process.

@esk33
Copy link
Contributor Author

esk33 commented Jun 10, 2024

That should be all. Would be nice to implement some basic game stuff using the system to see it in action :-)

@@ -3,5 +3,28 @@ import {HudElement} from "../HudElement";
export class ExampleElement extends HudElement {
constructor() {
super("ExampleElement");

this.setCoordinates(100, 100);
document.addEventListener("keydown", (event) => {
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

ui elements shouldn't listen to global events

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Yeah, this was just for the sake of the example. Probably shouldn't have committed it.


}
});
this.show();
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

The element won't be able to become hidden as the instance isn't saved

constructor() {
super("ExampleElement");

this.setCoordinates(100, 100);
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Elements shouldn't decide their own position

import {ExampleElement} from "./elements/ExampleElement";

export function initHudElements() {
//new ExampleElement(); // Uncomment this to enable the example element
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Let's not create a long list of class constructors

*
* @param shift Units to shift the element along the Y axis
*/
shiftYCoord(shift: number) {
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

ui elements are pretty much always fixed and will never be shifted around, having three methods for that is overkill

@esk33
Copy link
Contributor Author

esk33 commented Jun 11, 2024

In regards to

The element won't be able to become hidden as the instance isn't saved

and

Elements shouldn't decide their own position

I think you and I have different ideas of how ui elements should behave. The way I've designed it is that the bulk of the element's logic is handled within the element class itself, hence no need to save the instance as all necessary functionality is setup in the constructor. Operations exclusive to the element should generally be handled by the element. I do, however, admit not saving the instance is not a good design choice.

@platz1de
Copy link
Member

Only very simple actions should directly be handled by the element (e.g. a timer). But pretty much every element i can think of requires information of other game objects to work correctly, this info should be directly sent to the element and not need to be requested every tick (e.g. chat messages get pushed to the element by network handlers, we don't want to store those for a tick just for the chat element to request them a tick too late)

@esk33
Copy link
Contributor Author

esk33 commented Jun 18, 2024

Okay, I'll rewrite soon™

@esk33
Copy link
Contributor Author

esk33 commented Jul 8, 2024

Hi, if anyone reading this is willing to help with this PR, that would be great. I'm still really busy with schoolwork and still don't have much time to work on this, otherwise it will just have to wait another few weeks for me to find sufficient time for it.

@GDuath
Copy link
Contributor

GDuath commented Jul 8, 2024

I can try, but I guess I'll need a day or two to really get into the depths of this.

@GDuath
Copy link
Contributor

GDuath commented Jul 10, 2024

Okay, I've carefully reviewed the code, but I do have some remarks before continuing with this, so hopefully @theotherhades can shed some light on the matter:

  • The HUD elements and their class methods are centered around absolute positioning, however, I hardly see any application for that. Almost all UI elements that I can think of will be within layout containers that will do the responsive adjustment of size and position for them. There might be a very small number of HUD elements that could potentially be absolutely positioned (like tooltips or radial menus), but the necessary positioning can be done in the current UI module code as well.
  • UI modules can't be instantiated like HUD elements, but I've failed to come up with an example for an element that would need to have more than one instance on the screen. Am I missing an idea there?

All in all I'm wondering right now if the scope of HUD elements is maybe a bit too narrow to warrant the time of full-scale implementation, but I'm ready to be convinced otherwise 😄

@esk33
Copy link
Contributor Author

esk33 commented Jul 11, 2024

  1. I didn't really have layout containers in mind when writing that. The HudElement class was supposed to be a lower level class and thus the fine grained control of a coordinate-based placement system was all that was necessary.
  2. UI modules are kind of confusingly named- they behave moreso as "pages" than "modules." HudElements were intended to serve as individual components of a UI (in this specific case, the HUD). Things like the leaderboard, chat panel, attack bar, etc. They were instantiated at first but that idea has been scrapped for reasons that have already been discussed. This PR probably needs to be part of a more general "UI System" PR in which the scope of "UI modules" (which should be renamed to "pages" or something along that line), "HUD Elements," and anything else relevant that I haven't covered is defined.

@platz1de
Copy link
Member

Superseded by ae17c5b

@platz1de platz1de closed this Sep 13, 2024
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

3 participants