Author Topic: Hitboxes (Read 7081 times)

ElementCoder · « **on:** September 24, 2012, 01:50:13 pm »

While working on a project I found myself in need of detecting whether the mouse was clicked inside a certain area or not. I thought it would be pretty simple since I only needed square 'hitboxes'. I wrote some simple code and figured to share it in case it might be useful to others.

Hitbox code:
Code for the hitbox:

Code: [Select]

HitBoxSquare = class()
function HitBoxSquare:init(xIn, yIn, width, height)
     self.x = xIn
     self.y = yIn
     self.width = width
     self.height = height
end

function HitBoxSquare:contains(xMouse, yMouse)
    local sw = self.width
    local sh = self.height
    return (xMouse>=(self.x)) and xMouse<=(self.x+sw) and yMouse>=(self.y) and yMouse<=(self.y+sh)
end

Mandatory code:
To track mousepresses:

Code: [Select]

function on.mouseDown(x, y)
    mouseX = x
    mouseY = y
    --Other code here
end

To track mousemovement:

Code: [Select]

function on.mouseMove(x, y)
    mouseX = x
    mouseY = y
    --Other code here
end

How to use:
Create the hitbox:

Code: [Select]

hitBox = HitBoxSquare(x, y, width, height)Check if the mouse is clicked inside the hitbox:

Code: [Select]

if hitBox:contains(mouseX, mouseY) then
    --Do something here
end

Using multiple hitboxes:
If you want to use more then one hitbox, checking them by hand is a little too much work. Here's where tables come in handy!

Code: [Select]

-----------------------------------------------
-- Checking multiple hitboxes, the fast way. --
-- ElementCoder, 2012                        --
-----------------------------------------------
HitBoxSquare = class()
function HitBoxSquare:init(xIn, yIn, width, height)
     self.x = xIn
     self.y = yIn
     self.width = width
     self.height = height
end

function HitBoxSquare:contains(xMouse, yMouse)
    local sw = self.width
    local sh = self.height
    return (xMouse>=(self.x)) and xMouse<=(self.x+sw) and yMouse>=(self.y) and yMouse<=(self.y+sh)
end

hb1 = HitBoxSquare(10, 10, 10, 10)
hb2 = HitBoxSquare(10, 25, 10, 10)
hb3 = HitBoxSquare(10, 40, 10, 10)
hitbox = {hb1, hb2, hb3}
hitboxname = {"Hitbox 1", "Hitbox 2", "Hitbox 3"}

function on.paint(gc)
    gc:drawRect(10, 10, 10, 10)
    gc:drawRect(10, 25, 10, 10)
    gc:drawRect(10, 40, 10, 10)
end

function on.mouseMove(x, y)
    mouseX, mouseY = x, y
    for i = 1, 3 do
        if hitbox[i]:contains(mouseX, mouseY) then
            print(hitboxname[i].." contains the mouse!")
        end
    end
end

cyanophycean314 · « **Reply #1 on:** September 24, 2012, 05:01:39 pm »

Nice! I used a system similar to this with my Checkers game for mouse controls.

Jonius7 · « **Reply #2 on:** October 11, 2012, 08:57:31 pm »

Oh wow this is great! I could see this coming into use for some ideas that I have that involve a mouse pointer.
So theoretically you could have several hitboxes that you could move around quickly and make the mouse click, all doing different actions right?

ElementCoder · « **Reply #3 on:** October 13, 2012, 02:03:20 pm »

Yep, you would define every hitbox by doing so:

Code: [Select]

hitBox1 = HitBoxSquare(x, y, widht, height)
hitBox2 = HitBoxSquare(x, y, widht, height)
hitBox3 = HitBoxSquare(x, y, widht, height)

And then you would check for mouse presence by doing this:

Code: [Select]

hitBox1:contains(mouseX, mouseY)
hitBox2:contains(mouseX, mouseY)
hitBox3:contains(mouseX, mouseY)

But this would not work very well if X hitboxes would be to overlap each other (unless you'd want all X actions to be performed ofc).

P.S. Nice to see your still working on projects

I'm glad I have some time again for programming and such. I can finally start working on projects that have been on hold for a long time

Rhombicuboctahedron · « **Reply #4 on:** October 13, 2012, 02:46:02 pm »

I have only ever used lists with single values, and not classes, but would you be able to use lists to define the hitboxes

Code: [Select]

hitBox={}
hitBox[1] = HitBoxSquare(x, y, widht, height)
hitBox[2] = HitBoxSquare(x, y, widht, height)
hitBox[3] = HitBoxSquare(x, y, widht, height)

That way you could efficiently do something to all of them

Code: [Select]

for num=1,10 do
something
end

ElementCoder · « **Reply #5 on:** October 13, 2012, 03:25:42 pm »

I think it is possible. I'll try it tomorrow and if it works I'll post a snippet in the first post to show how to

Of course you and others can help too!
[edit]read: jim we need you

Jim Bauwens · « **Reply #6 on:** October 13, 2012, 04:02:42 pm »

Yes, storing the objects in a table and iterating over them is the way to do it.
I'd love to post some more code, but I'm ill at the moment and can't think straight.

ElementCoder · « **Reply #7 on:** October 14, 2012, 11:46:06 am »

I made a little example and added it to the main post

Jim Bauwens · « **Reply #8 on:** October 14, 2012, 04:32:47 pm »

ElementCoder, I'd suggest you to look through https://github.com/adriweb/EEPro-for-Nspire/blob/master/Global%20Libraries/screen.lua.
It's part of ETK 2, the GUI toolkit I made for EEPro. I don't want to brag about it, but I think there are some interesting things in it, stuff that might give you some ideas. The widgets are defined in widgets.lua, in the same directory as this script.

Author Topic: Hitboxes (Read 7081 times)

ElementCoder

Hitboxes

cyanophycean314

Re: Hitboxes

Jonius7

Re: Hitboxes

ElementCoder

Re: Hitboxes

Rhombicuboctahedron

Re: Hitboxes

ElementCoder

Re: Hitboxes

Jim Bauwens

Re: Hitboxes

ElementCoder

Re: Hitboxes

Jim Bauwens

Re: Hitboxes