ScaleManager: Ignore Virtual Keyboard

Phaser 3
1

Is it possible to ignore the Virtual Keyboard when scaling using the ScaleManager?

When the Keyboard opens, the height of the canvas shrinks to the remaining space above the Keyboard. Is it possible to prevent this?

I’m using it like this

const config = {
  parent: 'phaser',
  scale: {
    mode: Phaser.Scale.FIT,
    autoCenter: Phaser.Scale.CENTER_BOTH,
    width: 1280,
    height: 720
  },
  // ...

This is the example and its source code.

And a screenshot

Screenshot_20190223-172758
Screenshot_20190223-172758.png1280×640 62 KB

2

I have found a solution by scaling the game manually, checking which is the activeElement and adjusting the overflowY accordingly.

If someone has a better solution, do not hesitate to post is :slight_smile:

This is how it looks now:

// scale phaser
const scalePhaser = () => {
  const w = window.innerWidth
  const h = window.innerHeight

  const defaultWidth = +this.sys.game.config.width
  const defaultHeight = +this.sys.game.config.height

  const scale = Math.min(w / defaultWidth, h / defaultHeight)

  const width = defaultWidth * scale
  const height = defaultHeight * scale

  this.game.canvas.style.width = width + 'px'
  this.game.canvas.style.height = height + 'px'

  this.game.canvas.style.marginTop = `${(h - height) / 2}px`
  this.game.canvas.style.marginLeft = `${(w - width) / 2}px`

  this.game.scale.displaySize.setWidth(width)
  this.game.scale.displaySize.setHeight(height)
}

// scale react
const scaleReact = () => {
  let scale = this.game.scale.displaySize.width / this.game.scale.gameSize.width
  let react = document.getElementById('react')
  if (react) {
    react.style.zoom = `${scale}`
    react.style.top = this.game.canvas.offsetTop / scale + 'px'
    react.style.left = this.game.canvas.offsetLeft / scale + 'px'
    react.style.height = this.cameras.main.displayHeight + 'px'
    react.style.width = this.cameras.main.displayWidth + 'px'
  }
}

// initial phaser scale
scalePhaser()

// initialize react
let react = document.getElementById('react')
if (react) {
  react.style.position = 'absolute'
  react.style.userSelect = 'none'
  render(<App />, react)
  scaleReact()
}

this.scale.on('resize', () => {
  let body = document.getElementById('body')
  if (!body) return

  // if the activeElement is not the body
  // the keyboard is probably open
  // means we do not scale
  // and set the overflow-y to auto
  if (document.activeElement && document.activeElement.tagName !== 'BODY') {
    body.style.overflowY = 'auto'
  } else {
    if (body) body.style.overflowY = 'hidden'
    scalePhaser()
    scaleReact()
  }
})
1 Like