Spaces:
Running
Running
| <html lang="es"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>Sprite Studio — Captura Manual</title> | |
| <script src="gif.js"></script> | |
| <style> | |
| /* Estilos para el canvas de Vista Previa (Zoom 4x) */ | |
| #preview { | |
| image-rendering: pixelated; /* Crucial para sprites */ | |
| /* Los tamaños de 192px son solo sugerencias, el JS los ajustará */ | |
| width: 192px; | |
| height: 192px; | |
| border: 2px solid #333; | |
| background-color: #eee; | |
| display: block; | |
| margin: 10px 0; | |
| } | |
| /* Estilos para el canvas de la Hoja Completa */ | |
| #sheetView { | |
| border: 1px solid #ccc; | |
| display: block; | |
| background-color: #f8f8f8; | |
| } | |
| </style> | |
| </head> | |
| <body> | |
| <h1>Sprite Studio — Captura Manual</h1> | |
| <p>Define dimensiones, carga la hoja de sprites y usa el botón "Añadir Frame" para capturar manualmente. El recuadro rojo en el Navegador indica la posición de captura.</p> | |
| <hr> | |
| <h2>1. Capas y Dimensiones</h2> | |
| <input type="file" id="addLayerFile" accept="image/*"> | |
| <br><br> | |
| <label for="frameW">Ancho frame (px):</label> | |
| <input type="number" id="frameW" value="48" min="16" placeholder="Ej: 48"> | |
| <label for="frameH">Alto frame (px):</label> | |
| <input type="number" id="frameH" value="48" min="16" placeholder="Ej: 48"> | |
| <br> | |
| <div style="margin-top: 10px;"> | |
| <strong>Ajuste Fino (8px):</strong> | |
| <button id="adjustLeftBtn">⬅️ Ancho -</button> | |
| <button id="adjustRightBtn">➡️ Ancho +</button> | |
| <button id="adjustUpBtn">⬆️ Alto -</button> | |
| <button id="adjustDownBtn">⬇️ Alto +</button> | |
| </div> | |
| <br> | |
| <label for="showGrid">Mostrar Recuadro</label> | |
| <input type="checkbox" id="showGrid" checked> | |
| <hr> | |
| <h2>2. Navegador de Hoja Completa</h2> | |
| <p>Vista de la imagen completa con el recuadro rojo de captura. (Usa un dedo para mover la posición de captura).</p> | |
| <div id="sheetContainer" style="margin: 10px 0;"> | |
| <canvas id="sheetView" width="400" height="400"></canvas> | |
| </div> | |
| <hr> | |
| <h2>3. Timeline y Captura</h2> | |
| <label for="framesCount">Frames en la lista:</label> | |
| <input type="number" id="framesCount" value="0" readonly> | |
| <br><br> | |
| <h3>Vista Previa del Frame Actual:</h3> | |
| <canvas id="preview" width="48" height="48"></canvas> | |
| <br> | |
| <button id="addFrame">➕ Añadir Frame (y avanzar)</button> | |
| <button id="removeFrame">➖ Eliminar Último</button> | |
| <button id="playFrames">▶️ Reproducir</button> | |
| <hr> | |
| <h2>4. Playback & Export</h2> | |
| <label for="speed">Velocidad (ms):</label> | |
| <input type="range" id="speed" min="20" max="500" value="100" oninput="document.getElementById('speedValue').innerText=this.value"> | |
| <span id="speedValue">100</span> ms | |
| <br><br> | |
| <button id="exportGIF">Exportar GIF</button> | |
| <button id="exportWebm">Exportar WebM</button> | |
| <div id="downloadLinks" style="margin-top: 20px;"> | |
| </div> | |
| <script src="app.js"></script> | |
| </body> | |
| </html> | |