scaled and rotated stage not taking touch inputs

[josprachi]

Hello, I am working on a game with pixi js. to make the game look normalized on every screen,

im scaled the stage as follows

this.scale=Math.max(this.viewWidth, this.viewWidth) / (2048 * this.ratio);

and on orientation change I am rotating the whole stage.

now my problem is, if i have any buttons on stage, who are at top or at right side of stage, they do not respond to any touch event. Please help i'm in a very big trouble. 

I tried to use mappositiontopoint as well. but didn't understand how to correctly use here.

Please help 
 

[ivan.popelyshev]

> I tried to use mappositiontopoint as well. but didn't understand how to correctly use here.

add scale there and it should work.

[josprachi]

2 hours ago, ivan.popelyshev said:

> I tried to use mappositiontopoint as well. but didn't understand how to correctly use here.

add scale there and it should work.

where should i add scale? should i replace 

resolutionMultiplier with scale? I tried that too but it didn't work. Also If I calculate the scale as follows:

  this.scale=Math.max(this.viewWidth, this.viewWidth) / (2048 * this.ratio); ,

i get a value that is different than if i set my stage to scale, as follws:

this.scale=Math.max(this.viewWidth, this.viewWidth) / (2048 * this.ratio);

I get different value.

I am going crazy and my current code is as follows:

initStage() {
    // initialize rendering and set correct sizing
    this.ratio = window.devicePixelRatio;
      this.renderer = PIXI.autoDetectRenderer({
      transparent: true,
      antialias: true,
      resolution: this.ratio,
      width: view.clientWidth,
      height: view.clientHeight,
    });
    this.element = this.renderer.view;
    this.imanager=this.renderer.plugins.interaction;
    this.element.style.width = `${this.renderer.width / this.ratio}px`;
    this.element.style.height = `${this.renderer.height / this.ratio}px`;
    view.appendChild(this.element);
    // center stage and normalize scaling for all resolutions
    this.stage = new PIXI.Container();
    this.stage.position.set(view.clientWidth / 2, view.clientHeight / 2);    
    this.viewWidth = this.renderer.width;
    this.viewHeight = this.renderer.height;
    this.stage.interactive = true;
    this.stage.interactiveChildren=true;  
      this.stage.calculateBounds();
  this.scale=Math.max(this.viewWidth, this.viewWidth) / (2048 * this.ratio);
    if (window.orientation == 90 || window.orientation == -90) {
      this.scale=Math.max(this.viewWidth, this.viewWidth) / (2048 * this.ratio);
      this.stage.scale.set(Math.max(this.viewWidth, this.viewWidth) / (2048 * this.ratio));
      this.stage.rotation = 0;
    }
    else {

      if (window.matchMedia("(orientation: landscape)").matches) {
       this.stage.scale.set(Math.max(this.viewWidth, this.viewWidth) / (2048 * this.ratio));
        this.stage.rotation = 0;
      }
       else if (window.matchMedia("(orientation: portrait)").matches) {
        this.stage.scale.set(Math.max(this.viewHeight, this.viewWidth) / (2048 * this.ratio));
        this.stage.rotation = Math.PI / 2;
        this.rotated= true;
      }
    }
  //  var rect_ = this.imanager.interactionDOMElement.getBoundingClientRect();
    this.imanager.mapPositionToPoint = (point, x, y) => {
    var rect;

  // IE 11 fix
  if (!this.imanager.interactionDOMElement.parentElement) {
    rect = { x: 0, y: 0, width: 0, height: 0 };
  }
  else {
    rect = this.imanager.interactionDOMElement.getBoundingClientRect();
  } 
  let px= new PIXI.Point(x,y);
      //  console.log(this.stage.toLocal(px).x+";"+this.stage.toLocal(px).y);
//point.x=x;
//point.y=y;  


var resolutionMultiplier = 1.0 / this.resolution;

  // added an extra if, so we don't break normal behaviour
  if (this.rotation==Math.PI/2) {
    // flipped rect.width and rect.height. Ez moneyz
    point.x = ((x - rect.left) * (this.imanager.interactionDOMElement.width / rect.height)) * this.stage.scale._x;//replaced resolutionMultiplier by scale
    point.y = ((y - rect.top) * (this.imanager.interactionDOMElement.height / rect.width)) * this.stage.scale._y;
  }
  else {
    // original code
    point.x = ((x - rect.left) * (this.imanager.interactionDOMElement.width / rect.width)) * this.stage.scale._x;
    point.y = ((y - rect.top) * (this.imanager.interactionDOMElement.height / rect.height)) * this.stage.scale._y;
  } 
        }

    this.prevOrientation= this.stage.rotation;
    this.stage.sortableChildren = true;

  }

Please tell me where I am going wrong?

Edited March 7, 2021 by josprachi
deleted a line while entering the code

[josprachi]

Just now, josprachi said:

where should i add scale? should i replace 

resolutionMultiplier with scale? I tried that too but it didn't work. Also If I calculate the scale as follows:

  this.scale=Math.max(this.viewWidth, this.viewWidth) / (2048 * this.ratio); ,

i get a value that is different than if i set my stage to scale, as follws:

this.scale=Math.max(this.viewWidth, this.viewWidth) / (2048 * this.ratio);

I get different value.

I am going crazy and my current code is as follows:

initStage() {
    // initialize rendering and set correct sizing
    this.ratio = window.devicePixelRatio;
      this.renderer = PIXI.autoDetectRenderer({
      transparent: true,
      antialias: true,
      resolution: this.ratio,
      width: view.clientWidth,
      height: view.clientHeight,
    });
    this.element = this.renderer.view;
    this.imanager=this.renderer.plugins.interaction;
    this.element.style.width = `${this.renderer.width / this.ratio}px`;
    this.element.style.height = `${this.renderer.height / this.ratio}px`;
    view.appendChild(this.element);
    // center stage and normalize scaling for all resolutions
    this.stage = new PIXI.Container();
    this.stage.position.set(view.clientWidth / 2, view.clientHeight / 2);    
    this.viewWidth = this.renderer.width;
    this.viewHeight = this.renderer.height;
    this.stage.interactive = true;
    this.stage.interactiveChildren=true;  
      this.stage.calculateBounds();
  this.scale=Math.max(this.viewWidth, this.viewWidth) / (2048 * this.ratio);
    if (window.orientation == 90 || window.orientation == -90) {
      this.scale=Math.max(this.viewWidth, this.viewWidth) / (2048 * this.ratio);
      this.stage.rotation = 0;
    }
    else {

      if (window.matchMedia("(orientation: landscape)").matches) {
       this.stage.scale.set(Math.max(this.viewWidth, this.viewWidth) / (2048 * this.ratio));
        this.stage.rotation = 0;
      }
       else if (window.matchMedia("(orientation: portrait)").matches) {
        this.stage.scale.set(Math.max(this.viewHeight, this.viewWidth) / (2048 * this.ratio));
        this.stage.rotation = Math.PI / 2;
        this.rotated= true;
      }
    }
  //  var rect_ = this.imanager.interactionDOMElement.getBoundingClientRect();
    this.imanager.mapPositionToPoint = (point, x, y) => {
    var rect;

  // IE 11 fix
  if (!this.imanager.interactionDOMElement.parentElement) {
    rect = { x: 0, y: 0, width: 0, height: 0 };
  }
  else {
    rect = this.imanager.interactionDOMElement.getBoundingClientRect();
  } 
  let px= new PIXI.Point(x,y);
      //  console.log(this.stage.toLocal(px).x+";"+this.stage.toLocal(px).y);
//point.x=x;
//point.y=y;  


var resolutionMultiplier = 1.0 / this.resolution;

  // added an extra if, so we don't break normal behaviour
  if (this.rotation==Math.PI/2) {
    // flipped rect.width and rect.height. Ez moneyz
    point.x = ((x - rect.left) * (this.imanager.interactionDOMElement.width / rect.height)) * this.stage.scale._x;//replaced resolutionMultiplier by scale
    point.y = ((y - rect.top) * (this.imanager.interactionDOMElement.height / rect.width)) * this.stage.scale._y;
  }
  else {
    // original code
    point.x = ((x - rect.left) * (this.imanager.interactionDOMElement.width / rect.width)) * this.stage.scale._x;
    point.y = ((y - rect.top) * (this.imanager.interactionDOMElement.height / rect.height)) * this.stage.scale._y;
  } 
        }

    this.prevOrientation= this.stage.rotation;
    this.stage.sortableChildren = true;

  }

Please tell me where I am going wrong?

It is displaying properly. But not taking touch input!