cybersecurity/BreakEscape
1
0
Fork 0
mirror of https://github.com/cliffe/BreakEscape.git synced 2026-02-21 11:18:08 +00:00
Code Issues Packages Projects Releases Wiki Activity

Update sprite positioning in PersonChatPortraits to enhance visual alignment

Browse Source 
- 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.
This commit is contained in:
Z. Cliffe Schreuders
2025-11-07 17:41:54 +00:00
parent 717221cb3c
commit 8315abc932
1 changed files with 14 additions and 2 deletions
Download Patch File Download Diff File Expand all files Collapse all files

16
js/minigames/person-chat/person-chat-portraits.js
View File

@@ -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;