[2D WebGL][pixiJS] Renderer, Ticker, & Stage

그래픽스/WebGl

[2D WebGL][pixiJS] Renderer, Ticker, & Stage

Rainbow🌈Coder 2022. 5. 13. 00:24

728x90

코드 수정전

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />

    <title>Document</title>
    <style>
      body {
        margin: 0;
      }
      canvas {
        display: block;
        background-color: blue;
      }
    </style>
  </head>
  <body>
    <canvas id="mycanvas"></canvas>
    <script src="pixi.js"></script>
    <script type="text/javascript">
      const canvas = document.getElementById("mycanvas");
      // Create the application helper and add its render target to the page
      const app = new PIXI.Application({
        view: canvas,
        width: window.innerWidth,
        height: window.innerHeight,
      });

      // Create the sprite and add it to the stage
      const texture = PIXI.Texture.from("bike.png");
      const img = new PIXI.Sprite(texture);
      img.x = app.renderer.width / 2;
      img.y = app.renderer.height / 2;
      img.anchor.x = 0.5;
      img.anchor.y = 0.5;
      app.stage.addChild(img);

      app.ticker.add(animate);
      function animate() {
        img.rotation += 0.1;
      }
    </script>
  </body>
</html>

코드 수정 후

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />

    <title>Document</title>
    <style>
      body {
        margin: 0;
      }
      canvas {
        display: block;
        background-color: blue;
      }
    </style>
  </head>
  <body>
    <canvas id="mycanvas"></canvas>
    <script src="pixi.js"></script>
    <script type="text/javascript">
      const canvas = document.getElementById("mycanvas");

      const renderer = new PIXI.Renderer({
        view: canvas,
        width: window.innerWidth,
        height: window.innerHeight,
      });
      const stage = new PIXI.Container();

      const texture = PIXI.Texture.from("bike.png");
      const img = new PIXI.Sprite(texture);

      img.x = renderer.width / 2;
      img.y = renderer.height / 2;
      img.anchor.x = 0.5;
      img.anchor.y = 0.5;
      stage.addChild(img);

      const ticker = new PIXI.Ticker();
      ticker.add(animate);
      ticker.start();

      function animate() {
        img.rotation += 0.1;
        renderer.render(stage);
      }
    </script>
  </body>
</html>

<리사이즈 로직 적용 최종 소스코드>

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />

    <title>Document</title>
    <style>
      body {
        margin: 0;
      }
      canvas {
        display: block;
        background-color: blue;
      }
    </style>
  </head>
  <body>
    <canvas id="mycanvas"></canvas>
    <script src="pixi.js"></script>
    <script type="text/javascript">
      const canvas = document.getElementById("mycanvas");

      let _w = window.innerWidth;
      let _h = window.innerHeight;

      const renderer = new PIXI.Renderer({
        view: canvas,
        width: _w,
        height: _h,
        resolution: window.devicePixelRatio,
        autoDensity: true,
      });
      window.addEventListener("resize", resize);
      function resize() {
        _w = window.innerWidth;
        _h = window.innerHeight;

        renderer.resize(_w, _h);
      }
      const stage = new PIXI.Container();

      const texture = PIXI.Texture.from("bike.png");
      const img = new PIXI.Sprite(texture);

      img.anchor.x = 0.5;
      img.anchor.y = 0.5;
      stage.addChild(img);

      const ticker = new PIXI.Ticker();
      ticker.add(animate);
      ticker.start();

      function animate() {
        img.x = renderer.screen.width / 2;
        img.y = renderer.screen.height / 2;
        img.rotation += 0.1;
        renderer.render(stage);
      }
    </script>
  </body>
</html>

728x90