use external script / addEventListener (gyro.js / ondeviceorientation) [kinda solved]

Recommended Posts

Hi there,


first of all: I'm new to phaser but did some tutorials to get used to it and so far i'm very excited about the framework :)


Also I'm very excited of the MightyEditor. But I'm stuck at a problem for days now and can't find a solution...


I'd like to use the gyroscope of mobile-devices to move my character. I found some experiments with "pure" phaser and gyro.js so I tried to make something work.

On my tablet (kindle fire HD) this example is working so far:


But somehow I'm unable to get it run within MightyEditor or even within the "state"-workflow.


Here is my ME-script so far:

"use strict"; = {	preload: function(){		console.log("loading play state");	},		create: function(){		console.log("starting play state"); = mt.create('juzo_breakout-hintergrund');		this.steine = mt.create('steine');		this.julius = mt.create('julius');		this.player = mt.create('player');		this.ball = mt.create('ball');		this.punkte = mt.create('punkte');				this.ball.body.velocity.y = 800;				this.playerY = this.player.y;				this.curPoints = 0;				this.cursors =;				this.beta = 0;					},		update: function(){, this.ball, function(player, ball){			ball.body.velocity.y = -800;			if(ball.x + ball.width / 2 < player.x + player.width / 4){ball.body.velocity.x = -400}			else if(ball.x + ball.width / 2 < player.x + player.width / 2){ball.body.velocity.x = -200}			else if(ball.x + ball.width / 2 > player.x + player.width / 4){ball.body.velocity.x = 400}			else if(ball.x + ball.width / 2 > player.x + player.width / 2){ball.body.velocity.x = 200}			//if(ball.x + ball.width / 2 > player.x + player.width / 2) console.log("rechts");			player.body.velocity.y = 0;			player.y = this.playerY;		}, null, this);, this.steine.self, function(ball, stein){			stein.destroy();			this.curPoints += 100;			this.punkte.setText("Punkte: " + this.curPoints);		}, null, this);				if(this.cursors.left.isDown || this.beta < 0) {			this.julius.body.velocity.x = -750;			this.player.body.velocity.x = -750;			//console.log("left");		} else if(this.cursors.right.isDown || this.beta > 0) {			this.julius.body.velocity.x = 750;			this.player.body.velocity.x = 750;			//console.log("right");		} else {			this.julius.body.velocity.x = 0;			this.player.body.velocity.x = 0;		}			if(this.ball.y + this.ball.height >= {"menu");		}			/*window.ondeviceorientation = function(event) {			this.beta = Math.round(event.beta);			this.punkte.setText("Punkte: " + this.curPoints);		}*/	}};

How can I add the gyro.js to work with ME? If this is not possible at all, than how is it possible to add an own eventlistener? If I add it to the preload function i can't update "this.beta" in another function besides create or update. If i add the EL in the update function, the whole game crashes...


I hope you guys can help me to kick me in the right direction :)





Share this post

Link to post
Share on other sites

I solved the problem by myself :D


It's not the nicest solution but well... it works. And that's how i've done it:


Include gyro.js ( )

<script type="text/javascript" src="js/gyro.min.js"></script>

After that, add a simple script after the body which will set a custom attribute every 100ms (or whatever frequency you setup).

<body beta="0"></body><script type="text/javascript">	gyro.frequency = 100	gyro.startTracking(function(e) {		if(e.beta !== undefined)			document.body.setAttribute("BETA", e.beta);	});</script>

Now, in play.js you can get thet attribute with simple plain JS and use it as you need it.


Note: I only needed the beta value for my purpose because the player-movement is only in the x-axis


And don't forget, that iOS is a special case where the orientation is switched (e.beta < 0 is a tilt to the left on android but to the right on iOS).


Quick-Solution in Phaser (i know i can use a var for that... i'll clean that up later)

if(Phaser.Device.iOS) {	this.player.body.velocity.x = -(document.body.getAttribute("beta") * 60);} else {	this.player.body.velocity.x = document.body.getAttribute("beta") * 60;}

Share this post

Link to post
Share on other sites



ondeviceorientation  event handler should be in the create function,

and this in the function context will refer to the window object instead of state,
you should use event listener like :

create: function(){//....var self = this;window.ondeviceorientation = function(event) {    console.log(this === window); // true    self.beta = Math.round(event.beta);    self.punkte.setText("Punkte: " + self.curPoints);};//....},

1) add gyro.js script to the MightyEditor ( drag and drop file on the source editors tree view)

2) include script in the index.html file

<script type="text/javascript" src="gyro.min.js"></script>

3) start event listener in the create function and stop in the shutdown ( function


in your case:

create: function(){//....    var self = this;    gyro.startTracking(function(event) {        // event.x, event.y, event.z for accelerometer        // event.alpha, event.beta, event.gamma for gyro        self.beta = Math.round(event.beta);        self.punkte.setText("Punkte: " + self.curPoints);    });},shutdown: function(){//......    gyro.stopTracking();} 

Share this post

Link to post
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.

Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.


  • Recently Browsing   0 members

    No registered users viewing this page.