Есть ли какое-нибудь решение для отзывчивости в pixi.js, работающем в новейшей версии? - PullRequest
Новая
       65

Есть ли какое-нибудь решение для отзывчивости в pixi.js, работающем в новейшей версии?

0 голосов
/ 25 января 2019

Я пытаюсь сделать отзывчивый холст с адаптивным контентом.Я перепробовал все варианты, которые нашел в сети, но большинство из них устарели или не работали с моим кодом.Я хочу получить эффект, когда фон будет покрывать все окна (действуя как background: cover), и «бутылка» с отзывчивостью.

PS.Я использую pixi.js v4.8.5 (самое новое) 

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
  </head>
  <style>
    * {
      margin: 0;
      padding: 0;
    }
    html,
    body {
      width: 100%;
      height: 100%;
      overflow: hidden;
      margin: 0;
    }
  </style>
  <script src="js/pixi.js"></script>
  <script src="js/pixi-layers.js"></script>
  <script src="js/pixi-lights.js"></script>
  <body>
    <script type="text/javascript">
      var size = [1920, 1080];
      var ratio = size[0] / size[1];
      var app = new PIXI.Application(size[0], size[1]);

      document.body.appendChild(app.view);

      var stage = (app.stage = new PIXI.display.Stage());
      var bg = new PIXI.extras.TilingSprite(
        PIXI.Texture.fromImage('images/background2.jpg'),
        size[0],
        size[1]
      );

      bg.tint = 0x808080;
      stage.addChild(bg);

      var diffuseLayer = new PIXI.display.Layer(PIXI.lights.diffuseGroup);
      stage.addChild(diffuseLayer);

      var diffuseBlackSprite = new PIXI.Sprite(diffuseLayer.getRenderTexture());
      diffuseBlackSprite.tint = 0;

      stage.addChild(diffuseBlackSprite);
      stage.addChild(new PIXI.display.Layer(PIXI.lights.normalGroup));
      stage.addChild(new PIXI.display.Layer(PIXI.lights.lightGroup));
      stage.addChild(new PIXI.lights.AmbientLight(null, 0.6));
      var light = new PIXI.lights.PointLight(0xffffff, 1);
      light.position.set(525, 160);
      stage.addChild(light);
      app.ticker.add(() => {
        light.position.copy(app.renderer.plugins.interaction.mouse.global);
      });

      var lightLoader = new PIXI.loaders.Loader();
      lightLoader
        .add('block_diffuse', 'images/bottle.png')
        .add('block_normal', 'images/bottle-diffuse.png')
        .load(onAssetsLoaded);

      function onAssetsLoaded(loader, res) {
        stage.addChild(createBlock(2));
      }

      function createBlock(x, y) {
        var container = new PIXI.Container();
        container.position.set(x, y);

        container.x = (app.screen.width - container.width) / 2;
        container.y = (app.screen.height - container.height) / 2;
        var diffuseSprite = new PIXI.Sprite(
          lightLoader.resources.block_diffuse.texture
        );
        diffuseSprite.parentGroup = PIXI.lights.diffuseGroup;
        diffuseSprite.anchor.set(0.5);
        var normalSprite = new PIXI.Sprite(
          lightLoader.resources.block_normal.texture
        );
        normalSprite.parentGroup = PIXI.lights.normalGroup;
        normalSprite.anchor.set(0.5);
        container.addChild(diffuseSprite);
        container.addChild(normalSprite);
        return container;
      }
    </script>
  </body>
</html>
...