Lua Academy · Pelajaran

Menggambar Bentuk dan Gambar

Tampilkan grafis di layar.

Menggambar Bentuk dan Gambar adalah pelajaran Lua Academy gratis di CoddyKit. Ini adalah pelajaran 2 dari 4. Kamu bisa membaca pelajaran lengkapnya di bawah secara gratis — lalu praktikkan langsung di browser dengan editor kode bawaan dan tutor AI 24/7. Ini adalah bagian dari jalur belajar Lua Academy, dan progresmu tersinkronisasi di web dan aplikasi CoddyKit. Kursus Lua Academy mencakup 4 pelajaran total.

Modul love.graphics

Semua penggambaran dalam LÖVE dilakukan melalui love.graphics. Anda memanggil fungsi-fungsinya di dalam love.draw, lalu mesin menampilkan bingkai ketika fungsi panggil balik tersebut selesai.

Modul ini dapat menggambar bentuk primitif, gambar, teks, dan garis, serta mengelola warna dan transformasi. Semua hal digambar ulang dari awal pada setiap bingkai.

Menggambar Persegi Panjang

love.graphics.rectangle menerima mode, lalu posisi dan ukuran. Modenya adalah 'fill' untuk bentuk solid atau 'line' untuk garis luarnya saja.

Koordinat dimulai dari sudut kiri atas jendela, dengan x bertambah ke kanan dan y bertambah ke bawah.

function love.draw()
  love.graphics.rectangle('fill', 50, 50, 120, 80)
  love.graphics.rectangle('line', 200, 50, 120, 80)
end

Lingkaran dan Elips

love.graphics.circle(mode, x, y, radius) menggambar lingkaran yang berpusat di x, y. Seperti persegi panjang, fungsi ini menerima 'fill' atau 'line'.

Untuk bentuk oval, gunakan love.graphics.ellipse dengan jari-jari horizontal dan vertikal yang terpisah. Anda dapat memberikan argumen segmen tambahan untuk mengatur kehalusan bentuk.

function love.draw()
  love.graphics.circle('fill', 150, 150, 40)
  love.graphics.ellipse('line', 300, 150, 60, 30)
end

Mengatur Warna

love.graphics.setColor menetapkan warna untuk semua hal yang digambar setelahnya. Dalam LÖVE modern, komponennya berkisar dari 0 hingga 1, sehingga putih adalah 1, 1, 1.

Warna bersifat tersimpan dalam status: setelah ditetapkan, warna tersebut berlaku untuk semua penggambaran berikutnya sampai Anda mengubahnya lagi. Atur ulang ke putih sebelum menggambar gambar yang ingin ditampilkan tanpa rona tambahan.

function love.draw()
  love.graphics.setColor(1, 0, 0)   -- red
  love.graphics.rectangle('fill', 20, 20, 60, 60)
  love.graphics.setColor(1, 1, 1)   -- back to white
end

Garis dan Titik

love.graphics.line menghubungkan serangkaian titik x, y. love.graphics.setLineWidth mengatur ketebalan garis dan bentuk bergaris luar.

Anda dapat memberikan banyak titik sekaligus untuk menggambar jalur yang saling terhubung, yang berguna untuk jejak, jalur, atau seni vektor sederhana.

function love.draw()
  love.graphics.setLineWidth(3)
  love.graphics.line(10, 10, 80, 60, 150, 20)
end

Memuat Gambar

Muat gambar sekali di dalam love.load menggunakan love.graphics.newImage. Fungsi ini mengembalikan objek gambar yang Anda simpan dalam sebuah variabel untuk digunakan kembali.

Jangan pernah memuat gambar di dalam love.draw, karena tindakan itu akan membaca ulang berkas pada setiap bingkai dan menurunkan kinerja secara drastis.

function love.load()
  sprite = love.graphics.newImage('player.png')
end

Menggambar Gambar

love.graphics.draw(image, x, y) menggambar sebuah gambar pada posisi yang diberikan. Secara bawaan, sudut kiri atas gambar berada di x, y.

Argumen tambahan menambahkan rotasi, skala, dan pergeseran titik asal, sehingga Anda memiliki kendali penuh atas tampilan setiap sprite.

function love.draw()
  love.graphics.draw(sprite, player.x, player.y)
end

Rotasi dan Penskalaan

Bentuk pemanggilan lengkapnya adalah draw(image, x, y, r, sx, sy, ox, oy). Di sini, r adalah rotasi dalam radian, sedangkan sx dan sy adalah faktor skala.

Pergeseran titik asal ox, oy menentukan porosnya. Untuk memutar gambar pada titik tengahnya, tetapkan titik asal ke setengah lebar dan tinggi gambar.

local w, h = sprite:getWidth(), sprite:getHeight()
love.graphics.draw(sprite, x, y, angle, 1, 1, w/2, h/2)

Menggambar Teks

love.graphics.print(text, x, y) menggambar teks menggunakan font yang sedang digunakan. love.graphics.setFont mengubah font yang aktif.

Buat font khusus dengan love.graphics.newFont('font.ttf', 24) di dalam love.load. Ingat, warna juga memberi rona pada teks, sama seperti pada bentuk.

function love.draw()
  love.graphics.setColor(1, 1, 1)
  love.graphics.print('Score: ' .. score, 10, 10)
end

Membersihkan dan Mengatur Latar Belakang

LÖVE membersihkan layar secara otomatis pada setiap bingkai, tetapi Anda dapat mengatur warna pembersihan dengan love.graphics.setBackgroundColor di dalam love.load.

Untuk pengendalian manual dalam penggambaran khusus, love.graphics.clear mengisi penyangga dengan warna. Sebagian besar permainan cukup mengatur latar belakang sekali dan membiarkan mesin menangani pembersihan.

function love.load()
  love.graphics.setBackgroundColor(0.1, 0.1, 0.2)
end

Wilayah Persegi Panjang untuk Lembar Animasi

Wilayah persegi panjang memilih bagian persegi panjang dari sebuah gambar sehingga satu lembar gambar dapat memuat banyak bingkai. Buat wilayah tersebut dengan love.graphics.newQuad.

Teruskan wilayah itu ke love.graphics.draw(image, quad, x, y) untuk menggambar hanya bagian tersebut. Inilah dasar animasi gambar.

local sheet = love.graphics.newImage('sheet.png')
local frame = love.graphics.newQuad(0, 0, 32, 32, sheet:getDimensions())
-- love.graphics.draw(sheet, frame, x, y)

Pemeriksaan Singkat

Uji pengetahuan Anda tentang penggambaran dengan LÖVE.

Ringkasan

Anda menggambar dengan love.graphics di dalam love.draw: persegi panjang, lingkaran, garis, gambar, dan teks. setColor memberi rona pada penggambaran berikutnya dan mempertahankan statusnya.

Muat gambar sekali di dalam love.load dengan newImage, lalu tampilkan dengan draw, serta tambahkan rotasi, skala, dan wilayah persegi panjang untuk lembar animasi.

Pertanyaan yang Sering Diajukan

Apakah pelajaran “Menggambar Bentuk dan Gambar” gratis?

Ya — teks lengkap “Menggambar Bentuk dan Gambar” gratis dibaca di sini di web. Untuk praktiknya secara interaktif (editor kode bawaan dan tutor AI 24/7) dan buka sisa kursus Lua Academy, upgrade ke CoddyKit PRO. Kursus Lua Academy mencakup 4 pelajaran total.

Apa yang akan aku pelajari di “Menggambar Bentuk dan Gambar”?

Tampilkan grafis di layar. Kamu berlatih Lua Academy dengan kode praktik yang langsung kamu jalankan di browser, dan tutor AI 24/7 menjawab pertanyaanmu saat kamu mengerjakan pelajaran ini.

Apakah aku perlu pengalaman untuk memulai Lua Academy?

Tidak diperlukan pengalaman sebelumnya. Lua Academy di CoddyKit dirancang untuk pemula hingga pelajar tingkat lanjut, jadi kamu bisa memulai di sini atau dari awal dan belajar sesuai kecepatan kamu sendiri. Ini adalah pelajaran 2 dari 4.

Berapa lama pelajaran “Menggambar Bentuk dan Gambar” memakan waktu?

Sebagian besar pelajaran CoddyKit memakan waktu sekitar 5–10 menit. Setiap pelajaran ringkas dan interaktif, jadi kamu membuat kemajuan stabil dan melanjutkan dari tempat kamu tinggalkan di web dan aplikasi.

Bisakah aku menulis dan menjalankan kode dalam pelajaran Lua Academy ini?

Ya. Setiap pelajaran Lua Academy menyertakan editor kode bawaan, jadi kamu menulis dan menjalankan kode nyata langsung di browser dan mendapatkan umpan balik AI instan — tidak diperlukan penyiapan lokal.

Semua pelajaran dalam kursus ini

← Kembali ke Lua Academy