Drawing Gauges

Discussion in 'Learning Javascript' started by RespectWomen, Apr 2, 2019.

  1. RespectWomen

    RespectWomen Acoustic Child Veteran

    Messages:
    57
    Likes Received:
    14
    Location:
    Brooklyn, New York
    First Language:
    English
    Primarily Uses:
    RMMV
    2 questions,

    1. Is it possible at all to get a thicker gauge with the default MV gauges? i see only a width property.

    2. How do i make a gauge fill left to right? I tried using negative width but it will no longer fill.
     
    #1
  2. Poryg

    Poryg Dark Lord of the Castle of Javascreeps Veteran

    Messages:
    3,996
    Likes Received:
    10,114
    Location:
    Czech Republic
    First Language:
    Czech
    Primarily Uses:
    RMMV
    1.Yes, Yanfly plugins have done exactly that
    2. I thought any normal gauge fills from left to right. Did you mean from right to left?
     
    #2
  3. RespectWomen

    RespectWomen Acoustic Child Veteran

    Messages:
    57
    Likes Received:
    14
    Location:
    Brooklyn, New York
    First Language:
    English
    Primarily Uses:
    RMMV
    My bad, that's correct, I meant right to left
     
    #3
  4. Poryg

    Poryg Dark Lord of the Castle of Javascreeps Veteran

    Messages:
    3,996
    Likes Received:
    10,114
    Location:
    Czech Republic
    First Language:
    Czech
    Primarily Uses:
    RMMV
    Code:
    Window_Base.prototype.drawGauge = function(x, y, width, height, rate, color1, color2, reverse) {
        if (reverse) {
            x += width;
            width = -width;
        }
        var fillW = Math.floor(width * rate);
        var gaugeY = y + this.lineHeight() - 8;
        this.contents.fillRect(x, gaugeY, width, height, this.gaugeBackColor());
        this.contents.gradientFillRect(x, gaugeY, fillW, height, color1, color2);
    };
    Insert this code as a plugin. Then you can draw any gauge you want from left to right, you just need to remember few things:

    1. There are two extra parameters. One of them is height, which serves as the height of a gauge. By default it's 6.
    2. Reverse is either true or false and it's false by default.
    3. There are not 6 parameters now in that function, but 8. Height and reverse have been introduced as new parameters. If you want to have a fixed, just bigger height for every gauge, then replace every instance of height in this function's code with a number and delete it from parameters. Just remember that by default every gauge's width is 6.
     
    #4
    RespectWomen likes this.
  5. RespectWomen

    RespectWomen Acoustic Child Veteran

    Messages:
    57
    Likes Received:
    14
    Location:
    Brooklyn, New York
    First Language:
    English
    Primarily Uses:
    RMMV
    Thanks, I'm having just one problem though, the outlines of the gauges aren't showing up.

    Edit: Nvm, I forgot that its not a default thing...
     
    Last edited: Apr 2, 2019
    #5

Share This Page