Jump to content

pixi.stage.width and pixi.stage.height take a scaling factor at the beginning, but take concrete pixel values on later usage


Reilaen
 Share

Recommended Posts

Hi everyone,

I am having some trouble figuring out what I am doing wrong and hope someone can help me out here.

What I try to achieve:
To resize a renderer and container according to the limits of an HTML element without care if the result gets distorted or not.

What my problem is:
I use the resize function to set pixi.stage.width and pixi.stage.height to the HTML element's clientWidth and clientHeight, and also resize the pixi.renderer to the HTML element's dimension.

Upon loading the page, I only see a blue canvas, but when I change the window size it works as intended.

I found out that the reason for this is, that pixi.stage.width and pixi.stage.height take a scaling factor in the first execution of resize, but upon a resize via a window.onresize they take concrete pixel values.

What my goal is:
I don't care if I have to put in the pixel values or have to calculate a factor, but I would like to use one method for resizing the renderer and stage the first time and one every resize.

That is how my current code looks:

import * as PIXI from 'pixi.js'

const mainNode = document.getElementById('main')

const pixi = new PIXI.Application({
  resolution: window.devicePixelRatio || 1,
  antialias: true,
  autoDensity: true,
  roundPixels: true
})

const background = PIXI.Sprite.from('./images/gate_tag.jpg')
pixi.stage.addChild(background)

mainNode.appendChild(pixi.view)

resize(pixi)

window.onresize = () => {
  resize(pixi)
}

export function resize(pixi) {
  pixi.stage.width = mainNode.clientWidth
  pixi.stage.height = mainNode.clientHeight

  pixi.renderer.resize(mainNode.clientWidth, mainNode.clientHeight)
}

 

Link to comment
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Loading...
 Share

  • Recently Browsing   0 members

    • No registered users viewing this page.
×
×
  • Create New...