posodobitve

MP4_VIDEO_GUIDE.md

@@ -0,0 +1,303 @@
+# 🎬 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? 🎮