brianfertig
/
overrun
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Add animated logo to IntroScene with fullscreen activation on start

This commit is contained in:
Brian Fertig 2026-03-08 15:39:13 -06:00
parent b7691350e8
commit 04ecdcccc3
2 changed files with 27 additions and 13 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

BIN
assets/images/logo.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 671 KiB

40
js/scenes/IntroScene.js
View File

@ -6,6 +6,7 @@ export class IntroScene extends Phaser.Scene {
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() {
@ -20,20 +21,28 @@ export class IntroScene extends Phaser.Scene {
// Dark overlay so text stays readable
this.add.rectangle(W / 2, H / 2, W, H, 0x000000, 0.45).setDepth(1);
this.add.text(W / 2, H / 2 - 100, 'OVERRUN', {
fontFamily: 'FutureImperfect',
fontSize: '72px',
fill: '#00ccff',
stroke: '#003366',
strokeThickness: 6,
}).setOrigin(0.5).setDepth(2);
const logo = this.add.image(W / 2 + 200, H / 5 + 25, 'logo').setOrigin(0.5).setScale(0.6).setAlpha(0).setDepth(2);
this.add.text(W / 2, H / 2, 'Survive the waves. Choose your power.', {
fontSize: '20px',
fill: '#aaaaaa',
}).setOrigin(0.5).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, H / 2 + 80, 'Press ENTER or click to start', {
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);
@ -48,7 +57,7 @@ export class IntroScene extends Phaser.Scene {
});
// Controls hint
this.add.text(W / 2, H - 60, 'WASD — Move Mouse — Aim Left Click — Fire', {
this.add.text(W / 2 + 190, H - 60, 'WASD — Move Mouse — Aim Left Click — Fire', {
fontSize: '14px',
fill: '#666666',
}).setOrigin(0.5).setDepth(2);
@ -56,11 +65,16 @@ export class IntroScene extends Phaser.Scene {
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');
}