跳转至

ScaleManager窗口适配

参考《Phaser.Game配置文件详例》,并《深入理解新的Phaser3尺寸管理器》

Phaser.Scale.ScaleManager尺寸管理器/窗口适配#

尺寸管理器处理游戏画布的尺寸、调整大小和对齐。

处理尺寸的方式是通过将游戏画布设置为固定的大小,这是在游戏配置中定义的。您还可以在游戏配置中定义父容器。如果没有给出父容器,它将默认使用文档体。尺寸管理器将查看父容器内的可用空间,并相应地尺寸画布。尺寸是通过设置画布的CSS宽度和高度属性来处理的,而不影响画布元素本身的宽度和高度。因此,通过保持核心画布的大小不变,并通过其CSS属性对其进行 "拉伸 "来实现尺寸。这与使用transform-scale CSS属性的结果和速度是一样的,而不需要浏览器前缀处理。

尺度的计算很大程度上受绑定父元素尺寸的影响,也就是画布父元素的计算尺寸。父元素的CSS规则在Scale Manager的操作中起着重要作用。例如,如果父元素没有定义宽度或高度,那么像自动居中这样的操作将无法达到所需的结果。Scale Manager与您在游戏页面上设置的CSS一起工作,而不是控制它。

画布中的父级显示元素的原则:#

  • Style the Parent element (of the game canvas) to control the Parent size and thus the games size and layout.
  • The Parent element's CSS styles should effectively apply maximum (and minimum) bounding behavior.
  • The Parent element should not apply a padding as this is not accounted for. If a padding is required apply it to the Parent's parent or apply a margin to the Parent. If you need to add a border, margin or any other CSS around your game container, then use a parent element and apply the CSS to this instead, otherwise you'll be constantly resizing the shape of the game container.
  • The Display canvas layout CSS styles (i.e. margins, size) should not be altered / specified as they may be updated by the Scale Manager.

Scale Modes#

尺寸模式的细节:

Namespace: ScaleModes

Phaser.Scale. ScaleModes

Members:

  • FIT :number // 单向适配,保持比例,另一向可能留空
  • ENVELOP :number // 双向遮满,保持比例,其中一向可能超出
  • WIDTH_CONTROLS_HEIGHT :number // 适配宽度,保持比例
  • HEIGHT_CONTROLS_WIDTH :number // 适配高度,保持比例
  • RESIZE :number // 双向适配,调整比例
  • NONE :number

ENVELOP:

Centering#

居中模式

Namespace:Center

Phaser.Scale.Center

Members:

  • CENTER_BOTH :number
  • CENTER_HORIZONTALLY :number
  • CENTER_VERTICALLY :number
  • NO_CENTER :number

Fullscreen API#

new ScaleManager(game)#

Extends#

Members#

_resetZoom :boolean#

autoCenter :Phaser.Scale.CenterType#

autoRound :boolean#

baseSize :Phaser.Structs.Size#

Base Size组件。 调整过的游戏尺寸,也就是自动取整的gameSize,用于设置画布的宽、高(不是CSS样式)。

canvas :HTMLCanvasElement#

canvasBounds :Phaser.Geom.Rectangle#

dirty :boolean#

displayScale :Phaser.Math.Vector2#

displaySize :Phaser.Structs.Size#

Display Size组件。用于canvas style(画布css样式)的尺寸, 已经计算了尺寸模式、父容器等因素的值。

fullscreen :Phaser.Device.Fullscreen#

fullscreenTarget :any#

game :Phaser.Game#

gameSize :Phaser.Structs.Size#

Game Size组件。 按照游戏配置中的要求(原始宽、高)的、未修改的游戏尺寸,用于世界边界、相机等。

height :number#

游戏的高度。通常是游戏配置中的尺寸。

isFullscreen :boolean#

isGameLandscape :boolean#

isGamePortrait :boolean#

isLandscape :boolean#

isPortrait :boolean#

orientation :Phaser.Scale.OrientationType#

parent :any#

parentIsWindow :boolean#

parentSize :Phaser.Structs.Size#

resizeInterval :number#

scaleMode :Phaser.Scale.ScaleModeType#

width :number#

游戏的宽度。通常是游戏配置中的尺寸。

console.log(
    // Game设置为width:1024,height:768(scale中的同名设置会覆盖它们)
    // 画面有缩放
    `this.game.scale.width: ${this.game.scale.width}`,
    `this.game.scale.height: ${this.game.scale.height}`,
    `this.game.scale.baseSize: ${this.game.scale.baseSize}`,
    `this.game.scale.gameSize: ${this.game.scale.gameSize}`,
    `this.game.scale.displaySize: ${this.game.scale.displaySize}`
    )
    // this.game.scale.width: 1024
    // this.game.scale.height: 768
    // this.game.scale.baseSize: [{ Size (width=1024 height=768 aspectRatio=1.3333333333333333 aspectMode=0) }]
    // this.game.scale.gameSize: [{ Size (width=1024 height=768 aspectRatio=1.3333333333333333 aspectMode=0) }] 
    // this.game.scale.displaySize: [{ Size (width=1161 height=870.75 aspectRatio=1.3333333333333333 aspectMode=3) }]

zoom :number#

?? 推拉模式

Namespace: Zoom Phaser.Scale. Zoom Members MAX_ZOOM :number NO_ZOOM :number ZOOM_2X :number ZOOM_4X :number

Methods#

addListener(event, fn [, context])#

boot()#

destroy()#

emit(event [, args])#

eventNames()#

getFullscreenTarget()#

getMaxZoom()#

getParent(config)#

getParentBounds()#

listenerCount(event)#

lockOrientation(orientation)#

off(event [, fn] [, context] [, once])#

on(event, fn [, context])#

once(event, fn [, context])#

onFullScreenChange()#

onFullScreenError()#

parseConfig(config)#

preBoot()#

refresh( [previousWidth] [, previousHeight])#

removeAllListeners( [event])#

removeFullscreenTarget()#

removeListener(event [, fn] [, context] [, once])#

resize(width, height)#

setGameSize(width, height)#

setMaxZoom()#

setParentSize(width, height)#

setZoom(value)#

shutdown()#

startFullscreen( [fullscreenOptions])#

startListeners()#

step(time, delta)#

stopFullscreen()#

stopListeners()#

toggleFullscreen( [fullscreenOptions])#

transformX(pageX)#

transformY(pageY)#

updateBounds()#

updateCenter()#

updateOrientation()#

updateScale()#

#