Object Collision


(Paul) #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:
https://sourceforge.net/projects/jquerycollision/ (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);

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

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.

Knowledge base: Guides from the Tumult Team
(Greg) #2

Many Thanks, Paul.

(strmiska) #3

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