Admin/dollhouse-pwa
1
0
Fork 0
Code Issues Pull Requests 1 Actions Packages Projects Releases Wiki Activity

Refine perspective joins and remove room texture seams

Browse Source
This commit is contained in:
Admin 2026-09-22 00:16:11 +00:00
parent 809db4836f
commit fc0b12e17c
1 changed files with 44 additions and 52 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

96
src/main.js
View File

@ -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()