8.9 KiB

Raw Permalink Blame History

Űrjáték készítése 2. rész: Hős és szörnyek rajzolása a vászonra

Előadás előtti kvíz

A vászon (Canvas)

A vászon egy HTML elem, amely alapértelmezés szerint nem tartalmaz semmilyen tartalmat; egy üres lap. Rajzolással kell tartalmat hozzáadni.

✅ Olvass többet a Canvas API-ról az MDN-en.

Általában így deklaráljuk, az oldal törzsének részeként:

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

A fenti példában beállítjuk az id, width és height értékeket.

id: ezt állítsd be, hogy hivatkozni tudj rá, amikor interakcióba lépsz vele.
width: ez az elem szélessége.
height: ez az elem magassága.

Egyszerű geometriai formák rajzolása

A vászon egy derékszögű koordináta-rendszert használ a rajzoláshoz. Ezért x- és y-tengelyt használ annak kifejezésére, hogy valami hol helyezkedik el. A 0,0 hely a bal felső sarok, míg a jobb alsó sarok az, amit a vászon SZÉLESSÉGÉNEK és MAGASSÁGÁNAK állítottál be.

Kép forrása: MDN

Ahhoz, hogy rajzolni tudj a vászon elemre, a következő lépéseket kell végrehajtanod:

Szerezz egy hivatkozást a vászon elemre.
Szerezz egy hivatkozást a vászon elemhez tartozó Kontextus elemre.
Hajts végre egy rajzolási műveletet a kontextus elem segítségével.

A fenti lépésekhez tartozó kód általában így néz ki:

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

✅ A Canvas API főként 2D formákra összpontosít, de 3D elemeket is rajzolhatsz egy weboldalra; ehhez használhatod a WebGL API-t.

A Canvas API-val különféle dolgokat rajzolhatsz, például:

Geometriai formák, már megmutattuk, hogyan lehet téglalapot rajzolni, de ennél sokkal többet is lehet.
Szöveg, bármilyen betűtípussal és színnel rajzolhatsz szöveget.
Képek, például .jpg vagy .png formátumú képeket is megjeleníthetsz.

✅ Próbáld ki! Tudod, hogyan kell téglalapot rajzolni, meg tudsz rajzolni egy kört is az oldalon? Nézd meg néhány érdekes Canvas rajzot a CodePen-en. Itt van egy különösen lenyűgöző példa.

Kép eszköz betöltése és rajzolása

Egy kép eszközt úgy tölthetsz be, hogy létrehozol egy Image objektumot, és beállítod a src tulajdonságát. Ezután figyelned kell a load eseményt, hogy tudd, mikor használható. A kód így néz ki:

Eszköz betöltése

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

Eszköz betöltési minta

Ajánlott a fentieket egy ilyen szerkezetbe csomagolni, hogy könnyebb legyen használni, és csak akkor próbálj manipulálni vele, amikor teljesen betöltődött:

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

Ahhoz, hogy játékeszközöket rajzolj a képernyőre, a kódod így nézhet ki:

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

Most kezdheted el a játékod építését

Mit kell építeni

Egy weboldalt kell készítened egy vászon elemmel. Egy fekete képernyőt kell megjelenítenie 1024*768 méretben. Két képet biztosítottunk számodra:

Hős hajó
5*5 szörny

Ajánlott lépések a fejlesztés megkezdéséhez

Keresd meg a your-work almappában létrehozott fájlokat. Ezeknek a következőket kell tartalmazniuk:

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

Nyisd meg ennek a mappának a másolatát a Visual Studio Code-ban. Helyi fejlesztési környezetet kell beállítanod, lehetőleg Visual Studio Code-dal, NPM-mel és Node-dal telepítve. Ha még nincs npm telepítve a számítógépeden, itt van, hogyan teheted meg.

Indítsd el a projektedet úgy, hogy navigálsz a your_work mappába:

cd your-work
npm start

A fenti parancs elindít egy HTTP szervert a http://localhost:5000 címen. Nyiss meg egy böngészőt, és írd be ezt a címet. Jelenleg egy üres oldal jelenik meg, de ez hamarosan megváltozik.

Megjegyzés: a képernyőn történő változások megtekintéséhez frissítsd a böngészőt.

Kód hozzáadása

Add hozzá a szükséges kódot a your-work/app.js fájlhoz az alábbiak megoldásához:

Rajzolj egy vásznat fekete háttérrel

Tipp: adj hozzá két sort a megfelelő TODO alá az /app.js fájlban, beállítva a ctx elemet feketére, a bal felső koordinátákat 0,0-ra, a magasságot és szélességet pedig a vászon méretéhez igazítva.
Töltsd be a textúrákat

Tipp: add hozzá a játékos és az ellenség képeit az await loadTexture használatával, és add meg a kép elérési útját. Még nem fogod látni őket a képernyőn!
Rajzold meg a hőst a képernyő közepére, az alsó felében

Tipp: használd a drawImage API-t a heroImg képernyőre rajzolásához, beállítva a canvas.width / 2 - 45 és canvas.height - canvas.height / 4) értékeket.

Rajzolj 5*5 szörnyet

Tipp: Most már kikommentelheted a kódot, hogy az ellenségeket a képernyőre rajzolja. Ezután menj a createEnemies függvényhez, és építsd ki.

Először állíts be néhány konstansot:

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;

majd hozz létre egy ciklust, amely az ellenségek tömbjét rajzolja a képernyőre:

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

Eredmény

A kész eredmény így kell kinézzen:

Megoldás

Próbáld meg először magad megoldani, de ha elakadsz, nézd meg a megoldást.

🚀 Kihívás

Megtanultál rajzolni a 2D-re fókuszáló Canvas API-val; nézd meg a WebGL API-t, és próbálj meg egy 3D objektumot rajzolni.

Előadás utáni kvíz

Áttekintés és önálló tanulás

Tudj meg többet a Canvas API-ról, ha elolvasod róla.

Feladat

Játssz a Canvas API-val

Felelősség kizárása:
Ez a dokumentum az AI fordítási szolgáltatás, a Co-op Translator segítségével lett lefordítva. Bár törekszünk a pontosságra, kérjük, vegye figyelembe, hogy az automatikus fordítások hibákat vagy pontatlanságokat tartalmazhatnak. Az eredeti dokumentum az eredeti nyelvén tekintendő hiteles forrásnak. Kritikus információk esetén javasolt professzionális emberi fordítást igénybe venni. Nem vállalunk felelősséget semmilyen félreértésért vagy téves értelmezésért, amely a fordítás használatából eredhet.

8.9 KiB Raw Permalink Blame History