From fc0b12e17c4cf846f5303ca94adc5d07aec3fb59 Mon Sep 17 00:00:00 2001 From: Admin Date: Tue, 22 Sep 2026 00:16:11 +0000 Subject: [PATCH] Refine perspective joins and remove room texture seams --- src/main.js | 96 ++++++++++++++++++++++++----------------------------- 1 file changed, 44 insertions(+), 52 deletions(-) diff --git a/src/main.js b/src/main.js index b944495..9a33405 100644 --- a/src/main.js +++ b/src/main.js @@ -372,25 +372,21 @@ class HouseScene extends Phaser.Scene { return shape.createGeometryMask() } - addMaskedTile(room, texture, points, depth, tileScale = 0.7, tint = null) { - const tile = this.add.tileSprite( - room.x + 7, - room.y + 7, - room.width - 14, - room.height - 14, + addMaskedImage(room, texture, points, depth, tint = null) { + const image = this.add.image( + room.x + room.width / 2, + room.y + room.height / 2, texture ) - .setOrigin(0, 0) + .setDisplaySize(room.width - 12, room.height - 12) .setDepth(depth) - - tile.setTileScale(tileScale, tileScale) - tile.setMask(this.createPolygonMask(points)) + .setMask(this.createPolygonMask(points)) if (tint !== null) { - tile.setTint(tint) + image.setTint(tint) } - return tile + return image } drawHouse() { @@ -408,66 +404,62 @@ class HouseScene extends Phaser.Scene { for (const room of ROOMS) { const skin = ROOM_SKINS[room.id] const inset = 7 - const sideInset = Math.round(room.width * 0.18) + const sideInset = Math.round(room.width * 0.20) const wallTop = room.y + 9 - const backTop = wallTop + Math.max(10, Math.round(FLOOR_H * 0.04)) - const horizonY = room.walkBand.minY + const backTop = room.y + Math.max(14, Math.round(FLOOR_H * 0.08)) + const horizonY = room.y + Math.round(FLOOR_H * 0.60) const bottomY = room.y + room.height - 8 const left = room.x + inset const right = room.x + room.width - inset const backLeft = room.x + sideInset const backRight = room.x + room.width - sideInset - // Base backing remains rectangular so room selection and hold feedback - // always have a clean silhouette. graphics.fillStyle(room.color, 1) graphics.fillRoundedRect(room.x, room.y, room.width, room.height, 14) - // Back wall: deliberately narrower than the room to create depth. - const backWall = this.add.tileSprite( - backLeft, - backTop, - backRight - backLeft, - Math.max(30, horizonY - backTop), + // Back wall: a single fitted image avoids TileSprite repeat seams. + this.add.image( + room.x + room.width / 2, + backTop + (horizonY - backTop) / 2, skin.wallpaper ) - .setOrigin(0, 0) + .setDisplaySize( + backRight - backLeft, + Math.max(30, horizonY - backTop) + ) .setDepth(1) - backWall.setTileScale(0.67, 0.67) - - // Angled side walls. They use the same wallpaper with subtle opposite - // tints so the corner reads clearly without needing baked perspective art. - this.addMaskedTile( + // Left and right walls use the same source image, clipped into true + // room-side polygons. Their lower edges meet the floor exactly. + this.addMaskedImage( room, skin.wallpaper, [ { x: left, y: wallTop }, { x: backLeft, y: backTop }, { x: backLeft, y: horizonY }, - { x: left, y: horizonY + Math.round(FLOOR_H * 0.08) } + { x: left, y: bottomY } ], 2, - 0.67, - 0xffeaf3 + 0xffedf5 ) - this.addMaskedTile( + this.addMaskedImage( room, skin.wallpaper, [ { x: backRight, y: backTop }, { x: right, y: wallTop }, - { x: right, y: horizonY + Math.round(FLOOR_H * 0.08) }, + { x: right, y: bottomY }, { x: backRight, y: horizonY } ], 2, - 0.67, - 0xf0f4ff + 0xf2f6ff ) - // Perspective floor: narrow at the back, full-width at the front. - this.addMaskedTile( + // The floor fills the complete perspective trapezoid right to the + // room's front corners, so no base-color wedges can peek through. + this.addMaskedImage( room, skin.floor, [ @@ -476,12 +468,19 @@ class HouseScene extends Phaser.Scene { { x: right, y: bottomY }, { x: left, y: bottomY } ], - 3, - 0.54 + 3 ) - // Ceiling and skirting architecture. The central trims stay straight, - // while perspective guide lines make the side walls/floor read in 3D. + // Subtle depth/shadow where the rear wall meets the floor. + graphics.fillStyle(0x6d4c61, 0.12) + graphics.fillRect( + backLeft, + horizonY - 2, + backRight - backLeft, + 5 + ) + + // Shared architecture strips. this.add.image( room.x + room.width / 2, backTop, @@ -506,19 +505,12 @@ class HouseScene extends Phaser.Scene { .setDisplaySize(room.width - 10, 15) .setDepth(6) + // Perspective edges/corners. graphics.lineStyle(3, 0xd2aabf, 0.95) - - // Rear vertical corners. graphics.lineBetween(backLeft, backTop, backLeft, horizonY) graphics.lineBetween(backRight, backTop, backRight, horizonY) - - // Ceiling perspective lines. graphics.lineBetween(left, wallTop, backLeft, backTop) graphics.lineBetween(right, wallTop, backRight, backTop) - - // Floor/skirting perspective lines. - graphics.lineBetween(left, horizonY + Math.round(FLOOR_H * 0.08), backLeft, horizonY) - graphics.lineBetween(right, horizonY + Math.round(FLOOR_H * 0.08), backRight, horizonY) graphics.lineBetween(left, bottomY, backLeft, horizonY) graphics.lineBetween(right, bottomY, backRight, horizonY) @@ -530,7 +522,7 @@ class HouseScene extends Phaser.Scene { fontSize: '16px', color: '#765466', fontStyle: 'bold', - backgroundColor: 'rgba(255,255,255,0.78)', + backgroundColor: 'rgba(255,255,255,0.80)', padding: { x: 6, y: 3 } }).setDepth(9) @@ -1191,7 +1183,7 @@ const game = new Phaser.Game({ }) window.__DOLLHOUSE__ = { - version: '0.6.0', + version: '0.6.1', game, async resetAll() { await clearGameState()