PACMAN Animation Programming part1

[TheNaSiN]

TUTORIAL NO 12

In this tutorial you will learn:

1.Game Programming
2.Swing Animations
3.Event handling
4.JAVA awt
5.JAVA swing
6.KeyListeners

Today I am going to teach you how to make a simple PACMAN mockup. In this tutorial we will only set up the pacman character and will provide functionality to the character using arrow key. After that we will set up the pacman mouth open close animation. Then we will setup it’s collision with a wall. Later on you can use this mockup to make complete game.
In this tutorial we will be working with swing animations and we will draw the pacman using the arc function.

Basic step:
Download and install ECLIPSE and set up a JAVA PROJECT. Then create a new class and name it PacMan. Then follow the steps

1.IMPORT STATEMENTS
First of all write these import statements in your .java file

1. import
   
   java.awt.*
   
   ;
   
2. import
   
   javax.swing.*
   
   ;
   
3. import
   
   java.awt.event.KeyEvent
   
   ;
   
4. import
   
   java.awt.event.KeyListener
   
   ;
   

We require event import for key press, awt and swing imports for visual design and animation. We will be using separate class for JPanel and a public class for JFrame in which we will add the panel in the frame. First thing is setting up the panel and after that we will setup a class in which we will setup the frame. Then we will do composition i.e make and object of the panel class and add it to frame.

2.SETTING UP THE PACPANEL CLASS

1. class
   
   PacPanel extends
   
   JPanel
   
   {
   
2. 
   
3. static
   
   int
   
   s_angle =
   
   45
   
   , e_angle =
   
   270
   
   ;
   
   // starting and ending angle
   
4. static
   
   int
   
   x =
   
   10
   
   , y =
   
   150
   
   , flag =
   
   1
   
   ;
   
5. static
   
   Graphics2D
   
   g2d;
   
6. static
   
   String
   
   direction =
   
   "right"
   
   ;
   
7. Rectangle
   
   r =
   
   new
   
   Rectangle
   
   (
   
   350
   
   , 150
   
   , 10
   
   , 200
   
   )
   
   ;
   
   //wall
   

Here first we make references for starting angle, ending angle of the pacman. After that we make the variables for x and y coordinates, graphics2D reference for animation drawing and a rectangle which will serve as a wall. Note that all the variable we declare here are static because we need to access them from our frame class in which we will implement the keylistener.

1. public
   
   void
   
   paintComponent(
   
   Graphics
   
   g)
   
   {
   
2. super
   
   .paintComponent
   
   (
   
   g)
   
   ;
   
3. g2d =
   
   (
   
   Graphics2D
   
   )
   
   (
   
   g)
   
   ;
   
4. g2d.setColor
   
   (
   
   Color
   
   .BLACK
   
   )
   
   ;
   
5. g2d.draw
   
   (
   
   r)
   
   ;
   
6. g2d.fill
   
   (
   
   r)
   
   ;
   
   // black color rectangle
   
7. g2d.setColor
   
   (
   
   Color
   
   .RED
   
   )
   
   ;
   
8. detectCollision(
   
   )
   
   ;
   
   // checking if the pacman collided with the wall or boundary
   
9. g2d.fillArc
   
   (
   
   x, y, 50
   
   , 50
   
   , s_angle, e_angle)
   
   ;
   
10. 
    
11. try
    
    {
    
12. Thread
    
    .sleep
    
    (
    
    7
    
    )
    
    ;
    
13. }
    
    catch
    
    (
    
    Exception
    
    e)
    
    {
    
    }
    
14. repaint(
    
    14
    
    )
    
    ;
    
15. }
    

In the paintComponend we first type cast the graphics reference to 2D for swing animation. Then we set the color to black because we are going to draw a wall with black color. After that we will draw the wall by drawing a rectangle and fill it with black color. Now we set the color to red because we want the pacman to be of red color. Then we call a detectCollision function which will detect the pacman’s collision with the boundary of the frame as well as with the wall. Then we will draw the pacman character using the arc function and passing the starting and ending angles to it. Then we sleep our animation for few milliseconds to slow down the speed of our animations like mouth open close of the pacman character.

1. void
   
   detectCollision(
   
   )
   
   {
   
2. if
   
   (
   
   direction.equals
   
   (
   
   "up"
   
   )
   
   )
   
   {
   
3. if
   
   (
   
   y <=
   
   10
   
   |
   
   r.intersects
   
   (
   
   x, y, 50
   
   , 50
   
   )
   
   &
   
   y >=
   
   349
   
   )
   
   {
   
   //checking collision in upward direction
   
4. direction =
   
   "down"
   
   ;
   
   // changing direction if collision happens
   
5. s_angle =
   
   225
   
   ;
   
6. e_angle =
   
   -
   
   270
   
   ;
   
7. flag =
   
   1
   
   ;
   
8. }
   
   else
   
   {
   
9. UP(
   
   )
   
   ;
   
   //changing pacman face downwards
   
10. y--;
    
    // moving upwards
    
11. }
    
12. }
    
    //end up
    

In the detectCollision function we will write have to detect all the possible collisions pacman can suffer. So we first of all we will detect when the face is up. If the string variable is set to up then we first continue to check whether pacman hits the wall or not. If it does we simply change the direction of the pacman to down. In this way it will change its direction by 180 degrees. But after changing the direction we have to change the animation angles as well so we set the starting and ending angles. ( Angles can be calculated manually ). Then if that is not the case then we simply set the animation face upwards by calling the up function that we will define later on.

1. 
   
2. if
   
   (
   
   direction.equals
   
   (
   
   "down"
   
   )
   
   )
   
   {
   
3. if
   
   (
   
   y >=
   
   PacMan.jf
   
   .getHeight
   
   (
   
   )
   
   -
   
   100
   
   |
   
   r.intersects
   
   (
   
   x, y, 50
   
   , 50
   
   )
   
   &
   
   y <
   
   200
   
   )
   
   {
   
   //checking collision in downwards
   
4. direction =
   
   "up"
   
   ;
   
   // changing direction if collision happens
   
5. PacPanel.s_angle
   
   =
   
   45
   
   ;
   
6. PacPanel.e_angle
   
   =
   
   -
   
   270
   
   ;
   
7. flag =
   
   1
   
   ;
   
8. }
   
   else
   
   {
   
9. down(
   
   )
   
   ;
   
   //changing pacman face downwards
   
10. y++;
    
    // moving down
    
11. }
    
12. }
    
    //end down
    
13. }
    

Now we check if the pacman’s face is downwards or not. If it is then we first check the collision with the wall and after that with the boundary of the frame. For collision with the wall we simply use the .intersects function for rectangles. If the pacman hit the wall we simply set our string variable to up and set the angles accordingly. Otherwise what we do is simply calling the down function which we will define later on.

1. if
   
   (
   
   direction.equals
   
   (
   
   "right"
   
   )
   
   )
   
   {
   
2. if
   
   (
   
   x ==
   
   PacMan.jf
   
   .getWidth
   
   (
   
   )
   
   -
   
   70
   
   |
   
   (
   
   r.intersects
   
   (
   
   x, y, 50
   
   , 50
   
   )
   
   )
   
   &
   
   x <
   
   350
   
   )
   
   {
   
   //checking collision in right direction
   
3. 
   
4. direction =
   
   "left"
   
   ;
   
   // changing direction if collision happens
   
5. s_angle =
   
   135
   
   ;
   
6. e_angle =
   
   -
   
   270
   
   ;
   
7. flag =
   
   1
   
   ;
   
8. }
   
   else
   
   {
   
9. right(
   
   )
   
   ;
   
   //changing pacman face rightwards
   
10. x++;
    
    // moving right
    
11. }
    
12. }
    
    //end right
    

Now we check the collision of the pacman in the right direction. First checking the collision with the wall using the intersects function and then setting the direction variable to left after that set the angles for animation to redraw the pacman with new angles. Otherwise we call the right function which will let the pacman move in the right direction.

1. if
   
   (
   
   direction.equals
   
   (
   
   "left"
   
   )
   
   )
   
   {
   
2. if
   
   (
   
   x <=
   
   10
   
   |
   
   r.intersects
   
   (
   
   x, y, 50
   
   , 50
   
   )
   
   &
   
   x >
   
   350
   
   &
   
   y >
   
   100
   
   &
   
   y <
   
   350
   
   )
   
   {
   
   //checking collision in left direction
   
3. direction =
   
   "right"
   
   ;
   
   // changing direction if collision happens
   
4. s_angle =
   
   45
   
   ;
   
5. e_angle =
   
   270
   
   ;
   
6. flag =
   
   1
   
   ;
   
7. }
   
   else
   
   {
   
8. left(
   
   )
   
   ;
   
   //changing pacman face leftwards
   
9. x--;
   
   // moving left
   
10. }
    
11. }
    
    //end left
    
12. }
    
    // end detectCoillision
    

Now we check for the left collision. Like all other conditions we simply check for the left collisions with the wall if its true then set the angles for right face otherwise we keep moving left using the left function. Now our collision detection function is complete

We will continue the program in the next tutorial.

OUTPUT:

Download