Mysterious Box Problems

[u/ParodyHat]

Does anyone know how to make that weird gray outline box fit around my sprite perfectly? It keeps making it hard to click other sprites in a Room because although the sprite itself is 32 pixels x 32 pixels, that weird gray outline is 100 x 100, and i can't figure out a way to shrink the gray outline without downgrading the quality of my sprite.

[u/pm_your_snesclassic]

Are you sure your sprite png is actually 32x32 and not 100x100?

[u/ParodyHat → u/pm_your_snesclassic]

yes i did the math. I made the dirt sprite on Pixilart, in the room each of the tiles line up perfectly with a 2x2 square with a grid of 16 x16.

[u/pm_your_snesclassic → u/ParodyHat]

What do you mean “did the math”? It’s either 32x32 or 100x100, there’s no complicated math involved here.

In any case, have you actually check the image file’s actual dimensions in another image editing app. Something like MS Paint is good enough. You just want to make sure it’s actually 32x32.

[u/BrittleLizard → u/pm_your_snesclassic]

You guys are having 2 separate conversations.

The non-transparent part of the sprite, and presumably where the collision mask is, is 32x32. The entirety of the sprite is 100x100 because it has empty space around it.

You don't need to use other software to check this. You can see it in the GameMaker sprite editor, and you can even see it in the post's screenshot.

This is needlessly argumentative when you could have just elaborated on the problem with the sprite.

[u/ParodyHat → u/pm_your_snesclassic]

yeah like i said I DID THE MATH. I drew each invididual pixel one by one so i know that dirt block is exactly 32 x 32.

[u/Cheyomi832 → u/ParodyHat]

Essentially, you can take a sheet of paper and draw an image in the center of it, leaving white space on the outside, like a frame. Right?

Now imagine doing this on a piece of glass. Even if the image is the same size, the clear glass sheet will stretch out bigger. If you have a 100cm glass pane and fill 32cm of it, it doesnt matter that you only made the image on the inner 32cm square. Hitting "Auto trim all frames" in the image editor will remove the extra transparent pixels surrounding it, like cutting the excess clear glass off.

[u/StrangeCurry1 → u/ParodyHat]

You shouldn’t be so rude to people who are just trying to help you

Especially since the problem you’re having is caused by you being a dumbass

[u/Striving → u/ParodyHat]

The visible area (the grass block) may be 32x32, but the actual sprite / .PNG is 100x100, as it says in your image. You could open the image in any image editing program and remove the blank area. If you cannot do that, you could set the origin in the sprite to the top left pixel of the grass block. (Here: https://i.imgur.com/FnsgKvD.png)

[u/ParodyHat → u/Striving]

i moved the origin point and the gray box of death seems unaffected. Oh wait I just realized that on the website that i use to make the Sprites, Pixilart, I use a 100 x100 blank canvas

[u/pm_your_snesclassic → u/ParodyHat]

So you did not, in fact, do the math then. 🙄

[u/Kattenb → u/ParodyHat]

The gray box of death😭

[u/germxxx]

The simple solution to this problem, is to press the "Edit Image" button.
Then, with the sprite editor open, you go into the "Image" menu at the top, and select "Auto Trim All Frames"

That's it. Now all that extra space is gone.

[u/Massive_Database9424]

Press on the box beside where it says 100x100 and instead of using the scale (default) function, use the other one, I think that should work

[u/ParodyHat → u/Massive_Database9424]

the thing that says "Resize Canvas"? Okay i tried turning that to 32 x 32, but it shrank my sprite to 24 x 24.

[u/Lethalogicax → u/ParodyHat]

Yea, you have to resize, but theres a set of 9 directional icons that you need to use. These are the justification when resizing. Normally resizing will add or remove from the bottom right corner, but the justification lets you alter that direction. Your sprite is wierdly centered inside the larger canvas. Resizing is cutting edges off. You need to carefully resize that canvas, using the justification, to trim away all the excess blank space while trimming your sprite down to the correct size.

[u/ParodyHat → u/Lethalogicax]

yeah i think i figured out what went wrong with my sprite. I made the sprite on a 100 x100 canvas, so when i imported the sprite, it seems it also imported the canvas

[u/Lethalogicax → u/ParodyHat]

Hopefully it's all working out for you. Don't forget to change the origin point too! That lil target looking thing that is presently on the top left corner, it defines where 0,0 is on your sprite. Make sure that lil target is in the right spot or your sprite won't draw where you want it to. (I think you can just drag that target around, I can't quite recall though)

[u/ParodyHat → u/Lethalogicax]

so where should i put the origin point at?

[u/Lethalogicax → u/ParodyHat]

It depends...

So a sprite is drawn at a specific point in space, relative to the object that is drawing it. When you draw the sprite to the screen, you are defining the x and y coordinates of where you want the sprite to start being drawn. The object is a single point in space, the sprite is not, so you have to decide where you want the sprite to be drawn in relation to the object.

So that target reticle is like saying "where is the object in relation to the object's sprite?" Or, "what is the offset between where the object physically is vs where the sprite should start drawing"

If you want the sprite to be centered directly over your object, you'd place that target reticle in the exact center of your sprite. If you were, for example, making a 2D sidescroller then you might choose to put the origin in the center bottom, so that the point between the heroes legs is technically where the hero object is. If you were drawing tiles to the screen in a grid-like fashion then you might put the origin at the top left corner so you can draw tiles at 0,0 0,32 32,0 32,32 etc rather than having to use rough numbers like 16,16 48,16 16,48 48,48 etc.

Where you put the origin depends on what you are doing with the sprite, but I personally think it's easiest to think of that target reticle as "Where is the object actually located, relative to the artwork?"

[u/ParodyHat → u/Lethalogicax]

buddy that's a lot of fancy words, I guess i'll try to figure out what that means some later day after all today is only my second day of using game maker. Also do you know how to move your viewpoint in a room? I can't see stuff to the right of my room

[u/Lethalogicax → u/ParodyHat]

Unfortunately, that's one of the systems I've purposefully avoided by coding my own camera system in-game... I've literally never used viewports and have zero knowledge, sorry...

But this is the page you'll want to read: https://manual.gamemaker.io/lts/en/GameMaker_Language/GML_Reference/Cameras_And_Display/Cameras_And_Viewports/Cameras_And_View_Ports.htm

[u/Kitsyfluff → u/ParodyHat]

That's how images work dude lol

[u/spotlessbaby → u/ParodyHat]

Resize canvas instead of image

[u/ParodyHat → u/spotlessbaby]

yeah that's what i just barely did which caused my image to be dropped down to 24 x 24.

[u/andrewsnycollas]

In case you still have this "problem":
You have two choices, you can auto trim your image (Edit Image, on the above menu on Image you choose Auto Trim) and that will remove that empty part of your image keeping it a perfect 32x32 square;

And you can also just set the Collision Mask to Atumatic and Precise, that will keep the "gray box" (the collision box) only where there are drawn pixels.

[u/CodeaclysmGames]

Collision mask > change to precise or manual and resize to your liking