Leap + JS help wanted

[GhostAct]

I have a game, that I want to inject Leap Motion support into right here

//first aid isn't working correctly

// create Phaser.Game object named "game" & 1000, 600 is standard

var game = new Phaser.Game(650, 490, Phaser.AUTO, 'my-game',

{ preload: preload, create: create, update: update });

// declare global variables for game

var player, arrowKey, sky, mountains, city, platformGroup, wallGroup, coinGroup, scoreText, catGroup, healthBar, catSound;

var powerUpGroup, messageText, spikeGroup, spikeSound, firstAidGroup, coinSound, powerUpSound;

var score = 0;

var powerUpActive = false;

var laser;

var fireSound;

var cdeathSound;

var powerSound;

var introText;

var patchupSound;

var mountainsn;

var mountainsrs;

var cityd;

// preload game assets - runs once at start

function preload() {

game.load.spritesheet('dude', 'assets/images/dude.png', 40, 56);

game.load.spritesheet('coin', 'assets/images/coin.png', 32, 32);

game.load.spritesheet('cat', 'assets/images/cat.png', 32, 32);

game.load.image('sky', 'assets/images/sky-clouds.jpg');

game.load.image('mountains', 'assets/images/mountain-skyline.png');

game.load.image('mountainsn', 'assets/images/mountain-skylinedark.png');

game.load.image('mountainsrs', 'assets/images/mountain-skylinelight.png');

game.load.image('city', 'assets/images/city-skylineday.png');

game.load.image('cityd', 'assets/images/city-skylinenight.png');

game.load.image('platform-50', 'assets/images/platform-050w.png');

game.load.image('platform-100', 'assets/images/platform-100w.png');

game.load.image('platform-200', 'assets/images/platform-200w.png');

game.load.image('platform-300', 'assets/images/platform-300w.png');

game.load.image('platform-400', 'assets/images/platform-400w.png');

game.load.image('platform-500', 'assets/images/platform-500w.png');

game.load.image('wall-50', 'assets/images/wall-050h.png');

game.load.image('wall-150', 'assets/images/wall-150h.png');

game.load.image('wall-250', 'assets/images/wall-250h.png');

game.load.image('red-bar', 'assets/images/bar-red.png');

game.load.image('green-bar', 'assets/images/bar-green.png');

game.load.image('bar-outline', 'assets/images/bar-outline.png');

game.load.image('star', 'assets/images/star.png');

game.load.image('black-bar', 'assets/images/bar-black.png');

game.load.image('yellow-bar', 'assets/images/bar-yellow.png');

game.load.image('spike', 'assets/images/spike.png');

game.load.image('aid', 'assets/images/firstaid.png');

game.load.audio('cat-sound', 'assets/sounds/meow.wav');

game.load.audio('bleed', 'assets/sounds/splat.wav');

game.load.audio('coin', 'assets/sounds/coin.wav');

game.load.audio('power', 'assets/sounds/power-up.wav');

game.load.image('bullet', 'assets/images/laser-green.png');

game.load.audio('gun', 'assets/sounds/gun.wav');

game.load.audio('cd', 'assets/sounds/cat-screams.wav');

game.load.audio('meds', 'assets/sounds/firstaid02.wav');

game.load.spritesheet('rain', 'assets/images/rain.png', 30, 30);

}

// create game world - runs once after "preload" finished

function create() {

game.physics.startSystem(Phaser.Physics.ARCADE);

fireKey = game.input.keyboard.addKey(Phaser.KeyCode.SPACEBAR);

//allow player to jump off the top of the screen

game.physics.arcade.checkCollision.up = false;

//extends the game world (x, y, width, height)

game.world.setBounds(0, 0, 5000, 600);

//layer the background images and fix the camera to the background so it stays while the player moves

sky = game.add.tileSprite(0, 0, 1000, 600, 'sky');

mountainsn = game.add.tileSprite(0, 0, 1000, 600, 'mountainsn');

mountainsrs = game.add.tileSprite(0, 0, 1000, 600, 'mountainsrs');

mountains = game.add.tileSprite(0, 0, 1000, 600, 'mountains');

cityd = game.add.tileSprite(0, 0, 1000, 600, 'cityd');

city = game.add.tileSprite(0, 0, 1000, 600, 'city');

sky.fixedToCamera = true;

mountains.fixedToCamera = true;

mountainsn.fixedToCamera = true;

mountainsrs.fixedToCamera = true;

city.fixedToCamera = true;

cityd.fixedToCamera = true;

//rain particles

            var emitter = game.add.emitter(game.world.centerX, 0, 400);


            emitter.width = game.world.width;

            // emitter.angle = 30; // uncomment to set an angle for the rain.


            emitter.makeParticles('rain');


            emitter.minParticleScale = 0.1;

            emitter.maxParticleScale = 0.5;


            emitter.setYSpeed(300, 500);

            emitter.setXSpeed(-5, 5);


            emitter.minRotation = 0;

            emitter.maxRotation = 0;


            emitter.start(false, 1600, 5, 0);

// PLATFORMS

platformGroup = game.add.group();

//enable physics for the group

platformGroup.enableBody = true;

// add ground platform

var ground = platformGroup.create(0, game.world.height - 25, 'platform-500'); //this location keeps it 25px up from the bottom

ground.scale.setTo(10, 1); // 10 * 500 = 5000 pixels wide - scaled the width 10 times and the height 1 time to have 1 long platform/ground

// add platforms

platformGroup.create(200, 500, 'platform-100');

platformGroup.create(400, 425, 'platform-100');

platformGroup.create(600, 350, 'platform-100');

platformGroup.create(50, 100, 'platform-50');

platformGroup.create(250, 175, 'platform-50');

platformGroup.create(450, 260, 'platform-50');

platformGroup.create(900, 275, 'platform-200');

platformGroup.create(1150, 475, 'platform-50');

platformGroup.create(1350, 500, 'platform-50');

platformGroup.create(1525, 450, 'platform-50');

platformGroup.create(1525, 300, 'platform-100');

platformGroup.create(1600, 400, 'platform-100');

platformGroup.create(1650, 225, 'platform-200');

platformGroup.create(1925, 225, 'platform-200');

platformGroup.create(2075, 400, 'platform-100');

platformGroup.create(2250, 300, 'platform-100');

platformGroup.create(2375, 375, 'platform-100');

platformGroup.create(2425, 350, 'platform-200');

platformGroup.create(2550, 400, 'platform-150');

platformGroup.create(1300, 450, 'platform-50');

//make the platforms immovable - setAll allows you to do this for every member of the group - body.immovable is the property that is changing

platformGroup.setAll('body.immovable', true);

//walls

wallGroup = game.add.group();

wallGroup.enableBody = true;

wallGroup.create(525, 525, 'wall-50');

wallGroup.create(1000, 425, 'wall-150');

wallGroup.create(2000, 525, 'wall-50');

wallGroup.create(3000, 525, 'wall-50');

wallGroup.create(4000, 525, 'wall-50');

wallGroup.create(1825, 425, 'wall-150');

wallGroup.create(2200, 425, 'wall-150');

wallGroup.create(2475, 325, 'wall-250');

wallGroup.create(2825, 425, 'wall-50');

wallGroup.create(1650, 525, 'wall-200');

wallGroup.setAll('body.immovable', true);

//coins

coinGroup = game.add.group();

coinGroup.enableBody = true;

// JSON array listing coin positions

var coinData = [

{ "x":75, "y":0 }, { "x":150, "y":0 }, { "x":250, "y":250 },

{ "x":275, "y":0 }, { "x":350, "y":0 }, { "x":450, "y":300 },

{ "x":475, "y":0 }, { "x":537, "y":0 }, { "x":650, "y":0 },

{ "x":700, "y":400 }, { "x":850, "y":0 }, { "x":950, "y":0 },

{ "x":1050, "y":0 }, { "x":1175, "y":0 }, { "x":1375, "y":0 }

// no comma after last item in array

];

//loop to add the coins from the JSON array

for (var i = 0; i < coinData.length; i++) {

    var coin = coinGroup.create(coinData[i].x, coinData[i].y, 'coin');

    coin.anchor.set(0.5, 0.5);

    coin.body.gravity.y = 300;

    coin.body.bounce.y = 0.5;

    coin.animations.add('spin', [0, 1, 2, 3, 4, 5], 10, true);

    coin.animations.play('spin');

}

introText = game.add.text(game.world.centerX -2200, game.world.centerY + 80,

' use spacebar to shoot and arrow keys to move',

{ font: 'Arial', fontSize: '20px', fontStyle: 'bold', fill: '#ffffff' });

introText.setShadow(1, 1, '#000000', 2);

introText.anchor.set(0.5, 0.5);

//stars

powerUpGroup = game.add.group();

powerUpGroup.enableBody = true;

powerUpGroup.create(1000, 200, 'star');

powerUpGroup.create(1000, 200, 'star');

powerUpGroup.setAll('anchor.set', 0.5);

powerSound = game.add.audio('power', 0.1);

//spikes

spikeGroup = game.add.group();

spikeGroup.enableBody = true;

spikeGroup.create(425, 525, 'spike');

spikeGroup.create(775, 525, 'spike');

spikeGroup.create(1475, 525, 'spike');

spikeGroup.create(2100, 525, 'spike');

spikeGroup.create(1050, 225, 'spike');

spikeGroup.create(1550, 250, 'spike');

spikeGroup.setAll('body.immovable', true);

firstAidGroup = game.add.group();

firstAidGroup.enableBody = true;

firstAidGroup.create(1250, 525, 'aid');

firstAidGroup.setAll('anchor.set', 0.5);

//weapon systems

laser = game.add.weapon(10, 'bullet');

laser.bulletKillType = Phaser.Weapon.KILL_CAMERA_BOUNDS;

laser.bulletSpeed = 600;

laser.fireRate = 250;


// set bullet collision area to match its visual size

laser.setBulletBodyOffset(24, 12, 6, 6);

fireSound = game.add.audio('gun', 0.1);

laser.onFire.add(function() {

    fireSound.play();

});

//cats

catGroup = game.add.group();

catGroup.enableBody = true;

//add cats to the game

for (var i = 0; i < 30; i++) {

    var cat = catGroup.create(i * 200 + 100, 0, 'cat');

    cat.anchor.set(0.5, 0.5);

    cat.body.gravity.y = 300;

    cat.body.bounce.x = 1;

    cat.body.collideWorldBounds = true;

    cat.animations.add('left', [0, 1], 10, true);

    cat.animations.add('right', [2, 3], 10, true);

    cat.body.velocity.x = Math.random() * 50 + 100; // between 100-150

    if (Math.random() < 0.5) cat.body.velocity.x *= -1; // reverse direction

}

player = game.add.sprite(25, 300, 'dude');

player.anchor.set(0.5, 0.5);

game.physics.arcade.enable(player);

player.body.gravity.y = 200;

player.body.collideWorldBounds = true;

player.health = 100;

player.maxHealth = 100;

//bounce value of 0-1 for x or y - the lower the value the lower the amount of bounce - values of >1 will cause the object to reverse faster

player.body.bounce.y = 0.1;

//add animation for movement left or right

player.animations.add('left', [5,6,7,8], 10, true);

player.animations.add('right', [9, 10, 11, 12], 10, true);

//camera follows the player on the screen

game.camera.follow(player);

player.events.onKilled.add(function() {

player.reset(25, 300, 100); //(x, y, health)

healthBar.scale.setTo(player.health / player.maxHealth, 1);

});

laser.trackSprite(player, 0, 0, true);

arrowKey = game.input.keyboard.createCursorKeys();

scoreText = game.add.text(20, 20, 'Score: ' + score, { fontSize: '20px', fill: '#222222' } );

//score moves when the camera moves

scoreText.fixedToCamera = true;

var healthText = game.add.text(325, 20, 'Health', { fontSize: '20px', fill: '#222222' } );

healthText.fixedToCamera = true;

messageText = game.add.text(500, 100, '', { fontSize: '48px' } );

messageText.anchor.set(0.5, 0.5);

messageText.setShadow(2, 2, '#000000', 2);

messageText.fixedToCamera = true;

messageText.visible = false;

var barBackground, barOutline;

barBackground = game.add.image(400, 20, 'red-bar');

barBackground.fixedToCamera = true;

healthBar = game.add.image(400, 20, 'green-bar');

healthBar.fixedToCamera = true;

barOutline = game.add.image(400, 20, 'bar-outline');

barOutline.fixedToCamera = true;

barOutline = game.add.image(780, 20, 'bar-outline');

barOutline.fixedToCamera = true;

catSound = game.add.audio('cat-sound', 0.2);

spikeSound = game.add.audio('bleed', 0.2);

patchupSound = game.add.audio('meds', 0.2);

coinSound = game.add.audio('coin', 0.2);

powerUpSound = game.add.audio('power', 0.2);

cdeathSound = game.add.audio('cd', 0.3);

// day n' nite cycle

game.time.events.loop(Phaser.Timer.SECOND * 3, fadeDay, this);

game.time.events.loop(Phaser.Timer.SECOND * 7, fadeSet, this);

game.time.events.loop(Phaser.Timer.SECOND * 12, fadeNight, this);

game.time.events.loop(Phaser.Timer.SECOND * 15, fadeRise, this);

}

// update gameplay - runs in continuous loop after "create" finished

function update() {

//causes the player to collide with objects

game.physics.arcade.collide(player, platformGroup);

game.physics.arcade.collide(player, wallGroup);

game.physics.arcade.collide(catGroup, platformGroup, patrolPlatform, null, this);

game.physics.arcade.collide(catGroup, wallGroup);

game.physics.arcade.collide(coinGroup, platformGroup);

game.physics.arcade.collide(coinGroup, wallGroup);

game.physics.arcade.overlap(player, catGroup, touchCat, null, this);

game.physics.arcade.collide(spikeGroup, platformGroup);

game.physics.arcade.collide(player, spikeGroup, touchSpike, null, this);

game.physics.arcade.overlap(player, firstAidGroup, refillLife, null, this);

game.physics.arcade.collide(firstAidGroup, platformGroup);

game.physics.arcade.collide(laser.bullets, catGroup, shootCat, null, this);

//when the player and a coin collide, call the collectCoin function

game.physics.arcade.collide(player, coinGroup, collectCoin, null, this);

game.physics.arcade.collide(player, powerUpGroup, collectPowerUp, null, this);

// CHECK PLAYER INPUT

if (arrowKey.right.isDown) {

    var runSpeed = 400;

    if (powerUpActive) runSpeed = 500;

    player.body.velocity.x = runSpeed;

    player.animations.play('right');

    

}

else if (arrowKey.left.isDown) {

    var runSpeed = -200;

    if (powerUpActive) runSpeed = -300;

    player.body.velocity.x = runSpeed;

    player.animations.play('left');

   

}

else {

    player.body.velocity.x = 0;

    player.animations.stop();

    player.frame = 4;

   

}


if (arrowKey.up.justDown && player.body.touching.down) {

    var jumpSpeed = -300;

    if (powerUpActive) jumpSpeed = -450;

    player.body.velocity.y = jumpSpeed;

   

}

if (fireKey.isDown && player.exists === true) {

    laser.fire();

}

// BACKGROUND PARALLAX - this will cause the background to move slowly the opposite direction as the camera/player - smaller numbers move at a slower rate - closer objects should move faster

sky.tilePosition.x = game.camera.x * -0.2;

mountains.tilePosition.x = game.camera.x * -0.3;

mountainsn.tilePosition.x = game.camera.x * -0.3;

mountainsrs.tilePosition.x = game.camera.x * -0.3;

city.tilePosition.x = game.camera.x * -0.4;

cityd.tilePosition.x = game.camera.x * -0.4;

// CHECK CAT ANIMATIONS

catGroup.forEach(function (cat) {

    if (cat.body.velocity.x < 0) cat.animations.play('left');

    else cat.animations.play('right');

});

}

// add custom functions (for collisions, etc.)

function collectCoin(player, coin) {

coin.kill();

score += 50;

scoreText.text = 'Score: ' + score;

}

function patrolPlatform(enemy, platform) {

// if enemy/cat about to go over right or left edge of platform

if (enemy.body.velocity.x > 0 && enemy.right > platform.right

|| enemy.body.velocity.x < 0 && enemy.left < platform.left) {

    enemy.body.velocity.x *= -1; // reverse direction

}

}

function touchCat(player, cat) {

cat.body.velocity.x *= -1;

cat.body.velocity.y = 150;

if (player.x < cat.x) cat.x += 20;

else cat.x -= 20;

catSound.play();

player.damage(5);

healthBar.scale.setTo(player.health / player.maxHealth, 1);

}

function collectPowerUp(player, powerUp){

powerUp.kill();

powerUpActive = true;

messageText.text = 'Power Boost';

messageText.fill = '#00ff00';

messageText.visible = true;

player.tint = '0x00ff00';

game.time.events.add(Phaser.Timer.SECOND * 10, stopPowerUp, this);

powerSound.play();

}

function stopPowerUp() {

powerUpActive = false;

messageText.visible = false;

player.tint = '0xffffff';

}

function touchSpike(player, spike) {

if (spike.x < player.x) player.x += 20;

else player.x -= 20;

spikeSound.play();

player.damage(10);

healthBar.scale.setTo(player.health / player.maxHealth, 1);

}

function refillLife(player, firstAid) {

firstAid.kill();

player.health = 100;

healthBar.scale.setTo(player.health / player.maxHealth, 1);

patchupSound.play();

}

function shootCat(laser, cat) {

cat.kill();

laser.kill();

fireSound.play();

cdeathSound.play();

score = score + 500;

scoreText.text = 'Score: ' + score;

}

// day n' nite cycle

function fadeDay() {

game.add.tween(mountains).to( {alpha: 0}, 2000, Phaser.Easing.Linear.None, true);

}

function fadeSet() {

game.add.tween(mountainsrs).to( {alpha: 0}, 2000, Phaser.Easing.Linear.None, true);

}

function fadeNight() {

game.add.tween(mountainsrs).to( {alpha: 1}, 2000, Phaser.Easing.Linear.None, true);

}

function fadeRise() {

game.add.tween(mountains).to( {alpha: 1}, 2000, Phaser.Easing.Linear.None, true);

}

And right here I have the Leap Motion controls coded

var LeapController = function (player) {

this.player = player;

// creates a new Leap Controller object

this.controller = new Leap.Controller({enableGestures: true});

// connect the controller with the web socket

this.controller.connect();

}

LeapController.prototype = {

constructor: LeapController,

update: function() {

    var player = this.player;

    var leapToScene = this.leapToScene;

    this.controller.on('frame', function(frame){

        // loop through the hands array returned from 'frame'

        for (var i=0; i < frame.hands.length; i++){

            // for each hand:

            var hand = frame.hands[i];

            // get the hand position in canvas coordination by using leapToScene function

            var handPos = leapToScene(frame, hand.palmPosition, w, h);

            // grabStrength has value from 0 to 1

            if (hand.grabStrength == 1 ){

                // if grabStrength = 1, let the player fire a laser

                player.fire();

            }

            // update new aircraft's position according to the position of the player's hand

            player.sprite.x = handPos[0];

            player.sprite.y = handPos[1];

        }

    });

},

leapToScene: function(frame , leapPos, gameDivWidth, gameDivHeight ){

    // Gets the interaction box of the current frame

    var iBox = frame.interactionBox;

    // Gets the left border and top border of the box

    // In order to convert the position to the proper

    // location for the canvas

    var left = iBox.center[0] - iBox.size[0]/2;

    var top = iBox.center[1] + iBox.size[1]/2;

    // Takes our leap coordinates, and changes them so

    // that the origin is in the top left corner

    var x = leapPos[0] - left;

    var y = leapPos[1] - top;

    // Divides the position by the size of the box

    // so that x and y values will range from 0 to 1

    // as they lay within the interaction box

    x /= iBox.size[0];

    y /= iBox.size[1];

    // Uses the height and width of the canvas to scale

    // the x and y coordinates in a way that they

    // take up the entire canvas

    x *= gameDivWidth;

    y *= gameDivHeight;

    // Returns the values, making sure to negate the sign

    // of the y coordinate, because the y basis in canvas

    // points down instead of up

    return [ x , -y ];

}

}

Can someone please help me, I have it referenced in the HTML but I can't use the controller to interact with the character?

[ssstratton]

Sorry - but there's too much code for me to see where the problem is. If you could isolate the actual issue - you might have better response.

In case it helps - here is some (cut from own code) code that works for me - it is in working code - but the code I have will just confuse things.

Hope this helps
Andy

1. // Setup handling (I don't use the leap loop anymore...):
   var leap = new Leap.Controller()
   leap.on('connect', function () {
   leap.on('frame', handler)
   })
2. // the handler - called every so often...
   handler = function (frame) {
   if (frame.hands) {
   if (frame.hands.length >= 1) {
   var hand = frame.hands[0]
   var [x, y, z] = hand.palmPosition
   var strength = hand.grabStrength
3. // connect here
   leap.connect()

[GhostAct]

Apologies, this shortened bit should make things better could you please help in the sense of how I should correctly have the work with Phaser.io

this.player = player;

// creates a new Leap Controller object

this.controller = new Leap.Controller({enableGestures: true});

// connect the controller with the web socket

this.controller.connect();
}

LeapController.prototype = {

constructor: LeapController,

update: function() {

var player = this.player;

var leapToScene = this.leapToScene;

this.controller.on('frame', function(frame){

    // loop through the hands array returned from 'frame'

    for (var i=0; i < frame.hands.length; i++){

        // for each hand:

        var hand = frame.hands[i];

        // get the hand position in canvas coordination by using leapToScene function

        var handPos = leapToScene(frame, hand.palmPosition, w, h);

        // grabStrength has value from 0 to 1

        if (hand.grabStrength == 1 ){

            // if grabStrength = 1, let the player fire a laser

            player.fire();

        }

        // update new aircraft's position according to the position of the player's hand

        player.sprite.x = handPos[0];

        player.sprite.y = handPos[1];

    }

});

},

leapToScene: function(frame , leapPos, gameDivWidth, gameDivHeight ){

// Gets the interaction box of the current frame

var iBox = frame.interactionBox;

// Gets the left border and top border of the box

// In order to convert the position to the proper

// location for the canvas

var left = iBox.center[0] - iBox.size[0]/2;

var top = iBox.center[1] + iBox.size[1]/2;

// Takes our leap coordinates, and changes them so

// that the origin is in the top left corner

var x = leapPos[0] - left;

var y = leapPos[1] - top;

// Divides the position by the size of the box

// so that x and y values will range from 0 to 1

// as they lay within the interaction box

x /= iBox.size[0];

y /= iBox.size[1];

// Uses the height and width of the canvas to scale

// the x and y coordinates in a way that they

// take up the entire canvas

x *= gameDivWidth;

y *= gameDivHeight;

// Returns the values, making sure to negate the sign

// of the y coordinate, because the y basis in canvas

// points down instead of up

return [ x , -y ];

}
}

[ssstratton]

I'm not sure why you've changed the leap controller prototype - try taking the update code out and running it direct, i.e. remove this bit:

LeapController.prototype = {
constructor: LeapController,
update: function() {

...and it's closing brace - and run directly in your setup code. This might not be the problem - but I didn't need to override the prototype...

Cheers - Andy

[GhostAct]

Well I tried running the sensor in direct mode wit no luck it responding correctly to the code. Do you mind looking at my code to understand whats wrong (the player is supposed to follow the cursor and when grab strength is 1 the player shoots a bullet) I would really appreciate it if you could? The link is https://drive.google.com/drive/folders/1873B4OEUU3kTpb3y2qM3qr9QDluRx4Bs?usp=sharing

[ssstratton]

I can't remember whether it's essential - but try adding:
<script src="/libs/leap-plugins-0.1.11.js" type="text/javascript"></script>
Came from github - I think - and there's probably a newer version...

You're also including 'phase.js' that doesn't exist.

Check the browser console when you run - Ctrl-Shift-I in Chrome - check for any errors.