Shapes rendered using PIXI.Graphics not rendering on WebGLRenderer but rendering fine on CanvasRenderer [solved]

[xTiming]

I recently upgraded to pixi v4.0.1 from pixi v3.x.x.  Since then some simple code that was just rendering a colored square has stopped working when using the WebGLRenderer.  Relevant code below:

var PlayerObject = function(uniqueId, world, x, y, velx, vely, clientPlayerObj) {
    // ...

    var color = Math.floor(Math.random() * 0xFFFFFF);
    this.renderObject = new PIXI.Graphics();
    this.renderObject.beginFill(color, 0xFF);
    this.renderObject.drawRect(x * 16, y * 16, 32, 32);

    // ...
};

World.prototype.addGameObject = function(gameObj) {
    // ...

    if (gameObj.renderObject != null) {
        this.renderRoot.addChild(gameObj.renderObject);
    }
};

I'm simply creating a PIXI Graphics object, drawing a rectangle and then adding the Graphics object as a child to my PIXI Container.  The render loop simply calls render on the PIXI Container, of course thus rendering all the Container's children as well.

In the CanvasRenderer this works exactly as expected, a 32x32 randomly colored rectangle being drawn at a random point (the x and y coordinates are randomly generated).  In the WebGLRenderer however nothing happens at all, they are never rendered despite all the same processes seemingly occurring when I step through the code (might have missed something).  Everything else that should be rendered displays properly.

Any idea what's up here?  Was there something specific to Graphics objects that changed which could be causing this to stop working in pixi v4?

[Exca]

Beginfill should be beginFill(color, 1); if you want solid fill. Alpha value is float from 0 to 1.

You should also call endFill.

None of those should block the drawing though.

[xTiming]

10 hours ago, Exca said:

Beginfill should be beginFill(color, 1); if you want solid fill. Alpha value is float from 0 to 1.

You should also call endFill.

None of those should block the drawing though.

Seems like from the Pixi Graphics example the lineStyle function should be called in Pixi v4.  When I added that function call to my graphics setup it started working.

var PlayerObject = function(uniqueId, world, x, y, velx, vely, clientPlayerObj) {
    // ...

    var color = Math.floor(Math.random() * 0xFFFFFF);
    this.renderObject = new PIXI.Graphics();
    this.renderObject.beginFill(color, 0xFF);
    this.renderObject.lineStyle(1, color, 0xFF);
    this.renderObject.drawRect(x * 16, y * 16, 32, 32);
    this.renderObject.endFill();

    // ...
};

Also added the endFill call as suggested - this wasn't what fixed the issue to clarify though - it was definitely the lineStyle call that fixed the issue.

Thanks for the suggestions, pointing out that the alpha is from 0-1 actually solved a related issue I had (shapes were appearing white instead of the random color I assigned).  Hadn't had a chance to look at that yet but now I don't have to!

[xerver]

Tracking this in a bug now: https://github.com/pixijs/pixi.js/issues/2984

Thanks for the report!