max
/
pixsy
1
0
Fork 0
Code Issues 8 Pull Requests Releases Wiki Activity

handle animated tiles

This commit is contained in:
synth-ruiner 2017-12-27 17:38:13 +00:00
parent c79cca778f
commit 7d31e398c6
2 changed files with 31 additions and 7 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

33
includes/script.js
View File

@ -1,4 +1,7 @@
$(document).ready(function() { $(document).ready(function() {
// todo define things like 16x16, 128x128 etc. as constants?
// also script debounce/throttle times
var bitsyData = {}; var bitsyData = {};
var palette = { var palette = {
@ -132,7 +135,7 @@ $(document).ready(function() {
}; };
// todo: handle animated tiles properly instead of discarding the second animation frame // todo: handle animated tiles properly instead of discarding the second animation frame
var tiles = input.match(/TIL (.*)\n([01]{8}\n){8}/g); var tiles = input.match(/TIL (.*)\n([01]{8}\n){8}(>\n([01]{8}\n){8})?/g); // everything after > is an optional second animation frame
_.each(tiles, function(tile, i) { _.each(tiles, function(tile, i) {
var name = tile.match(/TIL .*/)[0].replace('TIL ', ''); var name = tile.match(/TIL .*/)[0].replace('TIL ', '');
@ -141,10 +144,16 @@ $(document).ready(function() {
var bitmap = tile.match(/[01]/g); var bitmap = tile.match(/[01]/g);
bitsyData.tiles[name] = { var newTile = {name: name};
name: name,
bitmap: _.chunk(bitmap, 8) if (bitmap.length === 64) { // normal tile
}; newTile.bitmap = _.chunk(bitmap, 8);
} else if (bitmap.length === 128) { // animated tile
newTile.bitmap = _.chunk(_.take( bitmap, 64), 8);
newTile.secondAnimationFrame = _.chunk(_.takeRight(bitmap, 64), 8);
}
bitsyData.tiles[name] = newTile;
}); });
// set palette to first imported palette and redraw // set palette to first imported palette and redraw
@ -219,7 +228,7 @@ $(document).ready(function() {
rawData[i ] = targetColour.red; rawData[i ] = targetColour.red;
rawData[i + 1] = targetColour.green; rawData[i + 1] = targetColour.green;
rawData[i + 2] = targetColour.blue; rawData[i + 2] = targetColour.blue;
rawData[i + 3] = 255; rawData[i + 3] = 255; // alpha
} }
// split monochrome bitmap into equal chunks for easier x:y access // split monochrome bitmap into equal chunks for easier x:y access
@ -254,6 +263,18 @@ $(document).ready(function() {
} }
}); });
}); });
if (tile.secondAnimationFrame) {
_.each(tile.secondAnimationFrame, function(row, y) {
_.each(row, function(pixel, x) {
if (parseInt(pixel) === parseInt(pseudoTile[y][x])) {
tile.match++;
}
});
});
tile.match /= 2;
}
}); });
var bestMatch = _.first(_.sortBy(tilesForMatch, 'match')); var bestMatch = _.first(_.sortBy(tilesForMatch, 'match'));

5
readme.md
View File

@ -17,6 +17,8 @@ to **Foliotek** for the **Croppie** image plugin
## contributing ## contributing
Forks and pull requests welcome!
The stylesheet and html are autogenerated; if you want to alter them please edit the pug template or less stylesheet, e.g. from the command line as follows: The stylesheet and html are autogenerated; if you want to alter them please edit the pug template or less stylesheet, e.g. from the command line as follows:
`pug index.pug index.html` `pug index.pug index.html`
@ -51,7 +53,7 @@ if (src.match(/^(file|https)?:\/\/|^\/\//)) {
* implement slider (*always use existing tiles* -> *always create new tiles*) (representing 0-64 threshold for # of common pixels) * implement slider (*always use existing tiles* -> *always create new tiles*) (representing 0-64 threshold for # of common pixels)
* re-style the damn thing * re-style the damn thing
* reorganise the page layout for a more logical workflow * reorganise the page layout for a more logical workflow
* handle animated tiles? * animate animated tiles
* profile script performance and optimise where most needed * profile script performance and optimise where most needed
* make brightness slider trigger redraw every so often while being dragged, instead of waiting until drag stop * make brightness slider trigger redraw every so often while being dragged, instead of waiting until drag stop
@ -66,3 +68,4 @@ if (src.match(/^(file|https)?:\/\/|^\/\//)) {
* allow user to draw to canvas * allow user to draw to canvas
* do a 'branching tree' approach to finding the closest tile? i.e. create a 1x1, 2x2, 4x4 version of each tile, so all the broadly darker tiles will sit under '0' and lighter tiles under '1', then tiles that are lighter at the top will sit under '1100', etc... I'm not sure how much more effective this will be or whatever it will give better/faster results but it's worth a try * do a 'branching tree' approach to finding the closest tile? i.e. create a 1x1, 2x2, 4x4 version of each tile, so all the broadly darker tiles will sit under '0' and lighter tiles under '1', then tiles that are lighter at the top will sit under '1100', etc... I'm not sure how much more effective this will be or whatever it will give better/faster results but it's worth a try
* give heavier weighting to edge pixels when finding a matching tile? (thanks Mark) * give heavier weighting to edge pixels when finding a matching tile? (thanks Mark)
* apply grid lines to preview?