GuiComponent and ImageComponents not interacting with "onClicked" mouse events

[nightm4re94]

^{This post has been migrated automatically from the old LITIENGINE forum (2018 - 2022).
Posted: 2019-03-22 17:41:53
User: CalvinMT [] (age: 1451 days 🔥; posts: 114)}
Hi!
I'm running into a problem where some text "ImageComponents" won't react with the mouse event "onClicked()". They don't even activate when the mouse hovers on top of them.
I'm trying to do some kind of pause menu that floats on top of the game screen.
Basically, the InGameScreen class creates a new instance of PauseMenu which extends GuiComponent and is then added to the InGameScreen components.
The PauseMenu class creates new ImageComponent instances which are all added to its own components. Most of those newly created ImageComponents have "onClicked()" events.
Everythings in place. When I press Escape, the menu pops-up, but nothings interacting with the mouse.
Here's parts of the code:
InGameScreen:
public class InGameScreen extends Screen { private PauseMenu pauseMenu; /*[...]*/ @Override public void render (final Graphics2D graphics2D) { /*[...]*/ if (gameState == GameState.RUNNING) { Game.window().getRenderComponent().setCursor(imageCursorInvisible, 0, 0); this.pauseMenu.setVisible(false); } else if (gameState == GameState.PAUSE) { Game.window().getRenderComponent().setCursor(imageCursorVisible, 0, 0); this.pauseMenu.setVisible(true); } } @Override protected void initializeComponents () { /*[...]*/ this.pauseMenu = PauseMenu.getInstance(0.0, 0.0, this.screenWidth, this.screenHeight); this.pauseMenu.setVisible(false); /*[...]*/ this.getComponents().add(this.pauseMenu); } }
PauseMenu:
public class PauseMenu extends GuiComponent { private static PauseMenu instance; private ImageComponent containerComponent; private ImageComponent worldInfoComponent; private ImageComponent levelInfoComponent; private ImageComponent resume; private ImageComponent guide; private ImageComponent settings; private ImageComponent menu; /*[...]*/ private PauseMenu(double x, double y, double width, double height) { super(x, y, width, height); } public static PauseMenu getInstance (double x, double y, double width, double height) { if (instance == null) { instance = new PauseMenu(x, y, width, height); } return instance; } @Override protected void initializeComponents () { /*[...]*/ this.containerComponent = new ImageComponent(this.containerX, this.containerY, this.containerWidth, this.containerHeight, this.containerImage, this.containerWidth, this.containerHeight)); this.worldInfoComponent = new ImageComponent(this.worldInfoX, this.worldInfoY, this.worldInfoWidth, this.worldInfoHeight, null, null, null); this.levelInfoComponent = new ImageComponent(this.levelInfoX, this.levelInfoY, this.levelInfoWidth, this.levelInfoHeight, null, null, null); this.resume = new ImageComponent(this.containerComponent.getX(), this.containerComponent.getY()+(this.containerComponent.getHeight()/2.0), this.containerComponent.getWidth(), this.textHeight, null, "Resume", null); this.guide = new ImageComponent(this.containerComponent.getX(), this.resume.getY()+this.textHeight, this.containerComponent.getWidth(), this.textHeight, null, "Guide", null); this.settings = new ImageComponent(this.containerComponent.getX(), this.guide.getY()+this.textHeight, this.containerComponent.getWidth(), this.textHeight, null, "Settings", null); this.menu = new ImageComponent(this.containerComponent.getX(), this.settings.getY()+this.textHeight, this.containerComponent.getWidth(), this.textHeight, null, "Back To Menu", null); this.initEvents(); this.getComponents().add(this.containerComponent); this.getComponents().add(this.levelInfoComponent); this.getComponents().add(this.worldInfoComponent); this.getComponents().add(this.resume); this.getComponents().add(this.guide); this.getComponents().add(this.settings); this.getComponents().add(this.menu); } private void initEvents () { this.resume.onClicked(e -> { gameState = GameState.RUNNING; }); this.guide.onClicked(e -> { gameState = GameState.GUIDE; }); this.settings.onClicked(e -> { gameState = GameState.SETTINGS; }); this.menu.onClicked(e -> { gameState = GameState.MENU; }); } }
I tried putting "this.pauseMenu.onClicked()" somewhere in the InGameScreen class, but still no response.
What I'd like to know is if what I wrote is correct and/or if I'm missing something?

[nightm4re94]

^{This post has been migrated automatically from the old LITIENGINE forum (2018 - 2022).
Posted: 2019-03-24 10:34:56
User: nightm4re [Admin 👑, Mod 🔧] (age: 1567 days 🔥; posts: 185)}
As far as I can see, you could save the effort of coding your own Menu implementation and rely on the existing ~~~~Menu class instead. Try that and let us know if anything doesn't work.

[nightm4re94]

^{This post has been migrated automatically from the old LITIENGINE forum (2018 - 2022).
Posted: 2019-03-24 23:08:04
User: CalvinMT [] (age: 1451 days 🔥; posts: 114)}
nightm4re
I didn't know that existed.
I created a Menu instead of PauseMenu in the InGameScreen class shown above.
The menu appeared and was interactable, but wasn't to my taste. So I tried replacing the ImageComponents I had in the PauseMenu class with a Menu, but it didn't appear. I didn't forget to add it to the class' components by the way.
I would gladly use the Menu constructor, but it doesn't give me as much of liberty that I want than extending from GuiComponent or ImageComponent.
Anyways, only using the Menu constructor and forgetting about this PauseMenu class isn't a solution to me.
What if I wanted to interact with other components which were created through the same way (new class with Gui/ImageComponent extension) and aren't menus, as I did for the HUD. That would bring me back to square one again.
I could delete the PauseMenu class and put everything inside InGameScreen. But that, in my opinion, would overcharge the class and wouldn't be tidy.
I could also create a new screen instead. I'm thinking about it, but I don't think it would suit all of y needs (floating menu above the game with a transparent dark-ish background).
What do you think?

[nightm4re94]

^{This post has been migrated automatically from the old LITIENGINE forum (2018 - 2022).
Posted: 2019-03-25 18:07:43
User: CalvinMT [] (age: 1451 days 🔥; posts: 114)}
Done!
All I had to do was to add "super.prepare();" and "super.initializeComponents();" at the beginning of their respective methods in the PauseMenu class.

[nightm4re94]

^{This post has been migrated automatically from the old LITIENGINE forum (2018 - 2022).
Posted: 2019-03-26 21:24:10
User: nightm4re [Admin 👑, Mod 🔧] (age: 1567 days 🔥; posts: 185)}
CalvinMT classic ;)
Still, a few words on the ~~~~Menu class:
My idea was not to call the Menu constructor explicitly (which is, of course, a feasible way of creating menus). Instead, create a component that extends ~~~~Menu, so that you won't have to implement the selection behaviour yourself.
~~~~Menu is a child of ~~~~ImageComponentList, which means you can always override the ~~~~createNewEntry()-method to specify any behaviour you want your individual components to share. Furthermore, you can adjust the ~~~~Menus looks with ~~GuiComponent.getAppearance(). Have a look at this example from **Dr. LEPUS**:
~~```java~~public class LepusMenu extends Menu implements IUpdateable { private static final float HIDE_SPEED = 1000f / Game.loop().getUpdateRate(); private static final Sound[] SETTING_HOVER_SOUNDS = new Sound[] { Resources.sounds().get("menu-hover-1.ogg"), Resources.sounds().get("menu-hover-2.ogg"), Resources.sounds().get("menu-hover-3.ogg"), }; public static final int MENU_DELAY = 180; private final List<Consumer<Integer>> confirmConsumer; private int currentFocus = -1; private int previousFocus = 0; private double originalY; private boolean hiding; public static long lastMenuInput; public LepusMenu(double x, double y, double width, double height, String... items) { super(x, y, width, height, items); this.originalY = y; this.confirmConsumer = new CopyOnWriteArrayList<>(); InputAdapter.onConfirm(t -> { if (this.menuInputIsLocked()) { return; } this.confirm(); }); InputAdapter.onUp(t -> { if (this.menuInputIsLocked()) { return; } decFocus(); }); InputAdapter.onDown(t -> { if (this.menuInputIsLocked()) { return; } incFocus(); }); Game.inputLoop().attach(this); } public double getOriginalY() { return this.originalY; } @Override public void prepare() { super.prepare(); if (!this.getCellComponents().isEmpty()) { this.currentFocus = 0; this.getCellComponents().get(0).setHovered(true); } } @Override public void update() { if (this.hiding) { if (this.getY() < Game.window().getResolution().getHeight()) { this.setY(this.getY() + HIDE_SPEED); } else { this.setY(Game.window().getResolution().getHeight()); } } else { if (this.getY() > this.originalY) { this.setY(this.getY() - HIDE_SPEED); } else { this.setY(this.originalY); } } } public void restore() { this.setY(this.getOriginalY()); this.showMenu(); } public void hideMenu() { this.hiding = true; } public void showMenu() { this.hiding = false; } public void onConfirm(Consumer<Integer> cons) { this.confirmConsumer.add(cons); } private void confirm() { lastMenuInput = Game.inputLoop().getTicks(); for (Consumer<Integer> cons : this.confirmConsumer) { cons.accept(this.currentFocus); } } private boolean menuInputIsLocked() { // disable menu if the game has started if (this.isSuspended() || !this.isVisible()) { return true; } return Game.inputLoop().getDeltaTime(lastMenuInput) < MENU_DELAY; } private void decFocus() { this.currentFocus = Math.floorMod(--this.currentFocus, this.getCellComponents().size()); this.updateFocus(); } private void incFocus() { this.currentFocus = ++this.currentFocus % this.getCellComponents().size(); this.updateFocus(); } protected void updateFocus() { for (int i = 0; i < this.getCellComponents().size(); i++) { this.getCellComponents().get(i).setHovered(i == this.currentFocus); } if (this.currentFocus != this.previousFocus) { this.previousFocus = this.currentFocus; } lastMenuInput = Game.inputLoop().getTicks(); if (this.isVisible()) { Game.audio().playSound(ArrayUtilities.getRandom(SETTING_HOVER_SOUNDS)); } } @Override protected ImageComponent createNewEntry(final double x, final double y, final double width, final double height, final Spritesheet spritesheet, final String text, final Image image) { ImageComponent imageComp = new ImageComponent(x, y, width, height, spritesheet, text, image); imageComp.setFontSize(38f); imageComp.onHovered(e -> { this.currentFocus = this.getCellComponents().indexOf(imageComp); this.updateFocus(); }); imageComp.onMouseLeave(e -> { imageComp.setFontSize(38f); imageComp.setTextX(0); }); imageComp.onMouseEnter(e -> { imageComp.setFontSize(44f); imageComp.setTextX(0); }); imageComp.onClicked(e -> { if (!imageComp.isHovered()) { return; } if (this.menuInputIsLocked()) { return; } this.confirm(); }); return imageComp; } }```` There may be some confusing things going on here (most notably, the fact that the Menu can be controlled using controllers or other input devices thanks to the ~~InputAdapterthat we've written for the game.). Furthermore, the menu changes its position once an option is confirmed, as you can see in the gif below: ![Dr. Lepus Menu](https://media.giphy.com/media/WS5AiUulWOP01B7kzP/giphy.gif)~~![~~Dr. Lepus Menu](https://media.giphy.com/media/WS5AiUulWOP01B7kzP/giphy.gif) Add the Menu to your Screen or your HUD like this:java~~ LepusMenu pauseMenu = new LepusMenu(x, y, width, height, "Load","Save","Settings","Exit Game"); pauseMenu.onConfirm(this::pauseMenuConfirm);```` And then define some method that processes the confirmed selection of the Menu: `~~java private void pauseMenuConfirm(int menuButtonIndex) {
Game.audio().playSound(MenuScreen.CLICK_SOUND);
switch (menuButtonIndex) {
case 0:
System.out.println("Now I'm loading the game.");
break;
case 1:
System.out.println("Now I'm saving it");
break;
case 2:
System.out.println("Look at me, changing settings and stuff");
break;
case 3:
System.exit(0);
break;
default:
break;
}
}````
Just have a thorough look at this and let me know if it helps you understand what the ~~~~Menu implementation can achieve, or if you still consider it useless.
Edit: I'm sorry, I assume no liability for your broken mouse wheel.