Move object with keyboard
fgb01

Good night people,
I'm a beginner here and would like to know how I can do to move an object using the keyboard keys ... type a simple platform game, with jump, shooting and etc ... everything with the keyboard because with the mouse I got it.
Could you please help me?
Thank you very much.

All 9 Comments
krumza

HI, there are lot methods for this. Code below is just example (working)

1 - When your app-logic in js file:

App = function()
{
    // this is where the WADE app is initialized
	this.init = function()
	{
        // load a scene
		wade.loadScene('scene1.wsc', true, function()
        {
            //put logic here if you have some scenes
            var sprite = new Sprite('bullet.png');
            var obj = new SceneObject(sprite);
            wade.addSceneObject(obj);
            obj.setName("a");            
            
            wade.app.onKeyDown = function(data) {
            	//try to see data with console.log(data);
            	var obj = wade.getSceneObject('a');
            	var pos = obj.getPosition();
            	if(data.keyName=='a'){
            	    //try all 
            	    //first method
                    //obj.setVelocity(-100,0);
                    //second method
                    //obj.moveTo(pos.x-100,pos.y,100);
                    //third method
                    obj.setPosition(pos.x-100,pos.y);
            	}
            	else if(data.keyName=='w'){
    				//move up - descrease coordinate y;  x - dont change            
            	}
            	else if(data.keyName=='s'){
                    //move down - increase coordinate y;  x - dont change
            	}
                else if(data.keyName=='d'){
                    //move right - increase x, y - dont change
            	}
            	else if(data.keyName=='space'){
            	    //jump = just example
            	    if(obj.jump===true) return true;            	    
                    obj.jump=true;                    
                    var PseudoJump = function() {
                      var i = 0;
                      var timerId = setInterval(function() {
                        if (i >= 300) {
                            clearInterval(timerId);
                            obj.jump=false;
                        }
                        i+=5;
                        obj.setPosition(pos.x,pos.y+((i-300)*(i)/300));
                      }, 16);
                    };
                    
                    PseudoJump();                    
            	}
            	return true;
            };
        });
	};
	//or here if you have one scene
    //wade.app.onKeyDown = function(data) {
    //  code...
  	//};	
	
	
};

2. If you work in editor  - open the object functions and choose the onKeyDown (or what you use) and same code

var pos = this.getPosition();
if(data.keyName=='a'){
    //try all 
    //first method
    //this.setVelocity(-100,0);
    //second method
    //this.moveTo(pos.x-100,pos.y,100);
    //third method
    this.setPosition(pos.x-100,pos.y);
}

 

fgb01

Good Morning...
And what would be the best way ... seen by the performance of the application?
Because I'm trying to move the initial square from side to side ... but when you release the left key and press the right one it locks to move again ...
I did this in the editor onKeydown:

Var pos = this.getPosition ();
Var mvesq = false;
Var mvdir = false;

If (data.keyName === 'left') {
     Mvesq = true;
     If (mvesq === true) {
         This.setVelocity (-100,0);
     }
}
If (data.keyName === 'right') {
     Mvdir = true;
     If (mvdir === true) {
         This.setVelocity (100,0);
     }
}

And onKeyKey:

Var pos = this.getPosition ();
Var mvesq = false;
Var mvdir = false;

If (data.keyName === 'left') {
     Mvesq = false;
  If (mvesq === false) {
         This.setVelocity (0, pos.y);
     }
}
If (data.keyName === 'right') {
     Mvdir = false;
  If (mvdir === false) {
         This.setVelocity (0, pos.y);
     }
}

Could you help me, please ?
Thank you.

krumza

Well, to be honest I've never done a platformer it was on WADE

you asked: "And what would be the best way ... seen by the performance of the application?"

Both ways are equally very fast - do what you like

As for control - I don't know what you exactly want to implement in the platform there are several types of motion

1 - when after clicking the object moves in a certain direction

2 - when after clicking the object moves by a certain amount(step movement)

3 - the movement is performed only when a key is pressed.

As for your code then look:

onKeydown:

Var pos = this.getPosition ();

Var mvesq = false;//it local variable!!! another functions not see it
Var mvdir = false;//it local variable!!! another functions not see it

If (data.keyName === 'left') {
     Mvesq = true;
     If (mvesq === true) {
         This.setVelocity (-100,0);
     }
} //non blocked rule!!!
If (data.keyName === 'right') {
     Mvdir = true;
     If (mvdir === true) {
         This.setVelocity (100,0);
     }
}

onKeyUp:

Var pos = this.getPosition ();//this function return an object coordinates

Var mvesq = false;//local variable!!! another functions not see it
Var mvdir = false;//local variable!!! another functions not see it

If (data.keyName === 'left') {
     Mvesq = false;
  If (mvesq === false) {
         This.setVelocity (0, pos.y);//obj.setVelosity(x,y) set Velosity!! no need insert coordinates here!!!
     }
}//non blocked rule
If (data.keyName === 'right') {
     Mvdir = false;
  If (mvdir === false) {
         This.setVelocity (0, pos.y);
     }
}

I try to fix^

onKeydown:

//block rule for different keys!!! use else if or "switch case" construction

if (data.keyName === 'left') {
    this.setVelocity (-100,0);
} else if (data.keyName === 'right') {
    this.setVelocity (100,0);
}

onKeyUp:

if (data.keyName === 'left'||data.keyName === 'right') {
   this.setVelocity (0, 0);//it speed not coords;))
}

 

foxcode

Hi fgb01

Here is a very simple way using the wade.isKeyDown function

Say we have a platformer, our character can run left, right and can jump

I would start by adding an onUpdate function to the character. Alternatively, if you already have an onUpdate function for the app itself you could do it there. This is because we need to check the user input every frame for a smooth experience.

Create an object to easily define your control mapping, below is a simple example

// ONLY DO ONE OF THESE NOT BOTH

// Simple 1 key per movement
var controlKeys =
{
    left: "left",
    right: "right",
    jump: "space"
};

// Multiple keys per movement, here we have added wasd support
var controlKeys =
{
    left:["a", "left"],
    right:["d", "right"],
    jump:["w", "space"]
};


Now in our on update function, using the simple example of one key per input, we can check if the key is down then take action
 

// Somewhere inside onUpdate

if(wade.isKeyDown(controlKeys.left))
{
    // Code to move our character left
}
if(wade.isKeyDown(controlKeys.right))
{
    // Code to move our character right
}
if(wade.isKeyDown(controlKeys.jump))
{
    // Code to jump
}


If you use the multiple key example, then you have to loop over the array for each direction, so for left you could do this

for(var i=0; i<controlKeys.left.length; i++)
{
    if(wade.isKeyDown(controlKeys.left[i]))
    {
        // Move left code
        break; // We don't want to trigger the movement twice
    }
}


Hopefully that gives you some ideas. If you have any problems please reply to this thread

Good luck

fgb01

I'm doing it for the editor ...
What is the best way to do the codes ... by the editor itself or via js script?

Thank you very much...
The krumza solution along with that of foxcode solved my problem.
I am very happy to be in a friendly and willing community ...
I am a beginner however as soon as I learn and you need help I will be ready to help.

fgb01

Good afternoon foxcode
It works fine but when I use the onKeyup event it says it's not a function ... I want to do something when I release the key ...
Thank you very much.

Follow the code:

If (wade.isKeyup (controlKeys.left))
{
     This.setVelocity (0,0);
}

fgb01

Good morning people...
Trying here I already got ... thank you very much.

foxcode
if (wade.isKeyup (controlKeys.left))
{
     This.setVelocity (0,0);
}


There is no wade.isKeyup function. You can get the same answer by simply doing !wade.isKeydown(controlKeys.left) or wade.isKeyDown(controlKeys.left)  == false

If you want to execute something the moment the key is released, you can use the onKeyUp event. This can be found in the functions list for the scene object. You can look at the data object this recieves to work out which key has been released, and then execute whatever code you wish
 

fgb01

I already got this same way Foxcode ...
But obliging for attention!
I am now researching about collision, gravity, jump and shoot.

Post a reply
Add Attachment
Submit Reply
Login to Reply