Available Now: SparkUp

I just released v0.1.0 of a new desktop app, SparkUp. SparkUp helps designers and creatives make spark and mood boards more quickly and more easily.

SparkUp is built on nw.js and will grow significantly as features are added and potential issues addressed as it moves towards it’s 1.0 release this spring.

screen

Center and scale images

I’m building out a new Shopify theme, and as product images for themes are rarely predictable, I need to make sure the images fill the parent, but do not produce any distortion cause by min or max width. In addition, the images need to be centered vertically or horizontally (depending on which side is longer).

To do that we use a little JS.


var extraDelay = 0;
    $(".product-list li a.product-thumb img").each(function(){
        extraDelay = extraDelay + 50;

        var parentWidth = $(this).parent("a").width();
        var parentHeight = $(this).parent("a").height();

        var width = $(this).width();
        var height = $(this).height();

        if(width > height){
            // wider than tall

            var diff = width / height;
            var newWidth = parentHeight * diff;
            var offset = ((newWidth - parentWidth) / 2 )- 1;

            $(this).css({
                height: parentHeight,
                left: -offset
            });

        } else if(width < height){
            // taller than wide

            var diff = height / width;
            var newHeight = parentWidth * diff;
            var offset = ((newHeight - parentHeight) / 2 )- 1;

            $(this).css({
                width: parentWidth,
                top: -offset
            });
        }

        $(this).delay(200 + extraDelay/3).animate({
            opacity: 1
        }, 200 + (extraDelay / 1.5), function() {
            // yay faded in!
        });

    });

What this does, is get the height and width of the parent and the image we need to scale (overflow on the parent is set to hidden in the css). It then scales the shortest side of the image to match it's parent.On the longer side, the difference between it and it's parent is calculated, and then the image is moved by half that amount (either up or to the left, depending on wether the long side is height or width), thus centering the image in it's parent.

It also fades the image in so you don't have to see the scaling happen, and fades each image slightly later and for slightly longer than the one before it. Just makes it feel a bit nicer.

In the below image, you can see it in action. The blue highlight shows the actual image dimensions, properly centered within the parent.

Layout - Project Title

And this is the source image:
il_570xN.464762154_li1r_large

Building a game timer for Unity in JS

Making a timer that counts up from, say, the start of your level is pretty straightforward but can be a head scratcher if you’re new to programming or Unity.

The code below is what I’m using for the timer on Blockulous. It’s pretty simple and quite effective. I take the results of secondCount and minuteCount in the script below and use ToString() to put the result in a GUI label.

var numberBase		: int 			= 0;
var secondCount		: int 			= 0;
var minuteCount		: int 			= 0;

if(Time.timeSinceLevelLoad > numberBase + 1){
	numberBase = numberBase + 1;
	secondCount = secondCount + 1;

	print(secondCount + " seconds");
	print(minuteCount + " minutes");

	if(secondCount > 59){
		secondCount = 0;
		minuteCount = minuteCount + 1;
	}	
}

This will increment second all the way up through 59, and on 60 add a minute to the minute count, and reset the seconds back to zero and begin again.

This code below is not necessary for the count, but it’s what I use to clean up the results of the counter and then display it in a neat fashion…

if(minuteCount < 1){
	visualMinutes = 0;
} else{
	visualMinutes = minuteCount;			
}

if(secondCount < 10){
	visualSeconds = "0" + secondCount.ToString();	
} else{		
	visualSeconds = secondCount.ToString();
}

transform.GetComponent(UILabel).text = visualMinutes.ToString() + ":" + visualSeconds;

(this goes INSIDE the if(Time.time ...) line from above, AFTER the if(secondCount ...) line) and you'll need these additional variables as well:

var visualSeconds	: String;
var visualMinutes	: int 			= 0;

You'll need your own GUI element in place of transform.GetComponent(UILabel).text = visualMinutes.ToString() + ":" + visualSeconds; of course.

This is cross posted from my new dev blog http://indieee.com