kineticjs linear gradient arrays

[dustfuk 0 Likes (Newbie)]

Hi there,
i'm developping a kind of tactical rpg game using html5 canvas and kineticjs to display most of the elements.
i've just started to set up the first animations and tried out gsap to manage most of it.
it's working pretty great for now.
But i've encountered a problem recently and can't seem to understand why it's not working.
i'll try to explain clearly here :
i have lifebars drawn on my canvas and they need updates when one of the character on screen takes damage.
my lifebars are Kinetic.Rect with a linear gradient fill with a stroke.
i can't manage to make my tweenline update the fillLinearGradient on my Kinetic.Rect.
 
i made some tests and there is no problem updating a simple fill color in my simpleFillRect like this exemple : 

tweenLine.to( simpleFillRect, 4, {
		    kinetic: {
			fill: 'green'
		    }
		} );

but i can't update the properties needed for linear gradient :

tweenLine.to( linearGradientFillRect, 4, {
		    kinetic: {
			fillLinearGradientStartPoint: [ 0, 0 ],
			fillLinearGradientEndPoint: [ 200, 0 ],
			fillLinearGradientColorStops: [ 0, 'blue', 0.5, 'yellow', 1, 'blue' ],
		    }
		} );

i wondered if it was because these properties are array of values, and particularly the color stop array.

actually it's even throwing an error on every frame :

Uncaught TypeError: Object [object Array] has no method 'charAt'

 

i then tried this kind of code :

tweenLine.to( linearGradientFillRect, 4, {
		    kinetic: {
			fillLinearGradientStartPoint: ''+[ 0, 0 ],
			fillLinearGradientEndPoint: ''+[ 200, 0 ],
			fillLinearGradientColorStops: ''+[ 0, 'blue', 0.5, 'yellow', 1, 'blue' ],
		    }
		} );

but then it just does nothing.

what am i missing here ?

 

by the way, thx for all the job you done on this api. it's amazing of simplicity and readability !

really pleasant to discover and dig into this !

and please, excuse my poor french english !

[Carl 9,066 Likes (Superhero)]

Hi and welcome to the GreenSock forums.

 

Congrats on your success with GSAP and KineticJS.

 

As you have suspected the trouble is that all those gradient props are not simple values, they are complex arrays with potentially varying numbers of values. Currently the KineticPlugin does not support tweening those gradient values, but you could tween your own properties of a proxy object and then apply those values to the object's gradient fill like so:

 

rect = new Kinetic.Rect({
        x: 0,
        y: 75,
        width: appWidth,
        height:20,
        fillLinearGradientStartPoint: [ 0, 0 ],
        fillLinearGradientEndPoint: [ appWidth, 0 ],
        fillLinearGradientColorStops: [ 0, 'blue', 0, 'yellow', 1, 'blue' ]  
      });


layer.add(rect);
stage.add(layer);




//create proxy object to hold tweenable values
gradientObject = {
    yellowStop:0,
    lastColor:'blue'
}


//tween various values in gradientObject
TweenMax.to(gradientObject, 2, {yellowStop:1, onUpdate:applyGradient, repeat:20, yoyo:true, delay:0.4})
TweenMax.to(gradientObject, 1, {colorProps:{lastColor:'red'}, repeat:20, yoyo:true, delay:0.4});




//apply new values to rects fill and draw()
function applyGradient() {
  rect.setFillLinearGradientColorStops([0, 'blue', gradientObject.yellowStop, 'yellow', 1, gradientObject.lastColor]);
  layer.draw();                                                                     
}

 

DEMO: http://codepen.io/GreenSock/pen/vhIEg

 

*note the above demo loads ColorPropsPlugin to assist in tweening 'blue' to 'red'

http://api.greensock.com/js/com/greensock/plugins/ColorPropsPlugin.html

[dustfuk 0 Likes (Newbie)]

Carl,

thank you for your help !

i know now that it's not directly possible right now with the kinetic plugin.

but your solution seems perfect !

 

i also have many ways of displaying my lifebars differently so i don't have to use gradients

but thank you so much for the time you spent on helping me.

i'll remember the proxy object solution.

and i'm going to check the colorprops plugin.