Hype Collision Script for multiple items with source


(Lucky) #1

Hey guys,

Some of you may find this useful, i find myself needing a hittest detector in a lot of ads with drag and drop and sometimes with multiple elements. I made a little script which searches for items with class of drag and collider and then console logs out the item currently being hit between the two.

Add this on top of an on drag control position event and you’ve got a collision detector working for multiple objects. So if you want to e.g. have the target fade out or cause scene(x) to trigger it’s very easy to do so based off this little script. Also your IDs still remain whatever you pick them as long as you keep the class name.

collisiondetector.zip (11.1 KB)

Is there a way to get two items to snap together?
Tips and Tricks of the Month
Free Hype Templates
(Greg) #2

That’s awesome Lucky, many thanks.

(giubbe) #3

Thanks for your post: he is useful for me beginner.
I’m trying to develop it.
I added a feature to remove the rectangles collided.
It’s all ok.
Now, I wish the function go to the next scene when all rectangles have been removed, but am I missing something.
Someone can help me understand what has gone wrong?

Thank you

p.s. Sorry for my bad english, I hope you understand.

hittestX.hype.zip (25.4 KB)

(giubbe) #4

I find an “escamotage”: I know how many objects are on the scene, so I count them and when I reach the total, I change scene.
It’s a bad solution , but it’s better than nothing.
An other question: why the var c ,in my example, give me back not an integer (1, 2, 3, 4) but a string? (first collision = index1, second collision = index11 and so)
… Maybe, it would be better if the night I sleep … but my son wants to play with the new game …

hittestXX.hype.zip (25.8 KB)


Your variable c is being used by the HYPE built in script to represent the HYPE documents name (as a string)

Please DO NOT use letters as variables as it will most definitely clash with any other scripts that are being used to run the program.

(Mark Hunte) #6

To add, It is best practices to use meaningful variable names. This make reading and understanding of the code’s intent more human readable. Not only for others but for yourself when you come to look at the code sometime later.

It is also a good idea to try and make them unique to avoid clashes with other scripts on a page.

(giubbe) #7

Ok , but if I write cOther instead c, nothing works: my question in why?
Sure I do a bad job in js, but I have done tons of tets and nothing works; but with the variable named c, all go the right way … For me it’s a mistery

Giuseppe Pascarella

(Mark Hunte) #8

Where you are using ‘c’ you are using the variable that the hype js uses.

And then you are changing it. This is not a good idea.
To show you why if you export your project to folder.
You will find scene 2 will never load because you have changed this foundation variable and other things may break because of this.

This is why we are saying do not use it.

The problem you are trying to solve is having an index number stored in a variable that is not influenced by each drag call to the function.

i.e if you used:

var indexCounter = 0; at the top of your function , indexCounter would always be 0.

There are various ways to solve this like using the head, but I have included in this example one of them that keeps everything in one function.

I have renamed your ‘c’ var to a global var named window.counterIndex and initiate it within a if not exists clause. Which allows us to only set it once.

I have also used a similar method and a timeout interval to fix the issue you have with the scene 2 bat/dragger/becco

You probably found that when the scene changed you were unintentionally hitting objects on scene 2 because you where still dragging during the transition.

So in your code you started using class names for the dragger and of course you need to get the correct index of the dragger for each scene.

The new bit of code changes the required dragger class’s index number but does that within a timeout, which allows the dragging to stop while the scene changes.

(You could also just give each dragger a unique id and use a similar method. Doing away with the class[0] on the end)

None of this is probably perfect but does give you some idea of how to solve your issues.

hittestXX v2.hypetemplate.zip (21.6 KB)

(giubbe) #9

It’s a fantastic job, well done.
It was what I wanted to do.
You also have solved the problem on the second stage.
And last but not least, you have commented the code so that I can understand the development.
Then someone says I should not believe in Santa Claus.
Thanks, thanks a lot.

(Lucky) #10

Sorry I’ve been on holiday, if you guys want me to modify the script in any way to make it more complex to suite your needs let me know~


Yeah. Stop using letters as variables!!! :slight_smile: :slight_smile: :slight_smile:

Only joking. I think the OP has got his wish but I’m sure there will be someone who may need some help. Hope your holiday was nice :wink:

I feel the OP did a copy and paste and adjusted to his needs without knowing why you used the specific variables the way you did. Not his fault.

(Lucky) #12

Ooh I see. “A” and “B”? Yeah i can see the issue, i just did it for simplicity and it didnt give me errors working on it so i thought keep it, i can see how using c would cause issues though :stuck_out_tongue: Also that script is now kind of old, i made a new one which uses event.touch. I found pageX and pageY doesn’t work at all on some androids, they don’t know what page is, only touch so that’s kind of a big note on this - use event.touch.

And yeah holiday was great, i spent half of it implementing physicsjs with hype, and it worked really well but again android lag killed it. Man i hate developing things for that tablet. Anyway off topic.

(giubbe) #13

I take this opportunity: is it possible mix 2 of yours hype files?
The first is the hittest.hype.
The second is that relative to Image masking.
I want to create a scene in the dark, where the bird coincides with the lens (your plus symbol).
Perhaps the two examples give you an idea.

Thanks Luckyde

p.s. if you comment the code, is better for me: maybe I can understand.

pissi5.hype.zip (201.3 KB)

explorer_final copia.hype.zip (460.9 KB)

(giubbe) #14

I’m stuck ….
I can’t see where is the problem on stage 6.
The animation of the sea is not working in the preview, but in Hype everything runs well.
As 4 or 6 or 8 eyes are better than 2, I ask you for help.

pissi7.hype.zip (317.9 KB)

(giubbe) #15

I solved by moving the animation below the visible part of the screen.
I don’t know if it’s normal or it’s a Hype bug.

pissi7b.hype.zip (328.4 KB)