Use architecture wallpaper and floor asset packs in rooms
This commit is contained in:
parent
dbdf6fd18e
commit
0512a51c8b
160
src/main.js
160
src/main.js
@ -106,6 +106,47 @@ const PLAYER_WALK_CROPS = [
|
||||
{ x: 899, y: 324, w: 176, h: 294 }
|
||||
]
|
||||
|
||||
const WALLPAPER_CROPS = {
|
||||
disco: { x: 32, y: 154, w: 236, h: 244 },
|
||||
topBedroom: { x: 299, y: 154, w: 241, h: 244 },
|
||||
bedroom: { x: 566, y: 154, w: 241, h: 244 },
|
||||
study: { x: 833, y: 154, w: 241, h: 244 },
|
||||
living: { x: 32, y: 522, w: 236, h: 255 },
|
||||
playroom: { x: 299, y: 522, w: 241, h: 255 },
|
||||
kitchen: { x: 566, y: 522, w: 241, h: 255 },
|
||||
bathroom: { x: 833, y: 522, w: 241, h: 255 },
|
||||
garage: { x: 81, y: 909, w: 294, h: 281 },
|
||||
utility: { x: 411, y: 909, w: 294, h: 281 }
|
||||
}
|
||||
|
||||
const FLOOR_CROPS = {
|
||||
lightWood: { x: 69, y: 126, w: 389, h: 350 },
|
||||
warmWood: { x: 520, y: 126, w: 390, h: 350 },
|
||||
blueTile: { x: 972, y: 126, w: 389, h: 350 },
|
||||
neutralTile: { x: 69, y: 574, w: 389, h: 350 },
|
||||
concrete: { x: 520, y: 574, w: 390, h: 350 },
|
||||
disco: { x: 972, y: 574, w: 389, h: 350 }
|
||||
}
|
||||
|
||||
const ARCHITECTURE_CROPS = {
|
||||
ceilingTrim: { x: 229, y: 52, w: 990, h: 78 },
|
||||
skirting: { x: 239, y: 190, w: 972, h: 63 },
|
||||
floorEdge: { x: 210, y: 306, w: 1007, h: 87 }
|
||||
}
|
||||
|
||||
const ROOM_SKINS = {
|
||||
disco: { wallpaper: 'wallpaper-disco', floor: 'floor-disco' },
|
||||
'top-bedroom': { wallpaper: 'wallpaper-topBedroom', floor: 'floor-lightWood' },
|
||||
bedroom: { wallpaper: 'wallpaper-bedroom', floor: 'floor-lightWood' },
|
||||
study: { wallpaper: 'wallpaper-study', floor: 'floor-warmWood' },
|
||||
living: { wallpaper: 'wallpaper-living', floor: 'floor-warmWood' },
|
||||
playroom: { wallpaper: 'wallpaper-playroom', floor: 'floor-lightWood' },
|
||||
kitchen: { wallpaper: 'wallpaper-kitchen', floor: 'floor-neutralTile' },
|
||||
bathroom: { wallpaper: 'wallpaper-bathroom', floor: 'floor-blueTile' },
|
||||
garage: { wallpaper: 'wallpaper-garage', floor: 'floor-concrete' },
|
||||
utility: { wallpaper: 'wallpaper-utility', floor: 'floor-neutralTile' }
|
||||
}
|
||||
|
||||
function floorY(floor) {
|
||||
return HOUSE_TOP + floor * (FLOOR_H + FLOOR_GAP)
|
||||
}
|
||||
@ -267,6 +308,9 @@ class HouseScene extends Phaser.Scene {
|
||||
|
||||
preload() {
|
||||
this.load.image('character-sheet', '/assets/character-sheet.png')
|
||||
this.load.image('architecture-sheet', '/assets/architecture-sheet.png')
|
||||
this.load.image('wallpaper-sheet', '/assets/wallpaper-sheet.png')
|
||||
this.load.image('floor-sheet', '/assets/floor-sheet.png')
|
||||
this.load.image(
|
||||
'elevator-shaft',
|
||||
'data:image/svg+xml;charset=utf-8,' + encodeURIComponent(buildElevatorSvg())
|
||||
@ -282,6 +326,18 @@ class HouseScene extends Phaser.Scene {
|
||||
cropTexture(this, 'character-sheet', 'player-walk-' + index, rect)
|
||||
})
|
||||
|
||||
Object.entries(WALLPAPER_CROPS).forEach(([key, rect]) => {
|
||||
cropTexture(this, 'wallpaper-sheet', 'wallpaper-' + key, rect)
|
||||
})
|
||||
|
||||
Object.entries(FLOOR_CROPS).forEach(([key, rect]) => {
|
||||
cropTexture(this, 'floor-sheet', 'floor-' + key, rect)
|
||||
})
|
||||
|
||||
Object.entries(ARCHITECTURE_CROPS).forEach(([key, rect]) => {
|
||||
cropTexture(this, 'architecture-sheet', 'architecture-' + key, rect)
|
||||
})
|
||||
|
||||
const saved = await loadGameState()
|
||||
this.state = saved?.version === 3 && ROOM_BY_ID.has(saved.player?.roomId)
|
||||
? saved
|
||||
@ -304,50 +360,114 @@ class HouseScene extends Phaser.Scene {
|
||||
const graphics = this.add.graphics().setDepth(0)
|
||||
|
||||
graphics.fillStyle(0xfffbfd, 1)
|
||||
graphics.fillRoundedRect(28, HOUSE_TOP - 18, 904, FLOOR_COUNT * FLOOR_H + (FLOOR_COUNT - 1) * FLOOR_GAP + 36, 24)
|
||||
graphics.fillRoundedRect(
|
||||
28,
|
||||
HOUSE_TOP - 18,
|
||||
904,
|
||||
FLOOR_COUNT * FLOOR_H + (FLOOR_COUNT - 1) * FLOOR_GAP + 36,
|
||||
24
|
||||
)
|
||||
|
||||
for (const room of ROOMS) {
|
||||
const skin = ROOM_SKINS[room.id]
|
||||
const inset = 7
|
||||
const wallTop = room.y + 8
|
||||
const wallBottom = room.walkBand.minY
|
||||
const wallHeight = Math.max(36, wallBottom - wallTop)
|
||||
const floorTop = wallBottom - 1
|
||||
const floorHeight = room.y + room.height - floorTop - 7
|
||||
|
||||
// Base room backing gives clean rounded corners behind all textures.
|
||||
graphics.fillStyle(room.color, 1)
|
||||
graphics.fillRoundedRect(room.x, room.y, room.width, room.height, 14)
|
||||
|
||||
// Wallpaper layer.
|
||||
const wallpaper = this.add.tileSprite(
|
||||
room.x + inset,
|
||||
wallTop,
|
||||
room.width - inset * 2,
|
||||
wallHeight,
|
||||
skin.wallpaper
|
||||
)
|
||||
.setOrigin(0, 0)
|
||||
.setDepth(1)
|
||||
|
||||
wallpaper.setTileScale(0.72, 0.72)
|
||||
|
||||
// Separate floor layer so the character always stands on a readable surface.
|
||||
const floor = this.add.tileSprite(
|
||||
room.x + inset,
|
||||
floorTop,
|
||||
room.width - inset * 2,
|
||||
floorHeight,
|
||||
skin.floor
|
||||
)
|
||||
.setOrigin(0, 0)
|
||||
.setDepth(2)
|
||||
|
||||
floor.setTileScale(0.62, 0.62)
|
||||
|
||||
// Shared architecture layer sits above both wallpaper and floor.
|
||||
this.add.image(
|
||||
room.x + room.width / 2,
|
||||
room.y + 10,
|
||||
'architecture-ceilingTrim'
|
||||
)
|
||||
.setDisplaySize(room.width - 12, 18)
|
||||
.setDepth(5)
|
||||
|
||||
this.add.image(
|
||||
room.x + room.width / 2,
|
||||
floorTop,
|
||||
'architecture-skirting'
|
||||
)
|
||||
.setDisplaySize(room.width - 12, 14)
|
||||
.setDepth(5)
|
||||
|
||||
this.add.image(
|
||||
room.x + room.width / 2,
|
||||
room.y + room.height - 7,
|
||||
'architecture-floorEdge'
|
||||
)
|
||||
.setDisplaySize(room.width - 10, 16)
|
||||
.setDepth(5)
|
||||
|
||||
graphics.lineStyle(4, 0xd5b8c6, 1)
|
||||
graphics.strokeRoundedRect(room.x, room.y, room.width, room.height, 14)
|
||||
|
||||
graphics.fillStyle(0xe6caa9, 1)
|
||||
graphics.fillRoundedRect(
|
||||
room.x + 6,
|
||||
room.walkBand.minY,
|
||||
room.width - 12,
|
||||
room.walkBand.maxY - room.walkBand.minY,
|
||||
6
|
||||
)
|
||||
|
||||
this.add.text(room.x + 14, room.y + 10, room.name, {
|
||||
this.add.text(room.x + 14, room.y + 16, room.name, {
|
||||
fontFamily: 'Arial Rounded MT Bold, ui-rounded, sans-serif',
|
||||
fontSize: '16px',
|
||||
color: '#765466',
|
||||
fontStyle: 'bold'
|
||||
}).setDepth(4)
|
||||
fontStyle: 'bold',
|
||||
backgroundColor: 'rgba(255,255,255,0.72)',
|
||||
padding: { x: 6, y: 3 }
|
||||
}).setDepth(8)
|
||||
|
||||
if (room.id === 'disco') {
|
||||
this.add.text(room.x + room.width - 48, room.y + 12, '♪ ✦', {
|
||||
this.add.text(room.x + room.width - 48, room.y + 18, '♪ ✦', {
|
||||
fontSize: '18px',
|
||||
color: '#9b65c6'
|
||||
}).setDepth(4)
|
||||
}).setDepth(8)
|
||||
}
|
||||
|
||||
if (room.id === 'garage') {
|
||||
this.add.text(room.x + room.width - 44, room.y + 11, '🚗', {
|
||||
this.add.text(room.x + room.width - 44, room.y + 18, '🚗', {
|
||||
fontSize: '18px'
|
||||
}).setDepth(4)
|
||||
}).setDepth(8)
|
||||
}
|
||||
}
|
||||
|
||||
this.add.text(WIDTH / 2, 48, 'Drag her to walk • press & hold a room to ride the lift', {
|
||||
this.add.text(
|
||||
WIDTH / 2,
|
||||
48,
|
||||
'Drag her to walk • press & hold a room to ride the lift',
|
||||
{
|
||||
fontFamily: 'Arial Rounded MT Bold, ui-rounded, sans-serif',
|
||||
fontSize: '15px',
|
||||
color: '#6d4c61'
|
||||
}).setOrigin(0.5).setDepth(100)
|
||||
}
|
||||
).setOrigin(0.5).setDepth(100)
|
||||
}
|
||||
|
||||
buildElevator() {
|
||||
@ -981,7 +1101,7 @@ const game = new Phaser.Game({
|
||||
})
|
||||
|
||||
window.__DOLLHOUSE__ = {
|
||||
version: '0.4.3',
|
||||
version: '0.5.0',
|
||||
game,
|
||||
async resetAll() {
|
||||
await clearGameState()
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user