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#

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

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14

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()#

#

评论