From 8315abc932f6243568a3ab6aebf608e823aa23be Mon Sep 17 00:00:00 2001 From: "Z. Cliffe Schreuders" Date: Fri, 7 Nov 2025 17:41:54 +0000 Subject: [PATCH] Update sprite positioning in PersonChatPortraits to enhance visual alignment - Adjusted sprite positioning by shifting it 20% away from the direction the character is facing, improving the visual representation for both NPCs and players. - Ensured consistent handling of sprite and image centering across the canvas for better overall aesthetics. --- .../person-chat/person-chat-portraits.js | 16 ++++++++++++++-- 1 file changed, 14 insertions(+), 2 deletions(-) diff --git a/js/minigames/person-chat/person-chat-portraits.js b/js/minigames/person-chat/person-chat-portraits.js index cbf5dba..f5b4547 100644 --- a/js/minigames/person-chat/person-chat-portraits.js +++ b/js/minigames/person-chat/person-chat-portraits.js @@ -272,9 +272,15 @@ export default class PersonChatPortraits { // Calculate position to center the sprite const scaledWidth = spriteWidth * scale; const scaledHeight = spriteHeight * scale; - const x = (canvasWidth - scaledWidth) / 2; + let x = (canvasWidth - scaledWidth) / 2; const y = (canvasHeight - scaledHeight) / 2; + // Shift sprite 20% away from the direction they're facing + // Shifting left works for both flipped and non-flipped due to coordinate transform + // NPCs (flipped) appear on right, Player (not flipped) appears on left + const shiftAmount = canvasWidth * 0.2; + x -= shiftAmount; + // Draw the sprite frame scaled to fill canvas with optional flip this.ctx.imageSmoothingEnabled = false; @@ -366,9 +372,15 @@ export default class PersonChatPortraits { // Calculate position to center the image const scaledWidth = imgWidth * scale; const scaledHeight = imgHeight * scale; - const x = (canvasWidth - scaledWidth) / 2; + let x = (canvasWidth - scaledWidth) / 2; const y = (canvasHeight - scaledHeight) / 2; + // Shift sprite 20% away from the direction they're facing + // Shifting left works for both flipped and non-flipped due to coordinate transform + // NPCs (flipped) appear on right, Player (not flipped) appears on left + const shiftAmount = canvasWidth * 0.2; + x -= shiftAmount; + // Draw image scaled to fill canvas with optional flip this.ctx.imageSmoothingEnabled = false;