Jump&Crouch Catalogue

Operating Summary

Jump&Crouch is an application that will detect jump or crouch, making the character on screen perform the same action.

If you follow this tutorial you will come to understand these two features better (jump and crouch), so that we can implement or modify it in future applications.

Web

This application incorporates the possibility of using it without using a sensor, to use it we will press the up or down arrow keys to simulate our movements.

Code

To start, we go to the HTML tab in which we will find:

<div id="jumping"></div>
<div id="standing"></div>
<div id="crouching"></div>

These div will represent the positions of the character on the screen.

In the CSS tab, we will assign the images and positions of these div.

#jumping, #standing, #crouching{
    position: absolute;
    bottom: 60px;
    left: 0px;
    width: 100%;
    height: 100%;
    background-size: 800px 800px;
    background-position: bottom;
    background-repeat: no-repeat;
}

#jumping{
    background-image: url('{resources:images/jumping-einstein-v2.png}');
    opacity: 0;
}

#standing{
    background-image: url('{resources:images/standing-einstein-v2.png}');
    opacity: 1;
}

#crouching{
    background-image: url('{resources:images/crouching-einstein-v3.png}');
    opacity: 0;
}

In the Ubox Event tab we can find the following functions:

function standingPosition(){
    console.log("standPos");
    $('#running').css('opacity', '0');
    $('#jumping').css('opacity', '0');
    $('#standing').css('opacity', '1');
    $('#crouching').css('opacity', '0');
}

function jumpingPosition(){
   console.log("Jump");
   $('#running').css('opacity', '0');
   $('#jumping').css('opacity', '1');
   $('#standing').css('opacity', '0');
   $('#crouching').css('opacity', '0');
            canJump = false;
   TweenMax.to('#shadow', 0.3, {scaleY: 0.95, ease:Power1.easeOut, alpha: 0.5});
   TweenMax.to('#jumping', 0.3, {bottom: 170, ease:Power1.easeOut, onComplete: function(){
       TweenMax.to('#shadow', .25, {scaleY: 1, ease:Power1.easeIn, alpha: 1});
       TweenMax.to('#jumping', .25, {bottom: 60, ease:Power1.easeIn, onComplete: function(){
           canJump = true;
           standingPosition();
        }});
    }});
}

function crouchingPosition(){
   console.log("Crouch");
   $('#running').css('opacity', '0');
   $('#jumping').css('opacity', '0');
   $('#standing').css('opacity', '0');
   $('#crouching').css('opacity', '1');
   TweenMax.to('#crouching', 0.3, {scaleY: 0.95, transformOrigin:'0% 100%', onComplete:function(){
        TweenMax.to('#crouching', 0.25, {scaleY: 1, transformOrigin:'0% 100%'});
        standingPosition();
    }});
}

These functions, when  executed, will make the character on the screen take different positions.

Now we will check when they are executed.

var jumpingValue = 60;
var crouchingValue = -50; 

function updateJump(jumpValue){
  if(canJump){
        if (jumpValue > jumpingValue){
            jumpingPosition();       
        }else if(jumpValue < crouchingValue){
            crouchingPosition();
        }
  }  
}

The variable jumpingValue and crouchingValue, we can modify it according to the height of the jump or how much should we crouch.

In the updateJump function we have the jumpValue parameter which will identify if the position of our real body.

If jumpValue is higher or lesser depending on the variables,  jumpingPosition(); or crouchingPosition(); functions will be executed and the character on the screen changes position.

Now we can find the function in which the execution of updateJump is located, in the msgFromArduino() function.

function msgFromArduino(value) {
    if (value.indexOf('NewSkl') != -1) {
        clearTimeout(NoSklTimeout);

        if (waitingForPlayer && !playing) {
            waitingForPlayer = false;
            function countdownTime(time) {
                if (time > 0) {
                    time--;
                    NewSklTimeout = setTimeout(function() {
                        countdownTime(time);
                    }, 1000);
                } else {
                    playing = true;
                    clearTimeout(NewSklTimeout);
                }
            }
            console.log("Initializing...");
            countdownTime(NewSklCountdown);
        } else {
            console.log("Not Waiting");
        }

    } else if (value.indexOf('NoSkl') != -1) {
         console.log("NoSkl");

        if (!playing) {
            waitingForPlayer = true;
            clearTimeout(NewSklTimeout);
        } else {
            updateJump(0);
            function confirmNoSkl(timeC) {

                if (timeC > 0) {
                    console.log("timeC" + timeC);
                    timeC--;
                    NoSklTimeout = setTimeout(function() {
                        confirmNoSkl(timeC);
                    }, 1000);
                    console.log("Leaving...");

                } else {
                    console.log("Come here");
                    clearTimeout(NoSklTimeout);
                    waitingForPlayer = true;
                    playing = false;
                }
            }
        }

    }

   if (value.indexOf('&') !== -1) {
           var values = value.split('&')[1].split('|');
           var step = parseInt(values[1]); 
           updateJump(step);
    } else if (value.indexOf('y') !== -1) {
        //$('#log').html(value.substring(2));
    }
}

Apart of the detection or not of our body and other functions, we can find the function updateJump which receives a parameter (step variable) coming from values variable (values come from internal code).