Beranda
/
Project Hub
/
Robotika & Otomasi
/
Animasi dan Permainan Interaktif Menggunakan Arduino dan LCD

Robotika & Otomasi Tingkat: Pemula 5 x dilihat

Animasi dan Permainan Interaktif Menggunakan Arduino dan LCD

Ringkasan Proyek

Pelajari cara membuat animasi dan permainan interaktif menggunakan Arduino UNO dan LCD 16x2. Proyek ini memperkenalkan cara menampilkan teks berjalan, membuat karakter khusus menggunakan pixel LCD, menggerakkan animasi panah, serta membuat permainan sederhana ketika karakter pemain harus menghindari serangan panah menggunakan push button. Melalui proyek ini, pemula dapat mempelajari pemrograman Arduino, penggunaan library LiquidCrystal, fungsi interrupt, dan pembuatan game sederhana.

Bahan & Komponen

Daftar perangkat keras, modul, dan tools yang dibutuhkan untuk merakit proyek ini.

Daftar Komponen & Perangkat Keras

1x Arduino UNO (Mikrokontroler utama untuk menjalankan animasi dan logika permainan).
1x Alphanumeric LCD 16x2 (Layar dengan 16 kolom dan 2 baris untuk menampilkan teks, karakter khusus, animasi, dan permainan).
1x Potentiometer (Mengatur tingkat kontras tampilan LCD melalui pin VO).
1x Push Button (Tombol input untuk menggerakkan karakter pemain dari baris kedua ke baris pertama).
1x Resistor 220 ohm (Membatasi arus pada backlight LCD).
1x Breadboard (Media untuk merangkai komponen elektronik).
Kabel jumper (Menghubungkan LCD, potentiometer, push button, dan Arduino UNO).
Kabel USB Arduino (Menghubungkan Arduino UNO ke komputer sekaligus menyediakan sumber daya).

Software dan Library

Arduino IDE (Software untuk menulis, memeriksa, dan mengunggah program ke Arduino UNO).
LiquidCrystal.h (Library Arduino untuk mengontrol LCD berbasis karakter melalui koneksi parallel 4-bit atau 8-bit).
Arduino C++ (Bahasa pemrograman untuk mengatur karakter, animasi, input tombol, dan logika permainan).

Peralatan Tambahan

1x Komputer atau Laptop (Untuk menjalankan Arduino IDE dan mengunggah program).

Langkah Pembuatan

Khusus Member

Panduan perakitan tahap demi tahap dan catatan proses pengerjaan.

Dalam proyek ini, kamu akan belajar mengendalikan LCD 16x2 menggunakan Arduino UNO. Proses pembelajaran dimulai dari menghubungkan LCD, menampilkan pesan sederhana, membuat teks berjalan, menggambar karakter menggunakan pixel LCD, hingga membuat permainan sederhana dengan karakter pemain dan panah yang bergerak.

Langkah 1: Siapkan Arduino UNO dan LCD 16x2

Siapkan Arduino UNO, LCD 16x2, potentiometer, resistor 220 ohm, breadboard, dan kabel jumper. Perhatikan bahwa LCD 16x2 memiliki 16 pin yang digunakan untuk catu daya, pengaturan kontras, komunikasi data, dan backlight. Pastikan kamu mengenali setiap pin sebelum memulai perakitan.

$\"Proyek$ Tampilan utama proyek animasi dan permainan LCD dari Debanshu Das.

Langkah 2: Hubungkan Pin Catu Daya LCD

Hubungkan LCD ke breadboard dan Arduino UNO. Sambungkan pin VSS LCD (pin 1) ke GND dan pin VDD (pin 2) ke 5V. Hubungkan pin VO (pin 3) ke kaki tengah atau wiper potentiometer. Kedua kaki sisi potentiometer dihubungkan masing-masing ke 5V dan GND. Sambungkan pin R/W (pin 5) ke GND karena proyek menggunakan mode penulisan data ke LCD.

Untuk backlight, hubungkan pin A atau anode (pin 15) ke 5V melalui resistor 220 ohm. Hubungkan pin K atau cathode (pin 16) ke GND. Setelah rangkaian catu daya selesai, nyalakan Arduino. Jika LCD berfungsi, biasanya baris bawah akan terlihat menyala atau menampilkan blok karakter. Pemeriksaan ini dilakukan sebelum melanjutkan ke koneksi data.

Langkah 3: Hubungkan Pin Kontrol dan Data LCD

Hubungkan pin RS (pin 4) LCD ke pin digital 12 Arduino UNO. Hubungkan pin E atau Enable (pin 6) ke pin digital 11. Selanjutnya, hubungkan empat pin data LCD untuk komunikasi 4-bit: D4 (pin 11) ke pin digital 4, D5 (pin 12) ke pin digital 5, D6 (pin 13) ke pin digital 6, dan D7 (pin 14) ke pin digital 7.

Pin D0 sampai D3 tidak digunakan dalam konfigurasi ini. Pastikan nomor pin pada rangkaian sesuai dengan deklarasi pin dalam program Arduino.

Langkah 4: Uji Tampilan LCD dengan Pesan Sederhana

Buka Arduino IDE dan buat sketch baru. Tambahkan library LiquidCrystal.h, kemudian deklarasikan objek LCD dengan urutan pin RS, E, D4, D5, dan D6, D7. Gunakan lcd.begin(16,2) untuk mengatur ukuran layar dan lcd.print() untuk menampilkan pesan.

Unggah program berikut sebagai pengujian awal:

#include <LiquidCrystal.h> LiquidCrystal lcd(12,11,4,5,6,7);//rs,e,d4,d5,d6,d7 respectively void setup(){ lcd.begin(16,2); lcd.setCursor(0,1); lcd.print(\"Working\"); } void loop(){ }

Jika tulisan Working muncul pada LCD, berarti koneksi data dan kontrol telah berhasil. Jika karakter tidak muncul atau tampil secara acak, periksa kembali pengaturan kontras potentiometer, sambungan kabel, dan urutan pin dalam deklarasi LiquidCrystal.

Langkah 5: Pahami Cara Kerja Library LiquidCrystal

Objek LiquidCrystal dibuat menggunakan perintah LiquidCrystal lcd(12,11,4,5,6,7). Urutan angka menunjukkan pin RS, E, D4, D5, D6, dan D7. Perintah lcd.begin(16,2) mengatur ukuran layar menjadi 16 kolom dan 2 baris.

Perintah lcd.setCursor(0,1) mengatur posisi kursor pada kolom pertama dan baris kedua. Perlu diingat bahwa indeks kolom dan baris dimulai dari angka 0. Perintah lcd.print(\"Welcome\") digunakan untuk menampilkan teks pada posisi kursor saat ini.

Langkah 6: Membuat Animasi Teks Berjalan

Setelah berhasil menampilkan teks statis, sekarang buat tulisan yang bergerak dari kanan ke kiri seperti papan informasi elektronik. Program menggunakan variabel n untuk menentukan posisi teks, pointer ptr untuk menentukan bagian pesan yang ditampilkan, dan perintah lcd.clear() untuk membersihkan layar setiap kali posisi teks berubah.

Pesan akan dimulai dari posisi kolom 15. Pada setiap pengulangan, posisi dikurangi satu sehingga teks terlihat bergerak ke kiri. Ketika posisi sudah negatif, pointer digeser agar karakter yang telah keluar dari layar tidak ditampilkan kembali.

Kecepatan animasi diatur menggunakan delay(250). Kamu dapat mengubah nilai tersebut untuk membuat animasi lebih cepat atau lebih lambat.

Langkah 7: Membuat Custom Characters

LCD 16x2 tidak hanya dapat menampilkan huruf dan angka. Kamu juga dapat membuat karakter sendiri menggunakan fitur Custom Characters dari library LiquidCrystal. Setiap karakter khusus dibentuk menggunakan delapan baris data byte. Setiap baris terdiri dari lima bit yang merepresentasikan pixel pada karakter LCD.

Dalam proyek ini, pembuat menggunakan karakter dinosaurus sebagai contoh. Nilai B01110, B01110, dan seterusnya menentukan pixel yang menyala dan mati. Setelah karakter dibuat, gunakan lcd.createChar(0,dino) untuk menyimpan karakter pada slot nomor 0. Kemudian gunakan lcd.write(byte(0)) untuk menampilkannya.

Kamu juga dapat membuat karakter sendiri melalui LCD Character Creator yang tersedia di https://maxpromer.github.io/LCD-Character-Creator/.

Langkah 8: Membuat Animasi Panah

Selanjutnya, buat animasi panah menggunakan tiga Custom Characters, yaitu arrowhead, arrowbody, dan arrowtail. Masing-masing bagian panah dibuat menggunakan pola pixel 5x8. Setelah mendeklarasikan ketiga karakter, daftarkan menggunakan lcd.createChar() dengan alamat 0, 1, dan 2.

Gunakan lcd.write(byte(0)), lcd.write(byte(1)), dan lcd.write(byte(2)) untuk menampilkan ketiga bagian panah secara berurutan. Variabel n menentukan posisi panah. Setiap pengulangan menghapus layar, mengatur posisi kursor, menggambar panah, dan mengurangi nilai n. Perintah delay(50) menentukan kecepatan animasi.

Pada contoh program animasi lengkap yang disertakan di bagian Code, tampilan yang aktif adalah teks nama pembuat. Bagian kode untuk menampilkan panah dan karakter pemain berada dalam komentar. Untuk menjalankan animasi panah, aktifkan bagian kode tersebut dan sesuaikan posisi karakter sesuai kebutuhan.

Langkah 9: Rancang Konsep Permainan LCD

Permainan ini menggunakan karakter manusia sebagai hero dan karakter panah sebagai objek yang bergerak menuju pemain. Hero berada pada kolom 1 dan baris kedua (indeks 1). Pemain dapat melompat ke baris pertama (indeks 0) dengan menekan push button. Jika panah mencapai posisi hero saat hero berada di baris kedua, permainan berakhir.

Skor akan bertambah seiring berjalannya permainan dan ditampilkan di bagian kanan atas LCD. Kecepatan panah dibuat sedikit berbeda menggunakan angka acak sehingga permainan terasa lebih menarik.

Langkah 10: Hubungkan Push Button untuk Mengendalikan Hero

Hubungkan push button ke pin digital 2 Arduino UNO dan GND. Program menggunakan attachInterrupt(0,buttonin,CHANGE) untuk mendeteksi perubahan kondisi pada interrupt 0, yang pada Arduino UNO berhubungan dengan pin digital 2.

Ketika tombol ditekan, fungsi buttonin() memeriksa kondisi pin 2. Jika terbaca LOW, variabel level diubah menjadi 0 sehingga karakter berpindah ke baris pertama. Jika tombol dilepas dan pin kembali HIGH, karakter kembali ke baris kedua.

Pastikan konfigurasi input tombol menggunakan pull-up yang sesuai. Kode asli tidak secara eksplisit mengatur pinMode(2, INPUT_PULLUP), sehingga konfigurasi tersebut perlu ditambahkan untuk rangkaian tombol yang menghubungkan pin 2 ke GND.

Langkah 11: Jalankan Permainan

Unggah program game ke Arduino UNO. Karakter panah akan bergerak dari kanan menuju kiri layar. Karakter hero akan tetap berada di kolom 1 dan pemain harus menekan tombol untuk melompat ke baris pertama saat panah mendekat.

Program menggunakan random(15,25) untuk menentukan variasi kecepatan gerakan panah. Fungsi randomSeed(analogRead(A0)) digunakan untuk menginisialisasi angka acak menggunakan pembacaan analog pada pin A0 yang tidak terhubung.

Skor bertambah ketika loop permainan berjalan. Jika karakter panah mencapai posisi hero ketika hero berada di baris kedua, fungsi stopgame() dipanggil. LCD menampilkan tulisan Game over dan skor akhir selama tiga detik sebelum variabel permainan diatur ulang.

Langkah 12: Eksplorasi dan Kembangkan Permainan

Setelah permainan berhasil dijalankan, cobalah mengubah pola karakter hero dan panah, kecepatan gerakan, serta sistem penilaian. Kamu juga dapat membuat karakter tambahan menggunakan Custom Characters dan mengembangkan permainan dengan tingkat kesulitan yang berbeda.

Catatan Teknis dan Pemeriksaan Program

Dokumentasi asli memiliki beberapa bagian yang perlu diperhatikan sebelum program digunakan. Pada penjelasan wiring, pin VSS dan VDD tertukar penamaannya: koneksi yang benar adalah VSS ke GND dan VDD ke 5V. Kode game juga belum mendeklarasikan pinMode untuk tombol. Tambahkan konfigurasi INPUT_PULLUP jika tombol dihubungkan antara pin 2 dan GND. Selain itu, fungsi interrupt menggunakan CHANGE sehingga fungsi tombol dipanggil saat tombol ditekan maupun dilepas. Program game merupakan contoh edukatif yang dapat memerlukan penyempurnaan logika dan pengujian sebelum digunakan sebagai proyek final.

🔒

Akses Gratis Khusus Member

Buka Seluruh Panduan, Skema & Source Code

Dapatkan akses penuh ke langkah perakitan detail, diagram sirkuit lengkap, dan source code siap pakai. Gratis selamanya!

Masuk Sekarang Daftar Akun Baru (Gratis)

✓ Akses Gratis Selamanya

✓ Copy-Paste Source Code

✓ Kembali Otomatis ke Proyek

Langkah 1: Siapkan Arduino UNO dan LCD 16x2

$\"Proyek$ Tampilan utama proyek animasi dan permainan LCD dari Debanshu Das.

Langkah 2: Hubungkan Pin Catu Daya LCD

Langkah 3: Hubungkan Pin Kontrol dan Data LCD

Pin D0 sampai D3 tidak digunakan dalam konfigurasi ini. Pastikan nomor pin pada rangkaian sesuai dengan deklarasi pin dalam program Arduino.

Langkah 4: Uji Tampilan LCD dengan Pesan Sederhana

Unggah program berikut sebagai pengujian awal:

#include <LiquidCrystal.h> LiquidCrystal lcd(12,11,4,5,6,7);//rs,e,d4,d5,d6,d7 respectively void setup(){ lcd.begin(16,2); lcd.setCursor(0,1); lcd.print(\"Working\"); } void loop(){ }

Langkah 5: Pahami Cara Kerja Library LiquidCrystal

Langkah 6: Membuat Animasi Teks Berjalan

Kecepatan animasi diatur menggunakan delay(250). Kamu dapat mengubah nilai tersebut untuk membuat animasi lebih cepat atau lebih lambat.

Langkah 7: Membuat Custom Characters

Kamu juga dapat membuat karakter sendiri melalui LCD Character Creator yang tersedia di https://maxpromer.github.io/LCD-Character-Creator/.

Langkah 8: Membuat Animasi Panah

Langkah 9: Rancang Konsep Permainan LCD

Skor akan bertambah seiring berjalannya permainan dan ditampilkan di bagian kanan atas LCD. Kecepatan panah dibuat sedikit berbeda menggunakan angka acak sehingga permainan terasa lebih menarik.

Langkah 10: Hubungkan Push Button untuk Mengendalikan Hero

Langkah 11: Jalankan Permainan

Langkah 12: Eksplorasi dan Kembangkan Permainan

Catatan Teknis dan Pemeriksaan Program

Skema & Diagram Sirkuit

Skema Rangkaian LCD 16x2 dengan Arduino UNO

LCD menggunakan komunikasi parallel 4-bit. Jalur kontrol RS dan E serta empat jalur data D4 sampai D7 dihubungkan ke pin digital Arduino UNO. Potentiometer digunakan untuk mengatur kontras LCD, sedangkan resistor 220 ohm membatasi arus backlight.

1. Koneksi Catu Daya LCD

LCD pin 1 (VSS) → GND Arduino UNO.
LCD pin 2 (VDD) → 5V Arduino UNO.
LCD pin 3 (VO) → Wiper atau kaki tengah potentiometer.
Kaki sisi pertama potentiometer → 5V.
Kaki sisi kedua potentiometer → GND.
LCD pin 5 (R/W) → GND.

2. Koneksi Pin Kontrol LCD

LCD pin 4 (RS) → Arduino digital pin 12.
LCD pin 6 (E/Enable) → Arduino digital pin 11.

3. Koneksi Pin Data LCD

LCD pin 11 (D4) → Arduino digital pin 4.
LCD pin 12 (D5) → Arduino digital pin 5.
LCD pin 13 (D6) → Arduino digital pin 6.
LCD pin 14 (D7) → Arduino digital pin 7.
LCD pin 7 sampai 10 (D0 sampai D3) → Tidak digunakan.

4. Koneksi Backlight LCD

LCD pin 15 (A/Anode) → 5V melalui resistor 220 ohm.
LCD pin 16 (K/Cathode) → GND.

5. Koneksi Push Button untuk Permainan

Satu terminal push button → Arduino digital pin 2.
Terminal lainnya → GND.
Gunakan konfigurasi pinMode(2, INPUT_PULLUP) agar tombol memiliki kondisi HIGH saat tidak ditekan dan LOW saat ditekan.

6. Catu Daya

Arduino UNO mendapatkan daya melalui kabel USB atau sumber daya eksternal yang sesuai. Jalur 5V dan GND Arduino digunakan untuk mencatu LCD dan potentiometer. Semua jalur GND harus terhubung bersama.

$\"Skema$ Diagram rangkaian LCD 16x2 yang disediakan pada bagian Schematics proyek Hackster.io.

Catatan Wiring

Dokumentasi asli menuliskan koneksi VSS ke jalur positif dan VDD ke jalur negatif. Penamaan tersebut terbalik secara teknis. Gunakan koneksi standar yang benar, yaitu VSS ke GND dan VDD ke 5V. Pastikan pula spesifikasi backlight LCD sesuai dengan resistor pembatas arus yang digunakan.

Dokumentasi skema yang tersedia secara eksplisit adalah skema LCD. Koneksi push button dijelaskan berdasarkan kode permainan dan menggunakan interrupt 0 pada pin digital 2 Arduino UNO.

Kode Program

/* =====================================================
   PROJECT: LCD ANIMATION AND GAMING
   AUTHOR: Debanshu Das
   PLATFORM: Arduino UNO
   LIBRARY: LiquidCrystal.h
   ===================================================== */

/* =====================================================
   PROGRAM 1: LCD ANIMATION
   ===================================================== */

// Include the library code
#include <LiquidCrystal.h>

// Initialize the library by associating LCD interface pins
// with the Arduino pin numbers they are connected to
const int rs = 12, en = 11, d4 = 4, d5 = 5, d6 = 6, d7 = 7;
LiquidCrystal lcd(rs, en, d4, d5, d6, d7);

// Custom character: Arrow head
byte arrowhead[] = {
  B00001,
  B00011,
  B00111,
  B01111,
  B00111,
  B00011,
  B00001,
  B00000
};

// Custom character: Arrow body
byte arrowbody[] = {
  B00000,
  B00000,
  B00000,
  B11111,
  B11111,
  B00000,
  B00000,
  B00000
};

// Custom character: Arrow tail
byte arrowtail[] = {
  B00011,
  B00111,
  B11111,
  B11111,
  B11111,
  B00111,
  B00011,
  B00000
};

// Custom character: Human character
byte man[] = {
  B01110,
  B01110,
  B00100,
  B01110,
  B10101,
  B00100,
  B01010,
  B10001
};

void setup() {
  // Set up the LCD's number of columns and rows
  lcd.createChar(0, arrowhead);
  lcd.createChar(1, arrowbody);
  lcd.createChar(2, arrowtail);
  lcd.createChar(3, man);
  lcd.begin(16, 2);

  // Print a message to the LCD
  // lcd.print(\"hello, world!\");
}

void loop() {
  int n;
  n = 15;

  while (n != -1) {
    lcd.clear();
    delay(10);
    lcd.setCursor(0, 0);
    lcd.print(\"by Debanshu Das\");

    /*
    lcd.setCursor(1, 1);
    lcd.write(byte(3));
    lcd.setCursor(n, 1);
    lcd.write(byte(0));
    lcd.write(byte(1));
    lcd.write(byte(2));
    */

    delay(65);
    n--;
  }
}


/* =====================================================
   PROGRAM 2: LCD GAME
   ===================================================== */

// Include the library code
#include <LiquidCrystal.h>

// Initialize the library by associating LCD interface pins
// with the Arduino pin numbers they are connected to
const int rs = 12, en = 11, d4 = 4, d5 = 5, d6 = 6, d7 = 7;
LiquidCrystal lcd(rs, en, d4, d5, d6, d7);

int level = 1;
int score = 0;

// Custom character: Arrow head
byte arrowhead[] = {
  B00001,
  B00011,
  B00111,
  B01111,
  B00111,
  B00011,
  B00001,
  B00000
};

// Custom character: Arrow body
byte arrowbody[] = {
  B00000,
  B00000,
  B00000,
  B11111,
  B11111,
  B00000,
  B00000,
  B00000
};

// Custom character: Arrow tail
byte arrowtail[] = {
  B00011,
  B00111,
  B11111,
  B11111,
  B11111,
  B00111,
  B00011,
  B00000
};

// Custom character: Human character
byte man[] = {
  B01110,
  B01110,
  B00100,
  B01110,
  B10101,
  B00100,
  B01010,
  B10001
};

void setup() {
  // Set up the LCD's number of columns and rows
  lcd.createChar(0, arrowhead);
  lcd.createChar(1, arrowbody);
  lcd.createChar(2, arrowtail);
  lcd.createChar(3, man);
  lcd.begin(16, 2);

  attachInterrupt(0, buttonin, CHANGE);
  randomSeed(analogRead(A0));

  // Print a message to the LCD
  // lcd.print(\"hello, world!\");
}

int n;

void loop() {
  n = 15;
  int rnd;
  rnd = random(15, 25);

  while (n != -1) {
    lcd.clear();
    delay(10);
    drawman();
    lcd.setCursor(n, 1);

    if (n == 1) {
      if (level == 1) {
        stopgame();
        continue;
      }
    }

    lcd.write(byte(0));
    lcd.write(byte(1));
    lcd.write(byte(2));
    lcd.setCursor(10, 0);
    lcd.print(score);

    delay(100 - rnd);
    n--;
    score++;

    if (level == 0)
      score--;
  }
}

void drawman() {
  lcd.setCursor(1, level);
  lcd.write(byte(3));
}

void buttonin() {
  if (digitalRead(2) == LOW) {
    level = 0;
  }
  else {
    level = 1;
  }
}

void stopgame() {
  lcd.clear();
  lcd.setCursor(0, 0);
  lcd.print(\"Game over\");
  lcd.setCursor(10, 0);
  lcd.print(score);

  level = 1;
  score = 0;
  n = 15;
  delay(3000);
  return;
}

/*
   IMPLEMENTATION NOTES:
   1. The two programs above are separate sketches.
      Upload only one sketch at a time.
   2. The game uses Arduino UNO external interrupt 0,
      corresponding to digital pin 2.
   3. For a push button connected between pin 2 and GND,
      configure pinMode(2, INPUT_PULLUP) in setup().
   4. The original game code does not explicitly configure
      the button pin mode.
   5. The original animation sketch displays the author's
      name. The arrow and human animation statements are
      included in a commented section.
*/

Tag & Komponen Terkait

#Arduino #Arduino UNO #LCD 16x2 #LiquidCrystal #Custom Characters #LCD Animation #Arduino Gaming #Push Button #C++ #Arduino IDE