DOMElement

.GameObjects. DOMElement

游戏对象是一种控制和操纵游戏顶部的超文本标记语言元素的方法. 为了显示DOM元素,你必须通过在你的游戏中添加以下内容来启用它们 配置对象: ```javascript dom { createContainer: true } ``` 当这个被添加,相位器将自动创建一个位于顶部的容器 游戏画布.该div的大小与画布相匹配,如果画布大小发生变化,由于 缩放管理器中的设置,dom容器会相应地调整大小. 如果你还没有这样做,你必须在游戏配置或者DOM中提供一个 `parent` 容器将无法创建. 您可以通过传入DOMStrings或传入对现有的 你希望被相位器控制的元素.例如: ```javascript this.add.dom(x, y, 'div', 'background-color: lime; width: 220px; height: 100px; font: 48px Arial', 'Phaser'); ``` 上面的代码将在给定的x/y坐标向DOM容器中插入一个div元素.中的DOMString 第四个参数设置div的初始CSS样式,最后一个参数是内部文本.在这种情况下, 它将创建一个220像素乘100像素的石灰色div,里面有Arial字体的文本Phaser. 你应该几乎总是,毫无例外地,使用显式大小的HTML元素,以便完全控制 常规游戏内容旁边元素的对齐和定位. 不用直接指定CSS和HTML,你可以使用文件加载器把它加载到 缓存,然后改用 `createFromCache` 方法.您也可以使用 `createFromHTML` 和各种其他 此类中可用于帮助构造元素的方法. 一旦元素被创建,你就可以像控制其他游戏对象一样控制它.您可以设置它的 位置,比例,旋转,alpha和其他属性.它将随着主场景摄像机的移动而移动并被剪辑 在画布的边缘.记住DOM元素的一些限制是很重要的:显而易见的一点是 它们出现在你的游戏画布之上或之下.您不能将它们混合到显示列表中,这意味着您不能 一个DOM元素,然后是一个精灵,然后是它后面的另一个DOM元素. 它们也不能用于输入.为此,您必须使用 `addListener` 方法来添加本机事件 直接倾听.最后一个限制是关于相机.DOM容器的大小与游戏画布相匹配 完全和相应地修剪.DOM元素尊重相机滚动和滚动因子设置,但是如果你 更改相机的大小,使其不再与画布的大小相匹配,它们不会被相应地裁剪. 此外,所有的DOM元素都被插入到同一个DOM容器中,不管它们是在哪个场景中创建的. 请注意,在一个只有一个摄像机的场景中,你只能有多种元素.如果你需要多个摄像头, 使用平行场景来实现这一点. DOM元素是一个强大的方式来调整你的相位器游戏对象原生HTML.例如,您可以插入 一个多人游戏的登录表单直接进入你的标题屏幕.或高核心表的文本输入框. 或者第三方服务的横幅广告.或者您可能希望将它们用于高分辨率文本显示 UI.选择权在你,只要记住你在处理漂浮在顶端的标准的HTML和CSS 并且应该相应地对待它.

Constructor

new DOMElement(scene, xopt, yopt, elementopt, styleopt, innerTextopt)

Since:
  • 3.17.0
Parameters:
Name Type Attributes Default Description
scene Phaser.Scene 此游戏对象所属的场景.一个游戏对象一次只能属于一个场景.
x number <optional>
0 这个DOM元素在世界上的水平位置.
y number <optional>
0 这个DOM元素在世界上的垂直位置.
element Element | string <optional>
现有的DOM元素,或者字符串.如果一个字符串以#开头,它将对该字符串进行 `getElementById` 查找(减去哈希).没有散列,它表示要创建的元素的类型,即. `div` .
style string | any <optional>
如果是字符串,将直接设置为元素的 `style` 属性值.如果是一个普通的对象,将被迭代并传递值.在这两种情况下,这些值会替换之前设置的任何CSS样式.
innerText string <optional>
如果给定,将被直接设置为元素 `innerText` 属性值,替换之前存在的任何内容.

Extends

Members

active :boolean

Since:
  • 3.0.0
Inherited From:
Default Value:
  • true
此游戏对象的活动状态. 活动状态为 `true` 的游戏对象由场景更新列表处理(如果添加). 活动对象是指其逻辑和内部系统正在更新的对象.
Type:
  • boolean

alpha :number

Since:
  • 3.0.0
Inherited From:
游戏对象的阿尔法值. 这是一个全局值,影响整个游戏对象,而不仅仅是它的一个区域.
Type:
  • number

angle :number

Since:
  • 3.0.0
Inherited From:
Default Value:
  • 0
这个游戏物体的角度,用度数来表示. 相位器使用右手顺时针旋转系统,其中0°为右,90°为下,180°/-180°为左 而且-90是向上的. 如果您更喜欢使用弧度,请改为使用 `rotation` 属性.
Type:
  • number

blendMode :Phaser.BlendModes|string

Since:
  • 3.0.0
Inherited From:
设置游戏对象使用的混合模式. 这可以是一个常量,如`混合模式`,也可以是一个整数,如4(覆盖) 在网络总帐下,只有以下混合模式可用: * ADD * MULTIPLY * SCREEN * ERASE 根据浏览器的支持,Canvas有更多的可用空间. 您也可以在WebGL中创建自己的自定义混合模式. 混合模式在`画布`和`网络GL`下有不同的效果,不同的浏览器也有不同的效果,具体取决于 依靠支持.如果遇到新的混合模式,混合模式也会导致网络总帐批量刷新.为了这些 原因是要小心场景的构建和混合模式的频率 被使用.
Type:

(nullable) body :Phaser.Physics.Arcade.Body|Phaser.Physics.Arcade.StaticBody|MatterJS.BodyType

Since:
  • 3.0.0
Inherited From:
Default Value:
  • null
如果这个游戏对象是为街机或物质物理学启用的,那么这个属性将包含一个对物理体的引用.
Type:

cache :Phaser.Cache.BaseCache

Since:
  • 3.17.0
对超文本标记语言缓存的引用.
Type:

cameraFilter :number

Since:
  • 3.0.0
Overrides:
Default Value:
  • 0
控制此游戏对象是否由摄像机绘制的位掩码. 通常不直接设置,而是调用 `Camera.ignore` ,不过你可以 直接使用Camera.id属性设置该属性:
Type:
  • number
Example
this.cameraFilter |= camera.id..

data :Phaser.Data.DataManager

Since:
  • 3.0.0
Inherited From:
Default Value:
  • null
数据管理器. 它允许您存储,查询和获取特定于此游戏对象的密钥/值配对信息. 默认情况下为 `null` .如果使用 `getData` 或 `setData` 或 `setDataEnabled` ,则自动创建.
Type:

depth :number

Since:
  • 3.0.0
Inherited From:
场景中游戏对象的深度. 深度在某些环境中也称为 `z-index` ,允许您更改渲染顺序 游戏对象,而不实际移动它们在显示列表中的位置. 默认深度为零.深度更高的游戏对象 值总是呈现在具有较低值的值之前. 设置深度将在场景中排队深度排序事件.
Type:
  • number

(readonly) displayHeight :number

Since:
  • 3.17.0
该游戏对象的计算显示高度,基于 `GetBoundingClientRecord` DOM调用. 属性 `height` 保存此DOM元素的未缩放高度.
Type:
  • number

displayList :Phaser.GameObjects.DisplayList|Phaser.GameObjects.Layer

Since:
  • 3.50.0
Inherited From:
Default Value:
  • null
保存对包含此游戏对象的显示列表的引用. 当这个游戏对象被添加到一个场景或层时,它会被自动设置. 您应该将此属性视为只读.
Type:

displayOriginX :number

Since:
  • 3.0.0
Inherited From:
这个游戏对象的水平显示原点. 原点是一个介于0和1之间的规范化值. 显示原点是一个像素值,基于游戏对象的大小和原点的组合.
Type:
  • number

displayOriginY :number

Since:
  • 3.0.0
Inherited From:
该游戏对象的垂直显示原点. 原点是一个介于0和1之间的规范化值. 显示原点是一个像素值,基于游戏对象的大小和原点的组合.
Type:
  • number

(readonly) displayWidth :number

Since:
  • 3.17.0
此游戏对象的计算显示宽度,基于 `GetBoundingClientRecord` DOM调用. 属性 `width` 保存此DOM元素的未缩放宽度.
Type:
  • number

(readonly) height :number

Since:
  • 3.17.0
此游戏对象的原生(未缩放)高度. 对于一个DOM元素,这个属性是只读的. 属性 `displayHeight` 保存了这个DOM元素的计算边界,并考虑了缩放.
Type:
  • number

ignoreDestroy :boolean

Since:
  • 3.5.0
Inherited From:
Default Value:
  • false
如果此标志设置为 `true` ,此游戏对象将忽略对其销毁方法的所有调用. 这包括可能来自组,容器或场景本身的调用. 虽然它允许你跨场景的持续游戏对象,请理解你是完全 负责管理对此游戏对象的引用.
Type:
  • boolean

(nullable) input :Phaser.Types.Input.InteractiveObject

Since:
  • 3.0.0
Inherited From:
Default Value:
  • null
如果这个游戏对象被允许输入,那么这个属性将包含一个交互对象实例. 一般不会直接设定.而是调用 `zGameObject.SetInteractive()` .
Type:

name :string

Since:
  • 3.0.0
Inherited From:
Default Value:
  • ''
此游戏对象的名称. 默认情况下是空的,Phaser从不填充,这留给开发人员使用.
Type:
  • string

node :Element

Since:
  • 3.17.0
这个游戏对象绑定到的实际的DOM元素.例如,如果您已经创建了一个 `
` 那么这个属性是对dom中那个元素的直接引用.
Type:
  • Element

originX :number

Since:
  • 3.0.0
Inherited From:
Default Value:
  • 0.5
这个游戏对象的水平原点. 原点映射游戏对象的大小和位置之间的关系. 默认值为0.5,这意味着所有游戏对象都基于其中心进行定位. 将该值设置为0意味着该位置现在与游戏对象的左侧相关.
Type:
  • number

originY :number

Since:
  • 3.0.0
Inherited From:
Default Value:
  • 0.5
这个游戏对象的垂直原点. 原点映射游戏对象的大小和位置之间的关系. 默认值为0.5,这意味着所有游戏对象都基于其中心进行定位. 将该值设置为0意味着该位置现在与游戏对象的顶部相关.
Type:
  • number

parent :Element

Since:
  • 3.17.0
游戏实例在启动时创建的父容器的引用.
Type:
  • Element

parentContainer :Phaser.GameObjects.Container

Since:
  • 3.4.0
Inherited From:
此游戏对象的父容器(如果有).
Type:

perspective :number

Since:
  • 3.17.0
父DOM容器的透视CSS属性值_.这决定了z=0 以便给3D定位的元素一些透视.每个3D元素都带有 z > 0变大;z < 0的每个3D元素变得更小.效果的强度是确定的 由该属性的值决定. 有关更多信息,请参见: https://developer.mozilla.org/en-US/docs/Web/CSS/perspective * *更改此值会对所有DOM元素进行全局更改,因为它们共享同一个父容器.**
Type:
  • number

pointerEvents :string

Since:
  • 3.55.0
Sets the CSS `pointerEvents` attribute on the DOM Element 渲染期间. This is 'auto' by 默认. Changing it may have unintended side-effects with internal Phaser input handling, such as dragging, so only change this if you understand the implications.
Type:
  • string

renderFlags :number

Since:
  • 3.0.0
Overrides:
Default Value:
  • 15
与 `RENDER_MASK` 进行比较以确定此游戏对象是否会渲染的标志. 位为0001 | 0010 | 0100 | 1000,分别由组件可见,阿尔法,变换和纹理设置. 如果您的自定义类没有使用这些组件,那么您可以根据需要使用这个位掩码.
Type:
  • number

rotate3d :Phaser.Math.Vector4

Since:
  • 3.17.0
一个矢量4,它包含这个DOM元素在三维空间中围绕一个固定轴的三维旋转. 矢量4中的所有值都被视为度,除非`旋转3摇摆`属性被更改. 有关更多详细信息,请参见以下多媒体数据网络页面: https://developer.mozilla.org/en-US/docs/Web/CSS/transform-function/rotate3d
Type:

rotate3dAngle :string

Since:
  • 3.17.0
表示3D旋转值的单位.默认情况下,这是 `deg` 度,但可以 被更改为任何支持的单位.有关更多详细信息,请参见本页: https://developer.mozilla.org/en-US/docs/Web/CSS/transform-function/rotate3d
Type:
  • string

rotation :number

Since:
  • 3.0.0
Inherited From:
Default Value:
  • 1
这个游戏对象的角度,单位为弧度. 相位器使用右手顺时针旋转系统,其中0为右,π/2为下,+-π为左 和-PI/2. 如果你更喜欢按学位工作,那就去看看 `angle` 酒店吧.
Type:
  • number

scale :number

Since:
  • 3.18.0
Inherited From:
Default Value:
  • 1
这是一个特殊的设置器,允许你设置这个游戏对象的水平和垂直比例 相同的价值,在同一时间.读取该值时,返回的结果为 `(scaleX + scaleY) / 2` . 使用此属性意味着您希望水平和垂直比例彼此相等.如果这个 如果不是这样,请改用 `scaleX` 或 `scaleY` 属性.
Type:
  • number

scaleX :number

Since:
  • 3.0.0
Inherited From:
Default Value:
  • 1
这个游戏对象的水平比例.
Type:
  • number

scaleY :number

Since:
  • 3.0.0
Inherited From:
Default Value:
  • 1
这个游戏对象的垂直比例.
Type:
  • number

scene :Phaser.Scene

Since:
  • 3.0.0
Inherited From:
对该游戏对象所属场景的引用. 游戏对象只能属于一个场景. 您应该将此属性视为只读.您不能移动 通过简单地改变游戏对象到另一个场景.
Type:

scrollFactorX :number

Since:
  • 3.0.0
Inherited From:
Default Value:
  • 1
这个游戏对象的水平滚动因子. 滚动因子控制摄像机的移动对游戏对象的影响. 当相机滚动时,它会改变游戏对象在屏幕上的渲染位置. 它不会改变游戏对象的实际位置值. 值为1意味着它将与摄像机完全同步移动. 值为0意味着它根本不会移动,即使摄像机移动. 其他值控制摄像机运动映射到此游戏对象的程度. 请注意,在以下情况下,不考虑1以外的滚动因子值 计算物理碰撞.物体总是基于它们的世界位置而碰撞,但是会改变 滚动因子是对纹理渲染位置的视觉调整,可以偏移 如果你的代码中没有说明的话.
Type:
  • number

scrollFactorY :number

Since:
  • 3.0.0
Inherited From:
Default Value:
  • 1
这个游戏对象的垂直滚动因子. 滚动因子控制摄像机的移动对游戏对象的影响. 当相机滚动时,它会改变游戏对象在屏幕上的渲染位置. 它不会改变游戏对象的实际位置值. 值为1意味着它将与摄像机完全同步移动. 值为0意味着它根本不会移动,即使摄像机移动. 其他值控制摄像机运动映射到此游戏对象的程度. 请注意,在以下情况下,不考虑1以外的滚动因子值 计算物理碰撞.物体总是基于它们的世界位置而碰撞,但是会改变 滚动因子是对纹理渲染位置的视觉调整,可以偏移 如果你的代码中没有说明的话.
Type:
  • number

skewX :number

Since:
  • 3.17.0
以弧度为单位的角度,通过该角度可以在水平轴上倾斜DOM元素. https://developer.mozilla.org/en-US/docs/Web/CSS/transform
Type:
  • number

skewY :number

Since: