Funciona el Video con ancho y alto máximo y mínimo. Me falta el aspec…

…tRatio
Viterbo · Apr 4, 2016 · 56fb62a · 56fb62a
1 parent d8c0f0c
commit 56fb62a
Show file tree

Hide file tree

Showing 5 changed files with 83 additions and 25 deletions.
diff --git a/DOM_plugin_example/hanging_video.js b/DOM_plugin_example/hanging_video.js
@@ -50,7 +50,7 @@ function create() {
         spriteA.body.static = true;
 
         // Dynamic box
-        var spriteB = new DOM_Wrapper(part_1 + "I53HDr0-Qew" + part_2, game, 500, 350, 200, 150, 0.5, 0.5);        
+        var spriteB = new DOM_Wrapper(game, part_1 + "I53HDr0-Qew" + part_2, 500, 350, 200, 150, 0.5, 0.5);        
         game.physics.box2d.enable(spriteB);
 
         //bodyA, bodyB, length, ax, ay, bx, by, frequency, damping

diff --git a/DOM_plugin_example/rotating_video.js b/DOM_plugin_example/rotating_video.js
@@ -30,7 +30,7 @@ window.onload = function() {
 
         // html = "<div style='width:100%; height: 100%; border: 1px solid black; display: inline-block'></div>";
         html = part_1 + "I53HDr0-Qew" + part_2;
-        dom = new DOM_Wrapper(html, game, 500, 700);
+        dom = new DOM_Wrapper(game, html, 500, 700);
         dom.width = 300;
         dom.height = 200;
     }

diff --git a/games/card-suarez.json b/games/card-suarez.json
@@ -19,7 +19,7 @@
                 },
                 "frBody": {
                     "type": "BitmapData",
-                    "fillStyle": "#FAA",
+                    "fillStyle": "#00A",
                     "anchors": [
                         {
                             "my": "top left",
@@ -46,15 +46,20 @@
                             }
                         },
                         "video": {
-                            "type": "BitmapData",
-                            "fillStyle": "#F67",
-                            "youtube": "3zKoUda-WVA",
-                            "width": "90%",
-                            "height": "90%",
+                            "type": "YoutubeVideo",
+                            "videoid": "3zKoUda-WVA",                            
+                            "autoplay": "1",
+                            "allowfullscreen": "true",
+                            "maxWidth": "90%",
+                            "minWidth": "50%",
+                            "maxHeight": "90%",
+                            "minHeight": "50%",
+                            "width": "800",
+                            "height": "600",
                             "aspectRatio": "1.778",
                             "position": {
-                                "my": "middle right",
-                                "at": "middle left",
+                                "my": "middle center",
+                                "at": "middle center",
                                 "of": "parent"
                             }
                         }

diff --git a/plugins/DOM_Wrapper.js b/plugins/DOM_Wrapper.js
@@ -1,4 +1,4 @@
-DOM_Wrapper = function (html, game, x, y, w, h, ax, ay) {
+DOM_Wrapper = function (game, html, x, y, w, h, ax, ay) {
     console.assert(typeof html == "string" || html instanceof HTMLElement, "WARNING: html param not supperted. html passed: ", typeof html, html );
 
     //  We call the Phaser.Sprite passing in the game reference
@@ -13,7 +13,7 @@ DOM_Wrapper = function (html, game, x, y, w, h, ax, ay) {
 
     // border: 1px solid red
     this._$element = $("<div style='position: absolute; display: inline-block;'></div>").append(html).appendTo("body");
-    this._$canvas_view = $(this.game.renderer.view);    
+    this._$canvas_view = $(this.game.renderer.view);
     this.update();
 };
 
@@ -63,3 +63,20 @@ DOM_Wrapper.prototype.update = function() {
     }
 
 };
+
+// ----------------------------------------------------------------------------------
+
+DOM_Wrapper.install = function (game) {
+    game.make.domWrapper = function (html, x, y, w, h, ax, ay) {
+        return new DOM_Wrapper(this.game, html, x, y, w, h, ax, ay);
+    }
+
+    game.add.domWrapper = function (html, x, y, w, h, ax, ay, group) {
+        if (group === undefined) { group = this.world; }
+        var obj = this.game.make.domWrapper(html, x, y, w, h, ax, ay);
+        group.add(obj);
+        return obj;
+    }
+
+}
+if (typeof game != "undefined") DOM_Wrapper.install(game);
diff --git a/plugins/JSON2Game.js b/plugins/JSON2Game.js
@@ -1,5 +1,7 @@
 // asdasdsd
 Phaser.Plugin.JSON2Game = function(game, parent) {
+    DOM_Wrapper.install(game); // hay que ver como hacer esto más prolijo
+
     Phaser.Plugin.call(this, game, parent);
     //settings by default
     this._default = {};
@@ -213,25 +215,40 @@ Phaser.Plugin.JSON2Game.Base.prototype = {
         this.computeDeployment(true);
         return this;
     },
+    computeRelativeValue: function (val, porp) {
+        if (typeof val == "string" && val.indexOf("%") != -1) {
+            var percent = parseFloat(val.substr(0, val.indexOf("%")));
+            return percent * this.parent.phaserObj[porp] / 100;
+        } else {
+            return parseInt(val);
+        }
+    },
     computeDeployment: function (apply) {
         var result = {width: 12, height: 34},
-            berofe = {};
+            berofe = {},
+            max, min;
 
         if (this.spec.width) {
-            if (typeof this.spec.width == "string" && this.spec.width.indexOf("%") != -1) {
-                var w_percent = parseFloat(this.spec.width.substr(0, this.spec.width.indexOf("%")));
-                result.width = w_percent * this.parent.phaserObj.width / 100;
-            } else {
-                result.width = parseInt(this.spec.width);
+            result.width = this.computeRelativeValue(this.spec.width, "width");
+            if (this.spec.maxWidth) {
+                max = this.computeRelativeValue(this.spec.maxWidth, "width");
+                result.width = Math.min(max, result.width);
+            }
+            if (this.spec.minWidth) {
+                min = this.computeRelativeValue(this.spec.minWidth, "width");
+                result.width = Math.max(min, result.width);
             }
         }
 
         if (this.spec.height) {
-            if (typeof this.spec.height == "string" && this.spec.height.indexOf("%") != -1) {
-                var h_percent = parseFloat(this.spec.height.substr(0, this.spec.height.indexOf("%")));
-                result.height = h_percent * this.parent.phaserObj.height / 100;
-            } else {
-                result.height = parseInt(this.spec.height);
+            result.height = this.computeRelativeValue(this.spec.height, "height");
+            if (this.spec.maxHeight) {
+                max = this.computeRelativeValue(this.spec.maxHeight, "height");
+                result.height = Math.min(max, result.height);
+            }
+            if (this.spec.minHeight) {
+                min = this.computeRelativeValue(this.spec.minHeight, "height");
+                result.height = Math.max(min, result.height);
             }
         }
 
@@ -504,6 +521,25 @@ Phaser.Plugin.JSON2Game.DOM_Wrapper = function (game, spec) {
 Phaser.Plugin.JSON2Game.DOM_Wrapper.prototype = Object.create(Phaser.Plugin.JSON2Game.Base.prototype);
 Phaser.Plugin.JSON2Game.DOM_Wrapper.prototype.constructor = Phaser.Plugin.JSON2Game.Sprite;
 Phaser.Plugin.JSON2Game.DOM_Wrapper.prototype.create = function () {
-    this.phaserObj = {width:11, height:22, x:0,y:0};
-    this.childrenDoCreate();
+    var x=0,y=0,w=200,h=150; // provisorio
+    this.phaserObj = this.game.add.domWrapper(game,spec.html,x,y,w,h);
+    this.childrenDoCreate(); 
+}
+
+// --------------------------------------------------------------------------------------
+
+Phaser.Plugin.JSON2Game.YoutubeVideo = function (game, spec) {
+    Phaser.Plugin.JSON2Game.Base.call(this, game, spec);
+}
+Phaser.Plugin.JSON2Game.YoutubeVideo.prototype = Object.create(Phaser.Plugin.JSON2Game.Base.prototype);
+Phaser.Plugin.JSON2Game.YoutubeVideo.prototype.constructor = Phaser.Plugin.JSON2Game.Sprite;
+Phaser.Plugin.JSON2Game.YoutubeVideo.prototype.create = function () {
+    var x=0,y=0,w=200,h=150; // provisorio
+    var autoplay = "autoplay=" + (this.spec.autoplay ? "1" : "0"); 
+    var fullscreen = "allowfullscreen='" + (this.spec.allowfullscreen ? "true" : "false") + "'";    
+    var part_1 ="<iframe frameborder='0' "+fullscreen+" style='height:100%; width:100%'src='https://www.youtube.com/embed/",
+        part_2 = "?feature=oembed&amp;"+autoplay+"&amp;wmode=opaque&amp;rel=0&amp;showinfo=0&amp;modestbranding=0&amp;fs=1'></iframe>";    
+    var html = part_1 + this.spec.videoid + part_2;            
+    this.phaserObj = this.game.add.domWrapper(html,x,y,w,h);
+    this.childrenDoCreate();        
 }