Sacer

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: http://geek-wares.de/kiste/phaser/gyro/

 

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";window.game.state.play = {	preload: function(){		console.log("loading play state");	},		create: function(){		console.log("starting play state");		this.bg = 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.game.input.keyboard.createCursorKeys();				this.beta = 0;					},		update: function(){						this.game.physics.arcade.collide(this.player, 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.game.physics.arcade.collide(this.ball, 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 >= this.game.height) {			this.game.state.start("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 :)

 

Greetings

 

Sacer

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 ( http://tomg.co/gyrojs )

<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

hi,

 

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 (https://phaser.io/docs/2.3.0/Phaser.State.html#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

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now

  • Recently Browsing   0 members

    No registered users viewing this page.