8.1 KiB

Raw Permalink Blame History

Zgradite vesoljsko igro, 2. del: Risanje junaka in pošasti na platno

Predhodni kviz

Platno

Platno (Canvas) je HTML element, ki privzeto nima vsebine; je prazno platno. Dodati mu morate vsebino z risanjem nanj.

Tukaj je primer, kako ga običajno deklariramo kot del telesa strani:

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

Zgoraj nastavimo id, width in height.

id: nastavite to, da lahko pridobite referenco, ko morate z njim interagirati.
width: to je širina elementa.
height: to je višina elementa.

Risanje preproste geometrije

Platno uporablja kartezični koordinatni sistem za risanje. Zato uporablja x-os in y-os za izražanje lokacije nečesa. Lokacija 0,0 je zgornji levi kot, spodnji desni kot pa je določena z nastavljeno ŠIRINO in VIŠINO platna.

Slika iz MDN

Za risanje na element platna morate slediti naslednjim korakom:

Pridobite referenco na element platna.
Pridobite referenco na element Context, ki se nahaja na platnu.
Izvedite risalno operacijo z uporabo elementa Context.

Koda za zgornje korake običajno izgleda takole:

// 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 večinoma osredotoča na 2D oblike, vendar lahko na spletno stran narišete tudi 3D elemente; za to lahko uporabite WebGL API.

S Canvas API lahko narišete vse vrste stvari, kot so:

Geometrijske oblike, že smo pokazali, kako narisati pravokotnik, vendar lahko narišete še veliko več.
Besedilo, lahko narišete besedilo s katero koli pisavo in barvo.
Slike, lahko narišete sliko na podlagi slikovne datoteke, kot je .jpg ali .png.

✅ Poskusite! Zdaj, ko veste, kako narisati pravokotnik, lahko poskusite narisati krog na stran? Oglejte si nekaj zanimivih risb na platnu na CodePen. Tukaj je posebej impresiven primer.

Nalaganje in risanje slikovnega vira

Slikovni vir naložite tako, da ustvarite objekt Image in nastavite njegovo lastnost src. Nato poslušate dogodek load, da veste, kdaj je pripravljen za uporabo. Koda izgleda takole:

Nalaganje vira

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

Vzorec nalaganja vira

Priporočljivo je, da zgornje zavijete v strukturo, kot je ta, da je lažje za uporabo in da poskrbite, da ga poskušate manipulirati šele, ko je popolnoma naložen:

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

Za risanje igralnih virov na zaslon bi vaša koda izgledala takole:

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

Zdaj je čas, da začnete graditi svojo igro

Kaj zgraditi

Zgradili boste spletno stran z elementom platna. Prikazati mora črn zaslon velikosti 1024*768. Na voljo imate dve sliki:

Junakovo plovilo
5*5 pošasti

Priporočeni koraki za začetek razvoja

Poiščite datoteke, ki so bile ustvarjene za vas v podmapi your-work. Vsebujejo naj naslednje:

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

Odprite kopijo te mape v Visual Studio Code. Potrebujete lokalno razvojno okolje, po možnosti z Visual Studio Code, NPM in Node nameščenimi. Če npm ni nastavljen na vašem računalniku, tukaj je, kako to storiti.

Začnite svoj projekt tako, da se premaknete v mapo your_work:

cd your-work
npm start

Zgornji ukaz bo zagnal HTTP strežnik na naslovu http://localhost:5000. Odprite brskalnik in vnesite ta naslov. Trenutno je stran prazna, vendar se bo to spremenilo.

Opomba: za ogled sprememb na zaslonu osvežite brskalnik.

Dodajte kodo

Dodajte potrebno kodo v your-work/app.js, da rešite spodnje:

Narišite platno s črnim ozadjem

namig: dodajte dve vrstici pod ustrezen TODO v /app.js, nastavite element ctx na črno in zgornje/leve koordinate na 0,0, višino in širino pa na velikost platna.
Naložite teksture

namig: dodajte slike igralca in sovražnika z uporabo await loadTexture in podajte pot do slike. Na zaslonu jih še ne boste videli!
Narišite junaka na sredino zaslona v spodnji polovici

namig: uporabite API drawImage, da narišete heroImg na zaslon, nastavite canvas.width / 2 - 45 in canvas.height - canvas.height / 4).

Narišite 5*5 pošasti

namig: zdaj lahko odstranite komentarje iz kode za risanje sovražnikov na zaslon. Nato pojdite v funkcijo createEnemies in jo dokončajte.

Najprej nastavite nekaj 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;

nato ustvarite zanko za risanje matrike pošasti na zaslon:

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

Rezultat

Končni rezultat naj bi izgledal takole:

Rešitev

Najprej poskusite rešiti sami, če pa se zataknete, si oglejte rešitev.

🚀 Izziv

Naučili ste se risanja z 2D Canvas API; poglejte si WebGL API in poskusite narisati 3D objekt.

Zaključni kviz

Pregled in samostojno učenje

Več o Canvas API se naučite z branjem o njem.

Naloga

Preizkusite Canvas API

Omejitev odgovornosti:
Ta dokument je bil preveden z uporabo storitve za prevajanje z umetno inteligenco Co-op Translator. Čeprav si prizadevamo za natančnost, vas prosimo, da upoštevate, da lahko avtomatizirani prevodi vsebujejo napake ali netočnosti. Izvirni dokument v njegovem izvirnem jeziku je treba obravnavati kot avtoritativni vir. Za ključne informacije priporočamo profesionalni človeški prevod. Ne prevzemamo odgovornosti za morebitna nesporazumevanja ali napačne razlage, ki bi nastale zaradi uporabe tega prevoda.

8.1 KiB Raw Permalink Blame History