mirror of
https://github.com/photonstorm/phaser
synced 2024-12-19 01:24:48 +00:00
69 lines
2.5 KiB
JavaScript
69 lines
2.5 KiB
JavaScript
/**
|
|
* @author Richard Davey <rich@photonstorm.com>
|
|
* @copyright 2019 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._tempMatrix1;
|
|
var spriteMatrix = renderer._tempMatrix2;
|
|
var calcMatrix = renderer._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.transform = calcMatrix.getCSSMatrix();
|
|
|
|
node.style.transformOrigin = (100 * src.originX) + '% ' + (100 * src.originY) + '%';
|
|
};
|
|
|
|
module.exports = DOMElementCSSRenderer;
|