The paddle of pong keeps shaking without staying at one position

Question

Please look at the following structure of my pong game.

gameLoop(); method

   //Only run this in another Thread!
   private void gameLoop()
   {
      //This value would probably be stored elsewhere.
      final double GAME_HERTZ = 30.0;
      //Calculate how many ns each frame should take for our target game hertz.
      final double TIME_BETWEEN_UPDATES = 1000000000 / GAME_HERTZ;
      //At the very most we will update the game this many times before a new render.
      //If you're worried about visual hitches more than perfect timing, set this to 1.
      final int MAX_UPDATES_BEFORE_RENDER = 5;
      //We will need the last update time.
      double lastUpdateTime = System.nanoTime();
      //Store the last time we rendered.
      double lastRenderTime = System.nanoTime();

      //If we are able to get as high as this FPS, don't render again.
      final double TARGET_FPS = 60;
      final double TARGET_TIME_BETWEEN_RENDERS = 1000000000 / TARGET_FPS;

      //Simple way of finding FPS.
      int lastSecondTime = (int) (lastUpdateTime / 1000000000);

      while (running)
      {
         double now = System.nanoTime();
         int updateCount = 0;

         if (!paused)
         {

             //Do as many game updates as we need to, potentially playing catchup.
            while( now - lastUpdateTime > TIME_BETWEEN_UPDATES && updateCount < MAX_UPDATES_BEFORE_RENDER )
            {
               updateGame();
               lastUpdateTime += TIME_BETWEEN_UPDATES;
               updateCount++;
            }



            //If for some reason an update takes forever, we don't want to do an insane number of catchups.
            //If you were doing some sort of game that needed to keep EXACT time, you would get rid of this.
            if ( now - lastUpdateTime > TIME_BETWEEN_UPDATES)
            {

               lastUpdateTime = now - TIME_BETWEEN_UPDATES;
            }


            //Render. To do so, we need to calculate interpolation for a smooth render.
           float interpolation = Math.min(1.0f, (float) ((now - lastUpdateTime) / TIME_BETWEEN_UPDATES) );

           //float interpolation = 1.0f;

            drawGame(interpolation);
            lastRenderTime = now;

            //Yield until it has been at least the target time between renders. This saves the CPU from hogging.
            while ( now - lastRenderTime < TARGET_TIME_BETWEEN_RENDERS && now - lastUpdateTime < TIME_BETWEEN_UPDATES)
            {
               Thread.yield();

               //This stops the app from consuming all your CPU. It makes this slightly less accurate, but is worth it.
               //You can remove this line and it will still work (better), your CPU just climbs on certain OSes.
               //FYI on some OS's this can cause pretty bad stuttering. Scroll down and have a look at different peoples' solutions to this.
               try {Thread.sleep(1);} catch(Exception e) {} 

               now = System.nanoTime();
            }


         }
      }
   }

updateGame(); method

  if(p1_up){


        if(player.equals("p1")){
                    p1.moveUp();
        }
        else
        {

                    p2.moveUp();

        }


  }
  else if(p1_down){


          if(player.equals("p1")){

                    p1.moveDown();

          }
          else
          {

                p2.moveDown();

          }


  }

moveUp(); moveDown(); method of paddle

  public void moveUp(){

      last_y = y;
      last_x = x;

      y -= 50.0;


  }




  public void moveDown(){

      last_y = y;
      last_x = x;

      y += 50.0;


  }

drawGame(interpolation); method

      public void paintComponent(Graphics g)
      {

          super.paintComponent(g);

          for(int i=0;i<balls.size();i++){

              paintBall(g, balls.get(i));

          }

          drawPaddle(g, p1);          
          drawPaddle(g, p2);




      }





      public void drawPaddle(Graphics g, Paddle p){


          paddle_drawX = (int)((p.x - p.last_x)*interpolation + p.last_x);
          paddle_drawY = (int)((p.y - p.last_y)*interpolation + p.last_y);



              g.drawRect(paddle_drawX, paddle_drawY, 10, 50);


      }

I am a beginner in game programming so i don't have a good idea about game loops. I found the above fixed time-step game loop in the internet and used it as the game loop for my game. The loop makes the ball move smoothly but the paddle isn't staying at one place when moved. When I move my paddle by pressing one down key stroke then the paddle keeps shaking without stopping in one spot. The y coordinates of the paddle keeps changing like

33, 45, 20, 59, 34, 59, 34, 59, 33, 59, 34, 58

I know the problem is in interpolation value as it keeps changing value that will change the y coordinate of paddle in render. I have been thinking about this for a while and i don't know how to make the game loop work for any movements so i have come here for some help. I appreciate any suggestion/help!

Here is my full Paddle class.

   public class Paddle
   {

       float x;
       float y;      
       float last_y;
       float last_x;

      public Paddle(int x, int y)
      {

          this.x = x;
          this.y = y;
          this.last_x = x;
          this.last_y = y;

      }


      public void setNewX(int d){


      last_y = y;
      last_x = x;

      x = d;


      }


      public void setNewY(int d){

      last_y = y;
      last_x = x;

      y = d;


      }

      public void moveUp(){

          last_y = y;
          last_x = x;

          y -= 50.0;


      }




      public void moveDown(){

          last_y = y;
          last_x = x;

          y += 50.0;


      }



    }

and i initiate the paddle position in the main class through global variable.

public Paddle p1 = new Paddle(10, 10);
public Paddle p2 = new Paddle(950, 10);

I have following event listeners for handling key strokes.

  Action handle_up_action = new AbstractAction(){

      public void actionPerformed(ActionEvent e){

          p1_up = true;


      }

  };



  Action handle_up_action_released = new AbstractAction(){

      public void actionPerformed(ActionEvent e){

          p1_up = false;
      }

  };


  Action handle_down_action = new AbstractAction(){

      public void actionPerformed(ActionEvent e){

          p1_down = true;


      }

  };



  Action handle_down_action_released = new AbstractAction(){

      public void actionPerformed(ActionEvent e){

          p1_down = false;

      }

  };

Answer 1

What are you trying to achieve with interpolation? From my understanding, it represents the percentage of time elapsed between previous previous and next "update time". So it should progress continuously from 0 to 1 each 33.3 ms.

I don't know how you use this interpolation variable in the paintBall method, but for the paddles, it will draw your paddle at a "pseudo random position" between p.x;p.y and p.last_x;p.last_y (depending on the time between the two updateGame()).

In order to correct this, from your loop logic, you should understand that every game entity (balls, paddles, ...) must have two states (the positions): - the logical state, which is updated only each TIME_BETWEEN_UPDATES - the visual state, which can be updated anytime, at each render.

It is the same as if you have a set of points (which represent the logical states) and you want to interpolate anywhere between this points (reprensenting the visual state). Your code is like this.

First solution

The simplest way to correct the paddle shaking, is to avoid the interpolation and use:

public void drawPaddle(Graphics g, Paddle p){
   paddle_drawX = (int)p.x;
   paddle_drawY = (int)p.y;
   g.drawRect(paddle_drawX, paddle_drawY, 10, 50);
}

But your movement will look like this (visual position will be changed only each TIME_BETWEEN_UPDATES)

Second solution

You want p.x;p.y to be the logical position, but the visual position should be interpolated between p.last_x;p.last_y and the logical position if the rendering is done between the input processing and the next updateGame(): you must reset p.last_x;p.last_y when updateGame() is called. To achieve this, call the paddles' updateMovement() method inside updateGame().

public void updateMovement(){
    last_y = y;
    last_x = x;
}

You can have other solutions, such as to use a speed variable or a movement function, in order to have a smooth movement, accelerations, and so on. It is mainly a generalisation of second solution. It requires bigger changes, but it is more flexible and powerful. To achieve this, you may want to store in paddles the last "update position", and all movement-related variables, such as movement start date. Add a method to retrieve the "visual position" that can be called with any date between two updates, and a method to update the "logical position" called each updateGame().