Membuat Animasi Gerakan Parabola dengan JavaFX

Pagi saungkoders !!
Lama tidak berjumpa. Maafkan hamba yang sering absen menulis disini (sedikit pesan kepada author saungkode yang lain : “nulis woy!” #mungkinmerekalelah). Saya tidak tahu mau nulis apa, sampai kemarin ada yang bertanya seputar hal ini (baca : judul). Kali ini saya hendak berbagi tutorial membuat animasi gerakan parabola (seperti angry bird) menggunakan JavaFX, tapi dengan algoritma matematik sederhana tanpa rumus aneh2. Kenapa JavaFX? karena kalo pake libgdx bakal lama 😐

Sebelum masuk kodingan, saya ingatkan terlebih dahulu bahwa JavaFX ini membutuhkan Java Development Kit 8 (JDK 8).
Baiklah..

Langkah pertama : Buat class utama

public class Main extends Application
{
	public static void main(String[] args)
	{
	    Application.launch(args);
	}
}

Note: Untuk setiap langkah berikutnya masukan setiap potongan kode ke dalam class Main di atas

Langkah kedua : Deklarasi variabel yang akan digunakan

//Label untuk menampilkan info atribut
private Label label = new Label();
//Bola objek animasi
private Circle bola = new Circle();
//Variabel penentu gerakan
private float delta,     //waktu atau konstanta
			  gravity,   //gravitasi boong boongan
			  velocityX, //kecepatan horizontal
			  velocityY; //kecepatan vertikal

Langkah ketiga : Isi prosedur start (prosedur yang otomatis dijalankan saat Application.launch di main)

@Override
public void start(Stage stage)
{
	//Judul Window
	stage.setTitle("Parabola Movement");

	//Instansiasi
	Group group = new Group();
	Scene scene = new Scene(group, 640, 480, Color.WHITE);

	//Set atribut bola
	bola.setRadius (20);
	bola.setFill(null);
	bola.setStrokeWidth(5);
	bola.setStroke(Color.RED);

	//Tambah bola ke layar
	group.getChildren().add(bola);		

	//Set atribut label
	updateLabel();

	//Set ukuran label
	label.setScaleX(2f);
	label.setScaleY(2f);

	//Tambah label ke layar
	group.getChildren().add(label);

	//Tampilkan
	stage.setScene(scene);
	stage.show();

	//Reset animasi
	reset();

	//FPS = 60 frame per second
	Duration fps = Duration.millis(1000/60); 

	//Prosedur yang dijalankan tiap frame
	KeyFrame frames = new KeyFrame(fps, new EventHandler<ActionEvent>()
	{
		@Override
		public void handle(ActionEvent event)
		{
			run(); //panggil prosedur animasi yang sudah dibuat
		}
	});

	//Pasang kontrol keyboard
	scene.setOnKeyPressed(controlPlayer);

	//Buat timeline animasi
	Timeline tl = new Timeline();
	//Setting animasi untuk berjalan selamanya
	tl.setCycleCount(Animation.INDEFINITE);
	//Tambahkan prosedur yang akan dijalankan animasi tiap frame
	tl.getKeyFrames().add(frames);
	//Mainkan
	tl.play();
}

Langkah keempat : buat prosedur reset, untuk mereset animasi ketika bola keluar layar

//Reset animasi
public void reset()
{
	//Atur ulang posisi bola
	bola.setLayoutX (30);
	bola.setLayoutY(450);

	//Set atribut
	delta     = 0.75f;
	velocityX = 5f;
	velocityY = 5f;

	//Pasang nilai gravitasi secara random tiap animasi
	gravity   = ((float) Math.random() * 0.5f);

	//Update label
	updateLabel();
}

Note : delta adalah waktu komputasi yang dibutuhkan komputer anda untuk berpindah dari satu frame ke frame berikutnya, tapi karena prosedur rendering animasi pada JavaFX sedikit berbeda dengan yang pernah saya temui, maka variabel delta diisi statis saja

Langkah kelima : buat prosedur animasi yang dijalankan tiap frame

//Jalankan animasi
public void run()
{
	/*Gerakan parabola*/
	/*----------------*/
	bola.setLayoutX(bola.getLayoutX() + (velocityX * delta));
	velocityY -= gravity * delta;
	bola.setLayoutY(bola.getLayoutY() - (velocityY * delta));
	/*---------------*/

	//Reset animasi jika bola keluar layar
	if(isOutOfScreen() == true) //menggunakan fungsi yang sudah dibuat
	{
		reset();//panggil prosedur reset yang sudah dibuat
	}
}

Langkah keenam : buat fungsi berikut

//Fungsi untuk mengetahui apakah bola keluar layar
public boolean isOutOfScreen()
{
	if(bola.getLayoutX() < 0   ||
	   bola.getLayoutX() > 640 ||
	   bola.getLayoutY() < 0   ||
	   bola.getLayoutY() > 480)
	{
		return true;
	}
	else
	{
		return false;
	}
}

Langkah ketujuh : buat prosedur untuk meng-update isi label

//Update posisi label
public void updateLabel()
{
	label.setText
	(
		"Gravity : " + String.valueOf(gravity) +
		"\n" +
		"Vx : " + String.valueOf(velocityX) +
		"\n" +
		"Vy : " + String.valueOf(velocityY) +
		"\n\n" +
		"<Press arrow key to Control the Ball>"
	);
	label.setLayoutX((640 / 2) - (label.getWidth() / 2));
	label.setLayoutY(label.getHeight() + 10);
}

Langkah kedelapan : ~~biar postingannya panjang~~ karena saya baik, sekalian saya tambahin cara menggunakan keyboard listener

//Kontrol bola
EventHandler<KeyEvent> controlPlayer = new EventHandler<KeyEvent>()
{
	@Override
	public void handle(KeyEvent Key)
	{
		//Kurangi kecepatan horizontal kalo pencet arah kiri
		if(Key.getCode() == KeyCode.LEFT)
		{
			velocityX--;
			updateLabel();
		}
		//Tambah kecepatan horizontal kalo pencet arah kanan
		else if(Key.getCode() == KeyCode.RIGHT)
		{
			velocityX++;
			updateLabel();
		}
		//Tambah kecepatan vertical kalo pencet arah atas
		else if(Key.getCode() == KeyCode.UP)
		{
			velocityY++;
			updateLabel();
		}
		//Kurangi kecepatan vertical kalo pencet arah bawah
		else if(Key.getCode() == KeyCode.DOWN)
		{
			velocityY--;
			updateLabel();
		}
	}
};

Hampir lupa, langkah terakhir : pada bagian paling atas kode tambahkan library dan package dan class-class yang dibutuhkan

import javafx.animation.Animation;
import javafx.animation.KeyFrame;
import javafx.animation.Timeline;
import javafx.application.Application;
import javafx.event.ActionEvent;
import javafx.event.EventHandler;
import javafx.scene.Group;
import javafx.scene.Scene;
import javafx.scene.control.Label;
import javafx.scene.input.KeyCode;
import javafx.scene.input.KeyEvent;
import javafx.scene.paint.Color;
import javafx.scene.shape.Circle;
import javafx.stage.Stage;
import javafx.util.Duration;

Langkah terakhir (terakhir beneran): compile dan mainkan