Mirrors/phaser
2
0
Fork 0
mirror of https://github.com/photonstorm/phaser synced 2024-11-23 21:24:09 +00:00
Code Issues Projects Releases Packages Wiki Activity

Updated DOM Element to fix transforms

Browse source
This commit is contained in:
Richard Davey 2018-07-19 00:22:38 +01:00
parent d6fb66789f
commit ceb466748a
7 changed files with 176 additions and 123 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

2
src/boot/CreateDOMContainer.js
View file

@ -23,7 +23,7 @@ var CreateDOMContainer = function (game)
// DOM Element Container
var div = document.createElement('div');
div.style = 'width: ' + width + 'px; height: ' + height + 'px; padding: 0; margin: 0; position: absolute; overflow: hidden; pointer-events: none; z-index: ' + z;
div.style = 'display: block; width: ' + width + 'px; height: ' + height + 'px; padding: 0; margin: 0; position: absolute; overflow: hidden; pointer-events: none; z-index: ' + z;
// game.canvas.style.position = 'absolute';
// game.canvas.style.zIndex = '2';

35
src/gameobjects/domelement/CSSBlendModes.js Normal file
View file

@ -0,0 +1,35 @@
/**
* @author Richard Davey <rich@photonstorm.com>
* @copyright 2018 Photon Storm Ltd.
* @license {@link https://github.com/photonstorm/phaser/blob/master/license.txt|MIT License}
*/
/**
* Phaser Blend Modes to CSS Blend Modes Map.
*
* @name Phaser.CSSBlendModes
* @enum {string}
* @memberOf Phaser
* @readOnly
* @since 3.12.0
*/
module.exports = [
'normal',
'multiply',
'multiply',
'screen',
'overlay',
'darken',
'lighten',
'color-dodge',
'color-burn',
'hard-light',
'soft-light',
'difference',
'exclusion',
'hue',
'saturation',
'color',
'luminosity'
];

98
src/gameobjects/domelement/DOMElement.js
View file

@ -6,8 +6,9 @@
var Class = require('../../utils/Class');
var Components = require('../components');
var GameObject = require('../GameObject');
var DOMElementRender = require('./DOMElementRender');
var GameObject = require('../GameObject');
var Vector4 = require('../../math/Vector4');
/**
* @classdesc
@ -21,24 +22,17 @@ var DOMElementRender = require('./DOMElementRender');
*
* @extends Phaser.GameObjects.Components.Alpha
* @extends Phaser.GameObjects.Components.BlendMode
* @extends Phaser.GameObjects.Components.ComputedSize
* @extends Phaser.GameObjects.Components.Depth
* @extends Phaser.GameObjects.Components.Flip
* @extends Phaser.GameObjects.Components.GetBounds
* @extends Phaser.GameObjects.Components.Mask
* @extends Phaser.GameObjects.Components.Origin
* @extends Phaser.GameObjects.Components.Pipeline
* @extends Phaser.GameObjects.Components.ScaleMode
* @extends Phaser.GameObjects.Components.ScrollFactor
* @extends Phaser.GameObjects.Components.Size
* @extends Phaser.GameObjects.Components.TextureCrop
* @extends Phaser.GameObjects.Components.Tint
* @extends Phaser.GameObjects.Components.Transform
* @extends Phaser.GameObjects.Components.Visible
*
* @param {Phaser.Scene} scene - The Scene to which this Game Object belongs. A Game Object can only belong to one Scene at a time.
* @param {number} x - The horizontal position of this Game Object in the world.
* @param {number} y - The vertical position of this Game Object in the world.
* @param {string} texture - The key of the Texture this Game Object will use to render with, as stored in the Texture Manager.
* @param {(string|HTMLElement)} [element] - The DOM Element to use.
*/
var DOMElement = new Class({
@ -47,17 +41,10 @@ var DOMElement = new Class({
Mixins: [
Components.Alpha,
Components.BlendMode,
Components.ComputedSize,
Components.Depth,
// Components.Flip,
// Components.GetBounds,
// Components.Mask,
// Components.Origin,
// Components.Pipeline,
// Components.ScaleMode,
Components.Origin,
Components.ScrollFactor,
// Components.Size,
// Components.TextureCrop,
// Components.Tint,
Components.Transform,
Components.Visible,
DOMElementRender
@ -69,20 +56,45 @@ var DOMElement = new Class({
{
GameObject.call(this, scene, 'DOMElement');
// this.setTexture(texture, frame);
this.setPosition(x, y);
// this.setSizeToFrame();
// this.setOriginFromFrame();
// this.initPipeline('TextureTintPipeline');
this.parent = scene.sys.game.domContainer;
this.node;
this.setNode(element);
this.skewX = 0;
this.skewY = 0;
// https://developer.mozilla.org/en-US/docs/Web/CSS/transform-function/rotate3d
this.rotate3d = new Vector4();
this.rotate3dAngle = 'deg';
this.setPosition(x, y);
if (element)
{
this.setElement(element);
}
},
setNode: function (element)
setSkew: function (x, y)
{
if (x === undefined) { x = 0; }
if (y === undefined) { y = x; }
this.skewX = x;
this.skewY = y;
return this;
},
setPerspective: function (value)
{
// Sets it on the DOM Container!
this.parent.style.perspective = value + 'px';
return this;
},
setElement: function (element)
{
var target;
@ -103,12 +115,44 @@ var DOMElement = new Class({
this.node = target;
target.style.zIndex = '0';
target.style.display = 'block';
target.style.position = 'absolute';
if (this.parent)
{
this.parent.appendChild(target);
}
var nodeBounds = target.getBoundingClientRect();
this.setSize(nodeBounds.width || 0, nodeBounds.height || 0);
return this;
},
setText: function (text)
{
if (this.node)
{
this.node.innerText = text;
}
return this;
},
setHTML: function (html)
{
if (this.node)
{
this.node.innerHTML = html;
}
return this;
},
destroy: function ()
{
}
});

67
src/gameobjects/domelement/DOMElementCSSRenderer.js Normal file
View file

@ -0,0 +1,67 @@
/**
* @author Richard Davey <rich@photonstorm.com>
* @copyright 2018 Photon Storm Ltd.
* @license {@link https://github.com/photonstorm/phaser/blob/master/license.txt|MIT License}
*/
var CSSBlendModes = require('./CSSBlendModes');
var GameObject = require('../GameObject');
/**
* Renders this Game Object with the WebGL Renderer to the given Camera.
* The object will not render if any of its renderFlags are set or it is being actively filtered out by the Camera.
* This method should not be called directly. It is a utility function of the Render module.
*
* @method Phaser.GameObjects.DOMElement#renderWebGL
* @since 3.12.0
* @private
*
* @param {Phaser.Renderer.WebGL.WebGLRenderer} renderer - A reference to the current active renderer.
* @param {Phaser.GameObjects.DOMElement} src - The Game Object being rendered in this call.
* @param {number} interpolationPercentage - Reserved for future use and custom pipelines.
* @param {Phaser.Cameras.Scene2D.Camera} camera - The Camera that is rendering the Game Object.
*/
var DOMElementCSSRenderer = function (renderer, src, interpolationPercentage, camera)
{
var node = src.node;
if (!node || GameObject.RENDER_MASK !== src.renderFlags || (src.cameraFilter > 0 && (src.cameraFilter & camera.id)))
{
if (node)
{
node.style.display = 'none';
}
return;
}
var camMatrix = renderer.pipelines.TextureTintPipeline._tempMatrix1;
var spriteMatrix = renderer.pipelines.TextureTintPipeline._tempMatrix2;
var calcMatrix = renderer.pipelines.TextureTintPipeline._tempMatrix3;
var x = src.originX * src.width;
var y = src.originY * src.height;
spriteMatrix.applyITRS(src.x - x - (camera.scrollX * src.scrollFactorX), src.y - y - (camera.scrollY * src.scrollFactorY), src.rotation, src.scaleX, src.scaleY);
camMatrix.copyFrom(camera.matrix);
camMatrix.multiply(spriteMatrix, calcMatrix);
node.style.display = 'block';
node.style.opacity = src.alpha;
node.style.zIndex = src._depth;
node.style.pointerEvents = 'auto';
node.style.mixBlendMode = CSSBlendModes[src._blendMode];
// https://developer.mozilla.org/en-US/docs/Web/CSS/transform
node.style.transform =
calcMatrix.getCSSMatrix() +
' skew(' + src.skewX + 'rad, ' + src.skewY + 'rad)' +
' rotate3d(' + src.rotate3d.x + ',' + src.rotate3d.y + ',' + src.rotate3d.z + ',' + src.rotate3d.w + src.rotate3dAngle + ')';
node.style.transformOrigin = (100 * src.originX) + '% ' + (100 * src.originY) + '%';
};
module.exports = DOMElementCSSRenderer;

34
src/gameobjects/domelement/DOMElementCanvasRenderer.js
View file

@ -1,34 +0,0 @@
/**
* @author Richard Davey <rich@photonstorm.com>
* @copyright 2018 Photon Storm Ltd.
* @license {@link https://github.com/photonstorm/phaser/blob/master/license.txt|MIT License}
*/
var GameObject = require('../GameObject');
/**
* Renders this Game Object with the Canvas Renderer to the given Camera.
* The object will not render if any of its renderFlags are set or it is being actively filtered out by the Camera.
* This method should not be called directly. It is a utility function of the Render module.
*
* @method Phaser.GameObjects.Image#renderCanvas
* @since 3.0.0
* @private
*
* @param {Phaser.Renderer.Canvas.CanvasRenderer} renderer - A reference to the current active Canvas renderer.
* @param {Phaser.GameObjects.Image} src - The Game Object being rendered in this call.
* @param {number} interpolationPercentage - Reserved for future use and custom pipelines.
* @param {Phaser.Cameras.Scene2D.Camera} camera - The Camera that is rendering the Game Object.
* @param {Phaser.GameObjects.Components.TransformMatrix} parentMatrix - This transform matrix is defined if the game object is nested
*/
var DOMElementCanvasRenderer = function (renderer, src, interpolationPercentage, camera, parentMatrix)
{
// if (GameObject.RENDER_MASK !== src.renderFlags || (src.cameraFilter > 0 && (src.cameraFilter & camera.id)))
// {
// return;
// }
// renderer.drawImage(src, camera, parentMatrix);
};
module.exports = DOMElementCanvasRenderer;

4
src/gameobjects/domelement/DOMElementRender.js
View file

@ -9,12 +9,12 @@ var renderCanvas = require('../../utils/NOOP');
if (typeof WEBGL_RENDERER)
{
renderWebGL = require('./DOMElementWebGLRenderer');
renderWebGL = require('./DOMElementCSSRenderer');
}
if (typeof CANVAS_RENDERER)
{
renderCanvas = require('./DOMElementCanvasRenderer');
renderCanvas = require('./DOMElementCSSRenderer');
}
module.exports = {

59
src/gameobjects/domelement/DOMElementWebGLRenderer.js
View file

@ -1,59 +0,0 @@
/**
* @author Richard Davey <rich@photonstorm.com>
* @copyright 2018 Photon Storm Ltd.
* @license {@link https://github.com/photonstorm/phaser/blob/master/license.txt|MIT License}
*/
var GameObject = require('../GameObject');
/**
* Renders this Game Object with the WebGL Renderer to the given Camera.
* The object will not render if any of its renderFlags are set or it is being actively filtered out by the Camera.
* This method should not be called directly. It is a utility function of the Render module.
*
* @method Phaser.GameObjects.Image#renderWebGL
* @since 3.0.0
* @private
*
* @param {Phaser.Renderer.WebGL.WebGLRenderer} renderer - A reference to the current active WebGL renderer.
* @param {Phaser.GameObjects.Image} src - The Game Object being rendered in this call.
* @param {number} interpolationPercentage - Reserved for future use and custom pipelines.
* @param {Phaser.Cameras.Scene2D.Camera} camera - The Camera that is rendering the Game Object.
* @param {Phaser.GameObjects.Components.TransformMatrix} parentMatrix - This transform matrix is defined if the game object is nested
*/
var DOMElementWebGLRenderer = function (renderer, src, interpolationPercentage, camera, parentMatrix)
{
var node = src.node;
if (!node)
{
return;
}
// if (GameObject.RENDER_MASK !== src.renderFlags || (src.cameraFilter > 0 && (src.cameraFilter & camera.id)))
// {
// return;
// }
var nodeBounds = node.getBoundingClientRect();
// var x = nodeBounds.left + window.pageXOffset - document.documentElement.clientLeft;
// var y = nodeBounds.top + window.pageYOffset - document.documentElement.clientTop;
// bounds.width = nodeBounds.width;
// bounds.height = nodeBounds.height;
// https://developer.mozilla.org/en-US/docs/Web/CSS/transform
// transform: translateX(10px) rotate(10deg) translateY(5px);
node.style.opacity = src.alpha;
node.style.zIndex = src._depth;
node.style.transform = 'translateX(' + src.x + 'px) translateY(' + src.y + 'px) rotate(' + src.rotation + 'rad) scaleX(' + src.scaleX + ') scaleY(' + src.scaleY + ')';
// node.style.left = src.x + 'px';
// node.style.top = src.y + 'px';
};
module.exports = DOMElementWebGLRenderer;