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:**
```javascript
// 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:**
```javascript
// 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:**
```javascript
// 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)**

```javascript
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**

```javascript
// 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**

```javascript
// 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)**

```javascript
// 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**

```javascript
// 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:**

```javascript
// 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? 🎮