Mega Panduan Eksperimen: Modifikasi Grafis Hex, Audio Frekuensi, & Integrasi Web Server pada Game Hardware ESP8266

Kustomisasi Grafis: Rekayasa Gambar Monokrom ke Array Data Hex

Layar OLED tipe SSD1306 adalah display berbasis piksel matriks beresolusi 128x64. Layar ini tidak mengenal warna (monokrom). Untuk menyalakan sebuah piksel menjadi warna putih, mikrokontroler harus mengirimkan data bit bernilai 1, sedangkan untuk memadamkannya dikirimkan angka 0. Kumpulan deretan bit 0 dan 1 ini dikelompokkan per 8 bit menjadi satu bait (*byte*) data heksadesimal.

Penerapan Struktur Kode Baru pada Berkas Skrip Arduino IDE:

Tempel kode heksadesimal hasil generate tadi di bagian paling atas skrip `.ino` Anda (di luar blok fungsi manapun) dengan menambahkan pengenal memori flash PROGMEM agar menghemat sisa ruang RAM:

const unsigned char PROGMEM karakter_baru_deri[] = {
  0x00, 0x1c, 0x3e, 0x7f, 0x7f, 0x3e, 0x1c, 0x00, // Hasil salinan data byte hex dari web konverter
  0x03, 0x0f, 0x3f, 0xfc, 0xfc, 0x3f, 0x0f, 0x03
};

Cari baris kode penggambaran karakter asli di dalam fungsi loop utama permainan, lalu ganti menggunakan fungsi penarik biner bitmap display.drawBitmap():

// Format parameter: drawBitmap(koordinatX, koordinatY, namaArray, lebarPiksel, tinggiPiksel, warna);
display.clearDisplay(); 
display.drawBitmap(birdX, birdY, karakter_baru_deri, 16, 16, SSD1306_WHITE);
display.display();

Kustomisasi Audio: Eksperimen Modulasi Frekuensi PWM Notasi Nada

Piezo buzzer yang terpasang pada pin D5 (GPIO 14) bekerja merespon frekuensi gelombang kotak beruntun yang dikirim oleh mikrokontroler. Fungsi asli di dalam berkas skrip menggunakan perintah beep(int freq, int duration) yang merupakan perluasan fungsi inti tone(pin, frekuensi, durasi). Makin besar nilai angka frekuensi Hertz (Hz) yang kita masukkan, suara yang dikeluarkan oleh getaran membran buzzer akan terdengar makin nyaring meninggi.

Untuk mengubah bunyi loncatan monoton menjadi susunan melodi lagu atau rangkaian efek suara *arpeggio* ala konsol Nintendo jadul, Anda dapat menyusun tangga nada musik menggunakan daftar nilai konversi frekuensi Hz di bawah ini:

Penerapan Struktur Modifikasi Kode Audio pada Program Utama:

Cari blok penangkap input tombol di dalam fungsi loop, lalu ganti fungsi single beep monoton bawaan dengan efek suara lompatan bertingkat (*arpeggio jump effect*) yang jauh lebih interaktif:

if (digitalRead(BUTTON_PIN) == LOW) {
  velocity = flapStrength; // Karakter didorong ke atas melewati batas gravitasi
  
  // LOGIKA EFEK AUDIO RETRO BERUNTUN BARU:
  tone(BUZZER_PIN, 440, 25);  // Memicu nada A4 selama 25 milidetik
  delay(25);                  // Memberikan jeda waktu kompilasi instruksi perangkat keras
  tone(BUZZER_PIN, 523, 25);  // Melompat ke nada C5 berdurasi singkat secara instan
  delay(25);
  tone(BUZZER_PIN, 659, 40);  // Menutup rangkaian suara dengan nada tinggi E5 yang nyaring
}

Integrasi Nirkabel: Membangun Web Server Lokal Pengendali Variabel Game

Papan NodeMCU ESP8266 dipersenjatai dengan perangkat keras modul pemancar radio nirkabel internal. Kita dapat memanfaatkannya untuk mendirikan **Wi-Fi Access Point (AP)** lokal. Chip akan memancarkan sinyal Wi-Fi mandiri tanpa membutuhkan bantuan router luar. Ketika HP kita terhubung ke sinyal tersebut dan mengakses alamat gerbang IP default ESP8266, sistem akan menyajikan halaman *interface* web berupa dashboard kontrol HTML. Dari dashboard inilah kita bisa menyuntikkan data untuk mengubah parameter game (nilai gravitasi, lebar celah rintangan, kecepatan geser pipa) secara instan tanpa perlu mencolokkan kabel data ke laptop lagi.

Panduan Penulisan Skrip Tambahan Web Server Kontrol Seluler:

1. Sisipkan pemanggilan file pustaka web server bawaan core library di baris paling atas (sebelum fungsi setup):

#include <ESP8266WiFi.h>        // Mengaktifkan fungsionalitas antena radio Wi-Fi chip
#include <ESP8266WebServer.h>   // Mengaktifkan arsitektur penangkap protokol HTTP request

ESP8266WebServer server(80);    // Menginstansiasi objek server web berjalan pada port default 80

2. Masuk ke dalam blok fungsi setup(), lalu tambahkan baris perintah inisialisasi jaringan pemancar Wi-Fi dan registrasi rute URL link web server:

void setup() {
  // ... [Biarkan baris kode inisialisasi OLED display dan pinMode tombol aslimu tetap berjalan di atasnya] ...

  // A. Perintahkan chip memancarkan sinyal Wi-Fi Access Point dengan nama SSID dan password kustom
  WiFi.softAP("Konsol_Retro_DeriDev", "password123");

  // B. Registrasikan rute URL utama "/" yang bertugas menyajikan visual halaman kontrol ke layar browser HP
  server.on("/", []() {
    String html = "<html><head><meta name='viewport' content='width=device-width, initial-scale=1'>";
    html += "<style>body{background:#0b1329;color:#fff;font-family:sans-serif;text-align:center;padding:30px;} .btn{background:#10b981;padding:14px 28px;border-radius:12px;color:black;font-weight:bold;text-decoration:none;display:inline-block;margin:15px;box-shadow:0 4px 10px rgba(16,185,129,0.3);}</style></head>";
    html += "<body><h1>🕹️ Dashboard Kontrol Nirkabel Deri.Dev</h1><p>Modifikasi parameter kesulitan game secara real-time dari HP:</p>";
    html += "<a class='btn' href='/change?mode=easy'>Mode Santai (Low Gravity)</a>";
    html += "<a class='btn' href='/change?mode=hard' style='background:#f43f5e;color:white;'>Mode Dewa (Extreme Velocity)</a>";
    html += "</body></html>";
    server.send(200, "text/html", html); // Kirimkan kode HTML ke browser ponsel pengakses
  });

  // C. Registrasikan rute URL aksi pengeksekusi perubahan nilai variabel internal game "/change"
  server.on("/change", []() {
    String argumen_dari_hp = server.arg("mode"); // Tangkap data argumen string yang dikirim tombol HTML
    
    if(argumen_dari_hp == "easy") {
      gravity = 0.14;         // Memotong nilai gravitasi menjadi sangat ringan agar karakter melayang mudah
      pipeGapSize = 44;       // Memperlebar ruang lolos celah pipa rintangan
    } 
    else if(argumen_dari_hp == "hard") {
      gravity = 0.42;         // Menaikkan daya tarik gravitasi menjadi sangat berat dan sadis
      pipeGapSize = 24;       // Mempersempit ruang lolos celah pipa secara ekstrem
    }
    
    // Alihkan kembali layar HP pengguna ke menu utama setelah data berhasil disuntikkan
    server.sendHeader("Location", "/");
    server.send(303);
  });

  server.begin(); // Perintahkan mesin web server mulai berjalan aktif
}

3. Terakhir, sisipkan perintah wajib penangkap ketukan data client di baris paling atas di dalam blok fungsi loop() utama permainan Anda:

void loop() {
  server.handleClient(); // Memaksa antena radio ESP8266 memeriksa antrean request browser HP setiap saat
  
  // ... [Biarkan seluruh sisa baris kode perhitungan fisika game loop asli bawaanmu tetap berjalan aman di bawahnya] ...
}