Added start of the new DOM Element Game Object

src/gameobjects/domelement/DOMElement.js

@@ -0,0 +1,116 @@
+/**
+ * @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 Class = require('../../utils/Class');
+var Components = require('../components');
+var GameObject = require('../GameObject');
+var DOMElementRender = require('./DOMElementRender');
+
+/**
+ * @classdesc
+ * [description]
+ *
+ * @class DOMElement
+ * @extends Phaser.GameObjects.GameObject
+ * @memberOf Phaser.GameObjects
+ * @constructor
+ * @since 3.12.0
+ *
+ * @extends Phaser.GameObjects.Components.Alpha
+ * @extends Phaser.GameObjects.Components.BlendMode
+ * @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.
+ */
+var DOMElement = new Class({
+
+    Extends: GameObject,
+
+    Mixins: [
+        Components.Alpha,
+        Components.BlendMode,
+        Components.Depth,
+        // Components.Flip,
+        // Components.GetBounds,
+        // Components.Mask,
+        // Components.Origin,
+        // Components.Pipeline,
+        // Components.ScaleMode,
+        Components.ScrollFactor,
+        // Components.Size,
+        // Components.TextureCrop,
+        // Components.Tint,
+        Components.Transform,
+        Components.Visible,
+        DOMElementRender
+    ],
+
+    initialize:
+
+    function DOMElement (scene, x, y, element)
+    {
+        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);
+    },
+
+    setNode: function (element)
+    {
+        var target;
+
+        if (typeof element === 'string')
+        {
+            target = document.getElementById(element);
+        }
+        else if (typeof element === 'object' && element.nodeType === 1)
+        {
+            target = element;
+        }
+
+        if (!target)
+        {
+            return;
+        }
+
+        this.node = target;
+
+        target.style.zIndex = '0';
+        target.style.position = 'absolute';
+
+        if (this.parent)
+        {
+            this.parent.appendChild(target);
+        }
+    }
+
+});
+
+module.exports = DOMElement;

src/gameobjects/domelement/DOMElementCanvasRenderer.js

@@ -0,0 +1,34 @@
+/**
+ * @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;

src/gameobjects/domelement/DOMElementFactory.js

@@ -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}
+ */
+
+var DOMElement = require('./DOMElement');
+var GameObjectFactory = require('../GameObjectFactory');
+
+/**
+ * Creates a new Image Game Object and adds it to the Scene.
+ *
+ * Note: This method will only be available if the Image Game Object has been built into Phaser.
+ *
+ * @method Phaser.GameObjects.GameObjectFactory#dom
+ * @since 3.12.0
+ *
+ * @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} element - The DOM element.
+ *
+ * @return {Phaser.GameObjects.DOMElement} The Game Object that was created.
+ */
+GameObjectFactory.register('dom', function (x, y, element)
+{
+    return this.displayList.add(new DOMElement(this.scene, x, y, element));
+});
+
+//  When registering a factory function 'this' refers to the GameObjectFactory context.
+//
+//  There are several properties available to use:
+//
+//  this.scene - a reference to the Scene that owns the GameObjectFactory
+//  this.displayList - a reference to the Display List the Scene owns
+//  this.updateList - a reference to the Update List the Scene owns

src/gameobjects/domelement/DOMElementRender.js

@@ -0,0 +1,25 @@
+/**
+ * @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 renderWebGL = require('../../utils/NOOP');
+var renderCanvas = require('../../utils/NOOP');
+
+if (typeof WEBGL_RENDERER)
+{
+    renderWebGL = require('./DOMElementWebGLRenderer');
+}
+
+if (typeof CANVAS_RENDERER)
+{
+    renderCanvas = require('./DOMElementCanvasRenderer');
+}
+
+module.exports = {
+
+    renderWebGL: renderWebGL,
+    renderCanvas: renderCanvas
+
+};

src/gameobjects/domelement/DOMElementWebGLRenderer.js

@@ -0,0 +1,59 @@
+/**
+ * @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;

src/gameobjects/index.js

@@ -23,6 +23,7 @@ var GameObjects = {
     BitmapText: require('./bitmaptext/static/BitmapText'),
     Blitter: require('./blitter/Blitter'),
     Container: require('./container/Container'),
+    DOMElement: require('./domelement/DOMElement'),
     DynamicBitmapText: require('./bitmaptext/dynamic/DynamicBitmapText'),
     Graphics: require('./graphics/Graphics.js'),
     Group: require('./group/Group'),
@@ -42,6 +43,7 @@ var GameObjects = {
     Factories: {
         Blitter: require('./blitter/BlitterFactory'),
         Container: require('./container/ContainerFactory'),
+        DOMElement: require('./domelement/DOMElementFactory'),
         DynamicBitmapText: require('./bitmaptext/dynamic/DynamicBitmapTextFactory'),
         Graphics: require('./graphics/GraphicsFactory'),
         Group: require('./group/GroupFactory'),