32. Menggambar di layar

Dengan jendela terbuka dan game loop berjalan, langkah selanjutnya adalah meletakkan sesuatu yang terlihat di layar. pygame menyediakan function menggambar untuk persegi panjang, lingkaran, garis, dan poligon. Semuanya mengikuti pola yang sama: beri tahu pygame surface mana untuk digambar, warna apa yang digunakan, dan di mana meletakkannya.

Sistem koordinat

pygame menggunakan sistem koordinat di mana (0, 0) adalah sudut kiri atas jendela. Sumbu x bertambah ke kanan dan sumbu y bertambah ke bawah. Ini umum dalam grafis 2D tapi berlawanan dengan konvensi matematika di mana y bertambah ke atas.

(0,0) ──────────────────► x
  │
  │
  │
  ▼
  y

Untuk jendela 800x600:

• Sudut kiri atas: (0, 0)
• Sudut kanan atas: (799, 0)
• Sudut kiri bawah: (0, 599)
• Sudut kanan bawah: (799, 599)
• Tengah: (400, 300)

Saat kamu memposisikan bentuk, kamu memberikan koordinat piksel dalam sistem ini.

Warna sebagai tuple RGB

Setiap warna di pygame adalah tuple tiga integer: (red, green, blue). Setiap komponen berkisar dari 0 (tidak ada) hingga 255 (penuh).

Kombinasikan komponen untuk mendapatkan warna apa pun yang kamu inginkan. (200, 100, 50) adalah oranye kecokelatan; (30, 30, 80) adalah biru tua gelap.

Simpan warna dalam variable di bagian atas file kamu untuk menghindari pengulangan tuple di mana-mana:

RED   = (255, 0, 0)
GREEN = (0, 200, 0)
WHITE = (255, 255, 255)
BLACK = (0, 0, 0)
SKY   = (135, 206, 235)

Function menggambar

Semua function menggambar ada di pygame.draw. Panggil mereka di dalam game loop, setelah screen.fill(...) (yang membersihkan kanvas) dan sebelum pygame.display.flip() (yang menampilkan frame).

Persegi panjang

pygame.draw.rect(screen, color, (x, y, width, height))

• x, y — posisi sudut kiri atas persegi panjang.
• width, height — ukuran dalam piksel.

pygame.draw.rect(screen, (255, 0, 0), (100, 150, 200, 80))

Menggambar persegi panjang merah dengan sudut kiri atas di (100, 150), lebar 200 piksel dan tinggi 80 piksel.

Tambahkan argumen kelima untuk ketebalan garis. Ketebalan 0 (default) mengisi bentuk; nilai positif apa pun hanya menggambar garis tepi:

pygame.draw.rect(screen, (255, 255, 255), (100, 150, 200, 80), 3)

Lingkaran

pygame.draw.circle(screen, color, (center_x, center_y), radius)

• center_x, center_y — posisi pusat.
• radius — radius dalam piksel.

pygame.draw.circle(screen, (255, 255, 0), (400, 300), 50)

Menggambar lingkaran kuning terisi berpusat di (400, 300) dengan radius 50. Sama seperti persegi panjang, argumen ketebalan opsional menggambar garis tepi saja.

Garis

pygame.draw.line(screen, color, (x1, y1), (x2, y2), thickness)

pygame.draw.line(screen, (255, 255, 255), (0, 0), (799, 599), 2)

Menggambar garis putih dari sudut kiri atas ke sudut kanan bawah, tebal 2 piksel.

Poligon

pygame.draw.polygon(screen, color, [(x1,y1), (x2,y2), (x3,y3), ...])

Menerima list tuple titik sudut dan menggambar bentuk terisi yang menghubungkannya secara berurutan. Bagus untuk segitiga:

pygame.draw.polygon(screen, (200, 100, 50), [(400, 100), (300, 250), (500, 250)])

Ini menggambar segitiga yang mengarah ke atas.

Urutan menggambar itu penting

pygame menggambar bentuk sesuai urutan kamu memanggil function menggambar. Bentuk yang digambar belakangan muncul di atas bentuk yang digambar lebih awal. Tidak ada konsep lapisan z — hanya urutan pemanggilan.

screen.fill((0, 0, 0))

# Draw the background rectangle first
pygame.draw.rect(screen, (0, 100, 200), (50, 50, 300, 200))

# Draw the circle on top of it
pygame.draw.circle(screen, (255, 255, 0), (200, 150), 60)

Lingkaran kuning sebagian menutupi persegi panjang biru. Tukar dua panggilan tersebut dan persegi panjang akan menutupi lingkaran.

Menggunakan variable untuk posisi dan ukuran

Menulis angka langsung di pemanggilan draw membuat kode menjadi rapuh. Simpan posisi dan ukuran dalam variable:

x = 100
y = 200
width = 60
height = 60
color = (255, 0, 0)

pygame.draw.rect(screen, color, (x, y, width, height))

Sekarang kamu bisa memindahkan kotak dengan mengubah x dan y. Bab-bab selanjutnya akan memperbarui variable ini setiap frame untuk membuat benda bergerak.

Contoh menggambar lengkap

import pygame

pygame.init()
screen = pygame.display.set_mode((800, 600))
pygame.display.set_caption("Drawing")
clock = pygame.time.Clock()

SKY    = (135, 206, 235)
GROUND = (34, 139, 34)
BROWN  = (139, 90, 43)
RED    = (200, 50, 50)
YELLOW = (255, 220, 0)

running = True
while running:
    for event in pygame.event.get():
        if event.type == pygame.QUIT:
            running = False

    # Clear
    screen.fill(SKY)

    # Ground
    pygame.draw.rect(screen, GROUND, (0, 450, 800, 150))

    # House body
    pygame.draw.rect(screen, BROWN, (300, 280, 200, 170))

    # Roof (triangle)
    pygame.draw.polygon(screen, RED, [(280, 280), (400, 160), (520, 280)])

    # Sun
    pygame.draw.circle(screen, YELLOW, (700, 80), 50)

    pygame.display.flip()
    clock.tick(60)

pygame.quit()

Pekerjaan Rumah

Macet atau sudah selesai? Buka halaman solusi pekerjaan rumah.