krikkert/habitica
1
0
Fork 0
mirror of https://github.com/HabitRPG/habitica.git synced 2025-12-17 06:37:23 +01:00
Code Issues Packages Projects Releases Wiki Activity

Calculate number of sprite tasks by img dimensions

Browse Source
This commit is contained in:
Blade Barringer
2015-09-12 08:27:05 -05:00
parent 17efad6a30
commit 5cea988891
1 changed files with 45 additions and 26 deletions
Download Patch File Download Diff File Expand all files Collapse all files

71
tasks/gulp-sprites.js
View File

@@ -12,24 +12,22 @@ const DIST_PATH = 'common/dist/sprites/';
// https://github.com/Ensighten/grunt-spritesmith/issues/67#issuecomment-34786248
const MAX_SPRITESHEET_SIZE = 1024 * 1024 * 3;
const SPRITESHEET_COUNT = _calculateNumberOfSpritesheets();
const NUMBER_OF_SPRITES_PER_SHEET = SPRITES_SRC.length / SPRITESHEET_COUNT;
const SPRITESHEET_SLICE_INDICIES = _calculateSpritesheetsSrcIndicies();
let spritesTasks = ['sprites:clean'];
times(SPRITESHEET_COUNT, (i) => {
let slicedSrc = _getSliceSrc(i);
let taskName = `sprites:${i}`;
each(SPRITESHEET_SLICE_INDICIES, (start, index) => {
let slicedSrc = SPRITES_SRC.slice(start, SPRITESHEET_SLICE_INDICIES[index + 1]);
let taskName = `sprites:${index}`;
spritesTasks.push(taskName);
gulp.task(taskName, () => {
let spriteData = gulp.src(slicedSrc)
.pipe(spritesmith({
imgName: `spritesmith${i}.png`,
cssName: `spritesmith${i}.css`,
imgName: `spritesmith${index}.png`,
cssName: `spritesmith${index}.css`,
algorithm: 'binary-tree',
padding:1,
padding: 1,
cssTemplate: 'common/css/css.template.mustache',
cssVarMap: _cssVarMap
}));
@@ -72,6 +70,8 @@ gulp.task('sprites:checkCompiledDimensions', () => {
if (numberOfSheetsThatAreTooBig > 0) {
console.error(`${numberOfSheetsThatAreTooBig} sheets are too big :(`);
console.error('Mobile Safari may be unhappy with you');
} else {
console.log('All images are within the correct dimensions');
}
});
@@ -79,41 +79,60 @@ gulp.task('sprites:compile', spritesTasks, () => {
gulp.run('sprites:checkCompiledDimensions');
});
function _getSliceSrc(num) {
let start = num * NUMBER_OF_SPRITES_PER_SHEET;
let end = (num + 1) * NUMBER_OF_SPRITES_PER_SHEET;
let src = SPRITES_SRC.slice(start, end)
return src;
}
function _calculateNumberOfSpritesheets() {
function _calculateSpritesheetsSrcIndicies() {
let totalPixels = 0;
let slices = [0];
each(SPRITES_SRC, function(img){
totalPixels += _calculateImgDimensions(img);
each(SPRITES_SRC, (img, index) => {
let imageSize = _calculateImgDimensions(img, true);
totalPixels += imageSize;
if (totalPixels > MAX_SPRITESHEET_SIZE) {
slices.push(index - 1);
totalPixels = imageSize;
}
});
let numberOfSpriteSheets = Math.ceil(totalPixels / MAX_SPRITESHEET_SIZE);
return numberOfSpriteSheets;
return slices;
}
function _calculateImgDimensions(img) {
function _calculateImgDimensions(img, addPadding) {
let dims = sizeOf(img);
let requiresSpecialTreatment = _checkForSpecialTreatment(img);
if (requiresSpecialTreatment) {
let newWidth = dims.width < 90 ? 90 : dims.width;
let newHeight = dims.height < 90 ? 90 : dims.height;
dims = {
width: newWidth,
height: newHeight
};
}
let padding = 0;
if (addPadding) {
padding = (dims.width * 8) + (dims.height * 8);
}
if(!dims.width || !dims.height) console.error('MISSING DIMENSIONS:', dims);
let totalPixelSize = dims.width * dims.height;
let totalPixelSize = (dims.width * dims.height) + padding;
return totalPixelSize;
}
function _checkForSpecialTreatment(name) {
let regex = /hair|skin|beard|mustach|shirt|flower|^headAccessory_special_\w+Ears/;
return name.match(regex) || name === 'head_0';
}
function _cssVarMap(sprite) {
// For hair, skins, beards, etc. we want to output a '.customize-options.WHATEVER' class, which works as a
// 60x60 image pointing at the proper part of the 90x90 sprite.
// We set up the custom info here, and the template makes use of it.
if (sprite.name.match(/hair|skin|beard|mustach|shirt|flower|^headAccessory_special_\w+Ears/) || sprite.name=='head_0') {
let requiresSpecialTreatment = _checkForSpecialTreatment(sprite.name);
if (requiresSpecialTreatment) {
sprite.custom = {
px: {
offset_x: `-${ sprite.x + 25 }px`,