How is RPG Maker MV's RGB color model calculated?

Discussion in 'RPG Maker MV' started by quackgyver, May 11, 2019.

  1. quackgyver

    quackgyver I make retro games for astrojone.com Veteran

    Messages:
    64
    Likes Received:
    21
    First Language:
    English
    Primarily Uses:
    RMMV
    RGB 0,0,0 in RPG Maker MV is not the same as RGB 0,0,0 in the RGB color model standard.

    How do you convert between real RGB and RPG Maker MV's own RGB color model? I've tried halving the values in RPG Maker MV since RGB -255, -255, -255 in RPG Maker MV is the same as RGB 0,0,0 but it didn't work.

    Could someone explain the logic behind it so that I can set my colors properly?

    Thanks!
     
    #1
  2. Dreadshadow

    Dreadshadow Lv 38 Tech Magician Moderator

    Messages:
    3,825
    Likes Received:
    2,469
    First Language:
    Greek
    Primarily Uses:
    RMMV
    Last edited: May 11, 2019
    #2
  3. gstv87

    gstv87 Veteran Veteran

    Messages:
    1,702
    Likes Received:
    720
    First Language:
    Spanish
    Primarily Uses:
    RMVXA
    RGB is as it always has been, 0 is black, 255 is color, mixes of partials give you the subtractive palette, and all three give you white.
    don't confuse RGB with HSB, which is what controls pictures and effects systems.
     
    #3
  4. quackgyver

    quackgyver I make retro games for astrojone.com Veteran

    Messages:
    64
    Likes Received:
    21
    First Language:
    English
    Primarily Uses:
    RMMV
    The question is general. RPG Maker MV uses -255-255-range RGB sliders to decide colors for tint, window color, flash and so on, and I need to know how the standardized RGB color model can be translated into RPG Maker MV's RGB color model.

    The issue I'm having right now for instance, is that I'm trying to change the window color so that it lines up with my system window image, but since I can't translate the RGB color value from the image into RPG Maker MV's RGB color model the result ends up looking like this:

    Screen Shot 2019-05-11 at 13.44.39.png
     
    #4
    Dreadshadow likes this.
  5. Dreadshadow

    Dreadshadow Lv 38 Tech Magician Moderator

    Messages:
    3,825
    Likes Received:
    2,469
    First Language:
    Greek
    Primarily Uses:
    RMMV
    Take it with a grain of salt, but it should handle it with four arguments if I am not wrong. #RRGGBBAA
    Two hex digits for each Red Green Blue Colors along with two hex digits for the Alpha of the color.
    Try this out and if it fails, then someone will eventually come to aid you for sure.
     
    #5
  6. caethyril

    caethyril ^_^ Veteran

    Messages:
    1,030
    Likes Received:
    639
    Location:
    UK
    First Language:
    English
    Primarily Uses:
    RMMV
    I think this is a question of composition/blend modes. Here's the canvas renderer code for ToneSprite as a reference:
    Code:
    ToneSprite.prototype._renderCanvas = function(renderer) {
        if (this.visible) {
            var context = renderer.context;
            var t = this.worldTransform;
            var r = renderer.resolution;
            var width = Graphics.width;
            var height = Graphics.height;
            context.save();
            context.setTransform(t.a, t.b, t.c, t.d, t.tx * r, t.ty * r);
            if (Graphics.canUseSaturationBlend() && this._gray > 0) {
                context.globalCompositeOperation = 'saturation';
                context.globalAlpha = this._gray / 255;
                context.fillStyle = '#ffffff';
                context.fillRect(0, 0, width, height);
            }
            context.globalAlpha = 1;
            var r1 = Math.max(0, this._red);
            var g1 = Math.max(0, this._green);
            var b1 = Math.max(0, this._blue);
            if (r1 || g1 || b1) {
                context.globalCompositeOperation = 'lighter';
                context.fillStyle = Utils.rgbToCssColor(r1, g1, b1);
                context.fillRect(0, 0, width, height);
            }
            if (Graphics.canUseDifferenceBlend()) {
                var r2 = Math.max(0, -this._red);
                var g2 = Math.max(0, -this._green);
                var b2 = Math.max(0, -this._blue);
                if (r2 || g2 || b2) {
                    context.globalCompositeOperation = 'difference';
                    context.fillStyle = '#ffffff';
                    context.fillRect(0, 0, width, height);
                    context.globalCompositeOperation = 'lighter';
                    context.fillStyle = Utils.rgbToCssColor(r2, g2, b2);
                    context.fillRect(0, 0, width, height);
                    context.globalCompositeOperation = 'difference';
                    context.fillStyle = '#ffffff';
                    context.fillRect(0, 0, width, height);
                }
            }
            context.restore();
        }
    };
    First it checks the grey value: if that's non-zero it'll apply a desaturation using saturation mode. Then it checks for positive RGB values; if at least one is found it'll switch to lighter mode for the subsequent rendering. Finally it checks the RGB values again for any negatives: if there's at least one negative, it applies a render pass using the difference mode using those negative values. :)
     
    #6
    Dreadshadow likes this.
  7. quackgyver

    quackgyver I make retro games for astrojone.com Veteran

    Messages:
    64
    Likes Received:
    21
    First Language:
    English
    Primarily Uses:
    RMMV
    Thanks for the response, but what do you mean by "two hex digits"? The values used to specify RPG Maker MV's RGB colors are three integers ranging from -255 to 255.

    How does this relate to converting from RGB to RPG Maker MV's RGB though? For setting the window color I have three integers each representing R, G and B and each ranging from -255 to 255. I need to know what values in the normal RGB color model that translates into RPG Maker MV's RGB sliders.
     
    #7
  8. Andar

    Andar Veteran Veteran

    Messages:
    28,128
    Likes Received:
    6,372
    Location:
    Germany
    First Language:
    German
    Primarily Uses:
    RMMV
    You completely mistook the tint command - tint values are NOT color values.

    All RMs work on the same color values 0-255 for RGB as anything else.
    When using tint-screen, the values of the tint commands are mathematical values for a mathematical calculation to create a new color value.
    Which basically means that for the screen, it takes the color of each pixel of the map and adds or substracts the tint value from that base color.
    If the result goes beyond 255 or lower than 0, the color value will be capped at that value. That is why for example the dark-setting of the tint screen reduces all values by 68, but the sunset setting increases the red value while reducing the green and blue components.

    For the window color it's the same - what you set in the database is NOT the base color. The base window color is set by the window.png picture in the game's system folder, and the option in the database is a tint operation to change that base color - but the resulting number for the color will always be the regular 0-255 value of RGB.

    So an -255 will always drop any color value to 0 - but if the base color value is lower, then the zero cap will be reached sooner. for example if the base value is only 100, then a -50 is enough to halve the color and a -100 will drop it to zero - a -255 would be excessive and have the same effect as a -100. But if the base color value was 200, then the -50 would do less and the -100 not reach zero.
     
    #8
    caethyril likes this.
  9. gstv87

    gstv87 Veteran Veteran

    Messages:
    1,702
    Likes Received:
    720
    First Language:
    Spanish
    Primarily Uses:
    RMVXA
    @Andar beat me to it.
    set up a blank event, and add a tint command, it has a color gradient that shows how it operates.
    you'll see it add and subtract values as intended.
     
    #9
  10. quackgyver

    quackgyver I make retro games for astrojone.com Veteran

    Messages:
    64
    Likes Received:
    21
    First Language:
    English
    Primarily Uses:
    RMMV
    Okay, so does this mean that the image that shows in the RPG Maker MV-editor is some kind of mock window-image rather than a base color?
     
    #10
  11. Andar

    Andar Veteran Veteran

    Messages:
    28,128
    Likes Received:
    6,372
    Location:
    Germany
    First Language:
    German
    Primarily Uses:
    RMMV
    it is the color that will be used because it is the result of the combination of base color and tint - you just can't enter the values directly, you need them as tint - but any color is possible exactly because the tint has the range from -255 to +255, which means even a base 0 can be changed into the max 255 by using a +255 tint and a max 255 base color value can be changed into the base 0 by tint -255.
     
    #11
  12. quackgyver

    quackgyver I make retro games for astrojone.com Veteran

    Messages:
    64
    Likes Received:
    21
    First Language:
    English
    Primarily Uses:
    RMMV
    I'm not following. Is the base color of the window color a color, or an image?
     
    #12
  13. Andar

    Andar Veteran Veteran

    Messages:
    28,128
    Likes Received:
    6,372
    Location:
    Germany
    First Language:
    German
    Primarily Uses:
    RMMV
    The "Base color" is a color, but that color is not defined by a number in a program but by the color value of a certain section in the image that sets the colors for the engine. Just go to your project's system folder and look at the window.png, or simply open the help section of the editor and look for the description of the resource windows.png
    It should become extremely obvious from the structure of that picture and the explanation in the help file.
     
    #13
  14. quackgyver

    quackgyver I make retro games for astrojone.com Veteran

    Messages:
    64
    Likes Received:
    21
    First Language:
    English
    Primarily Uses:
    RMMV
    I'm still not following this at all. What I'm trying to understand is, how can I use the "Change Window Color"-event to change the color of my window to specifically match a certain hexcode? In other words, if my default window skin has a background color with the color code of #ffffff, then how can I determine which values that I need to input into the "Change Window Color"-event in order for the resulting color code to match a color of my choosing?

    Like, let's say we're trying to achieve the color #ff0080 from a default color of #ffffff. What would I need to put in the "Change Window Color"-input for the background color to match #ff0080? Because 255,0,128 (the RGB values of that color) isn't working, and is instead giving me a purple hue with the value #c5d7fd (or 197,215,253).

    EDIT:

    I figured it out. For anyone else who's curious:
    • The background image from the window image is pulled into RPG Maker MV as the background color that is displayed under "Window Color" in the "System"-tab of the Database editor.
    • The "Window Color" that can be set by double-clicking on "Window Color" is just a tint that is applied on top of the image.
    • The "Change Window Color"-event just changes the same tint values for the default image.
     
    Last edited: Jul 15, 2019
    #14
  15. Engr. Adiktuzmiko

    Engr. Adiktuzmiko Chemical Engineer, Game Developer, Using BlinkBoy' Veteran

    Messages:
    14,456
    Likes Received:
    2,844
    Location:
    Philippines
    First Language:
    Tagalog
    Basically, that image is the "base" and the "color" that you set in the editor simply adds/subtracts from the colors in that image. So if you want to use that, you can try to subtract the current color value of your window image from the resultant color value that you want...

    I think its easier if you just open the Window.png file and recolor it using an image editing software...
     
    #15
  16. Andar

    Andar Veteran Veteran

    Messages:
    28,128
    Likes Received:
    6,372
    Location:
    Germany
    First Language:
    German
    Primarily Uses:
    RMMV
    It is a mathematical operation.
    If the base is #ffffff and the result is supposed to be #ff0080, then what you need to change is (expressed as a mathematical formula)
    #ffffff + X = #ff0080
    or after solving the equation X = (0, -255, -127)

    EDIT:
    or to read it based on components:
    Red component remains unchanged (ff->ff means 0)
    Green component needs to be zeroed from that (ff->00 means -255 the max reduction)
    Blue component needs to be halved (ff->80 means 255->128 means -127)

    Ninja'd during editing
     
    Last edited: Jul 15, 2019
    #16
  17. quackgyver

    quackgyver I make retro games for astrojone.com Veteran

    Messages:
    64
    Likes Received:
    21
    First Language:
    English
    Primarily Uses:
    RMMV
    Yeah, I finally figured it out. What confused me was the use of the term "Window Color" when it's actually an image tint. I thought that you were somehow changing or tinting a solid default color.

    Thanks for the help!
     
    #17

Share This Page