I have been working with GDevelop for a few weeks now and making a lot of progress with the app I am developing and looking up questions I had so far was rather simple and I always found multiple topics on the questions I had, but now I ran into an issue that I could not figure out so far in a few hours of research and testing.
I would like to add images/icons to text I am printing on the screen within the app. One could see similarities to an RPG game, where the game shows you an Item icon when collecting or finding an item! Like this:
And I am trying to replicate this behaviour since it would help the flow of the app a lot, if specific parts of texts are replaced by icons/sprites instead of describing it with words. First I thought I can do this with the BBCode Object, but that does not support the usual [img]-tag sadly.
Since this behaviour would be needed dynamically and is loaded from storage, creating text with spacing and add a Sprite Object within the space is not really good, since thats a lot of work for 500+ text-cases that would need icons within the text.
Is there any simple or intuitive way to do this? Maybe I just did not see an in-game feature that helps with this, but any help is much appreciated!
Thank you for your time and for reading this.
Have a nice day!
In this case, you need four objects:
[Received] [(right-aligned) ToString(amount) + “x”] [icon sprite object] [item name]
All the icons should be animations of one object, and you could make an array containing all the item names in the same order. So if you load array element 124, you display animation 124 of the icon object, or vice-versa (load icon and load array element of same number).
Does that make sense?
If you want to put icons in any text, the dialogue tree features offer that. Check out the example project.
My example was only to showcase how I would like to have icons within text (or preferred bbcode) elements. The example might not be good, since there the icon is always in the same place, which is not what I am actually looking for.
I am looking for a way to place a sprite (based in id for the animation like you already mentioned) into text and replace any word in any position.
Like “Here is one Apple” is meant to be become “Here is one [Apple-Icons]”.
But this should be doable without having to manually place down the icon in the exact place where the apple is in this text. Since this has doing to be translated into a lot of languages the apple icon would always be in different place, so having an indicator within the text that is replace with an icon dynamically is what I am looking for. (Like “Here is one [1]” and ID:1 is the Apple, since I already store everything ID-based).
I looked at the dialogue tree example and it seems like it also either uses emojis within text, which is just part of normal text and not dynamically loaded or replaces the dialogue box avatar which is also positioned beforehand and always in the same spot. Might have been that I did not see other examples within the project, but it seemed like the icons either have a set position in the scene or are emojis which are not part of the project itself or stored in any object.
I still appreciate your advice and ideas so far tho. Thank you!
You can always position objects dynamically, so it shouldn’t matter what language is being displayed.
For example, if you have a text like “Received 1x (Icon) Sword” You can simply have a text object (lets call it RQuant) that will always be set to ToString("Received " + QuantityVariableHere). That will show up as “Received 1x” if your variable is 1x.
Then, you’d have your object icon as a sprite. (Let’s call it “Icon”)
Then you’d have another text object showing the label. (Let’s call it “Label”)
Then you can set up 3 events:
Position RQuant at ###x, ###y (whatever numbers you want)
Position Icon at (RQuant.X() + RQuant.Width() + 10)x, RQuant.Y()y
Position Label at (Icon.X() + Icon.Width() + 10)x, Icon.Y()y
Those will build out your desired appearance, and could be done in a ForEach as needed, etc.
I don’t know of any other shortcuts, although Yarn does support the img tags, I’m not 100% sure if it’s possible to implement it in GDevelop.
that you for yoru insights in some possibilities to make this work.
I actually think that your idea might work, but only as long as text is displayed in a single row, since as far as I know “Width” does not consider, that your text might end earlier in a second row after a line-break (or text wrap). So positioning an icon after a first set of text, then positioning and placing an icon and then continueing text (with the same max-width, since it has to wrap around again) might still be is issue, but I like the general idea.
The text, however, might be used in different areas of the application.
2 examples of the same (sample) text: - emojis that are meant to be replaced with sprites within the application
“if you connect all within the first 50 seconds, you earn additional 5 as reward.”
“if you connect all within
the first 50 seconds, you earn
additional 5 as reward.”
The first example could be managed by creating an structure and having all parts as elements, processed individually like your example, but then having to display the second example with the same content but different layout might cause a lot of trouble, since “within” starts in the first row right after the sprite and has to wrap around again.
I might have an idea how to process this, though, based on your original idea.
I definitely appreciate your input in this.
- emojis that are meant to be replaced with sprites within the application