Hi. I’m new!
I just started using GDevelop, I’m discovering there are many things the manual or YouTube videos don’t cover.
Some things that should be simple, like this one:
I added a button object to the project. The image is a sprite from the free “fantasy ui pack” on gdevelop store. In the pictures there are rectangular buttons, and it also says “panel can be resized”, but the sprite is square and i can’t find a way to make it longer without stretching it.
I went to Discord, asked the AI, it told me I need to edit the sprite on Photoshop/Gimp.
I’m kinda refusing to accept that… what if I need the button to resize according to a text? What if I change the text later? And what if I am on mobile, as I am now?
And why should the creator of the sprites say that they are resizable, if they aren’t? Am I missing something?
Have you tried using the button image in a 9-panel sprite? Set the margins so it they contain the pattern, and then when you stretch if, the borders will remain the same while the insides change.
This is an example of a panel sprite button. The pink buttons I made as a Panel Sprite Button object (you can also use Panel Sprite object if you only have 1 animation, but this panel sprite has an animation for idle, hover, and pressed, and the Panel Sprite Button object already has logic for clicking built in which is nice). This lets me tell GDevelop how to display the button when I resize it because I can add the default size and the left, right, top, and bottom margins in the Panel Sprite/Button settings.
If you import a panel sprite from the GDevelop asset store as a Panel Sprite/Button object, I believe you will not need to fill in the information about margins and default size, as I had looked into submitting some free panel sprites and the main reason I didn’t is because I didn’t have time to slice them all, which is a requirement. So pretty sure you just import it into a Panel Sprite object and it will be good to go.
Panel sprites can look broken when sized to smaller than their default size, as shown by the broken looking pink thing.
The orange example is also a panel sprite, but I made it as a regular sprite object. You can see as a regular sprite it can be sized smaller than its default size as a panel sprite without breaking, but looks awful when you try to stretch it. Compare it to the resized pink panel sprite.
You don’t need to edit a sprite to use it as a panel sprite. Maybe the AI meant slice it. But personally I use Inkscape, super quick to measure your margins/size if you have an image with no instruction, and then you can just use the measurements to plug the info into the Panel Sprite/Button object without dissecting the image. You can also slice in Inkscape though for accuracy and speed some might prefer to export the required parts of the panel image as separate selections into whatever raster format is needed.
Ok I think that was all my points. Thank you very much.
Oh thanks guys! It was the Panel Sprite function.
I went to the Button object because I hoped I could get away without tweaking every single behavior or action when I just needed a menu button, but I guess it’s required.
Now i’ll figure out how to make it possibly as simple as managing the Button object, with text and everything.
Can you confirm that using the Panel Sprite I have to do everything manually? (text, hover/click behavior, possible texture/color filling the button to merge with its borders)
Use the “Button states and effects” extension. It will cover a lot of the functionality of a button, you just need to worry about the appearance - primarily text and image:
When you download an image from the Fantasy UI as a new object from the asset store, it will create it as a Panel Sprite object. And you can add the button state behavior to it as MrMen suggested. But since a Panel Sprite object only has one image, you will need to make different panel sprites to stack on top of each other in the scene if you want idle, hovered and pressed animations. Or you can get 3 panel sprite images from the Fantasy UI pack you think will look good together. Then combine them into a Button(Panel Sprite) object.
Here after creating 3 regular panel sprite objects with the images I wanted, I +Add new object, Button(Panel Sprite), top tab From scratch. When the page opens up showing a selection of panel sprite buttons, click the bottom right: Skip and make from scratch. It will make an empty Panel Sprite Button object. Ignore the stuff on top for now, it’s for the label/text. In the Idle image, Choose file and open the folder of your GDevelop project to find the image that was downloaded from the asset store as a regular panel sprite. Do the same for Hovered and Pressed.
Open the regular panel sprite and check the settings. You will see all the margins are 24 and the default size is 96/96. Go back to your panel sprite button and fill in that information in all 3 images. You can delete the regular panel sprites from your scene now. The result is like any panel sprite button (though the text is not the button label on the example)
This is what I’m using in the post above yours and I recommend it. I gather it was not being used because when the op downloaded the panels he wanted from the asset store as a new item from scratch, they were being created as regular Panel Sprite objects.
You’re right, the Button object is actually a panel sprite Not easy to overlook ahah. But when I tried it first, I still didn’t know how to actually use a panel sprite, the sprites were all stretching, that’s why I abandoned that option.
What I was basically missing was that the “margin” parameters acted as parameters for isolating the parts of the sprite that would not be stretched.
I thought that they only affected the text inside the button.
Didn’t find that info so thank you for pointing it out.
Thank you also for making me aware of that very visibile “panel sprite” after the Button object, I would have probably noticed that far too late.
I managed to create buttons the way I want, and I’m also experimenting with sprites customization.
Not easy to overlook ahah. But when I tried it first, I still didn’t know how to actually use a panel sprite, the sprites were all stretching, that’s why I abandoned that option.