diff --git a/DOM_plugin_example/hanging_video.js b/DOM_plugin_example/hanging_video.js
index 0c17c79..6f7519a 100644
--- 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
index 1a11a9c..c8f891f 100644
--- a/DOM_plugin_example/rotating_video.js
+++ b/DOM_plugin_example/rotating_video.js
@@ -30,7 +30,7 @@ window.onload = function() {
// html = "";
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
index 106603e..0df9d69 100644
--- 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
index 3587376..25e608c 100644
--- 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 = $("").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);
\ No newline at end of file
diff --git a/plugins/JSON2Game.js b/plugins/JSON2Game.js
index 11419b7..f2f94d3 100644
--- 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 ="";
+ var html = part_1 + this.spec.videoid + part_2;
+ this.phaserObj = this.game.add.domWrapper(html,x,y,w,h);
+ this.childrenDoCreate();
}