Skip to main content

multi screen

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <script type="importmap">
    {
      "imports": {
        "@mulsense/xnew": "https://unpkg.com/@mulsense/xnew@0.7.x/dist/xnew.mjs",
        "@mulsense/xnew/addons/xpixi": "https://unpkg.com/@mulsense/xnew@0.7.x/dist/addons/xpixi.mjs",
        "pixi.js": "https://cdnjs.cloudflare.com/ajax/libs/pixi.js/8.6.6/pixi.min.mjs"
      }
    }
  </script>
  <script type="module" src="./script.js"></script>
  <script src="https://cdn.jsdelivr.net/npm/@tailwindcss/browser@4"></script>
</head>

<body class="m-0 p-0 w-full h-screen overflow-hidden">
  <div id="main" class="relative w-full h-full"></div>
</body>

</html>
script.js
import xnew from '@mulsense/xnew';
import xpixi from '@mulsense/xnew/addons/xpixi';
import * as PIXI from 'pixi.js';

xnew(document.querySelector('#main'), Main);

function Main(unit) {
  const [width, height] = [800, 600];
  xnew.extend(xnew.basics.Screen, { width, height });

  const canvas = xnew(`<canvas width="${width}" height="${height}" class="size-full align-bottom">`);

  // pixi setup
  xpixi.initialize({ canvas: unit.canvas });
  unit.on('render', () => {
    xpixi.renderer.render(xpixi.scene);
  });

  xnew(Contents);
}

function Contents(unit) {
  const sub1 = xnew(SubScreen, { width: xpixi.canvas.width / 2, height: xpixi.canvas.height, color: 0xEA1E63 });
  const sub2 = xnew(SubScreen, { width: xpixi.canvas.width / 2, height: xpixi.canvas.height, color: 0x63EA1E });

  xnew(Texture, { texture: sub1.texture, offset: { x: 0, y: 0 } });
  xnew(Texture, { texture: sub2.texture, offset: { x: xpixi.canvas.width / 2, y: 0 } });
}

function SubScreen(unit, { width, height, color }) {
  xpixi.initialize({ canvas: new OffscreenCanvas(width, height) });
  const texture = PIXI.Texture.from(xpixi.canvas);
  unit.on('render', () => {
    xpixi.renderer.render(xpixi.scene);
    texture.source.update();
  });

  xnew(Boxes, { color });
  return { 
    get texture() { return texture; }
  };
}

function Texture(unit, { texture, offset } = {}) {
  const object = xpixi.nest(new PIXI.Sprite(texture));
  object.position.set(offset.x, offset.y);
}

function Boxes(unit, { color }) {
  const object = xpixi.nest(new PIXI.Container());
  object.position.set(xpixi.canvas.width / 2, xpixi.canvas.height / 2); // center

  for (let y = -1; y <= 1; y++) {
    for (let x = -1; x <= 1; x++) {
      xnew(Box, { x: 120 * x, y: 120 * y, size: 60, color });
    }
  }
  unit.on('update', () => object.rotation += 0.01);
}

function Box(unit, { x, y, size, color }) {
  const object = xpixi.nest(new PIXI.Container());
  object.position.set(x, y);
  object.addChild(new PIXI.Graphics().rect(-size / 2, -size / 2, size, size).fill(color));

  unit.on('update', () => object.rotation += 0.01);
}