diff --git a/ZzSprite.js b/ZzSprite.js
index 0a69d81..72d105b 100644
--- a/ZzSprite.js
+++ b/ZzSprite.js
@@ -24,7 +24,8 @@ function ZzSprite(context, x=0, y=0, seed=1, size=16, mode=0, mutateSeed=0, colo
const h = !flipAxis ? size-3 : size/2 - 1 |0;
// apply mutations
- randomSeed += mutateSeed + 1e8;
+ randomSeed += mutateSeed + 1e8;
+
const spriteSize = size * Random(.9, .6);
const density = Random(1, .9);
const doubleCenter = Random() < .5;
@@ -67,6 +68,7 @@ function ZzSprite(context, x=0, y=0, seed=1, size=16, mode=0, mutateSeed=0, colo
{
const o = !!outline;
context.fillRect(x+i-o-doubleCenter, y+j-o, 1+2*o, 1+2*o);
+ //context.fillRect(x+i-o, y+j-o, 1+2*o, 1+2*o);
context.fillRect(x-i-o, y+j-o, 1+2*o, 1+2*o);
}
}
diff --git a/index.html b/index.html
index aff03c5..9ceed46 100644
--- a/index.html
+++ b/index.html
@@ -40,8 +40,21 @@
Advanced
@@ -59,6 +72,12 @@
/////////////////////////////////////////////////////////////////////////////
let randomSeed = 0;
+
+let animationInitialized = false;
+
+let animationFrame = 0;
+let animationFrames = [0,1,2,3,4];
+
function Random(max=1, min=0)
{
randomSeed ^= randomSeed << 13;
@@ -68,6 +87,43 @@
function GenerateRandomSeed() { return Math.random()*1e9|0; }
+function Animate()
+{
+ const tileSize = settings.tileSize.Get();
+ const rows = settings.rows.Get();
+ const columns = settings.columns.Get();
+
+ if(animationInitialized)
+ {
+ let x = Math.floor(animationFrames[animationFrame] % columns);
+ let y = Math.floor(animationFrames[animationFrame] / columns);
+
+ // draw preview sprite
+ const previewContext = previewCanvas.getContext('2d');
+ previewCanvas.width = tileSize;
+ previewCanvas.height = tileSize;
+ previewContext.fillStyle = '#fff';
+ previewContext.fillRect(0,0,2e3,2e3);
+ previewContext.drawImage(canvas, -x * tileSize, -y * tileSize);
+
+ animationFrame++;
+ animationFrame %= animationFrames.length;
+ }
+ else
+ {
+ //Init 5 preview frames!
+ for (var i = 0; i < 5; i++)
+ {
+ animationFrames[i] = 0;
+ }
+
+ //Update the 5 preview frames
+ Update();
+ }
+
+ animationInitialized = 1;
+}
+
function Update()
{
// init canvas
@@ -84,6 +140,7 @@
let mutateSeed = settings.mutateSeed.Get();
let animationSeed = GenerateRandomSeed();
let sheetSeed = settings.sheetSeed.Get();
+
for(let y = 0; y Update();
+ this.element.onchange= e=>Update();
}
SetDefault() { this.Set(0); }
- Set(value) { this.element.selectedIndex = value; }
+ Set(value) {
+ this.element.selectedIndex = value;
+ }
Get() { return this.element.options[this.element.selectedIndex].value; }
}
@@ -265,7 +371,7 @@
}
}
-canvas.onmousedown=e=>
+canvas.onclick=e=>
{
// get click tile
const rect = canvas.getBoundingClientRect();
@@ -284,14 +390,170 @@
Update();
}
+let dragX = 0;
+let dragY = 0;
+let dragging = false;
+
+canvas.onmousedown=e=>
+{
+ // get click tile
+ const rect = canvas.getBoundingClientRect();
+ const scaleX = canvas.width / rect.width;
+ const scaleY = canvas.height / rect.height;
+ const tileSize = settings.tileSize.Get();
+ dragX = (e.x - rect.left)*scaleX/tileSize|0;
+ dragY = (e.y - rect.top)*scaleY/tileSize|0;
+
+ dragging = true;
+}
+
+canvas.onmouseup=e=>
+{
+ dragging = false;
+}
+
+previewCanvas1.onmouseup=e=>
+{
+ if(dragging)
+ {
+ const tileSize = settings.tileSize.Get();
+ const rows = settings.rows.Get();
+ const columns = settings.columns.Get();
+
+ // draw preview sprite
+ const previewContext = previewCanvas1.getContext('2d');
+ previewCanvas1.width = tileSize;
+ previewCanvas1.height = tileSize;
+ previewContext.fillStyle = '#fff';
+ previewContext.fillRect(0,0,2e3,2e3);
+ previewContext.drawImage(canvas, -dragX * tileSize, -dragY * tileSize);
+
+ animationFrames[0] = dragX + dragY * columns;
+ }
+
+ dragging = false;
+}
+
+previewCanvas2.onmouseup=e=>
+{
+ if(dragging)
+ {
+ const tileSize = settings.tileSize.Get();
+ const rows = settings.rows.Get();
+ const columns = settings.columns.Get();
+
+ // draw preview sprite
+ const previewContext = previewCanvas2.getContext('2d');
+ previewCanvas2.width = tileSize;
+ previewCanvas2.height = tileSize;
+ previewContext.fillStyle = '#fff';
+ previewContext.fillRect(0,0,2e3,2e3);
+ previewContext.drawImage(canvas, -dragX * tileSize, -dragY * tileSize);
+
+ animationFrames[1] = dragX + dragY * columns;
+ }
+
+ dragging = false;
+}
+
+previewCanvas3.onmouseup=e=>
+{
+ if(dragging)
+ {
+ const tileSize = settings.tileSize.Get();
+ const rows = settings.rows.Get();
+ const columns = settings.columns.Get();
+
+ // draw preview sprite
+ const previewContext = previewCanvas3.getContext('2d');
+ previewCanvas3.width = tileSize;
+ previewCanvas3.height = tileSize;
+ previewContext.fillStyle = '#fff';
+ previewContext.fillRect(0,0,2e3,2e3);
+ previewContext.drawImage(canvas, -dragX * tileSize, -dragY * tileSize);
+
+ animationFrames[2] = dragX + dragY * columns;
+ }
+
+ dragging = false;
+}
+
+previewCanvas4.onmouseup=e=>
+{
+ if(dragging)
+ {
+ const tileSize = settings.tileSize.Get();
+ const rows = settings.rows.Get();
+ const columns = settings.columns.Get();
+
+ // draw preview sprite
+ const previewContext = previewCanvas4.getContext('2d');
+ previewCanvas4.width = tileSize;
+ previewCanvas4.height = tileSize;
+ previewContext.fillStyle = '#fff';
+ previewContext.fillRect(0,0,2e3,2e3);
+ previewContext.drawImage(canvas, -dragX * tileSize, -dragY * tileSize);
+
+ animationFrames[3] = dragX + dragY * columns;
+ }
+
+ dragging = false;
+}
+
+previewCanvas5.onmouseup=e=>
+{
+ if(dragging)
+ {
+ const tileSize = settings.tileSize.Get();
+ const rows = settings.rows.Get();
+ const columns = settings.columns.Get();
+
+ // draw preview sprite
+ const previewContext = previewCanvas5.getContext('2d');
+ previewCanvas5.width = tileSize;
+ previewCanvas5.height = tileSize;
+ previewContext.fillStyle = '#fff';
+ previewContext.fillRect(0,0,2e3,2e3);
+ previewContext.drawImage(canvas, -dragX * tileSize, -dragY * tileSize);
+
+ animationFrames[4] = dragX + dragY * columns;
+ }
+
+ dragging = false;
+}
+
+previewCanvas1.title = 'Drag sprite here, to update animation.';
+previewCanvas2.title = 'Drag sprite here, to update animation.';
+previewCanvas3.title = 'Drag sprite here, to update animation.';
+previewCanvas4.title = 'Drag sprite here, to update animation.';
+previewCanvas5.title = 'Drag sprite here, to update animation.';
+
+
const programTitle = 'ZzSprite';
const programDescription = 'Tiny Sprite Generator';
const programVersion = '1.0';
const savedParameters = [];
const settings = {};
const context = canvas.getContext('2d');
+let animationInterval;
BuildHTML();
Update();
+//Initalize animation frames
+Animate();
+
+animate.onclick=e=>
+{
+ if(animate.checked)
+ {
+ animationInterval=setInterval(Animate, 300);
+ }
+ else
+ {
+ clearInterval(animationInterval)
+ }
+}
+
+
\ No newline at end of file