Can an object reaching the end of a maze trigger next scene

[photman52 (Bob)]

Just wondering if an object can trigger the next scene for example when it reaches a certain point
I’ve created a maze and when ball reaches the finish I want it to trigger the next scene

Thanks
Bob

[MarkHunte]

There is probably a few ways to do it.

One that springs to mind is using The constraint/ Observer I wrote

Drag Constrain template

Yep that works, Here is an example showing the above coded boundary with a high bounce and an example of a normal static walled boundary with a high bounce. You should see the normal ones ball fly out of the scene as the physics cannot handle the extreme bouncing. The code boundary with static wall just 1 pixel in width and just within the boundary controls the bounce. This is really great. Drag_&_Physics_Bounce_constrains_v2.hypetemplate.zip (24.6 KB)

In this version we only need one constraint and instead of constraining we change scene

maze.hype.zip (30.1 KB)

[photman52 (Bob)]

Thanks Mark
that works fine when it exits to the right
I’ve been trying to get it to work exiting at the top of the container with this code
as you’ll see Im not too good with JS

var observer = new MutationObserver(function(mutations) {

mutations.forEach(function(mutation) {
var ball = hypeDocument.getElementById(‘ball’)
var container = hypeDocument.getElementById(‘container’);

 constrain(hypeDocument, ball,container)	

});
});

// configuration of the observer:

var config = { attributes: true, childList: true, characterData: true ,attributeFilter:[‘style’] };

// pass in the target node, as well as the observer options
observer.observe(ball, config);

// later, you can stop observing
//observer.disconnect()

function constrain(hypeDocument, ball,container){

///use this line for right constrain
	if((hypeDocument.getElementProperty(ball, 'top') + hypeDocument.getElementProperty(ball, 'height')) > (hypeDocument.getElementProperty(container, 'top') + hypeDocument.getElementProperty(container, 'height'))){
		//hypeDocument.setElementProperty(ball, 'top', (hypeDocument.getElementProperty(container, 'top')+hypeDocument.getElementProperty(container, 'height')-hypeDocument.getElementProperty(ball, 'height')), 0, 'linear');
	hypeDocument.showSceneNamed('next', hypeDocument.kSceneTransitionCrossfade, 1.1)
	};
	
		
	
	}

can you help please

Bob

[MarkHunte]

Sure, the code is in the original thread I linked to.

//use this line for top  
		if(hypeDocument.getElementProperty(ball, 'top') < hypeDocument.getElementProperty(container, 'top')){
			hypeDocument.showSceneNamed('next', hypeDocument.kSceneTransitionCrossfade, 1.1)
		};

maze_top_Exit.hype.zip (30.8 KB)

[MarkHunte]

Here is a possibly better way.

This way you can have an element at the exit that if the ball's center is # pixels away from the center of the target we do stuff.

These two are from the drag n drop code here

Drag one element to another element to change scene

I keep seeing questions about dragging an element onto another element to do things like change scene. Here is a quick and simple example to show how you can achieve this. The original code comes from a Tumult Tutorial about dragging and controlling timelines which I always struggle to find. But have the link at home. @Daniel I think it was one of yours ( warmer - colder ) Updated with these images: You have to drag into the borders of a button. The margin for detection is small. Which c…

maze_target_Exit_2.hype.zip (33.4 KB)
maze_target_Exit_1.hype.zip (31.9 KB)

[photman52 (Bob)]

Thank you so much, thats perfect

[photman52 (Bob)]

Hi again
+Still having a bit of a problem with JS
I have created a layout for iphone landscape and everything works ok

On building an iphone portrait layout I understand you cant use the same Javascripts as items need unique identifers
OK so Ive copied JS put it into new layout changed the unique identifiers of the items and changed the reference in JS but it doesnt work

Landscape Script

var observer = new MutationObserver(function(mutations) {

mutations.forEach(function(mutation) {
var ball = hypeDocument.getElementById(‘ball’)
var container = hypeDocument.getElementById(‘container’);

 constrain(hypeDocument, ball,container)	

});
});

// configuration of the observer:

var config = { attributes: true, childList: true, characterData: true ,attributeFilter:[‘style’] };

// pass in the target node, as well as the observer options
observer.observe(ball, config);

// later, you can stop observing
//observer.disconnect()

function constrain(hypeDocument, ball,container){
var ballRect = ball.getBoundingClientRect();
var target = document.getElementById(container);
var targetRect = container.getBoundingClientRect();

	var ballXCenter = ballRect.left + (ballRect.width / 2);
	var ballYCenter = ballRect.top + (ballRect.height / 2);
	
	var targetXCenter = targetRect.left + (targetRect.width / 2);
	var targetYCenter = targetRect.top + (targetRect.height / 2);

var ballDistance = (ballXCenter - targetXCenter) * (ballXCenter - targetXCenter) + (ballYCenter - targetYCenter) * (ballYCenter - targetYCenter);

	if (ballDistance < 50) { 
			hypeDocument.startTimelineNamed('lights1', hypeDocument.kDirectionForward);			
		};
	 
				}

PORTRAIT SCRIPT

var observer = new MutationObserver(function(mutations) {

mutations.forEach(function(mutation) {
var ball = hypeDocument.getElementById(‘balls’)
var container = hypeDocument.getElementById(‘1cont’);

 constrain(hypeDocument, ball,container)	

});
});

// configuration of the observer:

var config = { attributes: true, childList: true, characterData: true ,attributeFilter:[‘style’] };

// pass in the target node, as well as the observer options
observer.observe(ball, config);

// later, you can stop observing
//observer.disconnect()

function constrain(hypeDocument, ball,container){
var ballRect = ball.getBoundingClientRect();
var target = document.getElementById(container);
var targetRect = container.getBoundingClientRect();

	var ballXCenter = ballRect.left + (ballRect.width / 2);
	var ballYCenter = ballRect.top + (ballRect.height / 2);
	
	var targetXCenter = targetRect.left + (targetRect.width / 2);
	var targetYCenter = targetRect.top + (targetRect.height / 2);

var ballDistance = (ballXCenter - targetXCenter) * (ballXCenter - targetXCenter) + (ballYCenter - targetYCenter) * (ballYCenter - targetYCenter);

	if (ballDistance < 50) { 
			hypeDocument.startTimelineNamed('lights1', hypeDocument.kDirectionForward);			
		};
	 
				}
	
	

	
	What have I messed up????

[MarkHunte]

Layouts are a bit different. But your work around of calling separate scripts should work.
But I just spotted a problem in the code I wrote.

The

 var ball = hypeDocument.getElementById('ball')
var container = hypeDocument.getElementById('container');

In each needs to be declared before the Observer is constructed. Otherwise it will not find the correct elements.
It was a bit of luck that it worked. The Observer was using ‘ball’ which was also the var name. But it was not using the var.
It was in effect getting the element with the id of ‘ball’ by its self.

I have noticed in other code before that script can often pick up on elements by id if you use a literal. (@Daniel )

I am working on something that may make this easier. Luckily in the new code I am designing I had already by passed these issues… But this helped me understand some of the odd issues that kept cropping up.

[photman52 (Bob)]

Hi Mark

Trying another version and I’m trying to get it to jump to another scene when the ball goes in the basket

tipping.zip (65.0 KB)

[MarkHunte]

So two issues.

You did not understand my last post.

You need to define the ball/coin elements outside and before the MutationObserver.

In fact you may as well do the same to the target zone.

The other issue is the zone is a rect and you are using code that uses radius and trying to get to centre.

In this case it would be better to use a rect coordinate i.e 4 points to be within.

Luckily the DOM can use getBoundingClientRect() to get top, left,right and bottom of the target zone.
Then just see if the coin/ball is within them

	var ball =  hypeDocument.getElementById('coin')
		var zone = hypeDocument.getElementById('boxy');
		
	
	var observer = new MutationObserver(function(mutations) {
  mutations.forEach(function(mutation) {
     	
		
     constrain(hypeDocument, ball,zone)	
  });    
});
	
	// configuration of the observer:
var config = { attributes: true, childList: true, characterData: true ,attributeFilter:['style'] };
 
// pass in the target node, as well as the observer options
observer.observe(ball, config);

 
 
// later, you can stop observing
//observer.disconnect()

	function constrain(hypeDocument, ball,zone){
	
	//var target = document.getElementById('theRect');
	var targetRect = zone.getBoundingClientRect();
 
 
 	//var ball_ = document.getElementById('ball');
	var ball_Rect = ball.getBoundingClientRect();
	
 
var physicsBodyTop =  ball_Rect.top 
var physicsBodyLeft =  ball_Rect.left
var physicsBodyRight =  ball_Rect.right
var physicsBodyBottom =  ball_Rect.bottom


var targetZoneTop =  targetRect.top 
var targetZoneLeft =  targetRect.left
var targetZoneRight =  targetRect.right
var targetZoneBottom =  targetRect.bottom


if (
physicsBodyTop > targetZoneTop && 
physicsBodyLeft > targetZoneLeft && 
physicsBodyRight < targetZoneRight && 
physicsBodyBottom < targetRect.bottom){

hypeDocument.showSceneNamed('next', hypeDocument.kSceneTransitionCrossfade, 1.1) 
}
			
		
		}

tippingv2.hype.zip (90.6 KB)

I have been meaning to write that bit of code so thanks for making me pull my finger out.