markware Posted February 13, 2014 Share Posted February 13, 2014 How can i tween background color(game.stage.backgroundColor), from one to another? Link to comment Share on other sites More sharing options...
Zeterain Posted February 13, 2014 Share Posted February 13, 2014 I believe that because backgroundColor is stored as a string, you can not tween the value. You could create a number variable to store the background color, tween that variable, and then convert that value to a string and set the background color every frame in the update loop. Because backgroundColor is a property, setting the value every frame might be expensive computationally. Link to comment Share on other sites More sharing options...
anissen Posted February 14, 2014 Share Posted February 14, 2014 One approach is to use one of the following color-libraries to create a color object, tween the values of that object, and pull out the corresponding color value when rendering: https://github.com/bgrins/TinyColor https://github.com/mbjordan/Colors https://github.com/harthur/color https://github.com/gka/chroma.js Link to comment Share on other sites More sharing options...
markware Posted February 15, 2014 Author Share Posted February 15, 2014 solution function blendColors(c0, c1, p) { var f=parseInt(c0.slice(1),16),t=parseInt(c1.slice(1),16),R1=f>>16,G1=f>>8&0x00FF,B1=f&0x0000FF,R2=t>>16,G2=t>>8&0x00FF,B2=t&0x0000FF; return "#"+(0x1000000+(Math.round((R2-R1)*p)+R1)*0x10000+(Math.round((G2-G1)*p)+G1)*0x100+(Math.round((B2-B1)*p)+B1)).toString(16).slice(1);}function makecolor(colore){game.stage.backgroundColor=colore;}function coloru(colorpanel){var i=1;colorpanel.forEach(function(entry) { i=i+50; setTimeout(function(){makecolor(entry)}, 100+i);}); return false; }function weather(colour,colourto){colorpanel=[];for(i=0;i<=10;i++){ var color=blendColors(colour,colourto,i/10); colorpanel.push(color); } coloru(colorpanel) } its bad and nasty but i post it for discussion Link to comment Share on other sites More sharing options...
Recommended Posts