Skip to content

Added 5 animation frames #1

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
wants to merge 2 commits into
base: master
Choose a base branch
from
Open

Added 5 animation frames #1

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
19845bb
Added 5 frame animation drag'n'drop
pyjamads Dec 6, 2020
fb73c98
Cleaned up comments
pyjamads Dec 6, 2020
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
4 changes: 3 additions & 1 deletion ZzSprite.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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;
Expand Down Expand Up @@ -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);
}
}
Expand Down
272 changes: 267 additions & 5 deletions index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -40,8 +40,21 @@
<div id=settingsContainer class=settingsContainer></div>

<div>
<div id=programTitleDiv class=programTitle></div>
<canvas id=previewCanvas style='flex-shrink:0;width:128px;height:128px;border:3px solid #000'></canvas>
<div style="display: flex;">
<div style="flex-grow: 0.4;">
<input type="checkbox" id="animate" name="animate">
<label for="animate">Animate</label>
</div>
<div id=programTitleDiv class=programTitle >
</div>
</div>
<canvas id=previewCanvas style='flex-shrink:0;width:128px;height:128px;border:5px solid #777'></canvas>
<canvas id=previewCanvas1 style='flex-shrink:0;width:128px;height:128px;border:3px solid #000'></canvas>
<canvas id=previewCanvas2 style='flex-shrink:0;width:128px;height:128px;border:3px solid #000'></canvas>
<canvas id=previewCanvas3 style='flex-shrink:0;width:128px;height:128px;border:3px solid #000'></canvas>
<canvas id=previewCanvas4 style='flex-shrink:0;width:128px;height:128px;border:3px solid #000'></canvas>
<canvas id=previewCanvas5 style='flex-shrink:0;width:128px;height:128px;border:3px solid #000'></canvas>

</div>
<details style=display:none>
<summary>Advanced</summary>
Expand All @@ -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;
Expand All @@ -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
Expand All @@ -84,6 +140,7 @@
let mutateSeed = settings.mutateSeed.Get();
let animationSeed = GenerateRandomSeed();
let sheetSeed = settings.sheetSeed.Get();

for(let y = 0; y<rows; ++y)
for(let x = 0; x<columns; ++x)
{
Expand Down Expand Up @@ -118,6 +175,53 @@
previewContext.fillStyle = '#fff';
previewContext.fillRect(0,0,2e3,2e3);
previewContext.drawImage(canvas, 0, 0);

// draw animation frames
const previewContext1 = previewCanvas1.getContext('2d');
previewCanvas1.width = tileSize;
previewCanvas1.height = tileSize;
previewContext1.fillStyle = '#fff';
previewContext1.fillRect(0,0,2e3,2e3);
previewContext1.drawImage(canvas,
-Math.floor(animationFrames[0] % columns) * tileSize,
-Math.floor(animationFrames[0] / columns) * tileSize);

const previewContext2 = previewCanvas2.getContext('2d');
previewCanvas2.width = tileSize;
previewCanvas2.height = tileSize;
previewContext2.fillStyle = '#fff';
previewContext2.fillRect(0,0,2e3,2e3);
previewContext2.drawImage(canvas,
-Math.floor(animationFrames[1] % columns) * tileSize,
-Math.floor(animationFrames[1] / columns) * tileSize);


const previewContext3 = previewCanvas3.getContext('2d');
previewCanvas3.width = tileSize;
previewCanvas3.height = tileSize;
previewContext3.fillStyle = '#fff';
previewContext3.fillRect(0,0,2e3,2e3);
previewContext3.drawImage(canvas,
-Math.floor(animationFrames[2] % columns) * tileSize,
-Math.floor(animationFrames[2] / columns) * tileSize);

const previewContext4 = previewCanvas4.getContext('2d');
previewCanvas4.width = tileSize;
previewCanvas4.height = tileSize;
previewContext4.fillStyle = '#fff';
previewContext4.fillRect(0,0,2e3,2e3);
previewContext4.drawImage(canvas,
-Math.floor(animationFrames[3] % columns) * tileSize,
-Math.floor(animationFrames[3] / columns) * tileSize);

const previewContext5 = previewCanvas5.getContext('2d');
previewCanvas5.width = tileSize;
previewCanvas5.height = tileSize;
previewContext5.fillStyle = '#fff';
previewContext5.fillRect(0,0,2e3,2e3);
previewContext5.drawImage(canvas,
-Math.floor(animationFrames[4] % columns) * tileSize,
-Math.floor(animationFrames[4] / columns) * tileSize);
}

class Setting
Expand Down Expand Up @@ -179,11 +283,13 @@
this.element.appendChild(e);
});

this.element.onchange= e=> 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; }
}

Expand Down Expand Up @@ -265,7 +371,7 @@
}
}

canvas.onmousedown=e=>
canvas.onclick=e=>
{
// get click tile
const rect = canvas.getBoundingClientRect();
Expand All @@ -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)
}
}



</script>
<a href="https://github.com/KilledByAPixel/ZzSprite" target="_blank" class="github-corner" aria-label="View source on GitHub"><svg width="80" height="80" viewBox="0 0 250 250" style="fill:#5AF; color:#222; position: absolute; top: 0; border: 0; right: 0;" aria-hidden="true"><path d="M0,0 L115,115 L130,115 L142,142 L250,250 L250,0 Z"></path><path d="M128.3,109.0 C113.8,99.7 119.0,89.6 119.0,89.6 C122.0,82.7 120.5,78.6 120.5,78.6 C119.2,72.0 123.4,76.3 123.4,76.3 C127.3,80.9 125.5,87.3 125.5,87.3 C122.9,97.6 130.6,101.9 134.4,103.2" fill="currentColor" style="transform-origin: 130px 106px;" class="octo-arm"></path><path d="M115.0,115.0 C114.9,115.1 118.7,116.5 119.8,115.4 L133.7,101.6 C136.9,99.2 139.9,98.4 142.2,98.6 C133.8,88.0 127.5,74.4 143.8,58.0 C148.5,53.4 154.0,51.2 159.7,51.0 C160.3,49.4 163.2,43.6 171.4,40.1 C171.4,40.1 176.1,42.5 178.8,56.2 C183.1,58.6 187.2,61.8 190.9,65.4 C194.5,69.0 197.7,73.2 200.1,77.6 C213.8,80.2 216.3,84.9 216.3,84.9 C212.7,93.1 206.9,96.0 205.4,96.6 C205.1,102.4 203.0,107.8 198.3,112.5 C181.9,128.9 168.3,122.5 157.7,114.1 C157.9,116.9 156.7,120.9 152.7,124.9 L141.0,136.5 C139.8,137.7 141.6,141.9 141.8,141.8 Z" fill="currentColor" class="octo-body"></path></svg></a><style>.github-corner:hover .octo-arm{animation:octocat-wave 560ms ease-in-out}@keyframes octocat-wave{0%,100%{transform:rotate(0)}20%,60%{transform:rotate(-25deg)}40%,80%{transform:rotate(10deg)}}@media (max-width:500px){.github-corner:hover .octo-arm{animation:none}.github-corner .octo-arm{animation:octocat-wave 560ms ease-in-out}}</style>