Empty square sprite

Hi,

I want to have an empty square sprite in gdevelop.
Is this possible?
Box1

Inside the square is empty.
Is this a bug in gdevelop as I have heard?

regards,

Saeed

We do not have enough information to help you completely. Do you want to make a square that only the edges are visible but not the center? The only thing you should do is draw the edges and erase the center.
Are you using Piskel? If so, you have the tools to erase what you want from the image and it will look empty wherever you erase.
From what I understand, you want your square to be visible on the edges and not in the center. In the case that you have made a square that really has the center erased, is it possible that that square is really empty and the white color that is seen in the center is due to the background color?

I think they want a cube that shows only the background, or in other words, hiding portions of certain objects. Which I’m unsure if the engine supports.

Yes, that’s right. I have used Photoshop and saved the image as PNG.
If I should use Piskel, can you please inform me?

How should I erase the center?

Thanks,

1 Like

In Piskel the background is transparent by default. Just fill the pixels you want. To make a square as your post you can fill the entire canvas using the bucket than select a rectangle using rectangle selection tool and delete, or you can use the stroke tool and draw only the borders.

There are some things you should know. If you are going to make simple images that can be made with pixel art, it is better to use a tool like Piskel or others out there for this purpose. The ease of Piskel is that it is already incorporated to be used within GDevelop, making import tasks easier. If your images are more complex and/or should have a more vectorized style, use other programs (such as Photoshop). In these cases, it depends on the program you use how you are going to erase the areas you want to erase. In Piskel you have the eraser tool within the panel. Everything you erase will look like empty space.
Keep in mind that if you have an image like from Photoshop, you import it to GDevelop, you open it with Piskel and then save the changes, the original image will adapt to the Piskel tools, which effects and many other things done with the original program used may be lost. If you are going to use another program, do not open those images and save changes with Piskel, unless the changes do not affect the result you want to achieve.

I’m not familiar with Piskel. I can import a square in PNG format from Photoshop and also can select a rectangle inside it but can delete the selected area. When I press the delete button on the keyboard nothing happens. How should I do that?
Can I do the job entirely in Photoshop?

Really helpful point.
I make an empty stroke(as you can see) in Photoshop. But when I import it
Gdevelop can’t recognize the empty part.
But I forgot to tell you that I want to place a gem inside it.

You said it was saved as a PNG. Was the background disabled or set to transparent. Usually, an editor will show the image with a checkered background when it’s set to transparent.
images

It sounds like it was checked as transparent.
I saved it as transparent in Photoshop, thus I saved it in PNG.

But the problem is that Gdevelop can recognize the square is empty!!

–Is this a bug in Gdevelop?? as an AI model told me??

I don’t understand what 's your problem. It seems to me that your square is already empty.

Is the issue with appearance or collision or the hit box?

See: Gdevelop shows it’s empty, but can’t recognize the gem inside it.
Did I transfer what I mean?
Should I place them in two different layers?

What you are saying is very confusing haha. This has nothing to do with layers. The image you show looks like what you want to achieve, so it doesn’t help much. What I thought you were referring to is that the square has a white color inside and when you put the gem on top, if the gem has a Z order less than the square, the gem is covered by the white in the center of the square. In Photoshop you can erase any part of an image and when you export it as PNG, what you erase will look empty. There are many tutorials on how to do it on the internet.
In any case, it is not clear what you are saying about Gdevelop not recognizing that it is empty.
Seeing now the more complete image, with more reason, I believe that the white that appears in the background of the square is surely due to the background color of the editor… it is not because the square in the center really has this color. I don’t think you’ve made a square that has the exact color of the editor’s background in the center, so I’m almost sure that the center of that square is empty in terms of image.
If what you are looking for is for the gem to behave like an object that is enclosed in a square and collides with it, this already has to do with events and properties of the objects, it has nothing to do with whether the image is empty or not . The collisions are not defined by the images, they are done automatically (the square will have a collision mesh that occupies the entire square, including its interior) and can be modified manually. For this, from the square editing panel, you must go to “edit collision mask”.

If it is nothing of what I have mentioned, please be more precise in what you want and what the problem is, whether it is the image or the behaviors of the square.

If you want to put your gem behind the box, you need to change its z order. Click on your box and check its z value and change the gem z order to a minor value. Or depending on how your game is you can create another layer for the gem or box.

[quote=“Points, post:14, topic:50801”]
If what you are looking for is for the gem to behave like an object that is enclosed in a square and collides with it, this already has to do with events and properties of the objects, it has nothing to do with whether the image is empty or not . The collisions are not defined by the images, they are done automatically (the square will have a collision mesh that occupies the entire square, including its interior) and can be modified manually. For this, from the square editing panel,

Yes, exactly this is!
How do I edit the collision mask? I have tried and tested, but couldn’t. And there is nothing helpful on the web or any help from AI models.

Click here:
image

And create masks like these:

I really don’t understand what you mean by AI models.
As Zutty says, you can do it that way. Keep in mind that before you can edit it, you must press “Use a custom collision mask”.


Then you must add 4 collision masks (one for each side of the square) and you must adjust the position, height and width values ​​of each collision mask.

By the term AI models I mean Artificial intelligence software.
Like chatGPT or Google Brad.
It seems to be correct. Thank you very much for guiding me.

1 Like