2025-07-11 11:43:24 +02:00

27 lines
1.2 KiB
HTML

<!DOCTYPE html>
<html lang="en">
<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="../../index.css" />
<title>Spine Player Editor</title>
</head>
<body class="flex flex-col w-full h-screen items-center">
<div id="editor" class="w-full h-full flex-grow"></div>
<script>
var code =
'<script src="https://unpkg.com/@esotericsoftware/spine-player@4.2.*/dist/iife/spine-player.js"></' +
'script>\n<link rel="stylesheet" href="https://unpkg.com/@esotericsoftware/spine-player@4.2.*/dist/spine-player.css">\n\n<div id="player-container" style="width: 100%; height: 100vh;"></div>\n\n<script>\nnew spine.SpinePlayer("player-container", {\n skeleton: "http://esotericsoftware.com/files/examples/4.2/spineboy/export/spineboy-pro.json",\n atlas: "http://esotericsoftware.com/files/examples/4.2/spineboy/export/spineboy-pma.atlas",\n premultipliedAlpha: true\n});\n</' +
"script>".trim();
spine.SpinePlayerEditor.DEFAULT_CODE = code;
var player = new spine.SpinePlayerEditor(
document.getElementById("editor")
);
</script>
</body>
</html>