62 lines
1.6 KiB
HTML
62 lines
1.6 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<title>Sprite Viewer</title>
|
|
<style>
|
|
* { margin: 0; padding: 0; box-sizing: border-box; }
|
|
body {
|
|
background: #1a1a1a;
|
|
min-height: 100vh;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
flex-direction: column;
|
|
}
|
|
#sprite-tooltip {
|
|
position: fixed;
|
|
background: rgba(0,0,0,0.85);
|
|
color: #fff;
|
|
padding: 4px 8px;
|
|
border-radius: 4px;
|
|
font-family: monospace;
|
|
font-size: 14px;
|
|
pointer-events: none;
|
|
display: none;
|
|
}
|
|
pre {
|
|
color: white;
|
|
}
|
|
</style>
|
|
</head>
|
|
<body>
|
|
|
|
<img id="spritesheet" src="https://nudel.cc/img/dancer.png" style="display:block; cursor:crosshair;">
|
|
<pre>dancer(pose, x, y, scale, squish, color)</pre>
|
|
<div id="sprite-tooltip"></div>
|
|
|
|
<script>
|
|
const img = document.getElementById('spritesheet');
|
|
const tooltip = document.getElementById('sprite-tooltip');
|
|
const COLS = 16, ROWS = 16;
|
|
|
|
img.addEventListener('mousemove', e => {
|
|
const rect = img.getBoundingClientRect();
|
|
const x = e.clientX - rect.left;
|
|
const y = e.clientY - rect.top;
|
|
const col = Math.floor(x / rect.width * COLS);
|
|
const row = Math.floor(y / rect.height * ROWS);
|
|
const id = row * COLS + col;
|
|
tooltip.textContent = 'ID: ' + id;
|
|
tooltip.style.left = (e.clientX + 12) + 'px';
|
|
tooltip.style.top = (e.clientY + 12) + 'px';
|
|
tooltip.style.display = 'block';
|
|
});
|
|
|
|
img.addEventListener('mouseleave', () => {
|
|
tooltip.style.display = 'none';
|
|
});
|
|
</script>
|
|
|
|
</body>
|
|
</html>
|