Move symbol on tilt mobile device

Physics
1

Hi,

Hoping someone can help me set up a basic demo for a display ad.

I need to have a symbol ( containing image & text ) over the top of a background image. On tilting your mobile device it will move left or right only on the horizontal axis.

I would like full control over the speed it moves and how far left or right I can lock it to moving. I may also need to do some further versions where it moves vertically only. Is this possible using the physics engine in Hype 3?

Any help would be really appreciated, thanks.

2

Not exactly as far as I know.

But I think you could do it with some tricks. Not at my Mac at mo so cannot test this.

For example.

Create a static cage off scene that restricts the movement of a element to with physics.

The cage will only allow the element to slide left or right.

If possible we could then get the sliding elements left attribute and apply that to the symbol using the setter API with the optional duration.

1 Like
3

Using the Physics engine. Create 4 rectangles (fill=none, border=0px) and place them on the scene where you want to restrict the movement, i.e

Untitled 2 Hype 3, Today at 17.23.02.png738×243 7.77 KB

I have left the borders in so that you can see them. :wink:

They all have static properties in the Physics inspector and the rectangle in the middle has a Dynamic property (full physics body) and then with the “control gravity with device tilt” checked you can move the rectangle about only within the boundaries of the elements (therefore restricting movement to left and right only.

*note haven’t tested as don’t have mobile devices to hand

This will allow the user to increase/decrease speed based on the tilt. If you just want to move the object a specific speed then you can get the device orientation by Javascript and then set the element’s left property based on the value returned by the motion

3 Likes
4

You can do something with Physics as far as manually controlling the distance or the speed I am not sure.
But you can preset the speed and distance in your Physics inspector.

You will need to make a scaffold of sorts of invisible static barriers in the screenshot they have blue borders.

Then create your moving piece as Dynamic
Set physics to control gravity with device tilt and you should be good to go.
here is a template.
tilt ad.zip (15.0 KB)

Screenshot 2017-04-11 12.32.10.png1430×386 12.3 KB
Screenshot 2017-04-11 12.31.12.png536×736 38 KB

3 Likes
5

Oops I sent mine right when you sent yours :wink:

6

Doh… I forgot about force. (long time since I used physics).

Good call on that. No need to do it off scene and get left as I suggested…

7

If you want to control the speed and limit the distance without using Physics then (and this will only work in some browsers) then get the device’s orientation and move the element according to the gamma, beta or alpha data. Place this on scene load and give your element (symbol) and id.

var box = hypeDocument.getElementById('box');
	
var start = hypeDocument.getElementProperty(box, 'left')
	
orientationListener = function(ev){
	if (Math.floor(start + ev.gamma) < start-2){
		hypeDocument.setElementProperty(box, 'left', start-200, 0.4, 'easeinout')
	} else if (Math.floor(start + ev.gamma) > start+2) {
		hypeDocument.setElementProperty(box, 'left', start+200, 0.4, 'easeinout')
	} else {
		hypeDocument.setElementProperty(box, 'left', start, 0.4, 'easeinout')
	}
}
	
if (window.DeviceOrientationEvent) {
    window.addEventListener("deviceorientation", orientationListener);	} else {
    console.log("Sorry, your browser doesn't support Device Orientation");
}

The position is controlled by the start+number or start-number.
The speed would be the time property in the setElementProperty method. In this example 0.4 secs.

This approach only needs 1 element with an ID of ‘box’.

3 Likes
8

Thanks so much everyone for your replies, lots to play with - I’ll let you know how I get on!

3 Likes