8.4 KiB

Raw Permalink Blame History

Vytvořte vesmírnou hru, část 2: Kreslení hrdiny a monster na plátno

Kvíz před přednáškou

Plátno

Plátno je HTML prvek, který nemá ve výchozím nastavení žádný obsah; je to prázdná plocha. Musíte na něj něco nakreslit.

✅ Přečtěte si více o Canvas API na MDN.

Takto se obvykle deklaruje jako součást těla stránky:

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

Výše nastavujeme id, width a height.

id: nastavte, abyste mohli získat referenci, když s ním budete chtít pracovat.
width: šířka prvku.
height: výška prvku.

Kreslení jednoduché geometrie

Plátno používá kartézský souřadnicový systém pro kreslení objektů. Používá tedy osu x a osu y k určení, kde se něco nachází. Pozice 0,0 je v levém horním rohu a pravý dolní roh odpovídá hodnotám WIDTH a HEIGHT plátna.

Obrázek z MDN

Pro kreslení na prvek plátna musíte projít následujícími kroky:

Získat referenci na prvek plátna.
Získat referenci na kontextový prvek, který je na plátně.
Proveďte kreslící operaci pomocí kontextového prvku.

Kód pro výše uvedené kroky obvykle vypadá 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 se většinou zaměřuje na 2D tvary, ale můžete také kreslit 3D prvky na webovou stránku; k tomu můžete použít WebGL API.

S Canvas API můžete kreslit různé věci, například:

Geometrické tvary, už jsme ukázali, jak nakreslit obdélník, ale můžete kreslit mnohem více.
Text, můžete kreslit text s libovolným písmem a barvou.
Obrázky, můžete kreslit obrázky na základě obrazových souborů, jako jsou .jpg nebo .png.

✅ Vyzkoušejte to! Už víte, jak nakreslit obdélník, dokážete nakreslit kruh na stránku? Podívejte se na některé zajímavé kresby na plátně na CodePen. Zde je zvláště působivý příklad.

Načtení a vykreslení obrazového souboru

Obrazový soubor načtete vytvořením objektu Image a nastavením jeho vlastnosti src. Poté posloucháte událost load, abyste věděli, kdy je připraven k použití. Kód vypadá takto:

Načtení souboru

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

Vzor načítání souboru

Doporučuje se zabalit výše uvedené do konstruktu, jako je tento, aby bylo snazší jej používat a abyste se pokusili s ním manipulovat pouze tehdy, když je plně načten:

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

Pro vykreslení herních prvků na obrazovku by váš kód vypadal 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);
}

Teď je čas začít stavět vaši hru

Co vytvořit

Vytvoříte webovou stránku s prvkem plátna. Měla by vykreslit černou obrazovku 1024*768. Poskytli jsme vám dva obrázky:

Loď hrdiny
5*5 monster

Doporučené kroky pro zahájení vývoje

Najděte soubory, které byly vytvořeny pro vás ve složce your-work. Měla by obsahovat následující:

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

Otevřete kopii této složky ve Visual Studio Code. Měli byste mít nastavené lokální vývojové prostředí, nejlépe s Visual Studio Code s NPM a Node nainstalovanými. Pokud nemáte npm nastavený na svém počítači, zde je návod, jak to udělat.

Spusťte svůj projekt navigací do složky your_work:

cd your-work
npm start

Výše uvedené spustí HTTP server na adrese http://localhost:5000. Otevřete prohlížeč a zadejte tuto adresu. Zatím je to prázdná stránka, ale to se změní.

Poznámka: pro zobrazení změn na obrazovce obnovte prohlížeč.

Přidání kódu

Přidejte potřebný kód do your-work/app.js, abyste vyřešili následující:

Nakreslete plátno s černým pozadím

tip: přidejte dva řádky pod příslušný TODO v /app.js, nastavte prvek ctx na černou barvu a souřadnice nahoře/vlevo na 0,0 a výšku a šířku na hodnoty plátna.
Načtěte textury

tip: přidejte obrázky hráče a nepřítele pomocí await loadTexture a předáním cesty k obrázku. Zatím je na obrazovce neuvidíte!
Nakreslete hrdinu do středu obrazovky ve spodní polovině

tip: použijte API drawImage k vykreslení heroImg na obrazovku, nastavte canvas.width / 2 - 45 a canvas.height - canvas.height / 4);

Nakreslete 5*5 monster

tip: Nyní můžete odkomentovat kód pro vykreslení nepřátel na obrazovku. Dále přejděte do funkce createEnemies a doplňte ji.

Nejprve nastavte několik konstant:

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;

poté vytvořte smyčku pro vykreslení pole monster 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ýsledek

Hotový výsledek by měl vypadat takto:

Řešení

Nejprve se pokuste vyřešit to sami, ale pokud se zaseknete, podívejte se na řešení.

🚀 Výzva

Naučili jste se kreslit pomocí Canvas API zaměřeného na 2D; podívejte se na WebGL API a zkuste nakreslit 3D objekt.

Kvíz po přednášce

Recenze a samostudium

Zjistěte více o Canvas API čtením o něm.

Zadání

Hrajte si s Canvas API

Upozornění:
Tento dokument byl přeložen pomocí služby pro automatický překlad Co-op Translator. I když se snažíme o co největší přesnost, mějte prosím na paměti, že automatické překlady mohou obsahovat chyby nebo nepřesnosti. Původní dokument v jeho původním jazyce by měl být považován za závazný zdroj. Pro důležité informace doporučujeme profesionální lidský překlad. Neodpovídáme za žádná nedorozumění nebo nesprávné výklady vyplývající z použití tohoto překladu.

8.4 KiB Raw Permalink Blame History