17 KiB

Raw Blame History Unescape Escape

Membangun Game Luar Angkasa Bagian 2: Gambar Hero dan Monster ke Canvas

Canvas API adalah salah satu fitur paling kuat dalam pengembangan web untuk menciptakan grafik interaktif dan dinamis langsung di browser Anda. Dalam pelajaran ini, kita akan mengubah elemen HTML <canvas> yang kosong menjadi dunia permainan yang penuh dengan pahlawan dan monster. Anggaplah canvas sebagai papan seni digital Anda di mana kode menjadi visual.

Kita akan melanjutkan dari apa yang telah Anda pelajari di pelajaran sebelumnya, dan sekarang kita akan masuk ke aspek visual. Anda akan belajar cara memuat dan menampilkan sprite game, memposisikan elemen dengan presisi, dan menciptakan dasar visual untuk game luar angkasa Anda. Ini menjembatani kesenjangan antara halaman web statis dan pengalaman interaktif yang dinamis.

Pada akhir pelajaran ini, Anda akan memiliki adegan permainan lengkap dengan kapal hero Anda yang diposisikan dengan benar dan formasi musuh yang siap untuk bertempur. Anda akan memahami bagaimana game modern merender grafik di browser dan mendapatkan keterampilan untuk menciptakan pengalaman visual interaktif Anda sendiri. Mari kita jelajahi grafik canvas dan hidupkan game luar angkasa Anda!

Kuis Sebelum Pelajaran

Kuis sebelum pelajaran

Canvas

Jadi, apa sebenarnya elemen <canvas> ini? Ini adalah solusi HTML5 untuk menciptakan grafik dan animasi dinamis di browser web. Tidak seperti gambar atau video biasa yang bersifat statis, canvas memberi Anda kontrol tingkat piksel atas segala sesuatu yang muncul di layar. Ini membuatnya sempurna untuk game, visualisasi data, dan seni interaktif. Anggaplah ini sebagai permukaan gambar yang dapat diprogram di mana JavaScript menjadi kuas Anda.

Secara default, elemen canvas terlihat seperti persegi panjang transparan kosong di halaman Anda. Tapi di sinilah potensi sebenarnya muncul! Kekuatan sebenarnya muncul ketika Anda menggunakan JavaScript untuk menggambar bentuk, memuat gambar, membuat animasi, dan membuat elemen merespons interaksi pengguna. Ini mirip dengan bagaimana para pionir grafik komputer di Bell Labs pada tahun 1960-an harus memprogram setiap piksel untuk menciptakan animasi digital pertama.

✅ Baca lebih lanjut tentang Canvas API di MDN.

Berikut adalah cara biasanya mendeklarasikan canvas, sebagai bagian dari body halaman:

<canvas id="myCanvas" width="200" height="100"></canvas>

Apa yang dilakukan kode ini:

Menetapkan atribut id sehingga Anda dapat merujuk elemen canvas ini secara spesifik di JavaScript
Menentukan width dalam piksel untuk mengontrol ukuran horizontal canvas
Menentukan height dalam piksel untuk menentukan dimensi vertikal canvas

Menggambar Geometri Sederhana

Sekarang Anda tahu apa itu elemen canvas, mari kita jelajahi cara menggambar di atasnya! Canvas menggunakan sistem koordinat yang mungkin terasa familiar dari kelas matematika, tetapi ada satu perbedaan penting yang spesifik untuk grafik komputer.

Canvas menggunakan koordinat Cartesian dengan sumbu x (horizontal) dan sumbu y (vertikal) untuk memposisikan segala sesuatu yang Anda gambar. Tetapi inilah perbedaan utamanya: tidak seperti sistem koordinat dari kelas matematika, titik asal (0,0) dimulai di sudut kiri atas, dengan nilai x meningkat saat Anda bergerak ke kanan dan nilai y meningkat saat Anda bergerak ke bawah. Pendekatan ini berasal dari tampilan komputer awal di mana sinar elektron memindai dari atas ke bawah, menjadikan sudut kiri atas sebagai titik awal alami.

Gambar dari MDN

Untuk menggambar di elemen canvas, Anda akan mengikuti proses tiga langkah yang sama yang membentuk dasar dari semua grafik canvas. Setelah Anda melakukannya beberapa kali, ini akan menjadi kebiasaan:

Dapatkan referensi ke elemen Canvas Anda dari DOM (seperti elemen HTML lainnya)
Dapatkan konteks rendering 2D – ini menyediakan semua metode menggambar
Mulai menggambar! Gunakan metode bawaan konteks untuk membuat grafik Anda

Berikut adalah bagaimana ini terlihat dalam kode:

// Step 1: Get the canvas element
const canvas = document.getElementById("myCanvas");

// Step 2: Get the 2D rendering context
const ctx = canvas.getContext("2d");

// Step 3: Set fill color and draw a rectangle
ctx.fillStyle = 'red';
ctx.fillRect(0, 0, 200, 200); // x, y, width, height

Mari kita uraikan langkah demi langkah:

Kita mengambil elemen canvas kita menggunakan ID-nya dan menyimpannya dalam variabel
Kita mendapatkan konteks rendering 2D – ini adalah alat kita yang penuh dengan metode menggambar
Kita memberitahu canvas bahwa kita ingin mengisi sesuatu dengan warna merah menggunakan properti fillStyle
Kita menggambar sebuah persegi panjang yang dimulai dari sudut kiri atas (0,0) dengan lebar dan tinggi 200 piksel

✅ Canvas API sebagian besar berfokus pada bentuk 2D, tetapi Anda juga dapat menggambar elemen 3D ke situs web; untuk ini, Anda mungkin menggunakan WebGL API.

Anda dapat menggambar berbagai hal dengan Canvas API seperti:

Bentuk geometris, kita sudah menunjukkan cara menggambar persegi panjang, tetapi ada banyak lagi yang bisa Anda gambar.
Teks, Anda dapat menggambar teks dengan font dan warna apa pun yang Anda inginkan.
Gambar, Anda dapat menggambar gambar berdasarkan aset gambar seperti .jpg atau .png misalnya.

✅ Coba! Anda tahu cara menggambar persegi panjang, bisakah Anda menggambar lingkaran ke halaman? Lihat beberapa gambar Canvas yang menarik di CodePen. Berikut adalah contoh yang sangat mengesankan.

Memuat dan Menggambar Aset Gambar

Menggambar bentuk dasar berguna untuk memulai, tetapi sebagian besar game membutuhkan gambar yang sebenarnya! Sprite, latar belakang, dan tekstur adalah yang memberikan daya tarik visual pada game. Memuat dan menampilkan gambar di canvas bekerja berbeda dari menggambar bentuk geometris, tetapi cukup mudah setelah Anda memahami prosesnya.

Kita perlu membuat objek Image, memuat file gambar kita (ini terjadi secara asinkron, artinya "di latar belakang"), dan kemudian menggambarnya ke canvas setelah siap. Pendekatan ini memastikan gambar Anda ditampilkan dengan benar tanpa menghalangi aplikasi Anda saat mereka dimuat.

Memuat Gambar Dasar

const img = new Image();
img.src = 'path/to/my/image.png';
img.onload = () => {
  // Image loaded and ready to be used
  console.log('Image loaded successfully!');
};

Apa yang terjadi dalam kode ini:

Kita membuat objek Image baru untuk menyimpan sprite atau tekstur kita
Kita memberitahu file gambar mana yang akan dimuat dengan menetapkan jalur sumber
Kita mendengarkan acara load sehingga kita tahu persis kapan gambar siap digunakan

Cara yang Lebih Baik untuk Memuat Gambar

Berikut adalah cara yang lebih kuat untuk menangani pemuatan gambar yang biasa digunakan oleh pengembang profesional. Kita akan membungkus pemuatan gambar dalam fungsi berbasis Promise – pendekatan ini, yang dipopulerkan ketika Promise JavaScript menjadi standar di ES6, membuat kode Anda lebih terorganisir dan menangani kesalahan dengan baik:

function loadAsset(path) {
  return new Promise((resolve, reject) => {
    const img = new Image();
    img.src = path;
    img.onload = () => {
      resolve(img);
    };
    img.onerror = () => {
      reject(new Error(`Failed to load image: ${path}`));
    };
  });
}

// Modern usage with async/await
async function initializeGame() {
  try {
    const heroImg = await loadAsset('hero.png');
    const monsterImg = await loadAsset('monster.png');
    // Images are now ready to use
  } catch (error) {
    console.error('Failed to load game assets:', error);
  }
}

Apa yang telah kita lakukan di sini:

Membungkus semua logika pemuatan gambar dalam Promise sehingga kita dapat menanganinya dengan lebih baik
Menambahkan penanganan kesalahan yang benar-benar memberi tahu kita saat ada yang salah
Menggunakan sintaks async/await modern karena lebih mudah dibaca
Menyertakan blok try/catch untuk menangani gangguan pemuatan dengan baik

Setelah gambar Anda dimuat, menggambarnya ke canvas sebenarnya cukup mudah:

async function renderGameScreen() {
  try {
    // Load game assets
    const heroImg = await loadAsset('hero.png');
    const monsterImg = await loadAsset('monster.png');

    // Get canvas and context
    const canvas = document.getElementById("myCanvas");
    const ctx = canvas.getContext("2d");

    // Draw images to specific positions
    ctx.drawImage(heroImg, canvas.width / 2, canvas.height / 2);
    ctx.drawImage(monsterImg, 0, 0);
  } catch (error) {
    console.error('Failed to render game screen:', error);
  }
}

Mari kita uraikan langkah demi langkah:

Kita memuat gambar hero dan monster kita di latar belakang menggunakan await
Kita mengambil elemen canvas kita dan mendapatkan konteks rendering 2D yang kita butuhkan
Kita memposisikan gambar hero tepat di tengah menggunakan beberapa perhitungan koordinat cepat
Kita menempatkan gambar monster di sudut kiri atas untuk memulai formasi musuh kita
Kita menangkap kesalahan apa pun yang mungkin terjadi selama pemuatan atau rendering

Sekarang Saatnya Mulai Membangun Game Anda

Sekarang kita akan menggabungkan semuanya untuk menciptakan dasar visual dari game luar angkasa Anda. Anda memiliki pemahaman yang solid tentang dasar-dasar canvas dan teknik pemuatan gambar, jadi bagian praktis ini akan memandu Anda melalui pembuatan layar game lengkap dengan sprite yang diposisikan dengan benar.

Apa yang Harus Dibangun

Anda akan membuat halaman web dengan elemen Canvas. Halaman tersebut harus menampilkan layar hitam berukuran 1024*768. Kami telah menyediakan dua gambar untuk Anda:

Kapal hero
5*5 monster

Langkah yang Direkomendasikan untuk Memulai Pengembangan

Temukan file starter yang telah dibuat untuk Anda di sub folder your-work. Struktur proyek Anda harus berisi:

your-work/
├── assets/
│   ├── enemyShip.png
│   └── player.png
├── index.html
├── app.js
└── package.json

Apa yang Anda kerjakan:

Sprite game berada di folder assets/ sehingga semuanya tetap terorganisir
File HTML utama Anda menyiapkan elemen canvas dan mempersiapkan semuanya
File JavaScript tempat Anda akan menulis semua keajaiban rendering game Anda
File package.json yang menyiapkan server pengembangan sehingga Anda dapat menguji secara lokal

Buka folder ini di Visual Studio Code untuk memulai pengembangan. Anda akan membutuhkan lingkungan pengembangan lokal dengan Visual Studio Code, NPM, dan Node.js terinstal. Jika Anda belum memiliki npm di komputer Anda, berikut cara menginstalnya.

Mulai server pengembangan Anda dengan menavigasi ke folder your-work:

cd your-work
npm start

Perintah ini melakukan beberapa hal keren:

Memulai server lokal di http://localhost:5000 sehingga Anda dapat menguji game Anda
Melayani semua file Anda dengan benar sehingga browser Anda dapat memuatnya dengan benar
Memantau file Anda untuk perubahan sehingga Anda dapat mengembangkan dengan lancar
Memberikan lingkungan pengembangan profesional untuk menguji semuanya

💡 Catatan: Browser Anda akan menampilkan halaman kosong pada awalnya – itu diharapkan! Saat Anda menambahkan kode, segarkan browser Anda untuk melihat perubahan Anda. Pendekatan pengembangan iteratif ini mirip dengan bagaimana NASA membangun komputer panduan Apollo – menguji setiap komponen sebelum mengintegrasikannya ke dalam sistem yang lebih besar.

Tambahkan kode

Tambahkan kode yang diperlukan ke your-work/app.js untuk menyelesaikan tugas berikut:

Gambar canvas dengan latar belakang hitam

💡 Caranya: Temukan TODO di /app.js dan tambahkan hanya dua baris. Tetapkan ctx.fillStyle ke hitam, lalu gunakan ctx.fillRect() mulai dari (0,0) dengan dimensi canvas Anda. Mudah!
Muat tekstur game

💡 Caranya: Gunakan await loadAsset() untuk memuat gambar pemain dan musuh Anda. Simpan dalam variabel sehingga Anda dapat menggunakannya nanti. Ingat – mereka tidak akan muncul sampai Anda benar-benar menggambarnya!
Gambar kapal hero di posisi tengah-bawah

💡 Caranya: Gunakan ctx.drawImage() untuk memposisikan hero Anda. Untuk koordinat x, coba canvas.width / 2 - 45 untuk memusatkannya, dan untuk koordinat y gunakan canvas.height - canvas.height / 4 untuk menempatkannya di area bawah.
Gambar formasi 5×5 kapal musuh

💡 Caranya: Temukan fungsi createEnemies dan siapkan loop bersarang. Anda perlu melakukan beberapa perhitungan untuk jarak dan posisi, tetapi jangan khawatir – saya akan menunjukkan caranya!

Pertama, tetapkan konstanta untuk tata letak formasi musuh yang tepat:

const ENEMY_TOTAL = 5;
const ENEMY_SPACING = 98;
const FORMATION_WIDTH = ENEMY_TOTAL * ENEMY_SPACING;
const START_X = (canvas.width - FORMATION_WIDTH) / 2;
const STOP_X = START_X + FORMATION_WIDTH;

Mari kita uraikan apa yang dilakukan konstanta ini:

Kita menetapkan 5 musuh per baris dan kolom (grid 5×5 yang bagus)
Kita mendefinisikan berapa banyak ruang yang harus diberikan di antara musuh sehingga mereka tidak terlihat sempit
Kita menghitung seberapa lebar seluruh formasi kita
Kita menentukan di mana harus memulai dan berhenti sehingga formasi terlihat terpusat

Kemudian, buat loop bersarang untuk menggambar formasi musuh:

for (let x = START_X; x < STOP_X; x += ENEMY_SPACING) {
  for (let y = 0; y < 50 * 5; y += 50) {
    ctx.drawImage(enemyImg, x, y);
  }
}

Apa yang dilakukan loop bersarang ini:

Loop luar bergerak dari kiri ke kanan melintasi formasi kita
Loop dalam berjalan dari atas ke bawah untuk membuat baris yang rapi
Kita menggambar setiap sprite musuh di koordinat x,y yang kita hitung
Semuanya tetap berjarak merata sehingga terlihat profesional dan terorganisir

Hasil

Hasil akhir harus terlihat seperti ini:

Solusi

Cobalah menyelesaikannya sendiri terlebih dahulu tetapi jika Anda mengalami kesulitan, lihat solusi

Tantangan GitHub Copilot Agent 🚀

Gunakan mode Agent untuk menyelesaikan tantangan berikut:

Deskripsi: Tingkatkan canvas game luar angkasa Anda dengan menambahkan efek visual dan elemen interaktif menggunakan teknik Canvas API yang telah Anda pelajari.

Prompt: Buat file baru bernama enhanced-canvas.html dengan canvas yang menampilkan bintang-bintang animasi di latar belakang, bilah kesehatan yang berdenyut untuk kapal hero, dan kapal musuh yang perlahan bergerak ke bawah. Sertakan kode JavaScript yang menggambar bintang-bintang berkelap-kelip menggunakan posisi dan opasitas acak, menerapkan bilah kesehatan yang berubah warna berdasarkan tingkat kesehatan (hijau > kuning > merah), dan menganimasikan kapal musuh untuk bergerak ke bawah layar dengan kecepatan berbeda.

Pelajari lebih lanjut tentang mode agent di sini.

🚀 Tantangan

Anda telah belajar tentang menggambar dengan Canvas API yang berfokus pada 2D; lihat WebGL API, dan coba gambar objek 3D.

Kuis Setelah Pelajaran

Kuis setelah pelajaran

Tinjauan & Studi Mandiri

Pelajari lebih lanjut tentang Canvas API dengan membacanya.

Tugas

Bermain dengan Canvas API

Penafian:
Dokumen ini telah diterjemahkan menggunakan layanan penerjemahan AI Co-op Translator. Meskipun kami berupaya untuk memberikan hasil yang akurat, harap diketahui bahwa terjemahan otomatis dapat mengandung kesalahan atau ketidakakuratan. Dokumen asli dalam bahasa aslinya harus dianggap sebagai sumber yang otoritatif. Untuk informasi yang bersifat kritis, disarankan menggunakan jasa penerjemahan manusia profesional. Kami tidak bertanggung jawab atas kesalahpahaman atau interpretasi yang keliru yang timbul dari penggunaan terjemahan ini.

17 KiB Raw Blame History Unescape Escape