82 lines
2.3 KiB
JavaScript
82 lines
2.3 KiB
JavaScript
export class IntroScene extends Phaser.Scene {
|
|
constructor() {
|
|
super({ key: 'IntroScene' });
|
|
}
|
|
|
|
preload() {
|
|
this.load.video('menu-bg', './assets/video/menu.mp4');
|
|
this.load.audio('music-menu', './assets/music/menuBackground.mp3');
|
|
this.load.image('logo', './assets/images/logo.png');
|
|
}
|
|
|
|
create() {
|
|
const W = this.scale.width;
|
|
const H = this.scale.height;
|
|
|
|
// Background video sized exactly to the canvas, looping
|
|
const video = this.add.video(W / 2, H / 2, 'menu-bg').setDepth(0);
|
|
//video.setDisplaySize(W, H);
|
|
video.play(true); // true = loop
|
|
|
|
// Dark overlay so text stays readable
|
|
this.add.rectangle(W / 2, H / 2, W, H, 0x000000, 0.45).setDepth(1);
|
|
|
|
const logo = this.add.image(W / 2 + 200, H / 5 + 25, 'logo').setOrigin(0.5).setScale(0.6).setAlpha(0).setDepth(2);
|
|
|
|
// Fade in, then yoyo scale between 0.6 and 0.7
|
|
this.tweens.add({
|
|
targets: logo,
|
|
alpha: 1,
|
|
duration: 1200,
|
|
ease: 'Sine.easeIn',
|
|
onComplete: () => {
|
|
this.tweens.add({
|
|
targets: logo,
|
|
scaleX: 0.65,
|
|
scaleY: 0.65,
|
|
duration: 1800,
|
|
yoyo: true,
|
|
repeat: -1,
|
|
ease: 'Sine.easeInOut',
|
|
});
|
|
},
|
|
});
|
|
|
|
const prompt = this.add.text(W / 2 + 190, H / 2 + 80, 'Press ENTER or click to start', {
|
|
fontSize: '22px',
|
|
fill: '#ffffff',
|
|
}).setOrigin(0.5).setDepth(2);
|
|
|
|
// Blink the prompt
|
|
this.tweens.add({
|
|
targets: prompt,
|
|
alpha: 0,
|
|
duration: 600,
|
|
yoyo: true,
|
|
repeat: -1,
|
|
});
|
|
|
|
// Controls hint
|
|
this.add.text(W / 2 + 190, H - 60, 'WASD — Move Mouse — Aim Left Click — Fire', {
|
|
fontSize: '14px',
|
|
fill: '#666666',
|
|
}).setOrigin(0.5).setDepth(2);
|
|
|
|
this._menuMusic = this.sound.add('music-menu', { loop: true, volume: 1.0 });
|
|
this._menuMusic.play();
|
|
|
|
// Attempt fullscreen immediately; browsers that require a user gesture will
|
|
// ignore this and the _start() fallback will catch it instead.
|
|
if (!this.scale.isFullscreen) this.scale.startFullscreen();
|
|
|
|
this.input.keyboard.once('keydown-ENTER', () => this._start());
|
|
this.input.once('pointerdown', () => this._start());
|
|
}
|
|
|
|
_start() {
|
|
if (!this.scale.isFullscreen) this.scale.startFullscreen();
|
|
this._menuMusic.stop();
|
|
this.scene.start('GameScene');
|
|
}
|
|
}
|