Make Game: Flappy Dot

, , Leave a comment

Selamat datang kembali di andidinata.com. Dalam post kali ini saya mencoba untuk menyederhanakan konsep sehingga kita mengerti dengan mudah tentang bagaimana membuat sebuah game dari awal hingga selesai. Sebagai contoh adalah Flappy Dot, yang diinspirasi oleh game Flappy Bird. Selamat mencoba  dan semoga bermanfaat

 

Tahap 0: inisiasi hardware

Hubungkan ESP8266 dengan led matrix max7219 sesuai dengan tabel dibawah ini

ESP8266

Led Matrix MAX7219

3v3

VCC

G

GND

D7

DIN

D4

CS

D5

CLK

Kemudian download driver max7219 dari repository github.com/mdinata/reference/coding_graphics dan copykan ke dalam ESP8266

import max7219
from machine import Pin, SPI,freq
import time
tile=1
freq(160000000)
spi=SPI(1, baudrate=10000000, polarity=0, phase=0)
display=max7219.Matrix8x8(spi, Pin(2), tile)
display.brightness(3)
display.fill(0)
display.show()

 

Jalankan script tersebut untuk pertama kalinya dan berikan nama file untuk pertama kalinya.

Tahap 1: Membuat dinding bergerak

Kita membuat dinding bergerak dari kiri ke kanan terlebih dahulu. Kita menggunakan perintah untuk menggambar vertical line.

posx=0
posy=0
display.vline(posx,posy,8,1)
display.show()

Garis vertikal akan digambar dari posisi x = 0 dan posisi y = 0, sebayak 8 pixel dengan warna = 1 yang artinya pixel on. Tekan F5 untuk melihat apakah garis vertikal tampil pada led matrix.

Selanjutnya kita akan membuat garis tersebut bergerak dari kiri ke kanan. Dalam bayangan, kita ingin garis terus menerus bergerak dari sisi kiri ke kanan dan begitu seterusnya. Oleh karena itu kita membutuhkan while loop.

Ingatlah jika kita ingin menggerakkan garis dari kiri ke kanan, kita akan menambah posisi x berulang-ulang. Dan agar gerakan terlihat jelas, kita perlu memberikan jedah waktu yang cukup untuk mengamati pergerakan tersebut.

posx=0
posy=0
while True:
    display.vline(posx,posy,8,1)
    display.show()
    time.sleep(0.5)
    posx += 1

fungsi posx += 1 adalah untuk menambahkan posisi x sebanyak 1 pixel setiap ada pengulangan. Tekan F5 dan kita akan melihat garis bergerak dari kiri ke kanan. Namun kita akan melihat pergerakan tersebut meninggalkan jejak, sehingga seluruh led menyala. Untuk mengatasinya kita perlu menghapus jejaknya dengan menghapus vertical line sebelumnya pada saat vertical line pada posisi baru terbuat.

while True:
    display.vline(posx,posy,8,1)
    display.show()
    time.sleep(0.2)
    display.vline(posx,posy,8,0)
    posx += 1

Tentu kita bertanya mengapa saat program dijalankan garis vertikal awalnya terlihat namun akhirnya tidak terlihat pada layar?

Penjelasannya sederhana, hal itu dikarenakan nilai posisi x terus bertambah, sedangkan jika kita menggunakan 8×8 led matrix, posisi x maximal adalah 7 (diawali pada posisi 0 dan berhenti pada posisi 7), sehingga saat pengulagan menghasilkan posisi x = 8, garis vertikal tersebut tidak terlihat lagi.

Karena kita ingin menampilkan garis vertikal secara berulang-ulang maka kita ingin saat posisi x = 8, garis vertikal kembali lagi ke posisi semula, yaitu 0. Untuk itu kita perlu menambah kode kita dengan sebuah kondisi jika posisi x bernilai 8, maka posisi x “dipaksa” untuk memiliki nilai 0.

while True:
    display.vline(posx,posy,8,1)
    display.show()
    time.sleep(0.2)
    display.vline(posx,posy,8,0)
    posx += 1
    if posx == 8:
        posx = 0

dengan tambahan ini, maka nilai posisi x akan “dicegah” untuk bertambah besar setiap kali pengulangan, dengan batasan maksimal nilai 8.

Lalu bagaimana jika kita membalik arah gerakan menjadi dari kanan ke kiri. Konsep yang digunakan sama yaitu kita memulai dari posisi x = 7. oleh karenaya rubahlah nilai posx menjadi 7, merubah fungsi pengurangan menadi posx -= 1 dan merubah kondisi jika posisi x = -1 maka posisi x menjadi 7.

posx = 7

while True:
    display.vline(posx,posy,8,1)
    display.show()
    time.sleep(0.2)
    display.vline(posx,posy,8,0)
    posx -= 1
    if posx == -1:
    posx = 7


Tahap 2. Membuat celah acak

Dalam game flappy bird, kita melihat ada celah dengan lokasi acak yang nantinya akan dilalui. Sebelum kita membuat pola acak, kita pahami dulu konsepnya yaitu menggambar garis vertikal pada lokasi yang sama tetapi dengan warna = 0 sehingga tidak tampak. Sehingga seolah-olah terlihat sebagai celah.

Untuk eksperimen, tambahkan dua variabel lagi yaitu y dan width. Variabel y digunakan untuk menentukan dimana posisi y awal dan width mengatur seberapa lebar celah tersebut.

y=1
width=3

while True:
    display.vline(posx,posy,8,1)
    display.vline(posx,y,width,0)
    display.show()
    time.sleep(0.2)
    display.vline(posx,posy,8,0)
    posx -= 1
    if posx == -1:
        posx = 7

 

Jalankan kembali program tersebut, maka terlihat garis vertikal yang sebelumnya utuh menjadi terbelah. Cobalah eksperimen dengan mengganti nilai y dan width agar lebih memahami konsep.

Setelah memahami bagaimana kita membuat celah, maka saatnya kita menambahkannya secara acak. Untuk itu kita perlu menambahkan satu library lagi yaitu urandom. Tambahkan ini dibagian baris atas bersama dengan library yang lain.

import urandom

Fungsi dalam urandom yang akan kita gunakan adalah getrandbits(3) yang dituliskan sebagai urandom.getrandbits(3)

Ketikkan urandom.getrandbits(3) pada bagian SHELL

>>> urandom.getrandbits(3)

dan kita akan mendapatkan angka acak dengan nilai dari 0 hingga 6. Angka acak ini yang akan kita manfaatkan sebagai nilai y sehingga terkadang kita akan melihat celah berada di atas atau di bawah.

y=0
width=3
while True:
    display.vline(posx,posy,8,1)
    display.vline(posx,y,width,0)
    display.show()
    time.sleep(0.2)
    display.vline(posx,posy,8,0)
    posx -= 1
    if posx == -1:
        posx = 7
    y = urandom.getrandbits(3)
    if y > 4:
        y = 4

 

Untuk itu ubah kembali nilai y menjadi 0 dan tambahkan baris di dalam nilai y yang berasal dari urandom diletakan setelah posisi x dikembalikan menjadi nilai 7 setelah melalui – 1. Hal ini penting karena kita ingin nilai y sama sepanjang satu siklus. Jika tidak maka setiap kali posisi x berubah, nilai y bisa berubah, artinya celah akan berganti posisi setiap kali posisi x berubah. Ini tidak kita harapkan.

Selain itu , kita juga membatasi nilai y yang berasal dari urandom menjadi maksimum 4. Sehingga celah masih terlihat pada layar 8×8 matrix.

Tahap 3. Membuat “bird”

Sekarang kita lanjutkan untuk membuat “aktor” dari game yang akan kita kendalikan yaitu “bird”.

bird” ini akan melayang-layang untuk melewati celah. “bird” akan tetap melayang selama kita menekan tombol. Jika tidak maka perlahan-lahan ia akan jatuh.

Untuk itu kita perlu menentukan posisi awal dari bird dan membuatnya jatuh

dotx=1
doty=3

while True:
    doty += 1
    display.pixel(dotx,doty,1)
    display.vline(posx,posy,8,1)
    display.vline(posx,y,width,0)
    display.show()
    time.sleep(0.2)
    display.pixel(dotx,doty,0)
    display.vline(posx,posy,8,0)
    posx -= 1
    if posx == -1:
        posx = 7

    y = urandom.getrandbits(3)
    if y > 4:
        y = 4

 

bird” akan terus jatuh hingga tidak terlihat pada layar. Hal ini memang yang diharapkan. Untuk membuatnya selalu terlihat pada layar, kita perlu memberikan input. Untuk input kita menggunakan sebuah button. Saat button ditekan maka “bird” akan tetap melayang.

Untuk memberikan input kita perlu menghubungkan dengan sebuah push button yang dihubungkan dengan pin D2 (GPIO4) dan ground. Untuk mencobanya terlebih dahulu buatlah sebuah object bernama button pada layar SHELL

>>> button = Pin(4, Pin.IN, Pin.PULL_UP)

>>> button.value()

1

Value dari button akan ditampilkan sebagai 1. Sekarang tekan tombol dan tahan. Lalu ulangi perintah yang sama, hasilnya, value button menjadi 0.

>>> button.value()

0

Value dari button tersebut yang akan kita jadikan dasar sebagai input apakah tombol sudah ditekan.

button = Pin(4, Pin.IN, Pin.PULL_OUT)

while True:
    if button.value == 0:
        doty -= 1
    else:
        doty += 1
    display.pixel(dotx,doty,1)
    display.vline(posx,posy,8,1)
    display.vline(posx,y,width,0)
    display.show()
    time.sleep(0.2)
    display.pixel(dotx,doty,0)
    display.vline(posx,posy,8,0)
    posx -= 1
    if posx == -1:
        posx = 7

    y = urandom.getrandbits(3)
    if y > 4:
        y = 4

 

Tahap 4. Membuat Collision/Benturan

Collision atau benturan dalam game diperlukan untuk menunjukkan interaksi antara aktor dengan lingkungan atau musuhnya. Dari benturan ini score dalam game dapat dihitung.

Benturan pertama adalah antara “bird” dengan dinding yang dihadapannya. Jika kita kembali pada tahap sebelumnya, celah pada dinding ditentukan dari nilai y dan lebar dari celah. Oleh karena itu, jika posisi “bird” berada pada rentang y dan lebar, maka dapat diartikan “bird” berhasil melalui celah dan score akan diberikan.

Sebaliknya jika “bird” berada diluar rentang y dan lebar saat posisi “bird” dan dinding sama, maka benturan akan terjadi.

score = 0

while True:
    if button.value == 0:
        doty -= 1
    else:
        doty += 1
    display.pixel(dotx,doty,1)
    display.vline(posx,posy,8,1)
    display.vline(posx,y,width,0)
    display.show()
    time.sleep(0.2)
    display.pixel(dotx,doty,0)
    display.vline(posx,posy,8,0)
    posx -= 1
    if posx == -1:
        posx = 7
   
    y = urandom.getrandbits(3)
    if y > 4:
        y = 4
 
    if (posx == dotx):
        if (y+width > doty >= y):
            score += 1
        else:
            print(“HIT”)
  
    if doty >= 7 or doty <= 0:
        print(“HIT”)


 

Benturan kedua adalah jika posisi “bird” melebihi dari layar bagian atas akibat terlalu banyak menekan tombol atau jatuh dan menyentuh layar bagian bawah karena kurang menekan tombol.

Saat benturan terjadi maka HIT akan ditampilkan pada layar. Bagian ini akan kita ganti dengan perintah yang lain untuk menunjukkan gameover.

Tahap 5. Membuat Kondisi Gameover dan Menampilkan Score

Sebagai penutup, pada tahap ini kita membuat sebuah kondisi gameover dan menampilkan score. Pertama, kita buat sebuah variable gameover dengan nilai 0 dan kedua kita buat sebuah fungsi untuk menampilkan score.

Setelah variable gameover dibuat, maka kita tambahkan satu baris untuk memerika jika nilai variabel gameover berubah, yaitu dengan perintah if gameover == 0:

Terakhir, jika benturan terjadi, maka tambahkan baris agar nilai gameover berubah menjadi 1 dan fungsi show_score dijalankan.

score = 0
gameover = 0

def show_score(score):
 display.scroll_left(" "+str(score))

while True:
    if gameover == 0:
        if button.value == 0:
            doty -= 1
        else:
            doty += 1
        display.pixel(dotx,doty,1)
        display.vline(posx,posy,8,1)
        display.vline(posx,y,width,0)
        display.show()
        time.sleep(0.2)
        display.pixel(dotx,doty,0)
        display.vline(posx,posy,8,0)
        posx -= 1
        if posx == -1:
            posx = 7

        y = urandom.getrandbits(3)
        if y > 4:
            y = 4

        if (posx == dotx):
            if (y+width > doty >= y):
                score += 1
            else:
                gameover=1
                show_score(score)

         if doty >= 7 or doty <= 0:
             gameover=1
             show_score(score)
Facebook Comments
 

Leave a Reply

This site uses Akismet to reduce spam. Learn how your comment data is processed.