How to fill a window with color?

[Isabella Ava]

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

 

[MushroomCake28]

Hide the window skin with this (insert it in the window initialize process):

this.opacity = 0;

To draw a colored rectangle, use this code and insert it in the refresh method, after the content clearing line:

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)

 

[Isabella Ava]

Hide the window skin with this (insert it in the window initialize process):

this.opacity = 0;

To draw a colored rectangle, use this code and insert it in the refresh method, after the content clearing line:

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)

Thank you, i did that but it didn't work (i didn't fillRect in refresh method but only once at initialize metod though)

 

[MushroomCake28]

You probably try to use it before creating the content. Can you show your custom window's code?

 

[Isabella Ava]

You probably try to use it before creating the content. Can you show your custom window's code?

yes, i did it like this ( i tried with rgba() too) but it just doesn't work

this._cWindow = new My_Window(xx,yy);
            this._cWindow.opacity = 155;
            this._cWindow.contents.fillRect(0, 0, 5, 5, '#ff00a8');
            this.addChild(this._cWindow);

 

[MushroomCake28]

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?

 

[Isabella Ava]

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?

Yes, thank you very much for helping me = D
Probably i created too small windows but ..

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);
}

 

[MushroomCake28]

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);

 

[Isabella Ava]

Ah thank you = D i was wondering why is that

 

[MushroomCake28]

So everything is working as intended now?