feat: add custom backgrounds for Bejeweled and Peggle games

- Add background images for Bejeweled Blitz and Peggle menu screens
- Update asset manifest with new bg-bejeweled and bg-peggle-menu textures
- Bejeweled: use new background with fallback to existing bj-bg
- Peggle: replace title/subtitle text with custom background image
- Adjust Peggle progress text position to top-right corner
This commit is contained in:
Brian Fertig 2026-07-25 20:56:57 -06:00
parent 195e88f2dc
commit 4813c17cce
5 changed files with 10 additions and 10 deletions

Binary file not shown.

After

Width:  |  Height:  |  Size: 1.4 MiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 1.6 MiB

View File

@ -78,6 +78,7 @@ export const MANIFEST = {
],
risk: [image('risk-board', 'assets/images/risk-board.png')],
jewelquest: [image('bg-jewelquest-battle', 'assets/images/background-jewelquest.png')],
bejeweled: [image('bg-bejeweled', 'assets/images/background-bejeweledblitz.png')],
dominion: [
// Dominion card art. One 270×390 cell per card (art fills the top ~60%;
// the title/icon band is drawn at runtime). Optional — the scene falls
@ -158,6 +159,7 @@ export const MANIFEST = {
},
peggle: [
sheet('peggle-sprites', 'assets/images/peggle-sprites.png', 64, 64),
image('bg-peggle-menu', 'assets/images/background-peggle.png'),
// One board background per master, named by opponent id
// (assets/images/peggle/<masterId>.png, 1200×900).
(scene) => {

View File

@ -246,7 +246,8 @@ export default class BejeweledGame extends Phaser.Scene {
// ── Cosmic backdrop ───────────────────────────────────────────────────────
buildBackground() {
this.add.image(0, 0, 'bj-bg').setOrigin(0).setDisplaySize(GAME_WIDTH, GAME_HEIGHT).setDepth(D.bg);
const bgKey = this.textures.exists('bg-bejeweled') ? 'bg-bejeweled' : 'bj-bg';
this.add.image(0, 0, bgKey).setOrigin(0).setDisplaySize(GAME_WIDTH, GAME_HEIGHT).setDepth(D.bg);
const nebulas = [
{ x: 420, y: 280, tint: 0x6633ff, alpha: 0.17, scale: 9 },

View File

@ -275,13 +275,10 @@ export default class PeggleGame extends Phaser.Scene {
this.clearLayer();
const cx = GAME_WIDTH / 2;
const title = this.add.text(cx, 90, 'PEGGLE', {
fontFamily: 'Righteous', fontSize: '72px', color: COLORS.goldHex,
}).setOrigin(0.5);
const sub = this.add.text(cx, 152, 'Clear all 25 orange pegs. A friend joins every level — hit their green pegs to fire their power!', {
fontFamily: '"Julius Sans One"', fontSize: '22px', color: COLORS.mutedHex,
}).setOrigin(0.5);
this.layer.add([title, sub]);
if (this.textures.exists('bg-peggle-menu')) {
this.layer.add(this.add.image(GAME_WIDTH / 2, GAME_HEIGHT / 2, 'bg-peggle-menu')
.setDisplaySize(GAME_WIDTH, GAME_HEIGHT));
}
if (!this.manifest.length) {
const msg = this.add.text(cx, 480, 'No levels found.\nRun: node tools/genPeggleLevels.js', {
@ -293,9 +290,9 @@ export default class PeggleGame extends Phaser.Scene {
}
const nextLevel = Math.min(this.levelsCompleted + 1, this.manifest.length);
const prog = this.add.text(cx, 208, `Completed ${this.levelsCompleted} / ${this.manifest.length}`, {
const prog = this.add.text(GAME_WIDTH - 40, 208, `Completed ${this.levelsCompleted} / ${this.manifest.length}`, {
fontFamily: 'Righteous', fontSize: '26px', color: COLORS.textHex,
}).setOrigin(0.5);
}).setOrigin(1, 0.5);
this.layer.add(prog);
// One row per friend: portrait + name + power on the left, that friend's