How to fill a window with color?

Discussion in 'JS Plugin Requests' started by Isabella Ava, Dec 16, 2018.

  1. Isabella Ava

    Isabella Ava Veteran Veteran

    Messages:
    636
    Likes Received:
    747
    First Language:
    English
    Hi everyone,
    I have add an custom window on map, i wonder how to fill it with a solid color and hide the window skin?
    (so only a colored rectangle are showing instead of a window filled with color)
    =D thank you very much
     
    #1
  2. MushroomCake28

    MushroomCake28 Great Sorcerer Ainz Ooal Gown-sama Veteran

    Messages:
    991
    Likes Received:
    1,677
    Location:
    Montreal, Canada
    First Language:
    English
    Primarily Uses:
    RMMV
    Hide the window skin with this (insert it in the window initialize process):
    Code:
    this.opacity = 0;
    To draw a colored rectangle, use this code and insert it in the refresh method, after the content clearing line:
    Code:
    this.contents.fillRect(x, y, width, height, color);
    
    // x: starting x position of the rectangle
    // y: starting y position of the rectangle
    // width: rectangle total width.
    // height: rectangle total height.
    // color: rectangle color. Use this format: "rgba(r, g, b, a)"
    // - red, green and blue: value between 0 and 255
    // - alpha: value between 0 and 1 (accepts decimal)
     
    #2
  3. Isabella Ava

    Isabella Ava Veteran Veteran

    Messages:
    636
    Likes Received:
    747
    First Language:
    English
    Thank you, i did that but it didn't work (i didn't fillRect in refresh method but only once at initialize metod though)
     
    #3
  4. MushroomCake28

    MushroomCake28 Great Sorcerer Ainz Ooal Gown-sama Veteran

    Messages:
    991
    Likes Received:
    1,677
    Location:
    Montreal, Canada
    First Language:
    English
    Primarily Uses:
    RMMV
    You probably try to use it before creating the content. Can you show your custom window's code?
     
    #4
  5. Isabella Ava

    Isabella Ava Veteran Veteran

    Messages:
    636
    Likes Received:
    747
    First Language:
    English
    yes, i did it like this ( i tried with rgba() too) but it just doesn't work
    Code:
    this._cWindow = new My_Window(xx,yy);
                this._cWindow.opacity = 155;
                this._cWindow.contents.fillRect(0, 0, 5, 5, '#ff00a8');
                this.addChild(this._cWindow);
     
    #5
  6. MushroomCake28

    MushroomCake28 Great Sorcerer Ainz Ooal Gown-sama Veteran

    Messages:
    991
    Likes Received:
    1,677
    Location:
    Montreal, Canada
    First Language:
    English
    Primarily Uses:
    RMMV
    Did you put the "" around the rgba()? Like: "rgba(255, 255, 0, 1)"

    If it still doesn't work, can you copy/paste your code for the My_Window object?
     
    #6
  7. Isabella Ava

    Isabella Ava Veteran Veteran

    Messages:
    636
    Likes Received:
    747
    First Language:
    English
    Yes, thank you very much for helping me = D
    Probably i created too small windows but ..
    Code:
    function My_Window() {
        this.initialize.apply(this, arguments);
    }
    
    My_Window.prototype = Object.create(Window_Base.prototype);
    My_Window.prototype.constructor = My_Window;
    
    My_Window.prototype.initialize = function(x,y) {
        Window_Base.prototype.initialize.call(this,x,y,5,5);
    }
     
    #7
  8. MushroomCake28

    MushroomCake28 Great Sorcerer Ainz Ooal Gown-sama Veteran

    Messages:
    991
    Likes Received:
    1,677
    Location:
    Montreal, Canada
    First Language:
    English
    Primarily Uses:
    RMMV
    Yeah, the content isn't being created because your window is too small. It needs to be more than 36 in both width and height.

    By default, the content starts 18 pixel off every edge, making the window's content in reality 36 pixels less in width and height than the window itself.

    this.contents.fillRect draws a rectangle, but insides the content, which in this case wasn't create due to having negative width and height value. So it couldn't draw anything.

    The solution would be to have a window bigger than 36, and remove 18 from the x and y axis to draw your rectangle at the position you want:
    Window_Base.prototype.call(this, x - 18, y - 18, 41, 41);
     
    #8
    Isabella Ava likes this.
  9. Isabella Ava

    Isabella Ava Veteran Veteran

    Messages:
    636
    Likes Received:
    747
    First Language:
    English
    Ah thank you = D i was wondering why is that
     
    #9
    MushroomCake28 likes this.
  10. MushroomCake28

    MushroomCake28 Great Sorcerer Ainz Ooal Gown-sama Veteran

    Messages:
    991
    Likes Received:
    1,677
    Location:
    Montreal, Canada
    First Language:
    English
    Primarily Uses:
    RMMV
    So everything is working as intended now?
     
    #10
    Isabella Ava likes this.

Share This Page