How to jump to new scene ONLY if certain action is accomplished?

Physics
1

Hey everyone. Love the product, can’t wait to learn more and help out others once I get more knowledgable.

Question: How do i jump to a scene ONLY if a certain action is completed, for example:

  1. Insert an Ellipse onto my scene
  2. Insert another Ellipse
  3. Make the first dynamic and the second static
  4. Allow the user to change the position of the second so that he/she can push the first Ellipse around, much like air hockey
    Here is my question

How do I make it to where you go to a new scene ONLY IF the user pushes the ‘hockey puck’ Ellipse off of the the top of the canvas, imagine they ‘scored’

.

So, you could think of this like Air Hockey, if the ‘puck’ goes through the top and off the page, the user is brought to the next scene.

Is this possible?

Thanks so much!

2

you’ve got to control the position of the ‘puck’ by either setIntervall or MutationObserver. You’re question is near to collisiondetection which isn’t yet built in …

example of MutationObeserver is within pinball. it’ll check when the ball gets of thru pins …

3

Awesome, thanks. Forgive me, again I’m a bit new, but when I open up the hype file (source), I am looking for the ‘pins’ or that rectangle within that section? And, where is the option to detect if the ball goes through the pins? Physics Inspector? If you could kind of guide me to the options i need to play with to get the detection, and what you did to detect (create a rectangle, or?)… thanks!

4

This is close to what you are trying to do, it does not push an element but it does have a drag & drop function that will go to another scene - it uses jQuery

dnd-new_scene.hype.zip (115.1 KB)

5

Awesome! Thanks, Greg! What a great product and great community.

Who makes this forum, by the way? Is it custom by Tumult? It’s the coolest functioning forum I’ve ever used.

1 Like
6
1 Like
7

You’ve got to script it yourself. no builtin functionality.
check the position of the puck by either setIntervall or MutationObserver with the use of getBoundingClientRect(), which returns its relative Position to the Viewport. compare this with the position of your hype scene and you’re there …

1 Like
8

Thanks Greg and Hans-Gerd!

1 Like
9

Hello,

and how to make the transition to the next scene takes place after placing eg 5 parts up and not one?

Is this possible?

I would be grateful for your reply
Tomasz

dnd-new_scene-2.hype.zip (124.4 KB)

10

yes, with timeline you can do it.
Make a new timeline called "steps" and add 4 pauses + next scene
Add an action in JS to trigger this timeline and you're done :slight_smile:

$(".box").draggable();
    $("#box2").droppable({
    
    drop: function() { 
      
     	hypeDocument.continueTimelineNamed('pulse', hypeDocument.kDirectionForward, true)
        hypeDocument.continueTimelineNamed('steps', hypeDocument.kDirectionForward, false)
    }
      
    });

I added also a small animation in the "droppable" box (pulse timeline)

dnd-new_scene-3.hype.zip (222.4 KB)

BTW using the same method you can add a timeline for max number of attempts

2 Likes
11

OK thank you for your answer! However, this method already tried :wink:

I would like to move to the next Scene but only after placing all the items on the “shelf”. Elements are dynamic and can fall from the “shelf”. Only when all 5 elements will become permanently on the shelf should take action.

I also tried the function .observerChanges but it does not work then the “On Drag: Position Control Element”.dnd-new_scene-3.hype.zip (129.3 KB)

12

allBoxesWithinShelf.hype.zip (22.7 KB)

you don’t need a additional library … give this a try

13

Sure? It was not implemented in the original project

14

:confused: this is true, it was not in orygialnym project. I should more accurately describe my problem, but I really would like to thank you for your help! The method which suggested h_classen should be OK.

Regards

15

it works very well, thank you very much :grin:

1 Like