archive
/
spine-runtimes
mirror de https://github.com/EsotericSoftware/spine-runtimes.git


			
				
					
						
						
							1234567891011121314151617181920212223242526272829303132333435363738394041424344454647
							<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <script src="../dist/iife/spine-player.js"></script>
    <link rel="stylesheet" href="../dist/spine-player.css" />
    <link rel="stylesheet" href="../../index.css" />
  </head>
  <body style="margin: 0">
    <span class="overlay">Drag the swinging lady</span>
    <div id="player" style="width: 100%; height: 100vh"></div>
    <script>
      var mouse = new spine.Vector3(),
        last = new spine.Vector3();
      new spine.SpinePlayer("player", {
        skelUrl: "assets/celestial-circus-pro.skel",
        atlasUrl: "assets/celestial-circus-pma.atlas",
        showControls: true,
        animation: "swing",
        success: (player) => {
          new spine.Input(player.canvas).addListener({
            down: (x, y) => {
              player.sceneRenderer.camera.screenToWorld(
                mouse.set(x, y, 0),
                player.canvas.clientWidth,
                player.canvas.clientHeight
              );
              last.setFrom(mouse);
            },
            dragged: (x, y) => {
              player.sceneRenderer.camera.screenToWorld(
                mouse.set(x, y, 0),
                player.canvas.clientWidth,
                player.canvas.clientHeight
              );
              player.skeleton.getRootBone().x += mouse.x - last.x;
              player.skeleton.getRootBone().y += mouse.y - last.y;
              last.setFrom(mouse);
            },
            up: () => (player.paused = false),
          });
        },
      });
    </script>
  </body>
</html>