novafarma/docs/guides/MP4_VIDEO_GUIDE.md

🎬 MP4 VIDEO V PHASER.JS - GUIDE

Datum: 12. December 2025

---

🎯 DA, MP4 VIDEO LAHKO UPORABIŠ!

Phaser.js podpira video playback. Lahko uporabiš MP4 za:

• Background animacije
• Cutscene
• Intro/Outro
• UI animacije
• Trailer playback

---

📋 METODA 1: VIDEO SPRITE

1. Preload Video:

// V PreloadScene.js ali GameScene.js preload():
this.load.video('intro_video', 'assets/videos/intro.mp4');
this.load.video('background_anim', 'assets/videos/background.mp4');

2. Create Video Sprite:

// V create():
const video = this.add.video(400, 300, 'intro_video');
video.setOrigin(0.5);
video.setDepth(0); // Background
video.play(true); // true = loop

3. Control Video:

// Play
video.play();

// Pause
video.pause();

// Stop
video.stop();

// Loop
video.setLoop(true);

// Volume
video.setVolume(0.5);

// Mute
video.setMute(true);

// Events
video.on('complete', () => {
    console.log('Video finished!');
});

---

📋 METODA 2: FULLSCREEN VIDEO (CUTSCENE)

class CutsceneScene extends Phaser.Scene {
    constructor() {
        super({ key: 'CutsceneScene' });
    }
    
    preload() {
        this.load.video('cutscene', 'assets/videos/intro.mp4');
    }
    
    create() {
        const width = this.cameras.main.width;
        const height = this.cameras.main.height;
        
        // Fullscreen video
        const video = this.add.video(width / 2, height / 2, 'cutscene');
        video.setOrigin(0.5);
        video.setDisplaySize(width, height);
        
        // Play
        video.play();
        
        // Skip on click
        this.input.on('pointerdown', () => {
            video.stop();
            this.scene.start('GameScene');
        });
        
        // Auto-continue when done
        video.on('complete', () => {
            this.scene.start('GameScene');
        });
    }
}

---

📋 METODA 3: BACKGROUND VIDEO LOOP

// Animated background (looping video)
createVideoBackground() {
    const video = this.add.video(0, 0, 'background_anim');
    video.setOrigin(0, 0);
    video.setDisplaySize(this.cameras.main.width, this.cameras.main.height);
    video.setDepth(-1000); // Behind everything
    video.setAlpha(0.3); // Semi-transparent
    video.setLoop(true);
    video.play();
    
    // Parallax effect
    video.setScrollFactor(0.5);
}

---

📋 METODA 4: UI VIDEO ELEMENT

// Small video in UI (e.g., tutorial)
createTutorialVideo() {
    const video = this.add.video(100, 100, 'tutorial_video');
    video.setOrigin(0);
    video.setDisplaySize(200, 150);
    video.setScrollFactor(0); // Fixed to camera
    video.setDepth(1000); // Above UI
    video.play();
}

---

📋 METODA 5: VIDEO TEXTURE (ADVANCED)

// Use video as texture for sprite
preload() {
    this.load.video('anim', 'assets/videos/animation.mp4');
}

create() {
    const video = this.add.video(0, 0, 'anim');
    video.play();
    
    // Use video as texture
    const sprite = this.add.sprite(400, 300, video);
    sprite.setScale(2);
}

---

🎬 PRIMER: INTRO CUTSCENE

// IntroScene.js
class IntroScene extends Phaser.Scene {
    constructor() {
        super({ key: 'IntroScene' });
    }
    
    preload() {
        // Load intro video
        this.load.video('intro', 'assets/videos/intro.mp4');
        
        // Loading text
        this.add.text(400, 300, 'Loading...', {
            fontSize: '32px',
            color: '#ffffff'
        }).setOrigin(0.5);
    }
    
    create() {
        // Fullscreen video
        const video = this.add.video(
            this.cameras.main.centerX,
            this.cameras.main.centerY,
            'intro'
        );
        
        video.setOrigin(0.5);
        video.setDisplaySize(
            this.cameras.main.width,
            this.cameras.main.height
        );
        
        // Play
        video.play();
        
        // Skip text
        const skipText = this.add.text(
            this.cameras.main.width - 20,
            this.cameras.main.height - 20,
            'Click to skip',
            {
                fontSize: '16px',
                color: '#ffffff'
            }
        );
        skipText.setOrigin(1, 1);
        
        // Skip on click
        this.input.on('pointerdown', () => {
            video.stop();
            this.scene.start('GameScene');
        });
        
        // Auto-continue
        video.on('complete', () => {
            this.scene.start('GameScene');
        });
    }
}

// V game.js config:
scene: [IntroScene, PreloadScene, GameScene, UIScene]

---

📁 FILE STRUCTURE:

novafarma/
├── assets/
│   └── videos/
│       ├── intro.mp4
│       ├── cutscene_boss.mp4
│       ├── background_loop.mp4
│       └── tutorial.mp4
├── src/
│   └── scenes/
│       └── IntroScene.js
└── index.html

---

⚠️ POMEMBNO:

1. File Size:

• MP4 lahko postane velik (10-50 MB)
• Kompresija: Use H.264 codec
• Resolution: 720p ali 1080p

2. Performance:

• Video playback je resource-intensive
• Ne uporabljaj preveč video hkrati
• Mobile devices: Lower resolution

3. Browser Support:

• Chrome: ✅ Odlično
• Firefox: ✅ Odlično
• Safari: ✅ Potrebuje H.264
• Edge: ✅ Odlično

4. Electron:

• ✅ Deluje brez problema
• Chromium engine podpira MP4

---

🎯 UPORABA V NOVAFARMA:

Možnosti:

1. Intro Cutscene - Farm arrival
2. Boss Intro - Dramatic entrance
3. Background Animation - Animated sky/clouds
4. Tutorial Videos - How to play
5. Trailer Playback - In-game trailer

---

📝 QUICK START:

// 1. Dodaj video file:
// assets/videos/intro.mp4

// 2. Preload:
this.load.video('intro', 'assets/videos/intro.mp4');

// 3. Play:
const video = this.add.video(400, 300, 'intro');
video.play();

// 4. Done!

---

Status: ✅ MP4 VIDEO JE PODPRT!

Phaser.js ima built-in video support! 🎬

Želite, da dodam video support v NovaFarma? 🎮