Обновлять PIXI JS canvas, пока вкладка не сфокусирована - PullRequest
Новая
       24

Обновлять PIXI JS canvas, пока вкладка не сфокусирована

0 голосов
/ 16 июня 2019

Я хочу знать, возможно ли обновить приложение PIXI JS, пока вкладка, на которой находится холст, не сфокусирована.Например, если у меня на одной вкладке запущено приложение PIXI, но я переключаюсь на другую, приложение PIXI перестает работать.Вот некоторый пример кода, который я взял (скопировано из учебника github) 

//Aliases
let Application = PIXI.Application,
    Container = PIXI.Container,
    loader = PIXI.loader,
    resources = PIXI.loader.resources,
    TextureCache = PIXI.utils.TextureCache,
    Sprite = PIXI.Sprite,
    Rectangle = PIXI.Rectangle;

//Create a Pixi Application
let app = new Application({ 
    width: 256, 
    height: 256,                       
    antialias: true, 
    transparent: false, 
    resolution: 1
  }
);

//Add the canvas that Pixi automatically created for you to the HTML document
document.body.appendChild(app.view);

loader
  .add("images/cat.png")
  .load(setup);

//Define any variables that are used in more than one function
let cat;

function setup() {

  //Create the `cat` sprite 
  cat = new Sprite(resources["images/cat.png"].texture);
  cat.y = 96; 
  app.stage.addChild(cat);

  //Start the game loop 
  app.ticker.add(delta => gameLoop(delta));
}

function gameLoop(delta){

  //Move the cat 1 pixel 
  cat.x += 1;

  //Optionally use the `delta` value
  //cat.x += 1 + delta;
}

Когда изображение сфокусировано на вкладке, изображение кошки перемещается по холсту, но когда я переключаюсь на другую вкладку, оно остается на той же самой странице.положение, пока я не переключусь обратно на вкладку с холстом.Есть ли какой-нибудь возможный способ сделать так, чтобы позиция кота обновлялась, даже когда вкладка не сфокусирована?

1 Ответ

0 голосов
/ 16 июня 2019

Различные методы анимации браузера (setTimeout, setInterval и requestAnimationFrame) все предназначены для приостановки, если вкладка не является активной вкладкой.

Есть способ сделать то, что вы просите, используя Web Worker. См. Второй ответ на этот вопрос для реализации: Как заставить setInterval также работать, когда вкладка неактивна в Chrome?

По сути, переместите app.ticker.add... в Web Worker и попросите его связаться с вкладкой, отправляя сообщение 'tick' каждый кадр. Этот пример использует setInterval вместо app.ticker (который использует requestAnimationFrame под капотом), но идея та же.

...