06MA4010991AP
Computer Game Design

Week 7

Keyboard control and navigation

In processing, key events are handled by keyPressed() and keyReleased() functions



void keyPressed()
{
  if(key == 'a')
  {
    println("You have pressed A");
  }
}

However, coded keys e.g: ESC, UP, DOWN, ENTER, etc are not included in key. Use keycode instead.



void keyPressed()
{
  if(keyCode == UP)
  {
    println("You have pressed UP");
  }
}

Class exercise: Using keyboard input to have basic control of a ball position.

 

Multi key inputs:

Operating system may register a long key press as a repetition of key presses and keyPressed / keyReleased function does only return 1 keyeach time. To let processing recognize multiple keys we have pressed, see the code below:



boolean pressedA,pressedB;
 
void setup()
{
  size(320,240);
  pressedA = false;
  pressedB = false;
}
 
void draw()
{  
  background(0);
  if(pressedA)
  {
    rect(50,100,10,10);
  }
  if(pressedB)
  {
    ellipse(150,100,10,10);
  }
}
 
void keyPressed()
{
  if(key == 'a')
  {
    pressedA = true;
  }
  else if(key == 'b')
  {
    pressedB = true;  
  }
}
 
void keyReleased()
{
  if(key == 'a')
  {
    pressedA = false;
  }
  else if(key == 'b')
  {
    pressedB = false;  
  }
}

 

Add in speed and boundaries



float ballX;
float ballY;
float ballSpeedX;
float ballSpeedY;
 
boolean upPressed,downPressed,leftPressed,rightPressed;
 
void setup()
{
  size(800,600);  
  smooth();
  ballX = width/2;
  ballY = height/2;
  ballSpeedX = 0;
  ballSpeedY = 0;
}
 
void draw()
{
  background(0);
   
  ballSpeedX *= 0.98;
  ballSpeedY *= 0.98;
  if(upPressed)
  {
    ballSpeedY += (-5 -ballSpeedY) * 0.1;
  }
  if(downPressed)
  {
    ballSpeedY += (5 -ballSpeedY) * 0.1;
  }
  if(leftPressed)
  {
    ballSpeedX += (-5 -ballSpeedX) * 0.1;
  }
  if(rightPressed)
  {
    ballSpeedX += (5 -ballSpeedX) * 0.1;
  }
   
   
  ballX += ballSpeedX;
  ballY += ballSpeedY;
   
  if(ballX<0)
  {
    ballX = 0;
    ballSpeedX = abs(ballSpeedX);  
  }
  else if(ballX>width)
  {
    ballX = width-1;
    ballSpeedX = -abs(ballSpeedX);  
  }
  if(ballY<0)
  {
    ballY = 0;
    ballSpeedY = abs(ballSpeedY);  
  }
  else if(ballY>height)
  {
    ballY = height-1;
    ballSpeedY = -abs(ballSpeedY);  
  }
   
  ellipse(ballX,ballY,20,20);
}
 
void keyPressed()
{
  if(key == 'w')
  {
    upPressed = true;
  }
  else if(key == 's')
  {
    downPressed = true;  
  }
  else if(key == 'a')
  {
    leftPressed = true;
  }
  else if(key == 'd')
  {
    rightPressed = true;
  }
}
 
void keyReleased()
{
  if(key == 'w')
  {
    upPressed = false;
  }
  else if(key == 's')
  {
    downPressed = false;  
  }
  else if(key == 'a')
  {
    leftPressed = false;
  }
  else if(key == 'd')
  {
    rightPressed = false;
  }
}

 

Polar coordinate system

In processing the polar coordinate system looks like this. Beware that it is reverse direction (clockwise) which is different from original polar coordinate system. It is due to the Y axis in processing is flipped (positive Y points downwards). Thus we can find a point's Cartesian coordinate (x,y or x,y,z) by the angle and distance.

source

This graph assume center of canvas be (0,0), so that the angle between lines is around 150degree (2.62radians) and the distance is 133px. From these data we can calculate the corrdinate by

x = cos(angle)*dist;
y = sin(angle)*dist;

for vice versa,

or processing actually did this job too, by using atan2(y difference,x difference)

 

Class Exercise

Make an object move base on it's angle and speed.

 

source

 

Make a acceleration and damping



float arrowX;
float arrowY;
float arrowAngle;
float arrowAcceleration;
float arrowSpeedX;
float arrowSpeedY;
 
boolean upPressed,downPressed,leftPressed,rightPressed;
 
void setup()
{
  size(800,600);
  smooth();
  arrowX = width/2;
  arrowY = height/2;
  arrowAcceleration = 0;
  arrowAngle = 0;
  arrowSpeedX = 0;
  arrowSpeedY = 0;
}
 
void draw()
{
  background(0);
  arrowAcceleration *= 0.99;
  arrowSpeedX *=0.99;
  arrowSpeedY *=0.99;
  if(upPressed)
  {
    //arrowAcceleration += (25 -arrowSpeed) * 0.1;
    arrowAcceleration++;
    if(arrowAcceleration >25)
 arrowAcceleration = 25;
    arrowSpeedX = arrowSpeedX*0.99 + sin(arrowAngle)*arrowAcceleration*0.01;
    arrowSpeedY = arrowSpeedY*0.99 + cos(arrowAngle)*arrowAcceleration*0.01;
  }
  if(downPressed)
  {
    //arrowAcceleration += (-25 -arrowSpeed) * 0.1;
    arrowAcceleration--;
    if(arrowAcceleration <-25)
 arrowAcceleration = -25;
    arrowSpeedX = arrowSpeedX*0.99 + sin(arrowAngle)*arrowAcceleration*0.01;
    arrowSpeedY = arrowSpeedY*0.99 + cos(arrowAngle)*arrowAcceleration*0.01;
  }
  if(leftPressed)
  {
    arrowAngle += radians(5);
  }
  if(rightPressed)
  {
    arrowAngle -= radians(5);
  }
 
  arrowX += arrowSpeedX;
  arrowY += arrowSpeedY;
  if(arrowX<0)
    arrowX += width;
  else if(arrowX>=width)
    arrowX -= width;
 
  if(arrowY<0)
    arrowY += height;
  else if(arrowY>=height)
    arrowY -= height;
 
  pushMatrix();
  translate(arrowX,arrowY);
 
  rotate(-arrowAngle);
  triangle(-10,-10,10,-10,0,15);
 
  popMatrix();
 
}
 
 
void keyPressed()
{
  if(key == 'w')
  {
    upPressed = true;
  }
  else if(key == 's')
  {
    downPressed = true;  
  }
  else if(key == 'a')
  {
    leftPressed = true;
  }
  else if(key == 'd')
  {
    rightPressed = true;
  }
}
 
void keyReleased()
{
  if(key == 'w')
  {
    upPressed = false;
  }
  else if(key == 's')
  {
    downPressed = false;  
  }
  else if(key == 'a')
  {
    leftPressed = false;
  }
  else if(key == 'd')
  {
    rightPressed = false;
  }
}


Remember this?

 

Make use of advantages in processing

source

Use PImage as background, also check the color to change the speed.

 

class exercise

Add functions to the game:
1) check points
2) count laps
3) count finish time

my version of the game with source