Skip to content

Commit ceb4667

Browse files
photonstormphotonstorm
committed
Updated DOM Element to fix transforms
1 parent d6fb667 commit ceb4667

7 files changed

Lines changed: 176 additions & 123 deletions

File tree

‎src/boot/CreateDOMContainer.js‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -23,7 +23,7 @@ var CreateDOMContainer = function (game)
2323
// DOM Element Container
2424
var div = document.createElement('div');
2525

26-
div.style = 'width: ' + width + 'px; height: ' + height + 'px; padding: 0; margin: 0; position: absolute; overflow: hidden; pointer-events: none; z-index: ' + z;
26+
div.style = 'display: block; width: ' + width + 'px; height: ' + height + 'px; padding: 0; margin: 0; position: absolute; overflow: hidden; pointer-events: none; z-index: ' + z;
2727

2828
// game.canvas.style.position = 'absolute';
2929
// game.canvas.style.zIndex = '2';

‎src/gameobjects/domelement/CSSBlendModes.js‎

Lines changed: 35 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,35 @@
1+
/**
2+
* @author Richard Davey <rich@photonstorm.com>
3+
* @copyright 2018 Photon Storm Ltd.
4+
* @license {@link https://github.com/photonstorm/phaser/blob/master/license.txt|MIT License}
5+
*/
6+
7+
/**
8+
* Phaser Blend Modes to CSS Blend Modes Map.
9+
*
10+
* @name Phaser.CSSBlendModes
11+
* @enum {string}
12+
* @memberOf Phaser
13+
* @readOnly
14+
* @since 3.12.0
15+
*/
16+
17+
module.exports = [
18+
'normal',
19+
'multiply',
20+
'multiply',
21+
'screen',
22+
'overlay',
23+
'darken',
24+
'lighten',
25+
'color-dodge',
26+
'color-burn',
27+
'hard-light',
28+
'soft-light',
29+
'difference',
30+
'exclusion',
31+
'hue',
32+
'saturation',
33+
'color',
34+
'luminosity'
35+
];

‎src/gameobjects/domelement/DOMElement.js‎

Lines changed: 71 additions & 27 deletions
Original file line numberDiff line numberDiff line change
@@ -6,8 +6,9 @@
66

77
var Class = require('../../utils/Class');
88
var Components = require('../components');
9-
var GameObject = require('../GameObject');
109
var DOMElementRender = require('./DOMElementRender');
10+
var GameObject = require('../GameObject');
11+
var Vector4 = require('../../math/Vector4');
1112

1213
/**
1314
* @classdesc
@@ -21,24 +22,17 @@ var DOMElementRender = require('./DOMElementRender');
2122
*
2223
* @extends Phaser.GameObjects.Components.Alpha
2324
* @extends Phaser.GameObjects.Components.BlendMode
25+
* @extends Phaser.GameObjects.Components.ComputedSize
2426
* @extends Phaser.GameObjects.Components.Depth
25-
* @extends Phaser.GameObjects.Components.Flip
26-
* @extends Phaser.GameObjects.Components.GetBounds
27-
* @extends Phaser.GameObjects.Components.Mask
2827
* @extends Phaser.GameObjects.Components.Origin
29-
* @extends Phaser.GameObjects.Components.Pipeline
30-
* @extends Phaser.GameObjects.Components.ScaleMode
3128
* @extends Phaser.GameObjects.Components.ScrollFactor
32-
* @extends Phaser.GameObjects.Components.Size
33-
* @extends Phaser.GameObjects.Components.TextureCrop
34-
* @extends Phaser.GameObjects.Components.Tint
3529
* @extends Phaser.GameObjects.Components.Transform
3630
* @extends Phaser.GameObjects.Components.Visible
3731
*
3832
* @param {Phaser.Scene} scene - The Scene to which this Game Object belongs. A Game Object can only belong to one Scene at a time.
3933
* @param {number} x - The horizontal position of this Game Object in the world.
4034
* @param {number} y - The vertical position of this Game Object in the world.
41-
* @param {string} texture - The key of the Texture this Game Object will use to render with, as stored in the Texture Manager.
35+
* @param {(string|HTMLElement)} [element] - The DOM Element to use.
4236
*/
4337
var DOMElement = new Class({
4438

@@ -47,17 +41,10 @@ var DOMElement = new Class({
4741
Mixins: [
4842
Components.Alpha,
4943
Components.BlendMode,
44+
Components.ComputedSize,
5045
Components.Depth,
51-
// Components.Flip,
52-
// Components.GetBounds,
53-
// Components.Mask,
54-
// Components.Origin,
55-
// Components.Pipeline,
56-
// Components.ScaleMode,
46+
Components.Origin,
5747
Components.ScrollFactor,
58-
// Components.Size,
59-
// Components.TextureCrop,
60-
// Components.Tint,
6148
Components.Transform,
6249
Components.Visible,
6350
DOMElementRender
@@ -69,20 +56,45 @@ var DOMElement = new Class({
6956
{
7057
GameObject.call(this, scene, 'DOMElement');
7158

72-
// this.setTexture(texture, frame);
73-
this.setPosition(x, y);
74-
// this.setSizeToFrame();
75-
// this.setOriginFromFrame();
76-
// this.initPipeline('TextureTintPipeline');
77-
7859
this.parent = scene.sys.game.domContainer;
7960

8061
this.node;
8162

82-
this.setNode(element);
63+
this.skewX = 0;
64+
this.skewY = 0;
65+
66+
// https://developer.mozilla.org/en-US/docs/Web/CSS/transform-function/rotate3d
67+
this.rotate3d = new Vector4();
68+
this.rotate3dAngle = 'deg';
69+
70+
this.setPosition(x, y);
71+
72+
if (element)
73+
{
74+
this.setElement(element);
75+
}
76+
},
77+
78+
setSkew: function (x, y)
79+
{
80+
if (x === undefined) { x = 0; }
81+
if (y === undefined) { y = x; }
82+
83+
this.skewX = x;
84+
this.skewY = y;
85+
86+
return this;
87+
},
88+
89+
setPerspective: function (value)
90+
{
91+
// Sets it on the DOM Container!
92+
this.parent.style.perspective = value + 'px';
93+
94+
return this;
8395
},
8496

85-
setNode: function (element)
97+
setElement: function (element)
8698
{
8799
var target;
88100

@@ -103,12 +115,44 @@ var DOMElement = new Class({
103115
this.node = target;
104116

105117
target.style.zIndex = '0';
118+
target.style.display = 'block';
106119
target.style.position = 'absolute';
107120

108121
if (this.parent)
109122
{
110123
this.parent.appendChild(target);
111124
}
125+
126+
var nodeBounds = target.getBoundingClientRect();
127+
128+
this.setSize(nodeBounds.width || 0, nodeBounds.height || 0);
129+
130+
return this;
131+
},
132+
133+
setText: function (text)
134+
{
135+
if (this.node)
136+
{
137+
this.node.innerText = text;
138+
}
139+
140+
return this;
141+
},
142+
143+
setHTML: function (html)
144+
{
145+
if (this.node)
146+
{
147+
this.node.innerHTML = html;
148+
}
149+
150+
return this;
151+
},
152+
153+
destroy: function ()
154+
{
155+
112156
}
113157

114158
});

‎src/gameobjects/domelement/DOMElementCSSRenderer.js‎

Lines changed: 67 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,67 @@
1+
/**
2+
* @author Richard Davey <rich@photonstorm.com>
3+
* @copyright 2018 Photon Storm Ltd.
4+
* @license {@link https://github.com/photonstorm/phaser/blob/master/license.txt|MIT License}
5+
*/
6+
7+
var CSSBlendModes = require('./CSSBlendModes');
8+
var GameObject = require('../GameObject');
9+
10+
/**
11+
* Renders this Game Object with the WebGL Renderer to the given Camera.
12+
* The object will not render if any of its renderFlags are set or it is being actively filtered out by the Camera.
13+
* This method should not be called directly. It is a utility function of the Render module.
14+
*
15+
* @method Phaser.GameObjects.DOMElement#renderWebGL
16+
* @since 3.12.0
17+
* @private
18+
*
19+
* @param {Phaser.Renderer.WebGL.WebGLRenderer} renderer - A reference to the current active renderer.
20+
* @param {Phaser.GameObjects.DOMElement} src - The Game Object being rendered in this call.
21+
* @param {number} interpolationPercentage - Reserved for future use and custom pipelines.
22+
* @param {Phaser.Cameras.Scene2D.Camera} camera - The Camera that is rendering the Game Object.
23+
*/
24+
var DOMElementCSSRenderer = function (renderer, src, interpolationPercentage, camera)
25+
{
26+
var node = src.node;
27+
28+
if (!node || GameObject.RENDER_MASK !== src.renderFlags || (src.cameraFilter > 0 && (src.cameraFilter & camera.id)))
29+
{
30+
if (node)
31+
{
32+
node.style.display = 'none';
33+
}
34+
35+
return;
36+
}
37+
38+
var camMatrix = renderer.pipelines.TextureTintPipeline._tempMatrix1;
39+
var spriteMatrix = renderer.pipelines.TextureTintPipeline._tempMatrix2;
40+
var calcMatrix = renderer.pipelines.TextureTintPipeline._tempMatrix3;
41+
42+
var x = src.originX * src.width;
43+
var y = src.originY * src.height;
44+
45+
spriteMatrix.applyITRS(src.x - x - (camera.scrollX * src.scrollFactorX), src.y - y - (camera.scrollY * src.scrollFactorY), src.rotation, src.scaleX, src.scaleY);
46+
47+
camMatrix.copyFrom(camera.matrix);
48+
49+
camMatrix.multiply(spriteMatrix, calcMatrix);
50+
51+
node.style.display = 'block';
52+
node.style.opacity = src.alpha;
53+
node.style.zIndex = src._depth;
54+
node.style.pointerEvents = 'auto';
55+
node.style.mixBlendMode = CSSBlendModes[src._blendMode];
56+
57+
// https://developer.mozilla.org/en-US/docs/Web/CSS/transform
58+
59+
node.style.transform =
60+
calcMatrix.getCSSMatrix() +
61+
' skew(' + src.skewX + 'rad, ' + src.skewY + 'rad)' +
62+
' rotate3d(' + src.rotate3d.x + ',' + src.rotate3d.y + ',' + src.rotate3d.z + ',' + src.rotate3d.w + src.rotate3dAngle + ')';
63+
64+
node.style.transformOrigin = (100 * src.originX) + '% ' + (100 * src.originY) + '%';
65+
};
66+
67+
module.exports = DOMElementCSSRenderer;

‎src/gameobjects/domelement/DOMElementCanvasRenderer.js‎

Lines changed: 0 additions & 34 deletions
This file was deleted.

‎src/gameobjects/domelement/DOMElementRender.js‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -9,12 +9,12 @@ var renderCanvas = require('../../utils/NOOP');
99

1010
if (typeof WEBGL_RENDERER)
1111
{
12-
renderWebGL = require('./DOMElementWebGLRenderer');
12+
renderWebGL = require('./DOMElementCSSRenderer');
1313
}
1414

1515
if (typeof CANVAS_RENDERER)
1616
{
17-
renderCanvas = require('./DOMElementCanvasRenderer');
17+
renderCanvas = require('./DOMElementCSSRenderer');
1818
}
1919

2020
module.exports = {

‎src/gameobjects/domelement/DOMElementWebGLRenderer.js‎

Lines changed: 0 additions & 59 deletions
This file was deleted.

0 commit comments

Comments
 (0)