Collisions in my game.

[PunchyBreloom]

I used goature's tutorial on how to make a platformer in love2d. https://www.youtube.com/watch?v=Mz6E9A8Xm84 Linked here.
In this tutorial he makes the player a black square (32x32 px), and set the collisions to work with a map made in Tiled. I changed this once I had finished to work with an image, attached. When I did this, my collisions were COMPLETELY messed up. The collisions for the boxes moved down so jumping under the block would not work as well as right so you could stand on air. This even occurred when I set the player's dimensions to 32x32 px. Why does this happen and how can I fix it? I have attached the main.lua, and the man.jpg file. I have not been able to attach the map file.

I would really appreciate the help as I am not very experienced with love2d.

[Imaculata]

Well, I haven't looked at the code yet, but it seems to me that your image isn't 32px32px pixels for starters. It's 416px × 768px. Which means you are forced to scale down the sprite or increase the size of the collision, in code. But even then, the new image is not an image with even measurements. So the collision will probably not align correctly with the sprite.

Now all of that need not be a problem, but you will need to add an offset to get the collision to align correctly with the sprite. You might want to start by simply rendering the outline of both your collision and your sprite by drawing a rectangle at their locations. This will tell you if you've got them lined up correctly.

[PunchyBreloom]

Firstly, I scaled the sprite down a lot for the game, until the height was about 145 and the width about 45. I just put the player size at 32*32 just to see if that would fix it.
How do I do render the outline of my collisions and the sprite, and then how can I offset it?

[Imaculata]

You can use love.graphics.rectangleto draw a rectangle on the screen. Just feed the coordinates of your sprite, and of your collision, into the x/y locations of the rectangle. I usually give the two rectangles different colors for clarity. This makes it easy to see where the game thinks your sprite should be, and where it thinks your collision should be.

Usually a sprite is drawn starting from it's top left corner to its bottom right corner. So if you are using the location of the hitbox for the location to draw the sprite, then the sprite's top left corner will be at the same location as the top left corner of the hitbox. And if the two are not of the same size, then you get the issue you see below.


(If the sprite and hitbox are drawn to the screen, it becomes immediately clear why the collision seems off)

Take for example this Link sprite from Zelda 2.When picking a sprite like this off a spritesheet, you often leave a bit of extra room for various animations (such as Link extending his sword). But that's a lot of empty space around the character. The yellow line indicates the size of the sprite here.

The actual collision box of link (shown in red) is a lot smaller than the yellow sprite box. So if you literally use the x/y coordinates of the hitbox to draw Link's sprite, you end up with something like in the picture on the left. And that is all wrong. What you want, is for it to look like in the picture on the right. And one way to do that, is by adding the width of the sprite, divided by two, to the x location of the sprite when drawing it.

Of course this is all highly dependent on the size of your respective hitbox and sprite. That is why you want to draw those shapes, so you can see what is going wrong. Don't turn it around though. Don't add an offset to the location of the hitbox. The hitbox is the actual location of the player, and the sprite could be drawn anywhere without really affecting the game.

[PunchyBreloom]

Awesome! I did this and then discovered exactly why it was so bugged, the rectangles were way off. I need to render the sprite properly and will do this now. Thanks a ton!

Edit: I rendered the sprite like this now: love.graphics.draw(player.img, player.x - player.w/2, player.y - player.h/2, player.w, player.h)
and it works fine, only now he's invisible. I gotta fix that now.

Edit 2: I fixed the problem, thanks for your help

[Imaculata]

You're welcome. It's an issue I've run into myself multiple times.

[rigelloo]

You can do for example
if [other thing such as enemy]X < characterX + 10 and [other thing such as enemy]X > characterX - 10 and [other thing such as enemy]Y < characterY + 10 and [other thing such as enemy]Y > characterY - 10 then

thats how I did it.