How to draw rectangle with 1 round corner?

[Alexander Farber]

Good morning!

How to draw rectangle with 1 rounded corner and fill it with color please?

I am trying to use the method arcTo with the following code:

                this.bgGraphics.beginFill(0xFFCC00, 1);
                this.bgGraphics.moveTo(0, 0);
                this.bgGraphics.lineTo(45, 0);
                this.bgGraphics.arcTo(45, 0, 60, 15, 15);
                this.bgGraphics.lineTo(60, 60);
                this.bgGraphics.lineTo(0, 60);
                this.bgGraphics.endFill();

But instead of the rounded corner on the right top it cuts it off:

Regards
Alex

[TickleMeElmo]

Don't have time to test this code but I think this should work

        var cornerRadius = 20;

        var cornerAABBlen = Math.sqrt(cornerRadius * cornerRadius / 2);

        var rectWidth = 50;
        var rectHeight = 100;

        this.bgGraphics.beginFill(0xFFCC00, 1);
        this.bgGraphics.drawPolygon([
            0, 0,
            rectWidth - cornerAABBlen, 0,
            rectWidth, cornerAABBlen,
            rectWidth, rectHeight,
            0, rectHeight
            ])
        
        this.bgGraphics.drawCircle(rectWidth - cornerAABBlen, cornerAABBlen);

        this.bgGraphics.endFill();

use the corner radius to make the round bigger or smaller

[ivan.popelyshev]

I recommend to store one texture and then use it many times.

Even better - generate ALL letters in one big sheet and use it as an atlas, that way you'll have maximum performance for the task. You can use about hundreds of Graphics/Text , but number of sprites with pre-generated textures (atlases) can be real big ~10k.

 

var tex = renderer.generateTexture(graphics);
var newSprite = new Sprite(tex);

//might need some anchoring, I dont know how much, that's for 1 pixel up and left
newSprite.anchor.x = 1.0 / tex.width;
newSprite.anchor.y = 1.0 / tex.height;

 

[Alexander Farber]

Ivan, actually I already have my letters and indices in spritesheets.

However I need to draw rounded corners and can not figure the proper code yet.

Here is how the Android app looks, which I am currently porting to PIXI.js:

In Android I have drawn it using drawPath and build the path once with lineTo, quadTo.

Regards
Alex

 

 

 

 

[ivan.popelyshev]

OK, now i see that arcTo method code is wrong https://github.com/pixijs/pixi.js/blob/dev/src/core/graphics/Graphics.js#L379 , it supposed to take last point of graphics and use it to determine the direction of arc, but it guesses wrong.

For now you have to use regular "arc".

 

[Alexander Farber]

Thank you, I was thinking it was something wrong with arcTo...

I can not draw rounded corners with drawPolygon or drawShape, don't I?

Regards
Alex

[ivan.popelyshev]

You can draw rounded corners with drawPolygon or drawShape, because that's how "arc" works in PIXI - it splits the path into small lines

[ivan.popelyshev]

@farber72 Offtopic, what server do you use for multiplayer ?

Did you make native app for iOS? UPD. What am I asking, of course you did. But which backend/engine did you use for it?

[Alexander Farber]

Hi Ivan,

for my word game on the backend I use PostgreSQL (most of game logic in Pl/PgSQL to be close to the data) + Jetty (for Websockets) + Wordpress.

On the frontend native Android, iOS (swift) + PIXI.js

I like server and database programming, but UI and effects not so much. Programming them is difficult for me :-)

I think many nice effects could be added to a word game with letter tiles, but it is tough for me to create them.

Regards
Alex

[ivan.popelyshev]

Jetty has good implementation of websockets, I had 1000 players realtime on one map there   The only problem is some synchronous code there that can block everything in some cases, but those cases can be fixed with nginx or haproxy. 

Yes, same here. I'm working on cross-platform PIXI on Kotlin. I hope to use same language on server, client and scripts. The difference is that Kotlin for JS can do cool js tricks, while Kotlin for Java requires generators for shader uniforms, DAOs and that kind of objects. We are friends in twitter so I'll notify you when there will be some kind of demo for HTML5/Android.

[Alexander Farber]

Ivan, there seems to be a bug with PIXI arc method as well -

This code works well and draws a line and an arc:

this.bgGraphics.moveTo(15, 0);
this.bgGraphics.lineTo(60 - 14, 0);
//this.bgGraphics.lineTo(60 - 15, 0);
this.bgGraphics.arc(45, 15, 15, -Math.PI / 2, 0);

But change just 1 pixel and the horizontal line is suddenly not displayed:

this.bgGraphics.moveTo(15, 0);
//this.bgGraphics.lineTo(60 - 14, 0);
this.bgGraphics.lineTo(60 - 15, 0);
this.bgGraphics.arc(45, 15, 15, -Math.PI / 2, 0);

I have created Issues #2824 at GitHub

Regards
Alex

 

[ivan.popelyshev]

I reported to our master @GoodBoyDigital , he said that thing will be fixed before pixi-v4

[Fatalist]

I would use regular canvas functions for drawing such things, it has more features than Pixi graphics and perfect antialiasing(Graphics has its uses too, for example when drawing large polygons). For performance it's better to convert it into texture anyway.

    var canvas = document.createElement("canvas"),
        context = canvas.getContext("2d");
    canvas.width = 100;
    canvas.height = 100;
    
    //draw things
    
    var texture = new PIXI.Texture(new PIXI.BaseTexture(canvas, PIXI.SCALE_MODES.LINEAR));

 

[Alexander Farber]

Fatalist, but I would like to use WebGL (when available) for better framerates (even though my game is very simple).

So I think, I can not use Canvas drawing methods, or can I?

[ivan.popelyshev]

15 minutes ago, Alexander Farber said:

Fatalist, but I would like to use WebGL (when available) for better framerates (even though my game is very simple).

So I think, I can not use Canvas drawing methods, or can I?

You can pre-generate textures with canvas2d, and upload them before you start the game. "renderer.textureManager.updateTexture(tex)" will be called either by you, either by renderer when the time will come to draw it firt time. Its not that slow, just don't try to do it every frame in realtime  Once texture is uploaded to GPU, it will stay there just fine. But if you want to draw a new texture in realtime, then you have to use RenderTexture, that way it will be done completely on GPU side.

[Fatalist]

8 hours ago, Alexander Farber said:

So I think, I can not use Canvas drawing methods, or can I?

In the last line it creates a PIXI texture which can be used by either webgl or canvas renderer. As Ivan said, you should generate the texture once and use it for your corner sprites(if you generate the texture every frame it will be terribly slow). Even if you did it with PIXI.Graphics, it would be faster if you converted it into rounded corner texture using generateTexture. So you should use sprites either way.