Starting the new scene by gravity sliding?


#1

I see other people’s answers in the forum, is not through gravity (not by dragging), box1 slide to box2 and then start the next scene, JavaScript should be how to modify it?
Thank you hype3 teamdnd-new_scene.hype.zip (115.1 KB)<a class=“attachment”


#2

I’m not sure exactly what You are asking as your post seems to contradict the title.

What I have done is go with your title & use gravity (Physics) to move the square. Here is the modified file:
dnd-new_scene-v2.hype.zip (124.2 KB)

Clicking on the red square starts it sliding to the grey one, and when it is inside, transitions to the new scene. As shown in the video snippet just below:


I used the Physics Inspector to control the slide & the stopping of the red square. You can read more about the Physics Inspector here.

The Timeline has an action to jump to the next scene. Note that when You assign an element to be “Dynamic” or “Static” You can set various Physics properties of the element in the Timeline - as shown in the screen shot below:


#4

Appreciate yr kindly big help! I didn’t express clearly, my idea is basing on the phone’s Gravity induction, the red box can be moved around on the screen at will. Then when it touched the gray box, another/next scene will start.


(Hans-Gerd Claßen) #5

you’ll need an event to be fired which you can use to check for collision.
there’s nothing builtin with hype, which underlying physics-engine is matter.js.

so you’ve got two possibilities:
MutationObserver or continius checking via setInterval
both of them may slow done your app on mobil devices …

i would think of an less complicated solution … -> rethink your UX :slight_smile:


#6

You could also try to hook into matter.js events if they are fully implemented in Hype: https://github.com/liabru/matter-js/blob/master/examples/events.js

Another solution calculate the distance between the two objects.


#7

Thank you very much for your answers.


#8

Thank you very much, give me a lot of inspiration


(Hans-Gerd Claßen) #9

the matter.js -library is encapsulated within hype. so, at this time you can’t access it … as far as i remember this is a feature-request :slight_smile: