Skip to content

Commit 0ed4766

Browse files
photonstormphotonstorm
committed
Added start of the new DOM Element Game Object
1 parent c741469 commit 0ed4766

6 files changed

Lines changed: 271 additions & 0 deletions

File tree

‎src/gameobjects/domelement/DOMElement.js‎

Lines changed: 116 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,116 @@
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 Class = require('../../utils/Class');
8+
var Components = require('../components');
9+
var GameObject = require('../GameObject');
10+
var DOMElementRender = require('./DOMElementRender');
11+
12+
/**
13+
* @classdesc
14+
* [description]
15+
*
16+
* @class DOMElement
17+
* @extends Phaser.GameObjects.GameObject
18+
* @memberOf Phaser.GameObjects
19+
* @constructor
20+
* @since 3.12.0
21+
*
22+
* @extends Phaser.GameObjects.Components.Alpha
23+
* @extends Phaser.GameObjects.Components.BlendMode
24+
* @extends Phaser.GameObjects.Components.Depth
25+
* @extends Phaser.GameObjects.Components.Flip
26+
* @extends Phaser.GameObjects.Components.GetBounds
27+
* @extends Phaser.GameObjects.Components.Mask
28+
* @extends Phaser.GameObjects.Components.Origin
29+
* @extends Phaser.GameObjects.Components.Pipeline
30+
* @extends Phaser.GameObjects.Components.ScaleMode
31+
* @extends Phaser.GameObjects.Components.ScrollFactor
32+
* @extends Phaser.GameObjects.Components.Size
33+
* @extends Phaser.GameObjects.Components.TextureCrop
34+
* @extends Phaser.GameObjects.Components.Tint
35+
* @extends Phaser.GameObjects.Components.Transform
36+
* @extends Phaser.GameObjects.Components.Visible
37+
*
38+
* @param {Phaser.Scene} scene - The Scene to which this Game Object belongs. A Game Object can only belong to one Scene at a time.
39+
* @param {number} x - The horizontal position of this Game Object in the world.
40+
* @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.
42+
*/
43+
var DOMElement = new Class({
44+
45+
Extends: GameObject,
46+
47+
Mixins: [
48+
Components.Alpha,
49+
Components.BlendMode,
50+
Components.Depth,
51+
// Components.Flip,
52+
// Components.GetBounds,
53+
// Components.Mask,
54+
// Components.Origin,
55+
// Components.Pipeline,
56+
// Components.ScaleMode,
57+
Components.ScrollFactor,
58+
// Components.Size,
59+
// Components.TextureCrop,
60+
// Components.Tint,
61+
Components.Transform,
62+
Components.Visible,
63+
DOMElementRender
64+
],
65+
66+
initialize:
67+
68+
function DOMElement (scene, x, y, element)
69+
{
70+
GameObject.call(this, scene, 'DOMElement');
71+
72+
// this.setTexture(texture, frame);
73+
this.setPosition(x, y);
74+
// this.setSizeToFrame();
75+
// this.setOriginFromFrame();
76+
// this.initPipeline('TextureTintPipeline');
77+
78+
this.parent = scene.sys.game.domContainer;
79+
80+
this.node;
81+
82+
this.setNode(element);
83+
},
84+
85+
setNode: function (element)
86+
{
87+
var target;
88+
89+
if (typeof element === 'string')
90+
{
91+
target = document.getElementById(element);
92+
}
93+
else if (typeof element === 'object' && element.nodeType === 1)
94+
{
95+
target = element;
96+
}
97+
98+
if (!target)
99+
{
100+
return;
101+
}
102+
103+
this.node = target;
104+
105+
target.style.zIndex = '0';
106+
target.style.position = 'absolute';
107+
108+
if (this.parent)
109+
{
110+
this.parent.appendChild(target);
111+
}
112+
}
113+
114+
});
115+
116+
module.exports = DOMElement;

‎src/gameobjects/domelement/DOMElementCanvasRenderer.js‎

Lines changed: 34 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,34 @@
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 GameObject = require('../GameObject');
8+
9+
/**
10+
* Renders this Game Object with the Canvas Renderer to the given Camera.
11+
* The object will not render if any of its renderFlags are set or it is being actively filtered out by the Camera.
12+
* This method should not be called directly. It is a utility function of the Render module.
13+
*
14+
* @method Phaser.GameObjects.Image#renderCanvas
15+
* @since 3.0.0
16+
* @private
17+
*
18+
* @param {Phaser.Renderer.Canvas.CanvasRenderer} renderer - A reference to the current active Canvas renderer.
19+
* @param {Phaser.GameObjects.Image} src - The Game Object being rendered in this call.
20+
* @param {number} interpolationPercentage - Reserved for future use and custom pipelines.
21+
* @param {Phaser.Cameras.Scene2D.Camera} camera - The Camera that is rendering the Game Object.
22+
* @param {Phaser.GameObjects.Components.TransformMatrix} parentMatrix - This transform matrix is defined if the game object is nested
23+
*/
24+
var DOMElementCanvasRenderer = function (renderer, src, interpolationPercentage, camera, parentMatrix)
25+
{
26+
// if (GameObject.RENDER_MASK !== src.renderFlags || (src.cameraFilter > 0 && (src.cameraFilter & camera.id)))
27+
// {
28+
// return;
29+
// }
30+
31+
// renderer.drawImage(src, camera, parentMatrix);
32+
};
33+
34+
module.exports = DOMElementCanvasRenderer;

‎src/gameobjects/domelement/DOMElementFactory.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+
var DOMElement = require('./DOMElement');
8+
var GameObjectFactory = require('../GameObjectFactory');
9+
10+
/**
11+
* Creates a new Image Game Object and adds it to the Scene.
12+
*
13+
* Note: This method will only be available if the Image Game Object has been built into Phaser.
14+
*
15+
* @method Phaser.GameObjects.GameObjectFactory#dom
16+
* @since 3.12.0
17+
*
18+
* @param {number} x - The horizontal position of this Game Object in the world.
19+
* @param {number} y - The vertical position of this Game Object in the world.
20+
* @param {string} element - The DOM element.
21+
*
22+
* @return {Phaser.GameObjects.DOMElement} The Game Object that was created.
23+
*/
24+
GameObjectFactory.register('dom', function (x, y, element)
25+
{
26+
return this.displayList.add(new DOMElement(this.scene, x, y, element));
27+
});
28+
29+
// When registering a factory function 'this' refers to the GameObjectFactory context.
30+
//
31+
// There are several properties available to use:
32+
//
33+
// this.scene - a reference to the Scene that owns the GameObjectFactory
34+
// this.displayList - a reference to the Display List the Scene owns
35+
// this.updateList - a reference to the Update List the Scene owns

‎src/gameobjects/domelement/DOMElementRender.js‎

Lines changed: 25 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,25 @@
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 renderWebGL = require('../../utils/NOOP');
8+
var renderCanvas = require('../../utils/NOOP');
9+
10+
if (typeof WEBGL_RENDERER)
11+
{
12+
renderWebGL = require('./DOMElementWebGLRenderer');
13+
}
14+
15+
if (typeof CANVAS_RENDERER)
16+
{
17+
renderCanvas = require('./DOMElementCanvasRenderer');
18+
}
19+
20+
module.exports = {
21+
22+
renderWebGL: renderWebGL,
23+
renderCanvas: renderCanvas
24+
25+
};

‎src/gameobjects/domelement/DOMElementWebGLRenderer.js‎

Lines changed: 59 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,59 @@
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 GameObject = require('../GameObject');
8+
9+
/**
10+
* Renders this Game Object with the WebGL Renderer to the given Camera.
11+
* The object will not render if any of its renderFlags are set or it is being actively filtered out by the Camera.
12+
* This method should not be called directly. It is a utility function of the Render module.
13+
*
14+
* @method Phaser.GameObjects.Image#renderWebGL
15+
* @since 3.0.0
16+
* @private
17+
*
18+
* @param {Phaser.Renderer.WebGL.WebGLRenderer} renderer - A reference to the current active WebGL renderer.
19+
* @param {Phaser.GameObjects.Image} src - The Game Object being rendered in this call.
20+
* @param {number} interpolationPercentage - Reserved for future use and custom pipelines.
21+
* @param {Phaser.Cameras.Scene2D.Camera} camera - The Camera that is rendering the Game Object.
22+
* @param {Phaser.GameObjects.Components.TransformMatrix} parentMatrix - This transform matrix is defined if the game object is nested
23+
*/
24+
var DOMElementWebGLRenderer = function (renderer, src, interpolationPercentage, camera, parentMatrix)
25+
{
26+
var node = src.node;
27+
28+
if (!node)
29+
{
30+
return;
31+
}
32+
33+
// if (GameObject.RENDER_MASK !== src.renderFlags || (src.cameraFilter > 0 && (src.cameraFilter & camera.id)))
34+
// {
35+
// return;
36+
// }
37+
38+
var nodeBounds = node.getBoundingClientRect();
39+
40+
// var x = nodeBounds.left + window.pageXOffset - document.documentElement.clientLeft;
41+
// var y = nodeBounds.top + window.pageYOffset - document.documentElement.clientTop;
42+
// bounds.width = nodeBounds.width;
43+
// bounds.height = nodeBounds.height;
44+
45+
// https://developer.mozilla.org/en-US/docs/Web/CSS/transform
46+
// transform: translateX(10px) rotate(10deg) translateY(5px);
47+
48+
node.style.opacity = src.alpha;
49+
50+
node.style.zIndex = src._depth;
51+
52+
node.style.transform = 'translateX(' + src.x + 'px) translateY(' + src.y + 'px) rotate(' + src.rotation + 'rad) scaleX(' + src.scaleX + ') scaleY(' + src.scaleY + ')';
53+
54+
// node.style.left = src.x + 'px';
55+
// node.style.top = src.y + 'px';
56+
57+
};
58+
59+
module.exports = DOMElementWebGLRenderer;

‎src/gameobjects/index.js‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -23,6 +23,7 @@ var GameObjects = {
2323
BitmapText: require('./bitmaptext/static/BitmapText'),
2424
Blitter: require('./blitter/Blitter'),
2525
Container: require('./container/Container'),
26+
DOMElement: require('./domelement/DOMElement'),
2627
DynamicBitmapText: require('./bitmaptext/dynamic/DynamicBitmapText'),
2728
Graphics: require('./graphics/Graphics.js'),
2829
Group: require('./group/Group'),
@@ -42,6 +43,7 @@ var GameObjects = {
4243
Factories: {
4344
Blitter: require('./blitter/BlitterFactory'),
4445
Container: require('./container/ContainerFactory'),
46+
DOMElement: require('./domelement/DOMElementFactory'),
4547
DynamicBitmapText: require('./bitmaptext/dynamic/DynamicBitmapTextFactory'),
4648
Graphics: require('./graphics/GraphicsFactory'),
4749
Group: require('./group/GroupFactory'),

0 commit comments

Comments
 (0)