HTML acelerometer

Discussion and feedback on Construct 2

Post » Wed Nov 16, 2011 5:48 pm

Hi,

I am converting for HTML5, with C2, a game I did with Corona for IOS/Android. But I used the acelerometer to control the character. I found two samples of HTML pages with scripts which use the acelerometer, but how I am a beginner with HTML code, I ask if somebody can see it and forward me how could I use the returned x and y variables in C2.

Blog Topic

Link 1



P.S: You can see the code behind the pages with ctrl+U in Chrome, even if it can not work in your device. Anyway I am attaching the second code, the simplest one, below.

[code]<!DOCTYPE html>
<html>
<head>
<title>Mobile Safari HTML5 Accelerometer Test</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<meta name="viewport" content="width=device-width,user-scalable=no" />


<style>
body {
background-color: black;
color: white;
font-family: Helvetica, Verdana, Sans Serif;
font-size: 10px;
}

#no {
display: none;
}

#ball {
width: 20px;
height: 20px;
border-radius: 10px;
-webkit-radius: 10px;
background-color: red;
position:absolute;
top: 0px;
left: 0px;
}
</style>


<script>
// Position Variables
var x = 0;
var y = 0;

// Speed - Velocity
var vx = 0;
var vy = 0;

// Acceleration
var ax = 0;
var ay = 0;

var delay = 10;
var vMultiplier = 0.01;

window.onload = function() {
if (window.DeviceMotionEvent==undefined) {
document.getElementById("no").style.display="block";
document.getElementById("yes").style.display="none";

} else {
window.ondevicemotion = function(event) {

ax = event.accelerationIncludingGravity.x;
ay = event.accelerationIncludingGravity.y;
}

setInterval(function() {
vy = vy + -(ay);
vx = vx + ax;

var ball = document.getElementById("ball");
y = parseInt(y + vy * vMultiplier);
x = parseInt(x + vx * vMultiplier);

if (x<0) { x = 0; vx = 0; }
if (y<0) { y = 0; vy = 0; }
if (x>document.documentElement.clientWidth-20) { x = document.documentElement.clientWidth-20; vx = 0; }
if (y>document.documentElement.clientHeight-20) { y = document.documentElement.clientHeight-20; vy = 0; }

ball.style.top = y + "px";
ball.style.left = x + "px";
document.getElementById("pos").innerHTML = "x=" + x + "<br />y=" + y;
}, delay);
}
};
</script>


</head>

<body>
<div id="content">
<h1>Move the Ball</h1>
<div id="yes">
<p>Tilt your device to move the ball. This sample is using Device Orientation and Motion API compatible with iOS since 4.2</p>
<p>Mantain your device in portrait orientation for better results (you can lock it)</p>
<div id="pos">x=0<br />y=0</div>
<div id="ball"></div>
</div>
<div id="no">
Your browser does not support Device Orientation and Motion API. Try this sample with iPhone, iPod or iPad with iOS 4.2+.
</div>
</div>
</body>
</html>
[/code]
B
90
S
5
G
8
Posts: 165
Reputation: 7,648

Post » Wed Nov 16, 2011 5:53 pm

Quick response (I only have 2 minutes right now) : you can put the javascript to access the acceleromter in its own function, inside the exported index.html. Then you can use the CallJS plugin to call that function, and update the various items you are drawing with the information from the accelerometer.
B
33
S
9
G
6
Posts: 709
Reputation: 6,704

Post » Wed Nov 16, 2011 5:58 pm

The Touch object has expressions to access the accelerometer!
Scirra Founder
B
359
S
214
G
72
Posts: 22,952
Reputation: 178,580

Post » Wed Nov 16, 2011 6:17 pm

Thanks Pole and Ashley, I will try here.
B
90
S
5
G
8
Posts: 165
Reputation: 7,648

Post » Wed Nov 16, 2011 6:27 pm

Yeah Ashley, works like a charm, excuse my fault in not read ALL the functions.
B
90
S
5
G
8
Posts: 165
Reputation: 7,648

Post » Wed Nov 16, 2011 8:57 pm

@Ashley: My bad ! Why do it the easy way when you can do it the hard way ? ;) (I didn't saw the accelerometer in that object before, by lack of use for it for the moment...)
B
33
S
9
G
6
Posts: 709
Reputation: 6,704

Post » Sun May 06, 2012 4:17 pm

[QUOTE=NRABrazil] Yeah Ashley, works like a charm, excuse my fault in not read ALL the functions.[/QUOTE]

can you post a QR Code for the motion controlled app you made, can we see the source code, what phone?, did you convert it to an app using phonegap?
B
7
S
1
Posts: 65
Reputation: 821

Post » Sun May 06, 2012 10:55 pm

Here is my sample gyro motion.capx

Isn't perfect but it works to make motion using left and right, i tsted it on iPod 4 touch
B
96
S
25
G
20
Posts: 3,055
Reputation: 22,644

Post » Mon May 07, 2012 6:29 am

Hi All,

I have just started experimenting with Touch.beta and gamma. I couldn't get it working with PhoneGap properly using cordova-1.7.0rc1.   It just crashed when you tilt the phone but I did get it working through AppMobi.

B
26
S
5
G
5
Posts: 151
Reputation: 6,279

Post » Mon May 07, 2012 2:50 pm

@simwhi there's a known bug where minifying your exported project and running on PhoneGap causes accelerometer to break. It should be fixed in the next build.
Scirra Founder
B
359
S
214
G
72
Posts: 22,952
Reputation: 178,580

Next

Return to Construct 2 General

Who is online

Users browsing this forum: RageByte, TELLES0808 and 11 guests