Pixi.js: [Mobile Support] Stretch to screen width, but keep height original

[peterwilli]

Hi guys,

I'm currently using PIXI v3 for a smaller-scale game. I'm used to bigger engines (in terms of size and features) like Unity, but PIXI is more suited for a game like this.

I'm currently testing in-browser but would like to deploy my game to mobile and have been testing in mobile browsers along the way. So far all good, but I would like to implement a full-screen resolution system I'm used to back in Unity.

It worked like this: the width of the screen is always stretched out, but the height was not scaled. Using this technique (which is default behaviour for all Unity games) you only have to take the height into account, and offers a great trade-off between 'lazy' scaling and keeping track of the screen manually, especially if you make a landscape or portrait-only game.

I would like to replicate this behaviour but so far haven't found anything useful.

Thanks in advance for the help!

[peterwilli]

I figured it out!

initRenderer = ->
  rendererOptions =
    antialiasing: false
    transparent: false
    resolution: window.devicePixelRatio
    autoResize: true

  GAME_WIDTH = 480
  GAME_HEIGHT = 800

  resize = ->
    # Determine which screen dimension is most constrained
    ratio = window.innerWidth / GAME_WIDTH
    # Scale the view appropriately to fill that dimension
    stage.scale.x = stage.scale.y = ratio
    # Update the renderer dimensions
    renderer.resize window.innerWidth, window.innerHeight
    screenHeight = window.innerHeight / ratio
    return

  # Create the canvas in which the game will show, and a
  # generic container for all the graphical objects
  @renderer = PIXI.autoDetectRenderer(GAME_WIDTH, GAME_HEIGHT, rendererOptions)
  # Put the renderer on screen in the corner
  renderer.view.style.position = 'absolute'
  renderer.view.style.top = '0px'
  renderer.view.style.left = '0px'
  # The stage is essentially a display list of all game objects
  # for Pixi to render; it's used in resize(), so it must exist
  @stage = new (PIXI.Container)
  # Size the renderer to fill the screen
  resize()
  # Actually place the renderer onto the page for display
  document.body.appendChild renderer.view
  # Listen for and adapt to changes to the screen size, e.g.,
  # user changing the window or rotating their device
  window.addEventListener 'resize', resize

This renders the stage with fixed-width but scales the height freely. Hope someone can use this as well!

After this you can use screenHeight as a base to scale your game elements based on height, mimicking Unity3D's resize engine.

Note: screenHeight is not the actual screen height in pixels. It's the total 'virtual' pixels amount your game occupies in the height.

Using this example, you can also make the same behaviour for width if you like.

[lock[bot]]

This thread has been automatically locked since there has not been any recent activity after it was closed. Please open a new issue for related bugs.