BeeEngine logo BeeEngine JAVASCRIPT 2D ENGINE

Ritagliare frame da uno sprite sheet in JavaScript

Documentazione – BeeEngine
v2.10.2

BeeSpriteSheet — Documentazione Tecnica

Ritaglio di un indice: drawFrame, framesPerRow, frameCount

📁 Panoramica

BeeSpriteSheet ritaglia una cella da un foglio. Vive in src/graphics/BeeSpriteSheet.js. Non tiene il tempo: niente update, niente clip. L’animazione sta su BeeAnimatedSprite (chiama drawFrame) o su BeeSprite, che è un altro player e non usa questa classe.

Factory: gioco.createSpriteSheet(image, frameWidth, frameHeight, options). image è qualunque sorgente di drawImage, anche un canvas. framesPerRow omesso vale 1.

const sheet = gioco.createSpriteSheet(img, 32, 32, { framesPerRow: 8, frameCount: 8 });

📁 Indice

L’indice 5 con framesPerRow 4 è colonna 1, riga 1. L’origine del ritaglio è offsetX / offsetY.

  1. 1. grigliaColonna indice % framesPerRow, riga floor(indice / framesPerRow).
  2. 2. originecol / row sono in celle. Se ne passi una sola, l’altra è 0. Senza quelle: offsetX / offsetY in pixel.
  3. 3. drawFrameSorgente frameWidth × frameHeight. destW / destH omessi: stessa misura.

📁 Dove è facile sbagliare

framesPerRow omesso è 1. L’indice 1 è la cella sotto, non quella a destra. Un foglio in orizzontale va dichiarato: { framesPerRow: 8 }. 0 o NaN restano così e drawFrame non disegna.

frameCount è un tetto, se c’è. Senza, l’indice 3 (e oltre) disegna lo stesso. Con frameCount: 4, l’indice 4 non chiama drawImage. Non è il ciclo di BeeSprite: qui non avanza da solo.

Una regione del mega-foglio. { col: 2 } mette offsetX a 2 * frameWidth e offsetY a 0. offsetX / offsetY in pixel valgono solo se non passi col né row.

📁 Esempio: una cella, e un pezzo di atlas

sheet.drawFrame(ctx, 3, hero.worldX, hero.worldY); const ape = gioco.createSpriteSheet(atlas, 32, 32, { col: 2, row: 1, framesPerRow: 4 });

Senza ctx o senza image, con misure non valide o con un indice non finito, drawFrame esce e non lancia.

📁 Riepilogo API

Non estende BeeEntity. Non ha update.

Membro Ritorna Scopo
new BeeSpriteSheet(image, frameWidth, frameHeight, options?) BeeSpriteSheet framesPerRow default 1. frameCount omesso: undefined, nessun tetto. col / row oppure offsetX / offsetY.
drawFrame(ctx, frameIndex, destX, destY, destW?, destH?) Ritaglia la cella e la disegna. destW / destH omessi: misura del frame. Foglio non valido, indice non finito, o fuori da frameCount se c’è: return.
framesPerRow / frameCount number Colonne della griglia, e lunghezza opzionale. 0 non diventa 1: drawFrame non disegna.
offsetX / offsetY number Origine del ritaglio, in pixel. Da col / row o dagli offset espliciti.
image / frameWidth / frameHeight Sorgente e dimensione di una cella, in pixel.