8.4 KiB

Raw Permalink Blame History

Vytvorenie vesmírnej hry, časť 2: Kreslenie hrdinu a monštier na plátno

Kvíz pred prednáškou

Plátno

Plátno je HTML element, ktorý nemá predvolene žiadny obsah; je to prázdne plátno. Musíte naň kresliť, aby ste ho naplnili.

✅ Prečítajte si viac o Canvas API na MDN.

Takto sa zvyčajne deklaruje ako súčasť tela stránky:

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

Vyššie nastavujeme id, width a height.

id: nastavte ho, aby ste mohli získať referenciu, keď budete potrebovať s plátnom pracovať.
width: šírka elementu.
height: výška elementu.

Kreslenie jednoduchej geometrie

Plátno používa kartézsky súradnicový systém na kreslenie objektov. Používa os x a os y na vyjadrenie polohy objektu. Poloha 0,0 je v ľavom hornom rohu a pravý dolný roh je určený hodnotami WIDTH a HEIGHT plátna.

Obrázok z MDN

Na kreslenie na plátno musíte prejsť nasledujúcimi krokmi:

Získať referenciu na element plátna.
Získať referenciu na kontextový element, ktorý sa nachádza na plátne.
Vykonať kresliacu operáciu pomocou kontextového elementu.

Kód pre vyššie uvedené kroky zvyčajne vyzerá takto:

// 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 sa zameriava hlavne na 2D tvary, ale môžete tiež kresliť 3D objekty na webovú stránku; na to môžete použiť WebGL API.

S Canvas API môžete kresliť rôzne veci, ako napríklad:

Geometrické tvary, už sme ukázali, ako nakresliť obdĺžnik, ale môžete kresliť oveľa viac.
Text, môžete kresliť text s akýmkoľvek fontom a farbou, akú si želáte.
Obrázky, môžete kresliť obrázky na základe obrazových súborov, ako napríklad .jpg alebo .png.

✅ Skúste to! Už viete, ako nakresliť obdĺžnik, dokážete nakresliť kruh na stránku? Pozrite si niektoré zaujímavé kresby na plátne na CodePen. Tu je obzvlášť pôsobivý príklad.

Načítanie a kreslenie obrazového súboru

Obrazový súbor načítate vytvorením objektu Image a nastavením jeho vlastnosti src. Potom počúvate udalosť load, aby ste vedeli, kedy je pripravený na použitie. Kód vyzerá takto:

Načítanie súboru

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

Vzor načítania súboru

Odporúča sa obaliť vyššie uvedený kód do konštruktu, aby sa s ním ľahšie pracovalo a aby ste sa pokúsili manipulovať s ním iba vtedy, keď je úplne načítaný:

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

Na kreslenie herných prvkov na obrazovku by váš kód vyzeral takto:

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

Teraz je čas začať budovať svoju hru

Čo vytvoriť

Vytvoríte webovú stránku s elementom plátna. Mala by zobrazovať čiernu obrazovku 1024*768. Poskytli sme vám dva obrázky:

Loď hrdinu
5*5 monštrum

Odporúčané kroky na začatie vývoja

Nájdite súbory, ktoré boli pre vás vytvorené v podpriečinku your-work. Mali by obsahovať nasledujúce:

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

Otvorte kópiu tohto priečinka vo Visual Studio Code. Mali by ste mať nastavené lokálne vývojové prostredie, ideálne s Visual Studio Code, NPM a Node. Ak nemáte na svojom počítači nastavený npm, tu je návod, ako to urobiť.

Začnite svoj projekt navigáciou do priečinka your_work:

cd your-work
npm start

Vyššie uvedené spustí HTTP server na adrese http://localhost:5000. Otvorte prehliadač a zadajte túto adresu. Momentálne je to prázdna stránka, ale to sa zmení.

Poznámka: aby ste videli zmeny na obrazovke, obnovte prehliadač.

Pridanie kódu

Pridajte potrebný kód do your-work/app.js, aby ste vyriešili nasledujúce:

Nakreslite plátno s čiernym pozadím

tip: pridajte dva riadky pod príslušný TODO v /app.js, nastavte element ctx na čiernu farbu a horné/ľavé súradnice na 0,0, pričom výška a šírka budú rovnaké ako plátno.
Načítajte textúry

tip: pridajte obrázky hráča a nepriateľa pomocou await loadTexture a odovzdajte cestu k obrázku. Zatiaľ ich na obrazovke neuvidíte!
Nakreslite hrdinu do stredu obrazovky v dolnej polovici

tip: použite API drawImage na nakreslenie heroImg na obrazovku, nastavte canvas.width / 2 - 45 a canvas.height - canvas.height / 4);

Nakreslite 5*5 monštier

tip: Teraz môžete odkomentovať kód na kreslenie nepriateľov na obrazovku. Potom prejdite do funkcie createEnemies a doplňte ju.

Najskôr nastavte niektoré konštanty:

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;

potom vytvorte slučku na nakreslenie poľa monštier na obrazovku:

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

Výsledok

Hotový výsledok by mal vyzerať takto:

Riešenie

Najskôr sa pokúste vyriešiť úlohu sami, ale ak sa zaseknete, pozrite si riešenie.

🚀 Výzva

Naučili ste sa kresliť pomocou Canvas API zameraného na 2D; pozrite si WebGL API a skúste nakresliť 3D objekt.

Kvíz po prednáške

Prehľad a samostatné štúdium

Dozviete sa viac o Canvas API čítaním o ňom.

Zadanie

Hrajte sa s Canvas API

Upozornenie:
Tento dokument bol preložený pomocou služby na automatický preklad Co-op Translator. Hoci sa snažíme o presnosť, upozorňujeme, že automatické preklady môžu obsahovať chyby alebo nepresnosti. Pôvodný dokument v jeho pôvodnom jazyku by mal byť považovaný za autoritatívny zdroj. Pre kritické informácie sa odporúča profesionálny ľudský preklad. Nezodpovedáme za akékoľvek nedorozumenia alebo nesprávne interpretácie vyplývajúce z použitia tohto prekladu.

8.4 KiB Raw Permalink Blame History