feat: redesign main menu with background image and animated logos
- Add `main-menu.png` background image that scales to fit the screen - Replace static text titles with animated `logo-title` and `logo-people` images - Add sine-wave tweens for logo scale and rotation effects - Comment out the previous text-based game list (preserved for reference)
This commit is contained in:
parent
50692988e5
commit
d1627d6e74
Binary file not shown.
|
After Width: | Height: | Size: 2.2 MiB |
|
|
@ -10,6 +10,7 @@ export default class MainMenu extends Phaser.Scene {
|
|||
this.load.audio('mainTheme', 'assets/music/00-main-theme.mp3');
|
||||
this.load.image('logo-title', 'assets/images/logo-title.png');
|
||||
this.load.image('logo-people', 'assets/images/logo-people.png');
|
||||
this.load.image('main-menu', 'assets/images/main-menu.png');
|
||||
}
|
||||
|
||||
shutdown() {
|
||||
|
|
@ -21,35 +22,65 @@ export default class MainMenu extends Phaser.Scene {
|
|||
|
||||
const cx = 800, cy = 450;
|
||||
|
||||
// Title
|
||||
this.add.text(cx, 280, 'ATTENTION RETRO DISORDER', {
|
||||
fontSize: '64px',
|
||||
fontFamily: 'monospace',
|
||||
color: '#00ff00',
|
||||
stroke: '#005500',
|
||||
strokeThickness: 4,
|
||||
}).setOrigin(0.5);
|
||||
// Add background image
|
||||
const bg = this.add.image(cx, cy, 'main-menu').setOrigin(0.5);
|
||||
const scaleX = this.cameras.main.width / bg.width;
|
||||
const scaleY = this.cameras.main.height / bg.height;
|
||||
bg.setScale(Math.max(scaleX, scaleY));
|
||||
|
||||
this.add.text(cx, 370, 'A MULTI-GAME RETRO EXPERIENCE', {
|
||||
fontSize: '28px',
|
||||
fontFamily: 'monospace',
|
||||
color: '#00aa00',
|
||||
}).setOrigin(0.5);
|
||||
// Images
|
||||
const logoPeople = this.add.image(cx, 350, 'logo-people').setOrigin(0.5).setScale(.70).setAngle(-15);
|
||||
const logoTitle = this.add.image(cx, 350, 'logo-title').setOrigin(0.5).setScale(.75).setAngle(5);
|
||||
|
||||
// Game list
|
||||
const games = [
|
||||
'★ COLORADO DEFENSE (Missile Command)',
|
||||
'★ CODE BUG INVADERS (Space Invaders)',
|
||||
'★ DOT DUDE (Pac-Man)',
|
||||
'★ SMASH OUT (Arkanoid)',
|
||||
];
|
||||
games.forEach((txt, i) => {
|
||||
this.add.text(cx, 470 + i * 38, txt, {
|
||||
fontSize: '22px',
|
||||
fontFamily: 'monospace',
|
||||
color: '#ffff00',
|
||||
}).setOrigin(0.5);
|
||||
this.tweens.add({
|
||||
targets: logoPeople,
|
||||
scaleX: 0.80,
|
||||
scaleY: 0.80,
|
||||
duration: 3000,
|
||||
yoyo: true,
|
||||
repeat: -1,
|
||||
ease: 'Sine.easeInOut',
|
||||
});
|
||||
this.tweens.add({
|
||||
targets: logoPeople,
|
||||
angle: 15,
|
||||
duration: 2000,
|
||||
yoyo: true,
|
||||
repeat: -1,
|
||||
ease: 'Sine.easeInOut',
|
||||
});
|
||||
this.tweens.add({
|
||||
targets: logoTitle,
|
||||
angle: -5,
|
||||
duration: 5000,
|
||||
yoyo: true,
|
||||
repeat: -1,
|
||||
ease: 'Sine.easeInOut',
|
||||
});
|
||||
this.tweens.add({
|
||||
targets: logoTitle,
|
||||
scaleX: 0.90,
|
||||
scaleY: 0.90,
|
||||
duration: 8000,
|
||||
yoyo: true,
|
||||
repeat: -1,
|
||||
ease: 'Sine.easeInOut',
|
||||
});
|
||||
|
||||
// // Game list
|
||||
// const games = [
|
||||
// '★ COLORADO DEFENSE (Missile Command)',
|
||||
// '★ CODE BUG INVADERS (Space Invaders)',
|
||||
// '★ DOT DUDE (Pac-Man)',
|
||||
// '★ SMASH OUT (Arkanoid)',
|
||||
// ];
|
||||
// games.forEach((txt, i) => {
|
||||
// this.add.text(cx, 470 + i * 38, txt, {
|
||||
// fontSize: '22px',
|
||||
// fontFamily: 'monospace',
|
||||
// color: '#ffff00',
|
||||
// }).setOrigin(0.5);
|
||||
// });
|
||||
|
||||
// Blink "Press SPACE"
|
||||
const prompt = this.add.text(cx, 730, 'PRESS SPACE OR CLICK TO START', {
|
||||
|
|
|
|||
Loading…
Reference in New Issue