3.1 Komponen-Komponen yang Dibutuhkan
Dalam pembuatan game Pong dengan Arduino, komponen yang pasti dibutuhkan adalah Arduino itu sendiri. Arduino yang digunakan adalah Arduino UNO karena Arduino ini umum digunakan dan mudah untuk didapat. Selain Arduino terdapat beberapa komponen lain yang dibutuhkan agar game ini menarik perhatian pemain yaitu:
3.1.1 Arduino TFT
Arduino TFT merupakan layar LCD TFT dengan slot microSD di belakangnya. Layar ini digunakan untuk menampilkan antar muka Pong. Pin pada Arduino TFT didesain agar muat dengan soket yang ada pada Arduino Esplora dan Arduino Robot, tetapi hal ini tidak menutup kemungkinan untuk digunakan dengan board Arduino lainnya.
Secara default, orientasi layar Arduino TFT adalah horisontal dengan posisi atas layar tepat di bawah tulisan SD CARD. Layar ini berukuran 160px x 128px dan dapat menampilkan warna 16-bit. Channel merah dan biru memiliki resolusi 5-bit, channel hijau memiliki resolusi 6-bit. Sehingga terdapat 32 level untuk merah dan biru dan 64 level untuk hijau.
3.1.2 Potentiometer
Potentiometer merupakan alat dengan tiga terminal yang digunakan dengan cara memutarnya. Alat ini umum ditemukan pada alat-alat elektronik seperti speaker yang digunakan untuk mengatur volume. Potentiometer termasuk ke dalam alat pasif, yang artinya alat ini dapat beroperasi tanpa power supply. Nilai pada potentiometer digunakan untuk mengontrol tengangan maupun arus listrik.
Pada game ini, nilai yang dihasilkan oleh potentiometer akan digunakan untuk menggerakan paddle milik pemain.
3.2 Proses Pembuatan
Pertama, hubungkan pin power 5V dan pin ground (GND) pada arduino ke breadboard seperti gambar di bawah ini. Agar tidak bingung, gunakan kabel warna merah untuk power dan kabel warna hitam untuk ground.
Selanjutnya adalah menghubungkan kedua potentiometer ke breadboard. Hubungkan pin pertama atau terminal terluar milik potentiometer ke jalur power pada breadboard. Lalu hubungkan pin terluar lainnya ke jalur ground pada breadboard. Tersisa pin di tengah yang belum terhubung. Pin ini dihubungkan ke analog input pada Arduino. Melalui pin ini, potentiometer mengirimkan nilai ke pada Arduino. Potentiometer pertama terhubung dengan pin analog A0 dan potentiometer kedua terhubung dengan pin analog A1. Seperti biasa, power dihubungkan dengan kabel berwarna merah, ground dengan kabel berwarna hitam dan untuk menghubungkan pin tengah, gunakan kabel berwarna kuning.
Setelah potentiometer terhubung, hubungkan Arduino TFT ke breadboard. Perhatikan baik-baik pin pada Arduino TFT. Header pada sisi layar dengan tab warna biru lah yang terhubung dengan board. Perlu diingat, orientasi layar ini terbalik. Jadi jangan kaget.
Oke, selanjutnya kita perlu menghubungkan Arduino TFT dengan Arduino UNO. Hubungkan pin BL dan +5V ke power. Hubungkan juga pin GND ke ground. Pin LCD-CS dihubungkan ke pin 10, pin DC dihubungkan ke pin 9, pin RESET dihubungkan ke pin 8, pin MOSI dihubungkan ke pin 11, dan terakhir pin SCK dihubungkan ke pin 13. Untuk menghubungkan pin-pin tersebut, gunakan kabel jumper. Untuk pin yang terhubung ke pin digital pada arduino, gunakan kabel warna biru. Kalau masih bingung cara menghubungkannya, lihat gambar di bawah ini ya.
3.3 Kode Program Pong
Komponen yang diperlukan sudah terpasang dengan rapi. Sekarang saatnya untuk membuat program. Sebelum menulis kode, pastikan IDE yang digunakan adalah versi terbaru agar library yang digunakan pada game ini dapat diload dengan baik.
#include#include
Library SPI digunakan agar microcontroller pada Arduino UNO dapat berkomunikasi dengan komponen yang terhubung dengan pin SPI (Serial Peripheral Interface). Library TFT digunakan agar kita dapat menggambar sesuai ke layar Arduino TFT.
Lalu definisikan tiga buah konstanta untuk masing-masing pin LCD-CS, DC, dan RESTART dengan nilai sesuai dengan pin yang terhubung. Selanjutnya kita butuh instance dari library TFT untuk mengontrol layar TFT. Instance tersebut diberi nama TFTscreen. Berikut adalah kodenya.
#define cs 10 #define dc 9 #define rst 8 TFT TFTscreen = TFT(cs, dc, rst);
Selanjutnya kita butuh variabel untuk posisi x,y milik paddle dan bola, arah bola dan posisi terakhir bola dan juga paddle. Seluruh variabel ini memiliki tipe integer.
int paddleX = 0; int paddleY = 0; int oldPaddleX, oldPaddleY; int ballDirectionX = 1; int ballDirectionY = 1; int ballX, ballY, oldBallX, oldBallY;
Sekarang, kita inisiasi layar TFT lalu menghapus background layar di dalam function setup(). Berikut adalah kodenya.
void setup() {
TFTscreen.begin();
TFTscreen.background(0,0,0);
}
Dapat dilihat pada kode di atas, untuk menghapus background layar cukup menset background layar menjadi hitam melalui function background(). Argumen pada function tersebut adalah nilai masing-masing channel RGB.
Selanjutnya, kita perlu menyimpan nilai tinggi dan lebar layar. Kemudian, kita harus membaca nilai dari potentiometer sebelum proses mapping untuk menggunakan range nilainya. Berikut adalah kodenya.
void loop() {
int myWidth = TFTscreen.width();
int myHeight = TFTscreen.height();
paddleX = map(analogRead(A0), 0, 1023,
0, myWidth) - 20/2;
paddleY = map(analogRead(A1), 0, 1023,
0, myHeight) - 5/2;
Nilai tinggi dan lebar layar didapatkan dari function width() dan height() yang diakses dari objek TFTscreen. Lalu untuk membaca nilai dari potentiometer, gunakan function analogRead() dengan argumen pin analog pada Arduino yang terhubung dengan potentiometer. Setelah membaca nilai dari potentiometer, proses mapping dilakukan menggunakan function map(). Function ini digunakan untuk mengatur suatu nilai dari suatu range ke range lain. Nilai rendah potentiometer pertama yang terhubung ke pin A0 sebesar 0 akan dimap ke nilai terendah yaitu 0 dan nilai tertingginya yaitu sebesar 1023 akan dimap ke nilai lebar layar. Hal yang serupa juga dilakukan untuk potentiometer yang terhubung dengan pin A1, hanya saja nilai tertinggi pada potentiometer ini dimap ke nilai tinggi layar.
Setelah proses mapping, nilai hasil mapping potentiometer A0 dikurangi dengan 20/2 dan disimpan ke dalam variabel paddleX. Nilai hasil mapping potentiometer A1 dikurangi dengan 5/2 dan disimpan ke variabel paddleY.
Ok, selanjutnya adalah menghapus lokasi terakhir paddle jika ada pergerakan. Berikut adalah kodenya.
TFTscreen.fill(0,0,0);
if (oldPaddleX != paddleX ||
oldPaddleY != paddleY) {
TFTscreen.rect(oldPaddleX,
oldPaddleY, 20, 5);
}
Untuk menghapus lokasi terakhir paddle, cukup membuat persegi panjang dengan warna hitam. Pada kode di atas, function fill() digunakan untuk memberi warna pada objek yang akan digambar. Function ini memiliki argumen yang sama dengan function background. Setelah mengatur warna, program akan mencek apalah nilai oldPaddleX tidak sama dengan nilai paddleX atau nilai oldPaddleY tidak sama dengan nilai paddleY. Jika benar, berarti ada pergerakan paddle. Maka, program akan membuat persegi di koordinat oldPaddleX dan oldPaddleY sebesar 20 x 5.
TFTscreen.fill(255,255,255); TFTscreen.rect(paddleX, paddleY, 20, 5);
Lalu kita perlu menyimpan posisi paddle saat ini menjadi posisi sebelumnya. Hal ini dilakukan agar kita dapat melakukan pengecekan apakah paddle bergerak atau tidak. Masih ingat kode untuk mengecek pergerakan paddle? Ya, paddle dianggap bergerak jika posisi terakhir paddle tidak sama dengan posisi paddle sekarang. Berikut adalah kodenya.
oldPaddleX = paddleX; oldPaddleY = paddleY;
Terakhir, kita akan menggunakan nilai dari variabel ballSpeed untuk menentukan seberapa cepat layar melakukan perubahan. Kode di bawah ini ditulis pada akhir function loop().
if (millis() % ballSpeed < 2) {
moveBall();
}
}
Kode di atas digunakan untuk mencek apakah millisec modulo nilai ballSpeed lebih kecil dari 2. Jika iya, program akan menjalankan function buatan kita yaitu moveBall() untuk menggerakkan bola.
Function moveBall() akan mengubah posisi bola dengan cara seperti mengubah posisi paddle, yaitu menggambar persegi panjang warna hitam pada posisi sebelumnya dan menggambar persegi panjang warna putih pada posisi yang baru. Function ini juga akan memastikan bola tidak keluar dari layar jika bola menyentuh sisi layar. Berikut adalah kodenya. Ingat, tulis kode ini di luar function loop() ya.
void moveBall() {
if (ballX > TFTscreen.width() ||
ballX < 0) {
ballDirectionX = -ballDirectionX;
}
if (ballY > TFTscreen.height() ||
ballY < 0) {
ballDirectionY = -ballDirectionY;
}
if (inPaddle(ballX, ballY, paddleX,
paddleY, 20, 5)) {
ballDirectionY = -ballDirectionY;
}
ballX += ballDirectionX;
ballY += ballDirectionY;
TFTscreen.fill(0,0,0);
if (oldBallX != ballX ||
oldBallY != ballY) {
TFTscreen.rect(oldBallX, oldBallY,
5, 5);
}
TFTscreen.fill(255,255,255);
TFTscreen.rect(ballX, ballY, 5, 5);
oldBallX = ballX; oldBallY = ballY;
}
Pada function tersebut, if pertama dan kedua digunakan agar bola tidak keluar dari sisi layar lalu arah bola dibuat negatif untuk menandakan bola bergerak ke arah datang. Pada if ketiga, terdapat function baru yaitu inPaddle(). Function ini kita gunakan untuk mencek apakah bola menyentuh paddle. Jika menyentuh paddle, arah bola terhadap sumbu Y diubah menjadi berlawanan.
Setelah melakukan pengecekan, masing-masing variabel yang menyimpan koordinat X dan Y milik bola ditambah dengan nilai dari variabel ballDirection masing-masing sumbu. Lalu, kita hapus bola pada posisi sebelumnya dengan cara yang sama seperti menghapus paddle. Setelah kita hapus bola tersebut, ktia gambar bola dengan warna putih pada posisi yang baru. Terakhir, jangan lupa untuk menyimpan koordinat posisi bola saat ini ke variabel oldBall masing-masing sumbu. Variabel ini digunakan untuk mencek ada atau tidak pergerakan bola.
Kode terakhir adalah function inPaddle(). Function ini memiliki 6 buah argumen. Berikut adalah kodenya.
boolean inPaddle(int x, int y,
int rectX, int rectY,
int rectWidth, int rectHeight) {
boolean result = false;
if ((x >= rectX && x <=
(rectX + rectWidth)) &&
(y >= rectY && y <=
(rectY + rectHeight))) {
result = true;
}
return result;
}
Function inPaddle() akan mencek posisi bola dan paddle. Jika posisi mereka sama, maka function akan memberikan nilai true dan mengubah arah bola pada function moveBall().
Itu adalah keseluruhan kode untuk membuat game Pong sederhana. Di bawah ini adalah bentuk utuh dari programnya.
/* TFT Pong This example for the Arduino screen reads the values of 2 potentiometers to move a rectangular platform on the x and y axes. The platform can intersect with a ball causing it to bounce. This example code is in the public domain. Created by Tom Igoe December 2012 Modified 15 April 2013 by Scott Fitzgerald http://www.arduino.cc/en/Tutorial/TFTPong */ #include#include #define cs 10 #define dc 9 #define rst 8 TFT TFTscreen = TFT(cs, dc, rst); int paddleX = 0; int paddleY = 0; int oldPaddleX, oldPaddleY; int ballDirectionX = 1; int ballDirectionY = 1; int ballX, ballY, oldBallX, oldBallY; void setup() { TFTscreen.begin(); TFTscreen.background(0,0,0); } void loop() { int myWidth = TFTscreen.width(); int myHeight = TFTscreen.height(); paddleX = map(analogRead(A0), 0, 1023, 0, myWidth) - 20/2; paddleY = map(analogRead(A1), 0, 1023, 0, myHeight) - 5/2; TFTscreen.fill(0,0,0); if (oldPaddleX != paddleX || oldPaddleY != paddleY) { TFTscreen.rect(oldPaddleX, oldPaddleY, 20, 5); } TFTscreen.fill(255,255,255); TFTscreen.rect(paddleX, paddleY, 20, 5); oldPaddleX = paddleX; oldPaddleY = paddleY; if (millis() % ballSpeed < 2) { moveBall(); } } void moveBall() { if (ballX > TFTscreen.width() || ballX < 0) { ballDirectionX = -ballDirectionX; } if (ballY > TFTscreen.height() || ballY < 0) { ballDirectionY = -ballDirectionY; } if (inPaddle(ballX, ballY, paddleX, paddleY, 20, 5)) { ballDirectionY = -ballDirectionY; } ballX += ballDirectionX; ballY += ballDirectionY; TFTscreen.fill(0,0,0); if (oldBallX != ballX || oldBallY != ballY) { TFTscreen.rect(oldBallX, oldBallY, 5, 5); } TFTscreen.fill(255,255,255); TFTscreen.rect(ballX, ballY, 5, 5); oldBallX = ballX; oldBallY = ballY; } boolean inPaddle(int x, int y, int rectX, int rectY, int rectWidth, int rectHeight) { boolean result = false; if ((x >= rectX && x <= (rectX + rectWidth)) && (y >= rectY && y <= (rectY + rectHeight))) { result = true; } return result; }
No comments:
Post a Comment