8.6 KiB

Raw Permalink Blame History

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

Kuis Sebelum Kuliah

Canvas

Canvas adalah elemen HTML yang secara default tidak memiliki konten; ini adalah kanvas kosong. Anda perlu menambahkan sesuatu ke dalamnya dengan menggambar di atasnya.

✅ Baca lebih lanjut tentang Canvas API di MDN.

Berikut adalah cara biasanya dideklarasikan, sebagai bagian dari body halaman:

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

Di atas, kita menetapkan id, width, dan height.

id: tetapkan ini agar Anda dapat memperoleh referensi saat perlu berinteraksi dengannya.
width: ini adalah lebar elemen.
height: ini adalah tinggi elemen.

Menggambar Geometri Sederhana

Canvas menggunakan sistem koordinat kartesius untuk menggambar sesuatu. Oleh karena itu, ia menggunakan sumbu x dan sumbu y untuk menunjukkan lokasi sesuatu. Lokasi 0,0 adalah posisi kiri atas, dan kanan bawah adalah apa yang Anda tetapkan sebagai LEBAR dan TINGGI dari canvas.

Gambar dari MDN

Untuk menggambar di elemen canvas, Anda perlu melalui langkah-langkah berikut:

Dapatkan referensi ke elemen Canvas.
Dapatkan referensi ke elemen Context yang ada di elemen Canvas.
Lakukan operasi menggambar menggunakan elemen Context.

Kode untuk langkah-langkah di atas biasanya terlihat seperti ini:

// draws a red rectangle
//1. get the canvas reference
canvas = document.getElementById("myCanvas");

//2. set the context to 2D to draw basic shapes
ctx = canvas.getContext("2d");

//3. fill it with the color red
ctx.fillStyle = 'red';

//4. and draw a rectangle with these parameters, setting location and size
ctx.fillRect(0,0, 200, 200) // x,y,width, height

✅ 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 macam hal dengan Canvas API seperti:

Bentuk geometris, kita sudah menunjukkan cara menggambar persegi panjang, tetapi masih 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 sendiri! Anda sudah tahu cara menggambar persegi panjang, bisakah Anda menggambar lingkaran di halaman? Lihat beberapa gambar menarik menggunakan Canvas di CodePen. Berikut adalah contoh yang sangat mengesankan.

Memuat dan Menggambar Aset Gambar

Anda memuat aset gambar dengan membuat objek Image dan menetapkan properti src-nya. Kemudian Anda mendengarkan event load untuk mengetahui kapan gambar siap digunakan. Kodenya terlihat seperti ini:

Memuat Aset

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

Pola Memuat Aset

Disarankan untuk membungkus kode di atas dalam konstruksi seperti ini, sehingga lebih mudah digunakan dan Anda hanya mencoba memanipulasinya saat sudah sepenuhnya dimuat:

function loadAsset(path) {
  return new Promise((resolve) => {
    const img = new Image();
    img.src = path;
    img.onload = () => {
      // image loaded and ready to be used
      resolve(img);
    }
  })
}

// use like so

async function run() {
  const heroImg = await loadAsset('hero.png')
  const monsterImg = await loadAsset('monster.png')
}

Untuk menggambar aset game ke layar, kode Anda akan terlihat seperti ini:

async function run() {
  const heroImg = await loadAsset('hero.png')
  const monsterImg = await loadAsset('monster.png')

  canvas = document.getElementById("myCanvas");
  ctx = canvas.getContext("2d");
  ctx.drawImage(heroImg, canvas.width/2,canvas.height/2);
  ctx.drawImage(monsterImg, 0,0);
}

Sekarang Saatnya Memulai Membangun Game Anda

Apa yang Akan Dibangun

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

Kapal Hero
5*5 monster

Langkah-Langkah yang Direkomendasikan untuk Memulai Pengembangan

Temukan file yang telah dibuat untuk Anda di sub-folder your-work. Folder ini harus berisi:

-| assets
  -| enemyShip.png
  -| player.png
-| index.html
-| app.js
-| package.json

Buka salinan folder ini di Visual Studio Code. Anda perlu memiliki lingkungan pengembangan lokal yang sudah diatur, sebaiknya dengan Visual Studio Code dengan NPM dan Node terinstal. Jika Anda belum memiliki npm di komputer Anda, berikut cara mengaturnya.

Mulai proyek Anda dengan menavigasi ke folder your_work:

cd your-work
npm start

Kode di atas akan memulai HTTP Server di alamat http://localhost:5000. Buka browser dan masukkan alamat tersebut. Halaman masih kosong sekarang, tetapi itu akan berubah.

Catatan: untuk melihat perubahan di layar, segarkan browser Anda.

Tambahkan Kode

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

Gambar canvas dengan latar belakang hitam

petunjuk: tambahkan dua baris di bawah TODO yang sesuai di /app.js, atur elemen ctx menjadi hitam dan koordinat atas/kiri ke 0,0 serta tinggi dan lebar sama dengan canvas.
Muat tekstur

petunjuk: tambahkan gambar pemain dan musuh menggunakan await loadTexture dan masukkan jalur gambar. Anda belum akan melihatnya di layar!
Gambar hero di tengah layar di bagian bawah

petunjuk: gunakan API drawImage untuk menggambar heroImg ke layar, atur canvas.width / 2 - 45 dan canvas.height - canvas.height / 4);

Gambar 5*5 monster

petunjuk: Sekarang Anda dapat menghapus komentar kode untuk menggambar musuh di layar. Selanjutnya, buka fungsi createEnemies dan bangun fungsinya.

Pertama, atur beberapa konstanta:

const MONSTER_TOTAL = 5;
const MONSTER_WIDTH = MONSTER_TOTAL * 98;
const START_X = (canvas.width - MONSTER_WIDTH) / 2;
const STOP_X = START_X + MONSTER_WIDTH;

kemudian, buat loop untuk menggambar array monster ke layar:

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

Hasil

Hasil akhirnya harus terlihat seperti ini:

Solusi

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

🚀 Tantangan

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

Kuis Setelah Kuliah

Kuis setelah kuliah

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 diperhatikan bahwa terjemahan otomatis mungkin mengandung kesalahan atau ketidakakuratan. Dokumen asli dalam bahasa aslinya harus dianggap sebagai sumber yang berwenang. Untuk informasi yang bersifat kritis, disarankan menggunakan jasa penerjemahan manusia profesional. Kami tidak bertanggung jawab atas kesalahpahaman atau penafsiran yang keliru yang timbul dari penggunaan terjemahan ini.

8.6 KiB Raw Permalink Blame History