BeeEngine logo BeeEngine JAVASCRIPT 2D ENGINE

Sprite sheet in JavaScript: animazione a frame su Canvas

Documentazione – BeeEngine
v2.10.1

BeeSprite — Documentazione Tecnica

Un ciclo sul foglio: update(dt), frameCount, draw

📁 Panoramica

BeeSprite fa girare un solo ciclo di fotogrammi. Vive in src/graphics/BeeSprite.js. Non è BeeAnimatedSprite (niente clip, flip o animator) e non è BeeSpriteSheet (quello ritaglia un indice, non tiene il tempo).

speed è in frame al secondo, default 8. dt è in secondi, lo stesso di BeeTime. Se metti lo sprite su entity.sprite e non c’è un animator, il loop chiama update(dt). draw lo chiami tu.

const sprite = new BeeSprite(img, 32, 32, 4); hero.sprite = sprite;

📁 Ciclo

frameCount omesso vale framesPerRow: cicla la prima riga. Il sesto argomento allunga il ciclo sulle righe sotto.

  1. 1. updateframe += speed * dt. dt non finito, o foglio non valido: frame resta com’è. Non disegna.
  2. 2. indicefloor(frame) % frameCount. Colonna % framesPerRow, riga floor(indice / framesPerRow).
  3. 3. drawdrawImage del rettangolo sorgente, disegnato frameWidth × frameHeight. Senza ctx o image: return.

📁 Dove è facile sbagliare

Una riga, se non dici altro. new BeeSprite(img, 32, 32, 4) cicla i 4 frame della prima riga. frameCount è il sesto argomento: new BeeSprite(img, 32, 32, 4, 8, 8) percorre 8 frame, due righe da 4, e torna all’inizio.

update sì, draw no. BeeEntity avanza entity.sprite solo se manca l’animator. Il ritaglio lo fai nel tuo draw, di solito in coordinate mondo dopo camera.apply.

Foglio non valido. framesPerRow o frameCount non finiti o ≤ 0: update non avanza e draw non chiama drawImage. In pausa dt è 0: il frame resta fermo.

📁 Esempio: due righe

const sprite = new BeeSprite(img, 32, 32, 4, 8, 8); hero.sprite = sprite; // nel draw del gioco, dopo camera.apply sprite.draw(ctx, hero.worldX, hero.worldY);

Il quinto argomento è speed (qui 8 frame al secondo). Il sesto è frameCount.

📁 Riepilogo API

Non estende BeeEntity. Il tempo lo tiene frame, un accumulatore: in disegno conta floor(frame) % frameCount.

Membro Ritorna Scopo
new BeeSprite(image, frameWidth, frameHeight, framesPerRow, speed?, frameCount?) BeeSprite speed default 8. frameCount omesso: uguale a framesPerRow. frame parte da 0.
update(dt) frame += speed * dt. dt non finito, o framesPerRow / frameCount non validi: return. Non disegna.
draw(ctx, x, y) Ritaglia colonna e riga e le disegna a x, y nelle dimensioni del frame. Senza ctx o image, o con foglio non valido: return.
frame / speed / frameCount / framesPerRow number speed in frame al secondo. frameCount è la lunghezza del ciclo.
image / frameWidth / frameHeight Sorgente e dimensione del fotogramma, in pixel.