diff --git a/srcjs/stendhal/entity/RPEntity.ts b/srcjs/stendhal/entity/RPEntity.ts index e9d6443d7c8..8531fc44ec0 100644 --- a/srcjs/stendhal/entity/RPEntity.ts +++ b/srcjs/stendhal/entity/RPEntity.ts @@ -22,6 +22,7 @@ import { EmojiSprite } from "../sprite/EmojiSprite"; import { SpeechBubble } from "../sprite/SpeechBubble"; import { TextSprite } from "../sprite/TextSprite"; +import { BarehandAttackSprite } from "../sprite/action/BarehandAttackSprite"; import { MeleeAttackSprite } from "../sprite/action/MeleeAttackSprite"; import { RangedAttackSprite } from "../sprite/action/RangedAttackSprite"; @@ -771,17 +772,14 @@ export class RPEntity extends ActiveEntity { if (weapon === "blade_strike" && nature == 0) { weapon += "_cut"; } - let image: HTMLImageElement; const imagePath = Nature.VALUES[nature].getWeaponPath(weapon); if (weapon.startsWith("blade_strike")) { - image = stendhal.data.sprites.get(imagePath); + this.attackSprite = new BarehandAttackSprite(this, stendhal.data.sprites.get(imagePath)); } else { const entity_rot = 90 * (this["dir"] - 1); // TODO: rotate left & right 45 degrees & offset to center on entity - image = stendhal.data.sprites.getRotated(imagePath, entity_rot); + this.attackSprite = new MeleeAttackSprite(this, stendhal.data.sprites.getRotated(imagePath, entity_rot)); } - - this.attackSprite = new MeleeAttackSprite(this, image, weapon.startsWith("blade_strike")); } } diff --git a/srcjs/stendhal/sprite/action/BarehandAttackSprite.ts b/srcjs/stendhal/sprite/action/BarehandAttackSprite.ts new file mode 100644 index 00000000000..ddb63b96819 --- /dev/null +++ b/srcjs/stendhal/sprite/action/BarehandAttackSprite.ts @@ -0,0 +1,70 @@ +/*************************************************************************** + * Copyright © 2023 - Stendhal * + *************************************************************************** + * * + * This program is free software; you can redistribute it and/or modify * + * it under the terms of the GNU Affero General Public License as * + * published by the Free Software Foundation; either version 3 of the * + * License, or (at your option) any later version. * + * * + ***************************************************************************/ + +import { ActionSprite } from "./ActionSprite"; +import { RPEntity } from "../../entity/RPEntity"; + +declare var stendhal: any; + + +export class BarehandAttackSprite extends ActionSprite { + + private readonly dir: number; + private readonly image: HTMLImageElement; + + + constructor(source: RPEntity, image: HTMLImageElement) { + super(); + this.dir = source["dir"]; + this.image = image; + } + + public override draw(ctx: CanvasRenderingContext2D, x: number, y: number, entityWidth: number, + entityHeight: number) { + if (!this.image || !this.image.height) { + return; + } + + const dtime = Date.now() - this.initTime; + const frameIndex = Math.floor(Math.min(dtime / 60, 3)); + const drawWidth = this.image.width / 3; + const drawHeight = this.image.height / 4; + const centerX = x + (entityWidth - drawWidth) / 2; + const centerY = y + (entityHeight - drawHeight) / 2; + + // offset sprite for facing direction + let sx, sy; + switch (this.dir+"") { + case "1": // UP + sx = centerX + (stendhal.ui.gamewindow.targetTileWidth / 2); + sy = y - (stendhal.ui.gamewindow.targetTileHeight * 1.5); + break; + case "3": // DOWN + sx = centerX; + sy = y + entityHeight - drawHeight + (stendhal.ui.gamewindow.targetTileHeight / 2); + break; + case "4": // LEFT + sx = x - (stendhal.ui.gamewindow.targetTileWidth / 2); + sy = centerY - (stendhal.ui.gamewindow.targetTileHeight / 2); + break; + case "2": // RIGHT + sx = x + entityWidth - drawWidth + (stendhal.ui.gamewindow.targetTileWidth / 2); + sy = centerY; // - ICON_OFFSET; // ICON_OFFSET = 8 in Java client + break; + default: + sx = centerX; + sy = centerY; + } + + ctx.drawImage(this.image, frameIndex * drawWidth, (this.dir - 1) * drawHeight, + drawWidth, drawHeight, sx, sy, drawWidth, drawHeight); + } +} diff --git a/srcjs/stendhal/sprite/action/MeleeAttackSprite.ts b/srcjs/stendhal/sprite/action/MeleeAttackSprite.ts index c1c80ee4f01..dd6669701e1 100644 --- a/srcjs/stendhal/sprite/action/MeleeAttackSprite.ts +++ b/srcjs/stendhal/sprite/action/MeleeAttackSprite.ts @@ -19,14 +19,12 @@ export class MeleeAttackSprite extends ActionSprite { private readonly dir: number; private readonly image: HTMLImageElement; - private readonly barehand: boolean; - constructor(source: RPEntity, image: HTMLImageElement, barehand: boolean) { + constructor(source: RPEntity, image: HTMLImageElement) { super(); this.dir = source["dir"]; this.image = image; - this.barehand = barehand; } public override draw(ctx: CanvasRenderingContext2D, x: number, y: number, entityWidth: number, @@ -35,22 +33,10 @@ export class MeleeAttackSprite extends ActionSprite { return; } - const dtime = Date.now() - this.initTime; - const frameIndex = Math.floor(Math.min(dtime / 60, 3)); - - let yRow, frame, drawWidth, drawHeight; - if (this.barehand) { - yRow = this.dir - 1; - frame = frameIndex; - drawWidth = this.image.width / 3; - drawHeight = this.image.height / 4; - } else { - yRow = 0; - frame = 0; - drawWidth = this.image.width; - drawHeight = this.image.height; - } - + //~ const dtime = Date.now() - this.initTime; + //~ const frameIndex = Math.floor(Math.min(dtime / 60, 3)); + const drawWidth = this.image.width; + const drawHeight = this.image.height; var centerX = x + (entityWidth - drawWidth) / 2; var centerY = y + (entityHeight - drawHeight) / 2; @@ -78,7 +64,6 @@ export class MeleeAttackSprite extends ActionSprite { sy = centerY; } - ctx.drawImage(this.image, frame * drawWidth, yRow * drawHeight, - drawWidth, drawHeight, sx, sy, drawWidth, drawHeight); + ctx.drawImage(this.image, 0, 0, drawWidth, drawHeight, sx, sy, drawWidth, drawHeight); } }