Jump to content

Change Graphic Color Based on Number Value


Recommended Posts


I'm trying to change a graphics color based on the value of the number.  If that number is 0, the graphic is blue.  If that number is maxRange (we'll use 37000) it is fully green, numbers closer to 0 would be more blue, and slowly it would become more green as the value reaches it's ceiling.  How could I achieve this in Phaser? Thanks!

Link to comment
Share on other sites

So I ended up doing something like this, it's working, but I'm not sure if it's the best way?

countMax is the upper limit variable (say 1000), and curCount is val between 0 and countMax;

    makeColor: function() {
        // 0,55,255 is rgb blue val
        // 0,125,0 is rgb green val
        var r = 0;
        var g = 55;
        var b = 255;

        var maxG = 75;
        var minB = 0;

        g = Math.floor(g + ((75/this.countMax)*(this.curCount)));
        b = Math.floor(b + (((255/this.countMax)*(this.curCount))*-1));

        if (g > maxG) g = maxG;
        if (b < minB) b = minB;


        return this.RGB2Hex(r,g,b);


Link to comment
Share on other sites


  • Recently Browsing   0 members

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