Legomite Posted May 13, 2017 Share Posted May 13, 2017 I created a blue gradient for the sky in my game. I took code from the Phaser example and edited it to only the most important parts. I studied the functions of each part but I can't figure out what one of the values in interpolate color is. The docs says the value I'm looking at is "steps" but I'm confused as to why it needs a value of 215. The canvas is 600 heigh and 215 seems totally unrelated. Why does it have to be 215? skyGradient = game.add.bitmapData(game.width, game.height); skyGradient.addToWorld(); var y = 0; for (var i = 0; i < 600; i++) { var color = Phaser.Color.interpolateColor(0x007aff, 0x00aaff, 215, i); skyGradient.rect(0, y, game.width, 1, Phaser.Color.getWebRGB(color)); y+= 1; } Link to comment Share on other sites More sharing options...
Taz Posted May 14, 2017 Share Posted May 14, 2017 Steps isn't a pixel amount, it affects the number of colors to use in between the specified start color and end color. so with less steps the color changes more abruptly, with more steps it's smoother, like how a graph with more data points is smoother. Link to comment Share on other sites More sharing options...
samme Posted May 14, 2017 Share Posted May 14, 2017 In this case I think using a currentStep value greater than 215 is wrong (it goes through 599). Link to comment Share on other sites More sharing options...
Taz Posted May 14, 2017 Share Posted May 14, 2017 Yes any currentStep param greater than or equal to 215 (the steps param) would be color2 I think, since going past color2 would be extrapolation, not interpolation (actually I'm not 100% sure that it clips at the bounds instead of extrapolating past them, but would expect to honor bounds and stay between color1 and color2). From the docs: "If the interpolation will take 100 steps, a currentStep value of 50 would be half-way between the two." Link to comment Share on other sites More sharing options...
Recommended Posts