Praktek 5 : User Input

Pada praktik sebelumnya yaitu Praktek 4 Game Pimpong : Collision Detection, kita sudah membuat bola bergerak dengan di batasi oleh garis pinggir layar.

Pada praktek kali ini kita akan mencoba menambahkan dua buah Image Raket yaitu Image yang berada di sebelah kiri yang digerakan oleh user dan Image yang berada di sebelah kanan yang bergerak otomatis dijalankan oleh HP. Perhatikan Gambar Berikut :

Misalkan Image sebelah kiri yang di jalankan oleh user kita beri nama padSprite dan sebelah kanan kita namakan AISprite.Image kiri dan Image kanan terdiri dari satu image yang di gandakan artinya sebelum anda merubah script silahkan terlebih dahulu download dan simpan gambar pad.png berikut :

Silahkan Download dan simpan di C:/WTK25/APPS/GamePimPong/res gambar beriku Klik kanan di sini ( Klik kanan lalu save Image as atau save target as atau save Image)

Berikut adalah Code dari hasil penambahan Image Raket sehingga menghasilkan seperti gambar di atas.

/* -------------------------------------

* Nama File : PongCanvas.java

* by Gunawan

* jagungodak@yahoo.com

*--------------------------------------

*/

import java.io.IOException;

import javax.microedition.lcdui.Graphics;

import javax.microedition.lcdui.Image;

import javax.microedition.lcdui.game.GameCanvas;

import javax.microedition.lcdui.game.Sprite;

import java.util.Random;

public class PongCanvas extends GameCanvas implements Runnable {

private int sleepTime=30;

private Image ballImg;

private Sprite ballSprite;

private int ballX = getWidth()/2;

private int ballY = getHeight()/2;

private final static int ballXVel=3;

private final static int ballYVel=1;

private int ballDirection=1;

private Image padImg;

private Sprite padSprite;

private int padX = 10;

private int padY = getHeight() / 2;

private final static int padYVel = 2;

private Sprite AISprite;

private int AIX = getWidth() - 10;

private int AIY = getHeight() / 2;

private final static int AIYVel = 2;

private int actX;

public PongCanvas() {

super(false);

}

public void run(){

while(true){

updateScreen(getGraphics());

try{

Thread.sleep(sleepTime);

}catch(Exception ex){

}

}

}

public void start(){

try{

ballImg=Image.createImage("/face.png");

padImg = Image.createImage("/pad.png");

}catch(IOException ioex){

System.out.println("Kesalahan Pada Image"+ioex);

}

ballSprite=new Sprite(ballImg);

ballSprite.defineReferencePixel(2, 2);

ballSprite.setRefPixelPosition(ballX, ballY);

padSprite = new Sprite(padImg, 3, 20);

padSprite.defineReferencePixel(1, 10);

padSprite.setRefPixelPosition(padX, padY);

AISprite = new Sprite(padImg, 3, 20);

AISprite.defineReferencePixel(3, 10);

AISprite.setRefPixelPosition(AIX, AIY);

AISprite = new Sprite(padImg, 3, 20);

AISprite.defineReferencePixel(3, 10);

AISprite.setRefPixelPosition(AIX, AIY);

Thread runner=new Thread(this);

runner.start();

}

private void createBackground(Graphics g){

g.setColor(0x000000);

g.fillRect(0, 0, getWidth(), getHeight());

}

private void updateScreen(Graphics g){

createBackground(g);

createScoreboard(g);

moveBall();

movePad();

moveAI();

ballSprite.setRefPixelPosition(ballX , ballY);

ballSprite.paint(g);

padSprite.setRefPixelPosition(padX, padY);

padSprite.paint(g);

AISprite.setRefPixelPosition(AIX, AIY);

AISprite.paint(g);

flushGraphics();

}

public void moveBall(){

if (ballDirection == 0) {

ballX -= ballXVel;

ballY -= ballYVel;

} else if (ballDirection == 1) {

ballX += ballXVel;

ballY -= ballYVel;

} else if (ballDirection == 2) {

ballX += ballXVel;

ballY += ballYVel;

} else if (ballDirection == 3) {

ballX -= ballXVel;

ballY += ballYVel;

}

if (ballDirection == 0 && ballX <>

ballDirection = 1;

} else if (ballDirection == 0 && ballY <>

ballDirection = 3;

} else if (ballDirection == 1 && ballY <>

ballDirection = 2;

} else if (ballDirection == 1 && ballX > getWidth()) {

ballDirection = 0;

if (sleepTime > 5) sleepTime--;

} else if (ballDirection == 2 && ballY > getHeight()) {

ballDirection = 1;

} else if (ballDirection == 2 && ballX > getWidth()) {

ballDirection = 3;

if (sleepTime > 5) sleepTime--;

} else if (ballDirection == 3 && ballY > getHeight()) {

ballDirection = 0;

} else if (ballDirection == 3 && ballX <>

ballDirection = 2;

}

if (ballDirection == 0 && ballSprite.collidesWith(padSprite, false)) {

ballDirection = 1;

} else if (ballDirection == 3 && ballSprite.collidesWith(padSprite, false)) {

ballDirection = 2;

} else if (ballDirection == 1 && ballSprite.collidesWith(AISprite, false)) {

ballDirection = 0;

} else if (ballDirection == 2 && ballSprite.collidesWith(AISprite, false)) {

ballDirection = 3;

}

}

private void movePad() {

int keyState = getKeyStates();

if ((keyState & UP_PRESSED) != 0 && padY > padSprite.getHeight() / 2) {

padY -= padYVel;

} else if ((keyState & DOWN_PRESSED) != 0 && padY <>

padY += padYVel; }

}

private void moveAI() {

Random random = new Random();

actX = getWidth() / 3 + Math.abs(random.nextInt() % (getWidth() / 8));

if (ballY <> actX && AIY > AISprite.getHeight() / 2) AIY -= AIYVel;

if (ballY > AIY && ballX > actX && AIY <>

}

}

:D:D udah jalan toh gamenya yach...Ok.. tinggal satu lagi yang perlu di tambahkan yaitu : penambahan Score masing-masing Pemain. Silahkan Baca Praktek 6 : Akhir dari Petualangan Game Pimpong

Praktek 4 Game Pimpong : Collision Detection

Seperti janji saya pada praktek 3 : Menambahkan Image Menggunakan Sprite, kali ini saya akan mencoba Menggerakan gambar hasil praktek 3. Perhatikan gambar berikut :

Perhatikan gambar di atas, kita akan membuat 4 jalur pergerakan dari bola yaitu :

Jalur 0 bergerak ke atas miring ke kiri rumus :

X -- ( posisi X selalu di kurangi 1 sehingga bergerak ke kiri)

Y -- ( posisi Y selalu di kurangi 1 sehingga bergerak ke atas)

Karena kita mengurangi nilai x dan y bersamaan maka pergerakan ke atas miring ke kiri, lihat pada gambar arah pergerakan 0.

Jalur 1 bergerak ke atas miring ke kanan rumus :

X ++ ( posisi X selalu di kurangi 1 sehingga bergerak ke kanan)

Y -- ( posisi Y selalu di tambah 1 sehingga bergerak ke atas)

Karena kita menambah nilai x dan mengurangi nilai y bersamaan maka pergerakan ke atas miring ke kanan, lihat pada gambar arah pergerakan 1.

Jalur 2 bergerak ke bawah miring ke kanan rumus :

X ++ ( posisi X selalu di tambah 1 sehingga bergerak ke kanan)

Y ++ ( posisi Y selalu di tambah 1 sehingga bergerak ke bawah)

Karena kita menambah nilai x dan y bersamaan maka pergerakan ke bawah miring ke kanan, lihat pada gambar arah pergerakan 2.

Jalur 3 bergerak ke bawah miring ke kiri rumus :

X -- ( posisi X selalu di kurangi 1 sehingga bergerak ke kiri)

Y ++ ( posisi Y selalu di kurangi 1 sehingga bergerak ke bawah)

Karena kita mengurangi nilai x dan menambah nilai y bersamaan maka pergerakan ke bawah miring ke kiri, lihat pada gambar arah pergerakan 3

Langkah – Langkah yang perlu di lakukan :

1. Penamaan Variabel atau pendifinisian Variabel
2. Pembatasan arah pergerakan bola dengan mengimplementasikan fungsi logika

Penamaan Variabel

Misalnya nama variable untuk ke empat arah pergerakan bolla adalah ballDirection dengan nilai default = 1, maka kita harus mendifinisikan variable seperti berukut :

Private int ballDirection = 1;

Pembatasan Pergerakan

Pada kasus ini kita akan membatasi arah pergerakan bola sampai X bernilai 0 ( berada pada posisi 0) atau X bernilai getWidth() dan atau Y bernilai 0 (Y berada pada posisi 0) atau Y bernilai getHieght(), artinya saat bola menyentuh garis pinggir layar maka akan terpantul kembali.

Info :

getWidth() dan getHeight() merupakan pendifinisian dari nilai maksimal dari X dan Y.

Ok..kita langsung saja merubah methode mobeBall() pada class PongCanvas :

/* -------------------------------------

* Nama File : PongCanvas.java

* by Gunawan

* jagungodak@yahoo.com

*--------------------------------------

*/

import java.io.IOException;

import javax.microedition.lcdui.Graphics;

import javax.microedition.lcdui.Image;

import javax.microedition.lcdui.game.GameCanvas;

import javax.microedition.lcdui.game.Sprite;

public class PongCanvas extends GameCanvas implements Runnable {

private int sleepTime=30;

private Image ballImg;

private Sprite ballSprite;

private int ballX = getWidth()/2;

private int ballY = getHeight()/2;

Private int ballDirection = 1;

private final static int ballXVel=3;

private final static int ballYVel=1;

public PongCanvas() {

super(false);

}

public void run(){

while(true){

updateScreen(getGraphics());

try{

Thread.sleep(sleepTime);

}catch(Exception ex){

}

}

}

public void start(){

try{

ballImg=Image.createImage("/face.png");

}catch(IOException ioex){

System.out.println("Kesalahan Pada Image"+ioex);

}

ballSprite=new Sprite(ballImg);

ballSprite.defineReferencePixel(2, 2);

ballSprite.setRefPixelPosition(ballX, ballY);

Thread runner=new Thread(this);

runner.start();

}

private void createBackground(Graphics g){

g.setColor(0x000000);

g.fillRect(0, 0, getWidth(), getHeight());

}

private void updateScreen(Graphics g){

createBackground(g);

moveBall;

ballSprite.setRefPixelPosition(ballX , ballY);

ballSprite.paint(g);

flushGraphics();

}

public void moveBall(){

if (ballDirection == 0) {

ballX -= ballXVel;

ballY -= ballYVel;

} else if (ballDirection == 1) {

ballX += ballXVel;

ballY -= ballYVel;

} else if (ballDirection == 2) {

ballX += ballXVel;

ballY += ballYVel;

} else if (ballDirection == 3) {

ballX -= ballXVel;

ballY += ballYVel;

}

if (ballDirection == 0 && ballX <>

ballDirection = 1;

} else if (ballDirection == 0 && ballY <>

ballDirection = 3;

} else if (ballDirection == 1 && ballY <>

ballDirection = 2;

} else if (ballDirection == 1 && ballX > getWidth()) {

ballDirection = 0;

if (sleepTime > 5) sleepTime--;

} else if (ballDirection == 2 && ballY > getHeight()) {

ballDirection = 1;

} else if (ballDirection == 2 && ballX > getWidth()) {

ballDirection = 3;

if (sleepTime > 5) sleepTime--;

} else if (ballDirection == 3 && ballY > getHeight()) {

ballDirection = 0;

} else if (ballDirection == 3 && ballX <>

ballDirection = 2;

}

}

}

Untuk mengetes jangan lupa klik Build pada WTK2.5.

Selanjutnya kita akan menambahkan gambar yang akan di gerakan oleh user dan gambar yang di gerakan oleh hp sehingga terbentuk sebuah permainan. Silahkan ke Praktek 5 Game Pimpong : User Input

Praktek 3 Game PimPong : Menambahkan Bolla menggunakan Sprite

Pada praktek sebelumnya yaitu Praktek 2 Game Pimpong : membuat Background, kita sudah berhasil mengubah tampilan layer dengan warna hitam. Pada praktek kali ini kita akan mencoba menambahkan bolla di tengah-tengah layer yang akan selalu bergerak selama aplikasi di jalankan.

Merencanakan Gambar Bolla

Ok… pertama-tama kita harus merencanakan gambar bola yang akan di letakan di layar. Pada praktik ini saya akan mencoba membuat sebuah bola warna putih ukuran 3 X 3 pixel, ingat 3 X 3 Pixel. Jika anda kreatif membuat gambar bola silahkan kreasi sendiri, tapi perlu di ingat untuk praktek kali ini ukurannya 3 x 3 pixel.

Berikut gambar bola ukuran 3 X 3 Pixel : download di sini (Klik kanan lalu klik Save target As..)

Silahkan download dan simpan gambar tesebut ke dalam folder “res” di drive C:/WTK25/APPS/GamePimpong/res.
Setelah gambar tersimpan buka kembali file PongCanvas.java, kemudian tambahkan script-script berikut sehingga menjadi seperti berikut :

/* -------------------------------------

* Nama File : PongCanvas.java

* by Gunawan

* jagungodak@yahoo.com

*--------------------------------------

*/

import java.io.IOException;

import javax.microedition.lcdui.Graphics;

import javax.microedition.lcdui.Image;

import javax.microedition.lcdui.game.GameCanvas;

import javax.microedition.lcdui.game.Sprite;

public class PongCanvas extends GameCanvas implements Runnable {

private int sleepTime=30;

private Image ballImg;

private Sprite ballSprite;

private int ballX = getWidth()/2;

private int ballY = getHeight()/2;

public PongCanvas() {

super(false);

}

public void run(){

while(true){

updateScreen(getGraphics());

try{

Thread.sleep(sleepTime);

}catch(Exception ex){

}

}

}

public void start(){

try{

ballImg=Image.createImage("/face.png");

}catch(IOException ioex){

System.out.println("Kesalahan Pada Image"+ioex);

}

ballSprite=new Sprite(ballImg);

ballSprite.defineReferencePixel(2, 2);

ballSprite.setRefPixelPosition(ballX, ballY);

Thread runner=new Thread(this);

runner.start();

}

private void createBackground(Graphics g){

g.setColor(0x000000);

g.fillRect(0, 0, getWidth(), getHeight());

}

private void updateScreen(Graphics g){

createBackground(g);

ballSprite.setRefPixelPosition(ballX , ballY);

ballSprite.paint(g);

flushGraphics();

}

}

Perhatikan baris yang berwarna merah. Baris tersebut merupakan baris penambahan dari class PongCanvas atau file PongCanvas.java.

import javax.microedition.lcdui.Image;
import javax.microedition.lcdui.game.Sprite;

Potongan script diatas merupakan class java yang bermanfaat saat kita meletakan gambar di atas Canvas menggunakan Sprite. Sedangkan perintah pemanggilan gambar untuk di letakan ke dalam canvas berupa Sprite yaitu :
try{
ballImg=Image.createImage("/face.png");
}catch(IOException ioex){
System.out.println("Kesalahan Pada Image"+ioex);
}
ballSprite=new Sprite(ballImg);
ballSprite.defineReferencePixel(2, 2);
ballSprite.setRefPixelPosition(ballX, ballY);

HAsil akhir dari game setelah melakukan penambahan seperti diatas seperti gambar di bawah ini.



Membuat Gambar Bola bergerak.
Alangkah tidak sempurnanya jika bola tersebut tidak bergerak, oleh karenanya beriku akan di jelaskan tehnik menggerakan gambar bola dari hasil penambahan sprite image di atas. Langkah-langkah yang perlu dilakukan :
1. Menambahkan variable-variabel yang dibutuhkan
2. Membuat Methode untuk menjalankan bola
3. Memanggil methode menjalankan bola melalui methode updateScreen()

Ok… kita langsung saja membuka file PongCanvas.java dan lakukan perubahan sesuai dengan script di bawah :

/* -------------------------------------

* Nama File : PongCanvas.java

* by Gunawan

* jagungodak@yahoo.com

*--------------------------------------

*/

import java.io.IOException;

import javax.microedition.lcdui.Graphics;

import javax.microedition.lcdui.Image;

import javax.microedition.lcdui.game.GameCanvas;

import javax.microedition.lcdui.game.Sprite;

public class PongCanvas extends GameCanvas implements Runnable {

private int sleepTime=30;

private Image ballImg;

private Sprite ballSprite;

private int ballX = getWidth()/2;

private int ballY = getHeight()/2;

private final static int ballXVel=3;

private final static int ballYVel=1;

public PongCanvas() {

super(false);

}

public void run(){

while(true){

updateScreen(getGraphics());

try{

Thread.sleep(sleepTime);

}catch(Exception ex){

}

}

}

public void start(){

try{

ballImg=Image.createImage("/face.png");

}catch(IOException ioex){

System.out.println("Kesalahan Pada Image"+ioex);

}

ballSprite=new Sprite(ballImg);

ballSprite.defineReferencePixel(2, 2);

ballSprite.setRefPixelPosition(ballX, ballY);

Thread runner=new Thread(this);

runner.start();

}

private void createBackground(Graphics g){

g.setColor(0x000000);

g.fillRect(0, 0, getWidth(), getHeight());

}

private void updateScreen(Graphics g){

createBackground(g);

moveBall;

ballSprite.setRefPixelPosition(ballX , ballY);

ballSprite.paint(g);

flushGraphics();

}

public void moveBall(){

ballX += ballXVel;

ballY += ballYVel;

}

}

Ok… dengan script di atas bola akan bergerak ke kanan miring ke bawah sampai dia menghilang. :D gak usah kuatir itu Cuma script dasar menggerakan bola script lengkapnya silahkan di lanjut ke Praktek 4 Game Pimpong : Colision Detection