Skip to main content

transition

<!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@2.5.x/dist/xnew.module.js",
        "@mulsense/xnew/addons/xpixi": "https://unpkg.com/@mulsense/xnew@2.5.x/dist/addons/xpixi.module.js",
        "pixi.js": "https://cdnjs.cloudflare.com/ajax/libs/pixi.js/8.6.6/pixi.min.mjs"
      }
    }
  </script>
  <script type="module" src="./script.js"></script>
</head>

<body style="margin: 0; height: 100vh;">
  <div id="main" style="width: 100%; height: 100%;"></div>
</body>

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

xnew('#main', Main);

function Main(self) {
  xnew(xnew.Screen, { width: 800, height: 450 });
  xpixi.initialize();

  xnew(Scene1);
  self.on('+addscene', xnew);
}

function Scene1(self) {
  xnew(Text, 'Scene1');
  xnew(Box, { x: 800 / 2, y: 400 / 2, size: 160, color: 0xff2266 });

  self.on('pointerdown', () => {
    xnew.emit('+addscene', Scene2);
    self.finalize();
  });
}

function Scene2(self) {
  xnew(Text, 'Scene2');
  xnew(Box, { x: 800 / 2, y: 400 / 2, size: 160, color: 0x6622ff });

  self.on('pointerdown', () => {
    xnew.emit('+addscene', Scene1);
    self.finalize();
  });
}

function Text(self, value) {
  const object = xpixi.nest(new PIXI.Text(value, { fontSize: 24, fill: 0x000000 }));
  object.position.set(10, 10);
}

function Box(self, { 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));
  
  xnew.transition(({ progress }) => object.alpha = progress, 2000);

  return {
    update() {
      object.rotation += 0.01;
    },
  };
}