Hello,
I’ve been researching collision detection and have determined that the solution for my needs is a simple comparison of IF the object is within a certain location as determined by Top and Left positions
function colision(hypeDocument, element, event) {
var topPos = hypeDocument.getElementProperty(beachBall, 'top')
var leftPos = hypeDocument.getElementProperty(beachBall, 'left')
if (leftPos > 213 && leftPos < 260 && topPos > 160 && topPos < 200) {
alert ('Hit');
hypeDocument.showSceneNamed('Winner', hypeDocument.kSceneTransitionCrossfade, 1.1)
};
}
I’ve dynamically shown the positions back to the screen to confirm the end position of the beachBall element but yet the conditional is not firing. What Javascript knowledge am I missing?
If the solution is not obvious I can recreate the Hype doc in 3.5 but the current version of this project is in 4.0
I added the function “collision” to the “Symbol” Timeline Action You already created… so now the function is continually tracking the “beachball” location just as is “displayData()”. The “beachball” hit alert needs some refining regards to scoring zone of course.
Note: On a quick review I couldn’t find another place where “collision()” is called. If there is another trigger location You might want to remove it to avoid potential conflicts.
JimScott thanks!
Yes, but now I am still confused (not too hard to do)…
So why is the function working in a repeating symbol but not in the MainTimeline that initiates the same function?
It seems that there needs to be a perpetual loop to look for a true condition to the position Conditional. That makes sense, but begs the question; How is this properly accomplished in most cases?
In other words what are the Best Practices to create a condition or function that constantly polls a state looking for a true condition? Is a repeating timeline event in a Symbol a common method? I don’t think so as Javascript is usually in a static state but using things like AJAX allow a more dynamic condition.
Not asking you all these questions Jim, just rambling as I learn.
PS: Regarding calling the colision() function, I do have it as the first frame Timeline Action on my primary project file. I’ll remove it as it was not doing anything anyway (due to not being perpetual).
To answer my own question and potentially help anyone else looking for a similar solution, I have implemented the following:
Delete the looping Symbol to create the perpetual check for true (Beachball is in final position for success). This was replaced with executing the Javascript function position() On Scene Load
Next, I revised my function that looks for success to first set a variable (checkTrue) as false.
Then using setInterval the function loops every half second (500 milliseconds) as long as checkTrue is false.
IF success happens, we do the needful and reset the variable “checkTrue” to true so as to not keep looping the checking of position for success.
There may be more efficient ways to achieve the same goal, but this method is an example of Hypes “On Scene Load” and Javascripts “setInterval” to continually check for a condition as true.
I think using setInterval or requestAnimationFrame (which would be synced to drawing) are fine if you don't need a high degree of accuracy. On modern browsers, you could actually add observers for DOM mutation that would tell you when object positions change, and you could test then, which may technically be a better solution.
There have been requests for Hype to provide a frame change callback; while I think this would be a great idea, the mechanics of Hype right now don't lend themselves to one specific time period to call back in a lot of cases.
Note a couple things about your code:
you are first setting checkTrue to false and then testing if it is false; this will always be the case
Within setInterval, while you are not running the check if it has been set to true, you are still running the interval timing code as nothing is calling clearInterval.
Thanks Jonathan,
The displayed function did work with the true/false conditions, but I understand your points so rewrote the code as follows which also works and is more efficient and clears the interval on success:
var timerInt = setInterval(gameTimer, 500);
function gameTimer(){
var topPos = hypeDocument.getElementProperty(beachBall, 'top');
var leftPos = hypeDocument.getElementProperty(beachBall, 'left');
if (leftPos > 213 && leftPos < 260 && topPos > 160 && topPos < 200 ) {
finalTime = myTimer;
hypeDocument.showSceneNamed('Winner', hypeDocument.kSceneTransitionCrossfade, .8);
clearInterval(timerInt);
}
};
