Object Collision

Tips & Tricks
1

This week, I decided to make a small interactive Christmas Card type game to share with friends. You can try it here: http://worldofpaul.com/2016/

The problem being that while we can have objects cheerily colliding with other objects, and bouncing off them, we have no way to know what object collided with what. So about half the functionality is there. After some hunting and experimenting, I found a method that answers my needs. Sadly, this does involve JQuery, so the code base is larger than necessary, but it seems to work.

So, first off, grab a copy of JQuery. You’ll also need an extra element - JQuery Collision. Get that from here:
JQuery Collision download | SourceForge.net (this includes a version of JQuery, but my game and demo file uses a more recent version of that JQuery).

My Hype Document, and associated bits of code is here:
Collision Test.zip (761.3 KB)

You’ll see a simple scene - some red balls, a green “ground”, and a blue box. When the scene is run, the blue box moves across the scene, and the red balls drop. When a ball hits the blue box, the animation stops, and a readout of what hit the box is shown.

The make up of this demo is very simple. There is a function called initialise which is called when the scene has loaded. This has the following code in it:

objectColliderCheck = window.interval = setInterval(function()
{
hypeDocument.functions().checkForCollision(hypeDocument, element, event);
},50);

objectColliderCheck is a handler for the window.interval, which calls the Hype function checkForCollision every 50 milliseconds. We define that handler here, and when objects collide, it’ll be killed off.

So, every few fractions of a second, the function checkForCollision is called. It looks a little like this:

// Check that an object with the ID ”target” hits an object with
// the class “ball”
var hits = $("#target").collision(".ball");

// If there has been a collision, then do this
if( hits.length>0 )
{
// Get info on hits
myHits = hits.length;
firstID = hits[0].id;

hypeDocument.getElementById('Text').innerHTML = "Number of hits:" + myHits + "
ID for first object in hit list: " + firstID;

// Put the brakes on everything
// We don't want to do any more

// Stop the timeline
hypeDocument.pauseTimelineNamed('Main Timeline')

// Stop collision checking
clearInterval(objectColliderCheck);
}

What is does is call a function in the JQuery Collision code that looks for all instances of a selector to see if it’s been hit by an instance of a different selector. All all the balls have a class of “ball’ and the target has a class of “target”, this can be checked by using this line of code:

var hits = $("#target").collision(".ball");

After that, we can check to see if anything has happened. If it has, then the variable hits will have a length greater than 0, so we can then do anything we need inside the following if statement. In this case, some information is displayed, the timeline is paused (so the block stops moving), and the handler for the collision checking is destroyed, because we won’t be needing it any more.

So this is how I got collision checking to work in Hype in what I hope is a fairly elegant way.

However, I’d like to see this happen inside Hype itself. I’d like to know what objects have collided, and be able to call a JavaScript function (or any of the other options that are available to other events, such as clicking),when a collision occurs.

Hope this helps others looking for similar functionality.

5 Likes
2

Many Thanks, Paul.

1 Like
3

thanks, but try, if you can make the game responsive. then the hitpoints will change, if you use jquery.

4

Thanks…
It works but I want to be able to detect another collision after the first and so on…
I try a loop but I can’t reset the if( hits.length>0 ) so it can’t enter the loop another time.

If you have an idea…
Thanks in advance.

5

Hello,

I create a little code to do what I want : check (and count) each time an object touch another object with physics enable.

Perhaps it could be improved… don’t hesitate to help.:+1:

// element - DOMHTMLElement that triggered this function being called
// event - event that triggered this function being called
function checkForCollision(hypeDocument, element, event) {

// declare myhits in html header
// let myHits = 0;
//

let hits = $("#target").collision(".ball");

function verifTouch(){
	if (hits.length>0) {
		myHits = myHits+1;
		//set timelaps before counting a new touch :
			//Stop counting
		clearInterval(objectColliderCheck);
		//Restart checkCollision after X millisconds
		setTimeout(timeDisp, 500);
		function timeDisp(){
			objectColliderCheck = window.interval = setInterval(function()
		{
			hypeDocument.functions().checkForCollision(hypeDocument, element, event);
		},100);
	}
			}else{
		//what you want
	}

}
	verifTouch()

	hypeDocument.getElementById('Text').innerHTML = myHits;
}

Don’t forget to :

// Stop collision checking
clearInterval(objectColliderCheck); 
objectColliderCheck = 0;

On unload scene

1 Like