8.9 KiB

Raw Permalink Blame History

Gumawa ng Space Game Part 2: I-drawing ang Hero at Monsters sa Canvas

Pre-Lecture Quiz

Ang Canvas

Ang canvas ay isang HTML element na default na walang laman; ito ay isang blangkong espasyo. Kailangan mo itong punan sa pamamagitan ng pag-drawing dito.

✅ Basahin ang karagdagang impormasyon tungkol sa Canvas API sa MDN.

Ganito karaniwang ideklara ang canvas bilang bahagi ng body ng pahina:

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

Sa itaas, itinatakda natin ang id, width, at height.

id: itakda ito upang makakuha ng reference kapag kailangan mong makipag-ugnayan dito.
width: ito ang lapad ng elemento.
height: ito ang taas ng elemento.

Pag-drawing ng simpleng geometry

Ang Canvas ay gumagamit ng cartesian coordinate system para mag-drawing ng mga bagay. Kaya't gumagamit ito ng x-axis at y-axis upang ipakita kung saan matatagpuan ang isang bagay. Ang lokasyon na 0,0 ay ang pinakataas na kaliwang posisyon, at ang pinakababa na kanan ay ang WIDTH at HEIGHT ng canvas na itinakda mo.

Larawan mula sa MDN

Para mag-drawing sa canvas element, kailangan mong sundin ang mga sumusunod na hakbang:

Kumuha ng reference sa Canvas element.
Kumuha ng reference sa Context element na nasa canvas element.
Gumawa ng drawing operation gamit ang context element.

Ang code para sa mga hakbang sa itaas ay karaniwang ganito ang hitsura:

// 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

✅ Ang Canvas API ay pangunahing nakatuon sa 2D shapes, ngunit maaari ka ring mag-drawing ng 3D elements sa isang website; para dito, maaari mong gamitin ang WebGL API.

Maaari kang mag-drawing ng iba't ibang bagay gamit ang Canvas API tulad ng:

Mga geometrical shapes, ipinakita na namin kung paano mag-drawing ng rectangle, ngunit marami pang iba ang maaari mong i-drawing.
Teksto, maaari kang mag-drawing ng teksto gamit ang anumang font at kulay na gusto mo.
Mga imahe, maaari kang mag-drawing ng imahe mula sa isang image asset tulad ng .jpg o .png halimbawa.

✅ Subukan ito! Alam mo na kung paano mag-drawing ng rectangle, kaya mo bang mag-drawing ng bilog sa isang pahina? Tingnan ang ilang mga kawili-wiling Canvas drawings sa CodePen. Narito ang isang napaka-impressive na halimbawa.

Mag-load at mag-drawing ng image asset

Mag-load ka ng image asset sa pamamagitan ng paglikha ng Image object at pagtatakda ng src property nito. Pagkatapos, makinig sa load event upang malaman kung kailan ito handa nang gamitin. Ganito ang hitsura ng code:

Mag-load ng asset

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

Pattern sa pag-load ng asset

Inirerekomenda na balutin ang nasa itaas sa isang construct tulad nito, upang mas madali itong gamitin at tiyakin na magagamit mo lamang ito kapag ganap na itong na-load:

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')
}

Para mag-drawing ng game assets sa screen, ganito ang magiging hitsura ng iyong code:

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);
}

Panahon na para simulan ang paggawa ng iyong laro

Ano ang gagawin

Gagawa ka ng isang web page na may Canvas element. Dapat itong mag-render ng black screen na 1024*768. Nagbigay kami sa iyo ng dalawang imahe:

Hero ship
5*5 monster

Mga inirerekomendang hakbang para simulan ang development

Hanapin ang mga file na ginawa para sa iyo sa your-work sub folder. Dapat itong maglaman ng sumusunod:

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

Buksan ang kopya ng folder na ito sa Visual Studio Code. Kailangan mong magkaroon ng lokal na development environment na naka-set up, mas mainam kung may Visual Studio Code na may NPM at Node na naka-install. Kung wala kang npm sa iyong computer, narito kung paano ito gawin.

Simulan ang iyong proyekto sa pamamagitan ng pag-navigate sa your_work folder:

cd your-work
npm start

Ang nasa itaas ay magpapasimula ng HTTP Server sa address na http://localhost:5000. Buksan ang browser at ilagay ang address na iyon. Blangkong pahina pa ito ngayon, ngunit magbabago ito.

Tandaan: upang makita ang mga pagbabago sa iyong screen, i-refresh ang iyong browser.

Magdagdag ng code

Idagdag ang kinakailangang code sa your-work/app.js upang malutas ang mga sumusunod:

Mag-drawing ng canvas na may black background

tip: magdagdag ng dalawang linya sa ilalim ng naaangkop na TODO sa /app.js, itakda ang ctx element na maging itim at ang top/left coordinates sa 0,0 at ang taas at lapad na katumbas ng canvas.
Mag-load ng textures

tip: idagdag ang player at enemy images gamit ang await loadTexture at ipasa ang image path. Hindi mo pa makikita ang mga ito sa screen!
Mag-drawing ng hero sa gitna ng screen sa ibabang bahagi

tip: gamitin ang drawImage API upang i-drawing ang heroImg sa screen, itakda ang canvas.width / 2 - 45 at canvas.height - canvas.height / 4);

Mag-drawing ng 5*5 monsters

tip: Ngayon maaari mong i-uncomment ang code upang i-drawing ang mga enemies sa screen. Susunod, pumunta sa createEnemies function at buuin ito.

Una, mag-set up ng ilang constants:

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;

pagkatapos, gumawa ng loop upang i-drawing ang array ng monsters sa screen:

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

Resulta

Ang tapos na resulta ay dapat ganito ang hitsura:

Solusyon

Subukan mo munang lutasin ito, ngunit kung mahirapan ka, tingnan ang isang solusyon

🚀 Hamon

Natutunan mo ang tungkol sa pag-drawing gamit ang 2D-focused Canvas API; tingnan ang WebGL API, at subukang mag-drawing ng 3D object.

Post-Lecture Quiz

Post-lecture quiz

Review & Self Study

Matuto pa tungkol sa Canvas API sa pamamagitan ng pagbabasa tungkol dito.

Assignment

Maglaro gamit ang Canvas API

Paunawa:
Ang dokumentong ito ay isinalin gamit ang AI translation service na Co-op Translator. Bagama't sinisikap naming maging tumpak, tandaan na ang mga awtomatikong pagsasalin ay maaaring maglaman ng mga pagkakamali o hindi pagkakatugma. Ang orihinal na dokumento sa kanyang katutubong wika ang dapat ituring na opisyal na sanggunian. Para sa mahalagang impormasyon, inirerekomenda ang propesyonal na pagsasalin ng tao. Hindi kami mananagot sa anumang hindi pagkakaunawaan o maling interpretasyon na maaaring magmula sa paggamit ng pagsasaling ito.

8.9 KiB Raw Permalink Blame History