peterstockings/rogue
2
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Add temporary character outline in equipment overlay

Browse Source
This commit is contained in:
Peter Stockings
2026-01-07 23:54:27 +11:00
parent a55661ccdf
commit f344213f55
3 changed files with 11 additions and 30 deletions
Download Patch File Download Diff File Expand all files Collapse all files

BIN
public/assets/ui/character_outline.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 414 KiB

3
src/core/config/GameConfig.ts
View File

@@ -142,7 +142,8 @@ export const GAME_CONFIG = {
{ key: "items", path: "assets/sprites/items/items.png", frameConfig: { frameWidth: 16, frameHeight: 16 } },
],
images: [
{ key: "splash_bg", path: "assets/ui/splash_bg.png" }
{ key: "splash_bg", path: "assets/ui/splash_bg.png" },
{ key: "character_outline", path: "assets/ui/character_outline.png" }
]
},

38
src/ui/components/InventoryOverlay.ts
View File

@@ -89,41 +89,21 @@ export class InventoryOverlay extends OverlayComponent {
bg.strokeRect(panelX - panelW / 2, panelY - panelH / 2, panelW, panelH);
this.container.add(bg);
// Draw connecting lines for paper doll
this.drawPaperDollLines(panelX, panelY);
// Draw character silhouette behind slots
this.drawCharacterSilhouette(panelX, panelY);
// Create equipment slots
this.createEquipmentSlots(panelX, panelY);
}
private drawPaperDollLines(centerX: number, centerY: number) {
const g = this.scene.add.graphics();
g.lineStyle(2, 0x5a4a3a, 1);
private drawCharacterSilhouette(centerX: number, centerY: number) {
// Load and display the character outline image
const outline = this.scene.add.image(centerX, centerY, "character_outline");
outline.setOrigin(0.5, 0.5);
outline.setAlpha(0.35); // Subtle transparency
outline.setScale(0.35); // Scale to fit nicely behind slots
// Body center point
const bodyX = centerX;
const bodyY = centerY - 10;
// Connect helmet to body
g.lineBetween(bodyX, bodyY - 60, bodyX, bodyY - 35);
// Connect body to belt
g.lineBetween(bodyX, bodyY + 35, bodyX, bodyY + 65);
// Connect body to main hand (left side)
g.lineBetween(bodyX - 35, bodyY - 5, bodyX - 70, bodyY - 5);
// Connect body to off hand (right side)
g.lineBetween(bodyX + 35, bodyY - 5, bodyX + 70, bodyY - 5);
// Connect body to rings
g.lineBetween(bodyX - 20, bodyY + 10, bodyX - 35, bodyY + 25);
g.lineBetween(bodyX + 20, bodyY + 10, bodyX + 35, bodyY + 25);
// Connect belt to boots
g.lineBetween(bodyX, bodyY + 78, bodyX, bodyY + 110);
this.container.add(g);
this.container.add(outline);
}
private createEquipmentSlots(centerX: number, centerY: number) {