Space Invaders FX : Part 2

So, continuing with my last post where I described the 'tanks' class, we will discuss the 'monster' class in this post:

/*
* monsters.fx
*
* Created on Jun 21, 2009, 9:28:33 AM
*/

package spaceinvadersfx;

import javafx.animation.KeyFrame;
import javafx.animation.Timeline;
import javafx.scene.CustomNode;
import javafx.scene.Group;
import javafx.scene.image.Image;
import javafx.scene.image.ImageView;
import javafx.scene.Node;
import javafx.scene.paint.Color;
import javafx.scene.shape.Polygon;
import javafx.scene.transform.Rotate;
import spaceinvadersfx.Main;

/**
* @author Sagar Jauhari
*/

public class monsters extends CustomNode {
var bulletX: Integer;
var bulletY: Integer;

public var monsterX: Integer;
public var monsterY: Integer = 10;

var animationRate = 1;
var visiblity = true;
var bulletVisiblity = false;
var rotation = 0;
var image = ImageView {
x: bind monsterX
y: bind monsterY
visible: bind visiblity
image: Image {
url: "{__DIR__}resources/monster.png"
}
transforms: Rotate { pivotX : bind monsterX+25, pivotY : bind monsterY+25, angle: bind rotation }
}

var timeline = Timeline {
rate: bind animationRate;
repeatCount: Timeline.INDEFINITE
autoReverse: true
keyFrames : [
at (0s) {monsterX => 0;},
at (4s) {monsterX => 440;}
]
}

var attackTimeline = Timeline {
repeatCount: 1
keyFrames : [
]
}


function attack(){
var bullet = Polygon {
transforms: Rotate { pivotX : 5, pivotY : 0.8, angle: 180 }
visible: bind bulletVisiblity
translateX: bind bulletX
translateY: bind bulletY
points : [ 0,7, 5,0, 10,7, 10,16, 5,5, 0,16 ]
fill: Color.YELLOW
stroke: Color.RED
}

}


public function isDead(){
timeline.pause();
var isDeadTimeline = Timeline {
repeatCount: 1
keyFrames : [
   at (0s){rotation => 0},
   at (0.2s){rotation => 180;},
   KeyFrame {
       time: 0.6s
       action: function(){
           Main.score+=15;
           rotation = 0;
           timeline.playFromStart();
       }
   }
]
};
isDeadTimeline.play();
}

public override function create(): Node {
timeline.play();
return Group {
content: bind [image]
};
}
}

Understanding the code:

1. We make an ImageView object for the monster and bind the x and y coordinates to variables to allow movement. Also, the 'rotation' transformation is added which will be used to animate the monster when it dies ( it turns upside down when the isDead() function is called! :) ).

     var image = ImageView {
   x: bind monsterX
   y: bind monsterY
   visible: bind visiblity
   image: Image {
     url: "{__DIR__}resources/monster.png"
   }
   transforms: Rotate { pivotX : bind monsterX+25, pivotY : bind monsterY+25, angle: bind rotation }
   }
   



2. Next, we define the timeline for making the monster move to and fro. The to and fro motion is enabled by the "autoReverse: True" expression.

    var timeline = Timeline {
    rate: bind animationRate;
    repeatCount: Timeline.INDEFINITE
    autoReverse: true
    keyFrames : [
    at (0s) {monsterX => 0;},
    at (4s) {monsterX => 440;}
    ]
   }
   



3. After this, we write the isDead function . This function pauses the timeline we wrote above and rotates the monster by 180 degrees and then makes the timeline play from start. It also increases you score by 15 points.

   
   public function isDead(){
      timeline.pause();
      var isDeadTimeline = Timeline {
          repeatCount: 1
          keyFrames : [
              at (0s){rotation => 0},
              at (0.2s){rotation => 180;},
              KeyFrame {
                  time: 0.6s
                  action: function(){
                      Main.score+=15;
                      rotation = 0;
                      timeline.playFromStart();
                  }
              }
          ]
      };
      isDeadTimeline.play();
   }
   

   
   
4. This was most of what was done in this class. You would have noticed that we haven't used the attackTimeline and the attack() function. I was writing them to enable the monster attack the player also, but i haven't finished that part. So, we'll skip them for the while. Now we jump to the important part: Collision Detection. Our task is gravely simplified by the intersects() function of the Node class. It returns true when your node intersects the mentioned rectangle. Read the API for details. Here are the snippets from the prevous class, tanks.fx:

       public function colissionDetect(){
       if(monster.intersects(bulletX,bulletY,10,15)){
           monster.isDead();
       }
   
   }
   

   
   We've defined our rectangle with respect to the coordinates of the bullet using the bulletX and bulletY variables. Whenever the monster intersects this bullet, the monster.isDead() function is triggered. Note that we are polling to verify the intersection every 0.1 second by playing the colissionTimeline variable:

       var colissionTimeline = Timeline {
       repeatCount: Timeline.INDEFINITE
       keyFrames : [
           KeyFrame {
               time : 0.1s
               action: function(){colissionDetect()}
           }
       ]
   }
   

   This timeline is played throughout the duration of the game.

So, that's all, we're done with most of the part of the game. The scoring part is simple, you can figure it out very easily in the Main.fx file:

/*
* Main.fx
*
* Created on Jun 21, 2009, 9:17:55 AM
*/

package spaceinvadersfx;

import javafx.stage.Stage;
import javafx.scene.Scene;
import javafx.scene.text.Text;
import javafx.scene.text.Font;
import javafx.scene.media.Media;
import javafx.scene.media.MediaPlayer;

/**
* @author Sagar Jauhari
*/
public var score = 0;
public var lives = 3;

public var screenWidth = 500;
public var screenHeight = 500;

var scoreText = Text {
 font : Font {
     size: 20
 }
 x: screenWidth-40, y: screenHeight-30
 content: bind {java.lang.String.valueOf(score)}
};

var mdeia = MediaPlayer {
 media : Media {
     source: ""
 }
}



public function run(){
Stage {
 title: "Space Invaders FX by Sagar Jauhari"
 width: 500
 height: 500
 scene: Scene {
     content: bind [tank{},scoreText]
 }
}
}

We defined a variable ScoreText and bound its value to the score variable which is changed everytime you hit the monster.

More to be done:

1. The monster has to be coded to attact the tank also! Right now the game is too easy!
   
2. Background music can be played and specific sounds can be added to the fire() and isDead() functions.

The sourcecode of the game can be downloaded from here.

Space Invaders FX : Part 1

Ohk, so I wrote this simple game in JavaFX, named it Space Invaders FX ..

The entire source code for the game can be downloaded from here.

The source code has three files, tank.fx, monster.fx and Main.fx. In this post we will talk about tank.fx. This class controls the movements, shooting and everything else to do with the tank. Here it is:

/*
* tank.fx
*
* Created on Jun 21, 2009, 9:19:12 AM
*/

package spaceinvadersfx;

import javafx.scene.image.ImageView;
import javafx.scene.image.Image;
import javafx.scene.CustomNode;
import javafx.scene.Node;
import javafx.scene.input.KeyEvent;
import javafx.scene.input.KeyCode;
import javafx.scene.Group;
import javafx.scene.input.MouseEvent;
import javafx.scene.shape.Polygon;
import javafx.scene.paint.Color;
import javafx.animation.Timeline;
import javafx.animation.KeyFrame;
import javafx.animation.Interpolator;

/**
* @author Sagar Jauhari
*/

public class tank extends CustomNode {

var monster = monsters{};

var fireAgain = true;

var tankX: Integer;
var tankY = 400;

var bulletX: Integer;
var bulletY = 400;

var visiblity = false;

var image = ImageView {
x: bind tankX, y: tankY
image: Image {
url: "{__DIR__}resources/tank 50X50.png"
}
};
var bg = ImageView {
onKeyPressed: function( e: KeyEvent ) {
if(e.code == KeyCode.VK_LEFT){
if(tankX >= 50){
    tankX-=50;
}
}
if(e.code == KeyCode.VK_RIGHT){
if(tankX <= Main.screenWidth - 100){
    tankX+=50;
}
}

}
onMouseClicked: function( e: MouseEvent ):Void {
fire();
}


image: Image {
url: "{__DIR__}resources/bg.jpg"
}
};
var bullet = Polygon {
visible: bind visiblity
translateX: bind bulletX
translateY: bind bulletY
points : [ 0,7, 5,0, 10,7, 10,15, 5,5, 0,15 ]
fill: Color.YELLOW
stroke: Color.RED
}

var timeline = Timeline {
repeatCount: 1
keyFrames : [
at (0s) {bulletX => tankX+20; bulletY => tankY; visiblity => true; fireAgain=> false },
at (1s) {bulletY=> -20; visiblity => true; fireAgain=> true}
]
}
var colissionTimeline = Timeline {
repeatCount: Timeline.INDEFINITE
keyFrames : [
KeyFrame {
    time : 0.1s
    action: function(){colissionDetect()}
}
]
}


public function fire(){
if(fireAgain){
timeline.playFromStart();
}
}

public function colissionDetect(){
if(monster.intersects(bulletX,bulletY,10,15)){
monster.isDead();
}

}

public override function create() :Node{
bg.requestFocus();
colissionTimeline.play();
return{
Group{
    content: bind[bg,image,bullet,monster]
}
}
}
}

Understanding the code:

1. 

1. First of all, we make an image of tank of 50X50px. Here's the image I made in GIMP:
2. Next, we import it for using:
   

       var image = ImageView {
    x: bind tankX, y: tankY
    image: Image {
        url: "{__DIR__}resources/tank 50X50.png"
    }
   };
   



3. Now we put a background image and add all the mouse and keyboard triggers to it.
   

    var bg = ImageView {
   onKeyPressed: function( e: KeyEvent ) {
     if(e.code == KeyCode.VK_LEFT){
         if(tankX >= 50){
             tankX-=50;
         }
     }
     if(e.code == KeyCode.VK_RIGHT){
         if(tankX <= Main.screenWidth - 100){
             tankX+=50;
         }
     }
   
   }
     onMouseClicked: function( e: MouseEvent ):Void {
         fire();
     }
   
   
     image: Image {
         url: "{__DIR__}resources/bg.jpg"
     }
   };
   

   
   


4. Now we come to the more interesting part: the shooting! :). To represent a bullet, I made a polygon. The idea is to traverse this polygon from bottom to top by binding its y coordinate to a variable and linearly varying that variable with time using the Timeline class. Initially the bullet is invisible, then, while shooting it becomes visible and then again it becomes invisible. This gives the impression that multiple bullets are being shot contrary to the fact that actually, it is the same bullet again and again! Also, there is a constraint that at any point of time, only one bullet is in the scene. This is managed by the 'fireAgain' flag. See here:
   

       var bullet = Polygon {
      visible: bind visiblity
      translateX: bind bulletX
      translateY: bind bulletY
      points : [ 0,7, 5,0, 10,7, 10,15, 5,5, 0,15 ]
      fill: Color.YELLOW
      stroke: Color.RED
   }
   
   var timeline = Timeline {
      repeatCount: 1
      keyFrames : [
          at (0s) {bulletX => tankX+20; bulletY => tankY; visiblity => true; fireAgain=> false },
          at (1s) {bulletY=> -20; visiblity => true; fireAgain=> true}
      ]
   }
   

   
   


5. Finally, there's this function called fire() which fires the bullet.

       public function fire(){
       if(fireAgain){
           timeline.playFromStart();
       }
   }
   

   
   

So this was most of what was done with the tank. The collision detection with the 'monster' and some other snippets not explained here will be explained in the next post when we discuss the 'monsters.fx' class.