8.6 KiB

Raw Permalink Blame History

Costruire un Gioco Spaziale Parte 2: Disegnare Eroe e Mostri sul Canvas

Quiz Pre-Lezione

Il Canvas

Il canvas è un elemento HTML che di default non ha contenuto; è una tela bianca. Devi aggiungere contenuto disegnandoci sopra.

✅ Leggi di più sull'API Canvas su MDN.

Ecco come viene tipicamente dichiarato, come parte del corpo della pagina:

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

Sopra stiamo impostando id, width e height.

id: impostalo per ottenere un riferimento quando devi interagire con esso.
width: questa è la larghezza dell'elemento.
height: questa è l'altezza dell'elemento.

Disegnare geometrie semplici

Il Canvas utilizza un sistema di coordinate cartesiane per disegnare gli oggetti. Quindi utilizza un asse x e un asse y per esprimere dove si trova qualcosa. La posizione 0,0 è l'angolo in alto a sinistra, mentre l'angolo in basso a destra corrisponde ai valori di WIDTH e HEIGHT del canvas.

Immagine da MDN

Per disegnare sul canvas, devi seguire i seguenti passaggi:

Ottenere un riferimento all'elemento Canvas.
Ottenere un riferimento al Context che si trova sull'elemento Canvas.
Eseguire un'operazione di disegno utilizzando il Context.

Il codice per i passaggi sopra solitamente appare così:

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

✅ L'API Canvas si concentra principalmente su forme 2D, ma puoi anche disegnare elementi 3D su un sito web; per questo, potresti utilizzare l'API WebGL.

Con l'API Canvas puoi disegnare ogni tipo di oggetto, come:

Forme geometriche, abbiamo già mostrato come disegnare un rettangolo, ma c'è molto altro che puoi disegnare.
Testo, puoi disegnare un testo con qualsiasi font e colore desideri.
Immagini, puoi disegnare un'immagine basata su un asset come un file .jpg o .png, per esempio.

✅ Prova! Ora che sai come disegnare un rettangolo, riesci a disegnare un cerchio su una pagina? Dai un'occhiata ad alcuni disegni interessanti realizzati con il Canvas su CodePen. Ecco un esempio particolarmente impressionante.

Caricare e disegnare un'immagine

Puoi caricare un'immagine creando un oggetto Image e impostando la sua proprietà src. Poi ascolti l'evento load per sapere quando è pronta per essere utilizzata. Il codice appare così:

Caricare un'immagine

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

Pattern per caricare un'immagine

Si consiglia di incapsulare il codice sopra in una struttura come questa, così è più facile da usare e puoi manipolarlo solo quando è completamente caricato:

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

Per disegnare gli asset di gioco sullo schermo, il tuo codice apparirà così:

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

Ora è il momento di iniziare a costruire il tuo gioco

Cosa costruire

Costruirai una pagina web con un elemento Canvas. Dovrebbe mostrare uno schermo nero 1024*768. Ti abbiamo fornito due immagini:

Nave dell'eroe
Mostro 5*5

Passaggi consigliati per iniziare lo sviluppo

Trova i file che sono stati creati per te nella sottocartella your-work. Dovrebbe contenere quanto segue:

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

Apri la copia di questa cartella in Visual Studio Code. Devi avere un ambiente di sviluppo locale configurato, preferibilmente con Visual Studio Code con NPM e Node installati. Se non hai npm configurato sul tuo computer, ecco come farlo.

Inizia il tuo progetto navigando nella cartella your_work:

cd your-work
npm start

Il comando sopra avvierà un server HTTP all'indirizzo http://localhost:5000. Apri un browser e inserisci quell'indirizzo. Al momento è una pagina vuota, ma cambierà.

Nota: per vedere i cambiamenti sullo schermo, aggiorna il browser.

Aggiungi codice

Aggiungi il codice necessario a your-work/app.js per risolvere quanto segue:

Disegna un canvas con sfondo nero

suggerimento: aggiungi due righe sotto il TODO appropriato in /app.js, impostando l'elemento ctx su nero e le coordinate in alto/sinistra su 0,0, con altezza e larghezza uguali a quelle del canvas.
Carica le texture

suggerimento: aggiungi le immagini del giocatore e del nemico utilizzando await loadTexture e passando il percorso dell'immagine. Non le vedrai ancora sullo schermo!
Disegna l'eroe al centro dello schermo nella metà inferiore

suggerimento: usa l'API drawImage per disegnare heroImg sullo schermo, impostando canvas.width / 2 - 45 e canvas.height - canvas.height / 4).

Disegna 5*5 mostri

suggerimento: ora puoi decommentare il codice per disegnare i nemici sullo schermo. Poi, vai alla funzione createEnemies e completala.

Per prima cosa, imposta alcune costanti:

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;

poi, crea un ciclo per disegnare l'array di mostri sullo schermo:

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

Risultato

Il risultato finale dovrebbe apparire così:

Soluzione

Prova a risolverlo da solo prima, ma se rimani bloccato, dai un'occhiata a una soluzione.

🚀 Sfida

Hai imparato a disegnare con l'API Canvas focalizzata sul 2D; dai un'occhiata all'API WebGL e prova a disegnare un oggetto 3D.

Quiz Post-Lezione

Quiz post-lezione

Revisione e Studio Autonomo

Scopri di più sull'API Canvas leggendo a riguardo.

Compito

Gioca con l'API Canvas

Disclaimer:
Questo documento è stato tradotto utilizzando il servizio di traduzione automatica Co-op Translator. Sebbene ci impegniamo per garantire l'accuratezza, si prega di notare che le traduzioni automatiche potrebbero contenere errori o imprecisioni. Il documento originale nella sua lingua nativa dovrebbe essere considerato la fonte autorevole. Per informazioni critiche, si consiglia una traduzione professionale eseguita da un traduttore umano. Non siamo responsabili per eventuali fraintendimenti o interpretazioni errate derivanti dall'uso di questa traduzione.

8.6 KiB Raw Permalink Blame History