[Fixed] Shapepainter Objects Outline Does not render

GDevelop general Bugs reports
1

If i draw a shape once, without refreshing the draw each frame, the outline is not drawn.

Another thing is,
when i draw a circle shape, using “Shapepainter.X()” and “Shapepainter.Y()” as position of center, the circle is drawn correctly, however, if i then use the action “put an object around another” and use the shape painter object as center, then circle around it, it is not a perfect circle movement, like the center of the shape painter is actually off center.
That does not happen, when i use a sprite object as center.

2

When you report a bug try to add an sample file for us, it’s easier to understand and try what’s wrong.

The shape painter is an expensive object because the shape is drawn each frame.
Unless you have uncheck this button.
image

Shape painter have their origin in the top left corner i think.

This object deserve an big update.
While waiting, all these things should be driven and tweak in the events by yourself.
If you want rotate the circle with a rotation point in the middle, add an offset when you draw your circle.

If you wish a custom hitbox, use an sprite or place multiples objects on the scene editor for collide with the others objects.
This object can’t also have a decent hitboxes in accordance with the shape painted.

I waiting your sample file for the issue with the outline.

3

and when you do just that, the outline of the shape is not drawn.

Sample

I checked the numbers, seems the drawing happens 0;0 (origin of the shape painter), and center on object takes the center of the shape painter, that is 16/16px fixed.
even changing the shape painter to a custom size still results in the middle of 32/32 pixel.

4

I found the issue with the outline, i’ll fix it for the next release :slight_smile:
Thank you for your sample file!!

If you want try, you can use this fix, but you need to know this fix will only work for you in your game preview only. Not in exports, for that you need waiting the next release.

For patch your preview:

Go in

C:\Users\YOUR_USERNAME\AppData\Local\Programs\gdevelop\resources\GDJS\Runtime\Extensions\PrimitiveDrawing

Make an save of

shapepainterruntimeobject-pixi-renderer.js

After the save, open the original file, and copy/paste this code and save it.

//Edited by Bouh, tmp fix for outlines 09/08/2020

gdjs.ShapePainterRuntimeObjectPixiRenderer = function(runtimeObject, runtimeScene)
{
    this._object = runtimeObject;

    if ( this._graphics === undefined ) {
        this._graphics = new PIXI.Graphics();
    }

    runtimeScene.getLayer("").getRenderer().addRendererObject(this._graphics, runtimeObject.getZOrder());
};

gdjs.ShapePainterRuntimeObjectRenderer = gdjs.ShapePainterRuntimeObjectPixiRenderer; //Register the class to let the engine use it.

gdjs.ShapePainterRuntimeObjectPixiRenderer.prototype.getRendererObject = function() {
    return this._graphics;
};

gdjs.ShapePainterRuntimeObjectPixiRenderer.prototype.clear = function() {
    this._graphics.clear();
};

gdjs.ShapePainterRuntimeObjectPixiRenderer.prototype.drawRectangle = function(x1, y1, x2, y2) {
    this.updateOutline();
    this._graphics.beginFill(this._object._fillColor, this._object._fillOpacity / 255);
    this._graphics.drawRect(x1, y1, x2 - x1, y2 - y1);
    this._graphics.endFill();
};

gdjs.ShapePainterRuntimeObjectPixiRenderer.prototype.drawCircle = function(x, y, radius) {
    this.updateOutline();
    this._graphics.beginFill(this._object._fillColor, this._object._fillOpacity / 255);
    this._graphics.drawCircle(x, y, radius);
    this._graphics.endFill();
};

gdjs.ShapePainterRuntimeObjectPixiRenderer.prototype.drawLine = function(x1, y1, x2, y2, thickness) {
    this._graphics.beginFill(this._object._fillColor, this._object._fillOpacity / 255);
    if (y2 === y1) {
        this._graphics.drawRect(x1, y1 - thickness / 2, x2 - x1, thickness);
    } else {
        var angle = Math.atan2(y2 - y1, x2 - x1);
        var xIncrement = Math.sin(angle) * thickness;
        var yIncrement = Math.cos(angle) * thickness;

        this._graphics.drawPolygon(x1 + xIncrement, y1 - yIncrement, x1 - xIncrement, y1 + yIncrement,
            x2 - xIncrement, y2 + yIncrement, x2 + xIncrement, y2 - yIncrement);
    }
    this._graphics.endFill();
};

gdjs.ShapePainterRuntimeObjectPixiRenderer.prototype.drawLineV2 = function(x1, y1, x2, y2, thickness) {
    this._graphics.lineStyle(thickness, this._object._outlineColor, this._object._outlineOpacity / 255);
    this._graphics.moveTo(x1, y1);
    this._graphics.lineTo(x2,y2);
    this._graphics.endFill();  
};

gdjs.ShapePainterRuntimeObjectPixiRenderer.prototype.drawEllipse = function(x1, y1, width, height) {
    this.updateOutline();
    this._graphics.beginFill(this._object._fillColor, this._object._fillOpacity / 255);
    this._graphics.drawEllipse(x1, y1, width/2, height/2);
    this._graphics.endFill();
};

gdjs.ShapePainterRuntimeObjectPixiRenderer.prototype.drawRoundedRectangle = function(x1, y1, x2, y2, radius) {
    this.updateOutline();
    this._graphics.beginFill(this._object._fillColor, this._object._fillOpacity / 255);
    this._graphics.drawRoundedRect(x1, y1, x2 - x1, y2 - y1, radius);
    this._graphics.closePath();
    this._graphics.endFill();
};

gdjs.ShapePainterRuntimeObjectPixiRenderer.prototype.drawStar = function(x1, y1, points, radius, innerRadius, rotation) {
    this.updateOutline();
    this._graphics.beginFill(this._object._fillColor, this._object._fillOpacity / 255);
    this._graphics.drawStar(x1, y1, points, radius, innerRadius ? innerRadius : radius/2, rotation ? gdjs.toRad(rotation) : 0);
    this._graphics.closePath();
    this._graphics.endFill();
};

gdjs.ShapePainterRuntimeObjectPixiRenderer.prototype.drawArc = function(x1, y1, radius, startAngle, endAngle, anticlockwise, closePath) {
    this.updateOutline();
    this._graphics.beginFill(this._object._fillColor, this._object._fillOpacity / 255);
    this._graphics.moveTo(  x1 + radius * Math.cos(gdjs.toRad(startAngle)), y1 + radius * Math.sin(gdjs.toRad(startAngle)));
    this._graphics.arc(x1, y1, radius, gdjs.toRad(startAngle), gdjs.toRad(endAngle), anticlockwise ? true : false);
    if(closePath){
        this._graphics.closePath();
    }
    this._graphics.endFill();
};

gdjs.ShapePainterRuntimeObjectPixiRenderer.prototype.drawBezierCurve = function(x1, y1, cpX, cpY, cpX2, cpY2, x2, y2) {
    this.updateOutline();
    this._graphics.beginFill(this._object._fillColor, this._object._fillOpacity / 255);
    this._graphics.moveTo(x1, y1);
    this._graphics.bezierCurveTo(cpX, cpY, cpX2, cpY2, x2, y2);  
    this._graphics.endFill();
};

gdjs.ShapePainterRuntimeObjectPixiRenderer.prototype.drawQuadraticCurve = function(x1, y1, cpX, cpY, x2, y2) {
    this.updateOutline();
    this._graphics.beginFill(this._object._fillColor, this._object._fillOpacity / 255);
    this._graphics.moveTo(x1, y1);
    this._graphics.quadraticCurveTo(cpX, cpY, x2, y2);
    this._graphics.endFill();
};

gdjs.ShapePainterRuntimeObjectPixiRenderer.prototype.beginFillPath = function() {
    this._graphics.beginFill(this._object._fillColor, this._object._fillOpacity / 255);
};

gdjs.ShapePainterRuntimeObjectPixiRenderer.prototype.endFillPath = function() {
    this._graphics.endFill();
};

gdjs.ShapePainterRuntimeObjectPixiRenderer.prototype.drawPathMoveTo = function(x1, y1) {
    this._graphics.moveTo(x1, y1);
};

gdjs.ShapePainterRuntimeObjectPixiRenderer.prototype.drawPathLineTo = function(x1, y1) {
    this._graphics.lineTo(x1, y1);
};

gdjs.ShapePainterRuntimeObjectPixiRenderer.prototype.drawPathBezierCurveTo = function(cpX, cpY, cpX2, cpY2, toX, toY) {
    this._graphics.bezierCurveTo(cpX, cpY, cpX2, cpY2, toX, toY);  
};

gdjs.ShapePainterRuntimeObjectPixiRenderer.prototype.drawPathArc = function(x1, y1, radius, startAngle, endAngle, anticlockwise) {
    this._graphics.arc(x1, y1, radius, gdjs.toRad(startAngle), gdjs.toRad(endAngle), anticlockwise ? true : false);
};

gdjs.ShapePainterRuntimeObjectPixiRenderer.prototype.drawPathQuadraticCurveTo = function(cpX, cpY, toX, toY) {
    this._graphics.quadraticCurveTo(cpX, cpY, toX, toY);  
};

gdjs.ShapePainterRuntimeObjectPixiRenderer.prototype.closePath = function() {
    this._graphics.closePath();  
};

gdjs.ShapePainterRuntimeObjectPixiRenderer.prototype.updateOutline = function() {
    this._graphics.lineStyle(
        this._object._outlineSize,
        this._object._outlineColor,
        this._object._outlineOpacity / 255
    );
}

gdjs.ShapePainterRuntimeObjectPixiRenderer.prototype.updateXPosition = function() {
    if (!this._object._absoluteCoordinates) {
        this._graphics.position.x = this._object.x;
    } else {
        this._graphics.position.x = 0;
    }
}

gdjs.ShapePainterRuntimeObjectPixiRenderer.prototype.updateYPosition = function() {
    if (!this._object._absoluteCoordinates) {
        this._graphics.position.y = this._object.y;
    } else {
        this._graphics.position.y = 0;
    }
}

Let me know if you have still the issue, or another one with the shape painter object.