ScaleManager

.Scale. ScaleManager

缩放管理器处理游戏画布的缩放,调整大小和对齐. 处理缩放的方式是将游戏画布设置为固定大小,该大小在 游戏配置.您还可以在游戏配置中定义父容器.如果没有父母, 它将默认使用文档正文.秤管理员将查看可用空间 并相应地缩放画布.缩放是通过设置画布CSS来处理的 宽度和高度属性,保持画布元素本身的宽度和高度不变. 因此,缩放是通过保持核心画布相同的大小和`伸缩`来实现的 它通过它的CSS属性.这与使用 `transform-scale` CSS给出了相同的结果和速度 属性,而不需要浏览器前缀处理. 比例的计算受边界父级大小的影响很大,边界父级大小是计算出的 画布父级的尺寸.父元素的CSS规则在 秤管理器的操作.例如,如果父对象没有定义的宽度或高度,则操作 像自动定心将不能达到所需的结果.秤管理器与 你在游戏页面上设置的CSS,而不是控制它. ####父级和显示画布包含准则: -设置(游戏画布的)父元素的样式,以控制父元素的大小,从而控制游戏的大小和布局. -父元素的CSS样式应该有效地应用最大(和最小)边界行为. -父元素不应应用填充,因为这是不考虑的. 如果需要填充,请将其应用于父代的父代,或者将边距应用于父代. 如果您需要在游戏容器周围添加边框,边距或任何其他CSS,请使用父元素 将CSS应用于此,否则你将不断调整游戏容器的大小. -显示画布布局CSS样式(即.边距,大小)不应被更改/指定为 它们可以由秤管理器更新. ####缩放模式 缩放的处理方式由 `scaleMode` 属性决定.默认值为 `NONE` , 这完全阻止了Phaser缩放或触摸画布或其父对象.在这种模式下,您是 负责所有的缩放.其他缩放模式为您提供自动缩放. 如果你希望调整你的游戏,使它总是适合父母的可用空间,你 应该使用缩放模式 `FIT` .查看其他缩放模式的文档,了解有哪些选项 可用.下面是一个基本配置,显示了如何设置此缩放模式: ```javascript scale: { parent: 'yourgamediv', mode: Phaser.Scale.FIT, width: 800, height: 600 } ``` 将 `scale` 配置对象放入游戏配置中. 如果您希望画布直接调整大小,以便画布本身填充可用空间 (即.它没有缩放,它被调整大小),然后使用缩放模式.这将为您提供1:1的映射 画布像素与游戏大小的比例.在这种模式下,CSS不是用来缩放画布的,它是经过调整的 填充父级中所有可用的空间.你应该非常小心的大小 当你这样做的时候,你要创建画布,因为面积越大,图形处理器要做的工作就越多 很容易快速达到填充率极限. 对于复杂的定制缩放需求,您可能应该考虑使用`调整大小`缩放模式, 有了你自己的限制,重新:画布尺寸和管理游戏场景的缩放 你自己.然而,对于绝大多数游戏来说, `FIT` 模式可能是最常用的. 请理解秤管理员无法创造奇迹.它所做的只是缩放你的游戏画布 尽最大努力,根据它能从周围地区推断出的情况.各种环境都有 由你来引导和帮助画布定位,尤其是当内置到渲染中时 像React和Vue这样的框架.如果您的页面需要元标签来防止用户缩放手势,等等 就像,这取决于你确保它们出现在html中. #### Centering 您也可以让游戏画布自动居中.同样,这在很大程度上依赖于父母 正确配置和样式,因为中心偏移完全基于可用空间 在父元素中.默认情况下,居中是禁用的,或者可以水平,垂直, 或者两者都有.这里有一个例子: ```javascript scale: { parent: 'yourgamediv', autoCenter: Phaser.Scale.CENTER_BOTH, width: 800, height: 600 } ``` ####全屏API 如果浏览器支持,您可以将游戏发送到全屏模式.在这种模式下,游戏将充满 整个显示,删除所有浏览器界面和屏幕上出现的任何其他内容.它将留在这里 模式,直到您的游戏禁用它,或者直到用户退出或在桌面上按下ESCape.这是一个 从浏览器获得桌面游戏体验的好方法,但是它需要一个现代的浏览器 来处理它.一些移动浏览器也支持这一点.

Constructor

new ScaleManager(game)

Since:
  • 3.16.0
Parameters:
Name Type Description
game Phaser.Game 相位器的参考.游戏实例.

Extends

Members

(readonly) _resetZoom :boolean

Since:
  • 3.19.0
修改游戏缩放因子时设置的内部标志.
Type:
  • boolean

autoCenter

Since:
  • 3.16.0
自动将画布置于父画布的中心?不同的对中模式有: 1. 不居中. 2. 水平和垂直居中. 3. 水平居中. 4. 垂直居中. 请注意,为了使游戏画布居中,您必须指定一个父级 ,或者画布父级是document.body.

autoRound :boolean

Since:
  • 3.16.0
如果设置,画布大小将自动通过数学. 这将产生舍入的像素显示值,这对传统的性能很重要 和低功耗设备,但代价是在某些浏览器窗口中无法实现 `perfect` 功能.
Type:
  • boolean

baseSize :Phaser.Structs.Size

Since:
  • 3.16.0
基本尺寸组件. 修改后的游戏大小,即自动舍入的游戏大小,用于设置画布的宽度和高度 (但不是CSS样式)
Type:

canvas :HTMLCanvasElement

Since:
  • 3.16.0
Phaser用来渲染游戏的HTML画布元素的引用.
Type:
  • HTMLCanvasElement

canvasBounds :Phaser.Geom.Rectangle

Since:
  • 3.16.0
画布元素的DOM边界.
Type:

dirty :boolean

Since:
  • 3.16.0
秤管理器的脏状态. 如果父大小和当前大小之间有变化,则进行设置.
Type:
  • boolean

displayScale :Phaser.Math.Vector2

Since:
  • 3.16.0
基本大小和canvasBounds之间的比例因子.
Type:

displaySize :Phaser.Structs.Size

Since:
  • 3.16.0
显示大小组件. 用于画布样式的大小,考虑比例模式,父级和其他值.
Type:

fullscreen

Since:
  • 3.16.0
对设备的引用.全屏对象.

(nullable) fullscreenTarget :any

Since:
  • 3.16.0
发送到全屏模式的DOM元素.
Type:
  • any

(readonly) game :Phaser.Game

Since:
  • 3.15.0
相位器的参考.游戏实例.
Type:

gameSize :Phaser.Structs.Size

Since:
  • 3.16.0
游戏尺寸组件. 游戏配置中要求的未修改的游戏大小(原始宽度/高度), 用于世界边界,照相机等
Type:

(readonly) height :number

Since:
  • 3.16.0
游戏高度. 这通常是游戏配置中给出的大小.
Type:
  • number

(readonly) isFullscreen :boolean

Since:
  • 3.16.0
浏览器目前是否处于全屏模式?
Type:
  • boolean

(readonly) isGameLandscape :boolean

Since:
  • 3.16.0
游戏维度是风景吗?(即.比他们高更宽) 这不同于设备本身处于横向.
Type:
  • boolean

(readonly) isGamePortrait :boolean

Since:
  • 3.16.0
游戏尺寸是纵向的吗?(即.比它们宽高) 这不同于设备本身处于纵向.
Type:
  • boolean

(readonly) isLandscape :boolean

Since:
  • 3.16.0
设备是否按照方向应用编程接口的报告处于横向? 该值通常仅在移动设备上可用.
Type:
  • boolean

(readonly) isPortrait :boolean

Since:
  • 3.16.0
设备是否按照方向应用编程接口的报告处于纵向方向? 该值通常仅在移动设备上可用.
Type:
  • boolean

orientation

Since:
  • 3.16.0
当前设备方向. 定向事件是通过设备定向应用编程接口发送的,通常只在移动浏览器上发送.

(nullable) parent :any

Since:
  • 3.16.0
画布的父对象.通常是一个div,或者浏览器窗口,或者在非浏览器环境中什么都没有. 这在游戏配置中被设置为 `parent` 属性.如果未定义(或不存在),它将默认 使用文档正文.如果特别设置为 `null` ,移相器将忽略所有父操作.
Type:
  • any

parentIsWindow :boolean

Since:
  • 3.16.0
父元素是浏览器窗口吗?
Type:
  • boolean

parentSize :Phaser.Structs.Size

Since:
  • 3.16.0
父尺寸组件.
Type:

resizeInterval :number

Since:
  • 3.16.0
检查浏览器大小是否改变需要多少毫秒? 大多数现代浏览器会发送一个`缩放`事件,缩放管理器会监听该事件. 然而,旧的浏览器不能做到这一点,或者说不能始终如一地做到这一点,所以我们求助于 基于时间间隔的更传统的 `size check` .你可以控制它的频率 在这里检查.
Type:
  • number

scaleMode

Since:
  • 3.16.0
游戏比例模式.

(readonly) width :number

Since:
  • 3.16.0
游戏宽度. 这通常是游戏配置中给出的大小.
Type:
  • number

zoom :number

Since:
  • 3.16.0
游戏缩放因子. 这个值允许你将你的游戏基本尺寸乘以给定的缩放因子. 然后在计算显示尺寸时使用这一点,即使在 `NONE` 情况下也是如此. 如果你根本不想让Phaser接触画布样式,这个值应该是1. 也可以设置为 `MAX_ZOOM` ,在这种情况下,缩放值将基于 游戏大小和父母的可用空间.
Type:
  • number

Methods

addListener(event, fn, contextopt) → {this}

Since:
  • 3.0.0
Inherited From:
为给定事件添加侦听器.
Parameters:
Name Type Attributes Default Description
event string | symbol 事件名称.
fn function 侦听器函数.
context * <optional>
this 用来调用侦听器的上下文.
Returns:
`this`.
Type
this

(protected) boot()

Since:
  • 3.16.0
启动处理器由Phaser调用.游戏刚开始的时候. 渲染器现在已经可用,画布已经添加到DOM中.
Fires:

destroy()

Since:
  • 3.16.0
Overrides:
销毁此比例管理器,释放对外部资源的所有引用. 一旦销毁,秤管理器就不能再使用了.

emit(event, …argsopt) → {boolean}

Since:
  • 3.0.0
Inherited From:
调用为给定事件注册的每个侦听器.
Parameters:
Name Type Attributes Description
event string | symbol 事件名称.
args * <optional>
<repeatable>
将传递给事件处理程序的附加参数.
Returns:
`true` 如果事件有侦听器,则为 `false` .
Type
boolean

eventNames() → {Array.<(string|symbol)>}

Since:
  • 3.0.0
Inherited From:
返回一个数组,列出发射器已注册侦听器的事件.
Returns:
Type
Array.<(string|symbol)>

getFullscreenTarget() → {object}

Since:
  • 3.16.0
获取进入全屏模式时使用的目标元素的内部方法.
Returns:
全屏目标元素.
Type
object

getMaxZoom() → {number}

Since:
  • 3.16.0
基于当前计算并返回最大可能的缩放因子 父母和游戏大小.如果父对象没有尺寸(即.未设计的div), 或者比未缩放的游戏小,那么这将返回值1(没有缩放)
Returns:
最大可能缩放因子.这个值至少总是至少为1.
Type
number

getParent(config)

Since:
  • 3.16.0
根据游戏配置确定游戏画布的父元素(如果有).
Parameters:
Name Type Description
config Phaser.Types.Core.GameConfig 游戏配置对象.

getParentBounds() → {boolean}

Since:
  • 3.16.0
计算父边界的大小并更新 `parentSize` 组件(如果画布有dom父级).
Returns:
如果父边界改变了大小,则为 `true` ,否则为 `false` .
Type
boolean

listenerCount(event) → {number}

Since:
  • 3.0.0
Inherited From:
返回监听给定事件的侦听器数量.
Parameters:
Name Type Description
event string | symbol 事件名称.
Returns:
侦听器的数量.
Type
number

lockOrientation(orientation) → {boolean}

Since:
  • 3.16.0
尝试使用屏幕方向应用编程接口锁定网络浏览器的方向. 这个API只有现代移动浏览器才有. 详见https://developer.Mozilla.org/en-US/docs/Web/API/Screen/lock orientation.
Parameters:
Name Type Description
orientation string 您想要锁定浏览器的方向.应该是一个API字符串,比如 `landscape` , `landscape-primary` , `portrait`等.
Returns:
如果方向锁定成功,则为 `true` ,否则为 `false` .
Type
boolean

off(event, fnopt, contextopt, onceopt) → {this}

Since:
  • 3.0.0
Inherited From:
移除给定事件的侦听器.
Parameters:
Name Type Attributes Description
event string | symbol 事件名称.
fn function <optional>
仅移除与此函数匹配的侦听器.
context * <optional>
仅移除具有此上下文的侦听器.
once boolean <optional>
仅删除一次性侦听器.
Returns:
`this`.
Type
this

on(event, fn, contextopt) → {this}

Since:
  • 3.0.0
Inherited From:
为给定事件添加侦听器.
Parameters:
Name Type Attributes Default Description
event string | symbol 事件名称.
fn function 侦听器函数.
context * <optional>
this 用来调用侦听器的上下文.
Returns:
`this`.
Type
this

once(event, fn, contextopt) → {this}

Since:
  • 3.0.0
Inherited From:
为给定事件