tiled y sprite, sprite angel

This commit is contained in:
Alexander Popov 2023-04-23 21:18:27 +03:00
parent d2ea90101b
commit fa74956afa
Signed by: iiiypuk
GPG Key ID: E47FE0AB36CD5ED6
2 changed files with 42 additions and 3 deletions

1
src/.gitignore vendored
View File

@ -1 +1,2 @@
/fonts/monogram* /fonts/monogram*
/assets/

View File

@ -56,14 +56,14 @@ export class Sprite {
this.y = y; this.y = y;
this.width = null; this.width = null;
this.height = null; this.height = null;
this.angle = 0;
this.src = src;
this.loaded = false; this.loaded = false;
this.#image = new Image(); this.#image = new Image();
this.#image.onload = this.#onload(); this.#image.onload = this.#onload();
this.#image.src = this.src; this.#image.src = src;
} }
#onload() { #onload() {
@ -82,7 +82,11 @@ export class Sprite {
return -1; return -1;
} }
context.drawImage(this.image(), this.x, this.y); context.save();
context.translate(this.x + this.#image.width / 2, this.y + this.#image.height / 2);
context.rotate((this.angle * Math.PI) / 180);
context.drawImage(this.#image, -this.#image.width / 2, -this.#image.height / 2);
context.restore();
if (debug) { if (debug) {
drawDebug(context, this.x, this.y, this.#image.width, this.#image.height); drawDebug(context, this.x, this.y, this.#image.width, this.#image.height);
@ -90,6 +94,40 @@ export class Sprite {
} }
} }
export class TiledSprite extends Sprite {
constructor(src = null, x, y) {
super(src, x, y);
}
draw(context, debug = false) {
if (this.loaded != true) {
return -1;
}
context.drawImage(this.image(), this.x, this.y);
let copyUpByY = Math.ceil(this.y / this.image().height);
let copyDownByY = Math.ceil(
(context.canvas.height - this.y - this.image().height) / this.image().height
);
for (let i = 0; i <= copyUpByY; i++) {
if (copyUpByY === Infinity) {
break;
}
context.drawImage(this.image(), this.x, this.y - this.image().height * i);
}
for (let i = 0; i <= copyDownByY; i++) {
if (copyDownByY === Infinity) {
break;
}
context.drawImage(this.image(), this.x, this.y + this.image().height * i);
}
}
}
function drawDebug(context, x, y, w, h) { function drawDebug(context, x, y, w, h) {
context.font = '16px Monogram'; context.font = '16px Monogram';
context.fillStyle = '#ffffff'; context.fillStyle = '#ffffff';