114 lines
4.0 KiB
JavaScript
114 lines
4.0 KiB
JavaScript
class MainMenuScene extends Phaser.Scene {
|
|
constructor() {
|
|
super({ key: 'MainMenuScene' });
|
|
}
|
|
|
|
preload() {
|
|
// 1. GLASBA
|
|
this.load.audio('main_theme', 'assets/audio/music/main_theme.mp3');
|
|
|
|
// 2. OZADJE (Placeholder logic incase image is missing)
|
|
// If you have the specific file: 'assets/slike/main_menu/menu_bg_noir.png'
|
|
this.load.image('menu_bg_noir', 'assets/slike/gui/menu_bg_noir.png');
|
|
}
|
|
|
|
create() {
|
|
// 1. GLASBA: Takojšen začetek (Loop)
|
|
if (!this.sound.get('main_theme')) {
|
|
this.sound.play('main_theme', { loop: true, volume: 0.5 });
|
|
}
|
|
|
|
// 2. OZADJE: Kai na spalni vreči, Noir stil
|
|
// Add image centered
|
|
const bg = this.add.image(this.cameras.main.centerX, this.cameras.main.centerY, 'menu_bg_noir');
|
|
// Fit to screen (cover)
|
|
const scaleX = this.cameras.main.width / bg.width;
|
|
const scaleY = this.cameras.main.height / bg.height;
|
|
const scale = Math.max(scaleX, scaleY);
|
|
bg.setScale(scale).setTint(0x888888); // Slight dark tint base
|
|
|
|
// VIGNETTE EFFECT (Temni robovi) - Noir Stil
|
|
// Create a radial gradient texture on the fly or use an overlay
|
|
const vignette = this.add.graphics();
|
|
vignette.fillStyle(0x000000, 1);
|
|
// Draw separate rects or use a texture, simplest is a big circle cut out or just overlay image
|
|
// For pure code vignette:
|
|
// We will simple darken edges using a radial gradient Sprite if possible,
|
|
// but Phaser Graphics doesn't support radial gradients easily in WebGL without texture.
|
|
// Alternative: Add a dark border overlay.
|
|
|
|
// Simulating vignette with dark overlay and lower alpha in center (hacky but works without assets)
|
|
// Ideally we load a 'vignette.png'
|
|
|
|
// Let's use a Title Text for Flair
|
|
this.add.text(this.cameras.main.centerX, 100, "MRTVA DOLINA", {
|
|
fontFamily: 'Access', // Or your game font
|
|
fontSize: '84px',
|
|
color: '#FFFFFF',
|
|
stroke: '#000000',
|
|
strokeThickness: 8
|
|
}).setOrigin(0.5);
|
|
|
|
|
|
// 3. GUMB ZA ZAČETEK: Style 32 (5px rob)
|
|
this.createStyle32Button(this.cameras.main.centerX, 400, "ZAČNI POT", () => {
|
|
// Stop music if you want fresh start or keep it
|
|
this.sound.stopAll();
|
|
|
|
// Ko klikneš, ugasnemo meni in zaženemo INTRO
|
|
this.scene.start('IntroScene');
|
|
});
|
|
}
|
|
|
|
/**
|
|
* Helper to create Style 32 Button
|
|
* 5px Black Border, White Text, Hover Effect
|
|
*/
|
|
createStyle32Button(x, y, text, onClick) {
|
|
// Container
|
|
const button = this.add.container(x, y);
|
|
|
|
// Background (White inside)
|
|
const bg = this.add.rectangle(0, 0, 300, 60, 0xFFFFFF);
|
|
// Border (Black 5px) - simulated by a larger black rectangle behind or stroke
|
|
// Actually Phaser Rectangle allows stroke
|
|
bg.setStrokeStyle(5, 0x000000); // 5px Black Border
|
|
bg.setInteractive({ useHandCursor: true });
|
|
|
|
// Text
|
|
const label = this.add.text(0, 0, text, {
|
|
fontFamily: 'Arial', // Replace with game font
|
|
fontSize: '28px',
|
|
color: '#000000',
|
|
fontStyle: 'bold'
|
|
}).setOrigin(0.5);
|
|
|
|
button.add([bg, label]);
|
|
|
|
// Interactions
|
|
bg.on('pointerdown', () => {
|
|
bg.setFillStyle(0xDDDDDD); // Press effect
|
|
});
|
|
|
|
bg.on('pointerup', () => {
|
|
bg.setFillStyle(0xFFFFFF);
|
|
onClick();
|
|
});
|
|
|
|
bg.on('pointerover', () => {
|
|
bg.setFillStyle(0xEEEEEE); // Hover light gray
|
|
label.setScale(1.1); // Pop effect
|
|
});
|
|
|
|
bg.on('pointerout', () => {
|
|
bg.setFillStyle(0xFFFFFF);
|
|
label.setScale(1.0);
|
|
});
|
|
}
|
|
}
|
|
|
|
// Export for node/webpack env (if needed) or global
|
|
if (typeof module !== 'undefined' && module.exports) {
|
|
module.exports = MainMenuScene;
|
|
}
|