Trouble adding an image after the game has started

[nightm4re94]

^{This post has been migrated automatically from the old LITIENGINE forum (2018 - 2022).
Posted: 2019-02-23 13:25:46
User: CalvinMT [] (age: 1451 days 🔥; posts: 114)}
Hi!
I'm trying to add an image - which I'll want to remove after a certain action - within the game screen and I tried to add it as a component. The problem is, the image does not appear as I'm trying to add it after the "initializeComponents()" procedure.
Is there a way to make this image component appear after initialization?
Or should I use a different type than component? (I don't want to use the creeature type as it doesn't sound appropriate)
By the way, the image is only an arrow pointing left or right. Basically, it's non-interactive information appearing and disappearing onto/from the screen.

[nightm4re94]

^{This post has been migrated automatically from the old LITIENGINE forum (2018 - 2022).
Posted: 2019-02-24 08:54:35
User: steffen [Admin 👑, Mod 🔧] (age: 1568 days 🔥; posts: 100)}
If I understand your request correctly, I'd say there are two "correct" ways to do this in the engine:
~~**~~Approach 1:**
Add ~~~~ImageComponents for the images you want to display throughout your game in the ~~~~initializeComponent() method overwrite of your ~~~~Screen. Remember to call ~~~~ this.getComponents().add({MY-IMAGE-COMP}); after initializing the component.
You can then set the visible state of these components throughout the game (e.g. in an ~~update implementation).
**~~Example:**
~~```java~~@Override public void update() { if({SOME_CONDITION}) { this.arrowLeftComponent.setVisible(true); this.arrowRightComponent.setVisible(false); } ... }```` **~~\*\*~~Approach 2:\*\*** Overwrite the ~~render(Graphics2D g) method of your screen and just render the appropriate image if it doesn't have any further interactivity, this might be a simpler approach than using an ~~ImageComponent. *~~\*~~Example:\** ```java@OverRide
public void render(final Graphics2D g) {
// if your screen extends the GameScreen class, this call will render the Environment
super.render(g);
// render UI elements after the environment
int x = Game.window().getCenter().getX();
int y = Game.window().getCenter().getY();
if(this.displayArrowLeft){
ImageRenderer.render(g, {ARROW_LEFT_IMAGE}, x, y);
}else if(this.displayArrowRight){
ImageRenderer.render(g, {ARROW_RIGHT_IMAGE}, x, y);
}
}````
A general note about this: Typically, one or two images won't be enough to render a complete user interface for your game. In the games we created, we always ended up with some kind of "Hud" class that extended ~~~~GuiComponent and was added as a component to the ~~`~~Screen`. This way, we encapsulated all UI related stuff into one place which kept the ~~`~~Screen` implementation relatively clean. An example UI result could look something like this:
[upl-image-preview url=https://forum.litiengine.com/assets/files/2019-02-24/1550998239-398560-hud.png]

[nightm4re94]

^{This post has been migrated automatically from the old LITIENGINE forum (2018 - 2022).
Posted: 2019-02-24 09:02:57
User: CalvinMT [] (age: 1451 days 🔥; posts: 114)}
You did understand correctly and gave me all I wanted.
Thanks again!

[nightm4re94]

^{This post has been migrated automatically from the old LITIENGINE forum (2018 - 2022).
Posted: 2019-02-24 11:19:16
User: CalvinMT [] (age: 1451 days 🔥; posts: 114)}
steffen
I've got a question though...
I haven't tried it yet but, for the example image you showed with the HUD, did you need to load each image before initializing the components or could you do it on the go (after initialization)?
I'm actually asking this question for the text showing how much items the player has. If you change the text during the game (after initialization), can you still see it on screen?

[nightm4re94]

^{This post has been migrated automatically from the old LITIENGINE forum (2018 - 2022).
Posted: 2019-02-24 18:29:45
User: nightm4re [Admin 👑, Mod 🔧] (age: 1567 days 🔥; posts: 185)}
In the case of DR. LEPUS's hud, we just initialize a bunch of static images on startup and then display them in the hud's ~~~~render()-method. If you plan to have images that don't change much during runtime (e.g. by scaling them), I would advise you to also make them static and load them altogether on startup.
If you use ~~~~ImageComponents, you can always call ~~~~ImageComponent.setImage(final Image image) after they've been initialized to set their images. The same goes for ~~~~GuiComponent.setText(final String text) - you can change that during runtime as well.

[nightm4re94]

^{This post has been migrated automatically from the old LITIENGINE forum (2018 - 2022).
Posted: 2019-02-27 14:22:16
User: CalvinMT [] (age: 1451 days 🔥; posts: 114)}
Thank you very much!
I'm just concerned by the fact that "prepare()" runs after "initializeComponents()".
I find this counterintuitive. Is there a reason why it has been done that way?

[nightm4re94]

^{This post has been migrated automatically from the old LITIENGINE forum (2018 - 2022).
Posted: 2019-03-01 21:52:09
User: nightm4re [Admin 👑, Mod 🔧] (age: 1567 days 🔥; posts: 185)}
CalvinMT Our intuition is that ~~~~prepare() is the opposite of ~~~~suspend() and can be called arbitrarily often. It is used to make components visible and register them for events.
~~initializeComponents(), on the other hand, does exactly what its name denotes: It *_~~initializes_* the components for the first time, calling their constructors.

[nightm4re94]

^{This post has been migrated automatically from the old LITIENGINE forum (2018 - 2022).
Posted: 2019-03-04 14:11:17
User: CalvinMT [] (age: 1451 days 🔥; posts: 114)}
nightm4re
I now understand the logic behind prepare().
Thank you.