Spaces:
Running
Running
Update index.html
Browse files- index.html +0 -40
index.html
CHANGED
@@ -252,13 +252,6 @@
|
|
252 |
transform: scale(1.1);
|
253 |
}
|
254 |
|
255 |
-
.example-desc {
|
256 |
-
font-size: 0.85em;
|
257 |
-
margin-top: 5px;
|
258 |
-
color: #777;
|
259 |
-
font-style: italic;
|
260 |
-
}
|
261 |
-
|
262 |
.speed-control {
|
263 |
display: flex;
|
264 |
align-items: center;
|
@@ -280,11 +273,6 @@
|
|
280 |
<input type="file" id="spriteFile" accept="image/png,image/jpeg">
|
281 |
</div>
|
282 |
|
283 |
-
<div class="form-group">
|
284 |
-
<button id="loadExampleBtn" aria-label="Load example sprite sheet">Load Example</button>
|
285 |
-
<p class="example-desc">Try a lotus flower blooming animation</p>
|
286 |
-
</div>
|
287 |
-
|
288 |
<div class="form-group">
|
289 |
<label for="tileWidth" id="tileWidthLabel">Tile Width (px):</label>
|
290 |
<input type="number" id="tileWidth" value="64" min="1" max="512">
|
@@ -375,7 +363,6 @@
|
|
375 |
const spriteInfo = document.getElementById('spriteInfo');
|
376 |
const framePreviewContainer = document.getElementById('framePreviewContainer');
|
377 |
const fullSpritePreview = document.getElementById('fullSpritePreview');
|
378 |
-
const loadExampleBtn = document.getElementById('loadExampleBtn');
|
379 |
|
380 |
// Animation state
|
381 |
let spriteImage = null;
|
@@ -391,33 +378,6 @@
|
|
391 |
canvas.width = 128;
|
392 |
canvas.height = 128;
|
393 |
|
394 |
-
// Load the example image
|
395 |
-
loadExampleBtn.addEventListener('click', () => {
|
396 |
-
// Example image - the lotus flower blooming animation
|
397 |
-
const exampleImageUrl = 'lotus_bloom.png'; // This should be the path to your lotus flower image
|
398 |
-
|
399 |
-
// Create an image from the example URL
|
400 |
-
spriteImage = new Image();
|
401 |
-
spriteImage.onload = () => {
|
402 |
-
// Set appropriate defaults for this specific sprite sheet
|
403 |
-
tileWidthInput.value = 64;
|
404 |
-
tileWidthSlider.value = 64;
|
405 |
-
tileHeightInput.value = 64;
|
406 |
-
tileHeightSlider.value = 64;
|
407 |
-
frameCountInput.value = 16; // Assuming 16 frames in the animation
|
408 |
-
frameCountSlider.value = 16;
|
409 |
-
|
410 |
-
updateSpriteInfo();
|
411 |
-
updateFullSpritePreview();
|
412 |
-
reset();
|
413 |
-
createFramePreviews();
|
414 |
-
};
|
415 |
-
spriteImage.onerror = () => {
|
416 |
-
alert('Could not load example image. Make sure "lotus_bloom.png" is in the same directory as this HTML file.');
|
417 |
-
};
|
418 |
-
spriteImage.src = exampleImageUrl;
|
419 |
-
});
|
420 |
-
|
421 |
// Handle file upload
|
422 |
spriteFileInput.addEventListener('change', (e) => {
|
423 |
const file = e.target.files[0];
|
|
|
252 |
transform: scale(1.1);
|
253 |
}
|
254 |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
255 |
.speed-control {
|
256 |
display: flex;
|
257 |
align-items: center;
|
|
|
273 |
<input type="file" id="spriteFile" accept="image/png,image/jpeg">
|
274 |
</div>
|
275 |
|
|
|
|
|
|
|
|
|
|
|
276 |
<div class="form-group">
|
277 |
<label for="tileWidth" id="tileWidthLabel">Tile Width (px):</label>
|
278 |
<input type="number" id="tileWidth" value="64" min="1" max="512">
|
|
|
363 |
const spriteInfo = document.getElementById('spriteInfo');
|
364 |
const framePreviewContainer = document.getElementById('framePreviewContainer');
|
365 |
const fullSpritePreview = document.getElementById('fullSpritePreview');
|
|
|
366 |
|
367 |
// Animation state
|
368 |
let spriteImage = null;
|
|
|
378 |
canvas.width = 128;
|
379 |
canvas.height = 128;
|
380 |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
381 |
// Handle file upload
|
382 |
spriteFileInput.addEventListener('change', (e) => {
|
383 |
const file = e.target.files[0];
|