Permalink
Browse files

Revamp the sprite into multiple smaller sprites!

- 1 sprite = 100 pokemons
- no need webp anymore since the bug no longer happens on Android
(Probably only happen due to the super large image?)
  • Loading branch information...
cheeaun committed Jul 25, 2016
1 parent 32c078b commit 09a531941b4ab08cfc7b0256d7c7f8131ffe2987
View
Binary file not shown.
View
Binary file not shown.
View
Binary file not shown.
View
Binary file not shown.
View
Binary file not shown.
View
Binary file not shown.
View
Binary file not shown.
View
Binary file not shown.
View
Binary file not shown.
View
Binary file not shown.
View
@@ -70,17 +70,12 @@
padding: 0;
}
#list li .img{
background-image: url(data/pokemon.jpg);
background-repeat: no-repeat;
background-size: 2700px 2700px;
width: 100px;
height: 100px;
display: inline-block;
transform: scale(.9);
}
.support-webp #list li .img{
background-image: url(data/pokemon.webp);
}
#list li a:hover .img{
transform: scale(1);
}
@@ -150,7 +145,7 @@ <h1>Repokémon</h1>
$list.innerHTML = data.sort(sortFuncs[sort]).map(function(d){
var repo = d.repo;
if (!repo) return '<li class="unavailable">'
+ '<div class="img img-' + d.id + '"></div>'
+ '<div class="img i' + d.id + '"></div>'
+ '<h2>' + d.name + '</h2>'
+ '</li>';
var longDesc = repo.desc || '';
@@ -159,10 +154,10 @@ <h1>Repokémon</h1>
var desc = veryLongDesc ? longDesc.slice(0, descLimit-1) + '&hellip;' : longDesc;
return '<li class="available">'
+ '<a href="https://github.com/' + repo.full_name + '" title="' + (veryLongDesc ? longDesc : '') + '" target="_blank" ontouchstart>'
+ '<div class="img img-' + d.id + '"></div>'
+ '<h2>' + d.name + '</h2>'
+ '<div class="metadata">' + desc + '</div>'
+ '<div class="metadata">⭐️ ' + repo.stars + ' 🍴' + repo.forks + '</div>'
+ '<div class="img i' + d.id + '"></div>'
+ '<h2>' + d.name + '</h2>'
+ '<div class="metadata">' + desc + '</div>'
+ '<div class="metadata">⭐️ ' + repo.stars + ' 🍴' + repo.forks + '</div>'
+ '</a>'
+ '</li>';
}).join('');
@@ -173,13 +168,7 @@ <h1>Repokémon</h1>
renderList(e.target.value);
}, true);
var img = new Image();
img.onload = function(){
if (img.width > 0 && img.height > 0){
document.body.className = 'support-webp';
}
};
img.src = 'data:image/webp;base64,UklGRiIAAABXRUJQVlA4IBYAAAAwAQCdASoBAAEADsD+JaQAA3AAAAAA';
</script>
<script async defer src="https://buttons.github.io/buttons.js"></script>
<script async src="//platform.twitter.com/widgets.js" charset="utf-8"></script>
View
1,448 pokemon.css

Large diffs are not rendered by default.

Oops, something went wrong.
View
@@ -5,26 +5,53 @@ const data = JSON.parse(fs.readFileSync('data/repokemon.json'));
const Spritesmith = require('spritesmith');
const ratio = 2.15;
const chunkSize = 100;
const dataChunks = Array(Math.ceil(data.length/chunkSize));
const dataLen = data.length;
var index = 0;
var resIndex = 0;
while (index < dataLen){
dataChunks[resIndex++] = data.slice(index, (index += chunkSize));
}
// Generate our spritesheet
var sprites = data.map(function(d){ return 'data/images/' + d.id + '.png'; });
var spritesmith = new Spritesmith();
Spritesmith.run({
src: sprites,
padding: 0,
}, function handleResult (err, result) {
fs.writeFileSync('data/pokemon.png', result.image);
const width = result.properties.width;
const height = result.properties.height;
const css = Object.keys(result.coordinates).map(function(path){
const id = path.match(/\d+/);
const coords = result.coordinates[path];
return '.img-' + id + '{background-position: '
+ '-' + (coords.x/ratio) + 'px '
+ '-' + (coords.y/ratio) + 'px;'
+ '}';
}).join('\n');
fs.writeFileSync('pokemon.css', css);
console.log('True dimensions: ' + width + ' ' + height);
console.log('CSS dimensions: ' + (width/ratio) + ' ' + (height/ratio));
const spritesmith = new Spritesmith();
const dataPromises = dataChunks.map(function(chunk, chunkID){
return new Promise(function(resolve, reject){
var sprites = chunk.map(function(d){ return 'data/images/' + d.id + '.png'; });
console.log('Spriting chunk ' + chunkID);
Spritesmith.run({
src: sprites,
padding: 0,
}, function handleResult (err, result) {
const path = 'data/pokemon-' + chunkID + '.png';
fs.writeFileSync(path, result.image);
console.log('Generated: ' + path);
const width = result.properties.width;
const height = result.properties.height;
const coords = Object.keys(result.coordinates);
const lastCoordID = coords[coords.length-1].match(/\d+/);
let selector = '[class*=i' + chunkID + '],.i' + ((chunkID+1)*100);
const css = selector + '{'
+ 'background-image: url(' + path.replace('.png', '.jpg') + ');'
+ 'background-size: ' + (width/ratio) + 'px ' + (height/ratio) + 'px;'
+ '}\n'
+ coords.map(function(path){
const id = path.match(/\d+/);
const coords = result.coordinates[path];
return '.i' + id + '{background-position: '
+ '-' + (coords.x/ratio) + 'px '
+ '-' + (coords.y/ratio) + 'px;'
+ '}';
}).join('\n');
resolve(css);
});
});
});
Promise.all(dataPromises).then(function(results){
const path = 'pokemon.css';
fs.writeFileSync(path, results.join('\n'));
console.log('Generated: ' + path);
});

0 comments on commit 09a5319

Please sign in to comment.