Jump to content

How does interpolate color work?


Legomite
 Share

Recommended Posts

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

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

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

 Share

  • Recently Browsing   0 members

    • No registered users viewing this page.
×
×
  • Create New...