Creating vector square diamond frames

[forleafe]

So I'm having a bit of a rough time doing something that seems kinda basic. I've tried doing a lot of research, but I'm really kinda stuck on the higherarchy pixi uses to create vector images. I'm creating vector based UI for my game, and to do this, I need to make a square frame (like a picture frame with the center open); and then rotate said square 90 degrees so it's standing on one of its points like a diamond. Basically, my UI is going to be composed of a bunch of these square diamond icons.

Thanks

[ivan.popelyshev]

> So I'm having a bit of a rough time doing something that seems kinda basic.

We all have blind places

>  I need to make a square frame (like a picture frame with the center open); and then rotate said square 90 degrees so it's standing on one of its points like a diamond.

There are many ways to do that. Also its 45 degrees.

"PIXI.Graphics" works different from canvas 2d context, but its possible to make holes in it: make a diamond with moveTo's and lineTo's , close the path, make another diamond, call "addHole()" method - the second diamond will be the hole of first.

You can also do the same with squares, with center in (0,0), then apply rotation to the graphics : "myGraphics.rotation = Math.PI/4" . Yeah, pixi uses radians, its not cool but we'll have degrees option in v5

 

[forleafe]

Ah yeah, duh. 45 degrees. It's Monday, I'm pretty groggy lol.

Anyways, I tried what you suggested with the rectangle method. But one thing I didn't understand was the relationship it had with the PIXI.Graphics class. Am I meant to apply rotations and movements to the PIXI graphic? Or the rectangle. Also, I notice the PIXI graphic and rectangle both have their own separate positions. When I create the rectangle, am I supposed to put it's position exactly equal with the PIXI.graphic?

[ivan.popelyshev]

when you draw inside graphics, you create a shape. All coordinates are local. Whatever transform you make (position,rotation,scale,pivot) is applied on whole shape.

You cant change coords of rectangle, diamond or whatever you put there, you have to "clear()" and do everything again. 

Transform can be changed as many times you want, it just shows where do you want to draw whole shape.
 

graphics.moveTo(-50, -50);
graphics.lineTo(50, -50);
graphics.lineTo(50, 50);
graphics.lineTo(50, -50);
graphics.closePath();

graphics.position.set(300, 300); // rectangle will be shown at (250,250)-(350,350)
graphics.rotation = Math.PI/4; // and now its diamond with the center in 300,300
graphics.rotation = Math.PI/2; // square. again
graphics.position.set(200, 300); //move it 100 pixels left.

 

[forleafe]

@ivan.popelyshev Thanks so much for your help. I'm trying to practice some of what you're talking about so I can get a grasp on how it all works. But as of now I can't even get the rectangle to draw properly. In the code below, why isn't my rectangle showing up?

https://jsfiddle.net/e0ncLnjh/

[ivan.popelyshev]

Move "renderer.render" to the end. Also, judging by dfirst line, you are using tutorials for pixi-v2. Please lookup our latest examples: http://pixijs.io/examples/#/basics/graphics.js 

Also this tutorial is awesome: https://github.com/kittykatattack/learningPixi

[forleafe]

@ivan.popelyshev

One last question (I hope). I seem to have things mostly figured out. But I wanted to ask if addHole() is possible to use on diamonds drawn with drawRect()? I've included some code below where I attempted this, and got strange results. In general, addHole() and vectors in pixi are difficult for me to grasp, as they're counter intuitive to the way most code works in pixi. There isn't a clear way to select vectors you've drawn, whereas most of the time, simply declaring a variable is how to define something so it can be easily called on later. These vector shapes... don't appear to work that way. You draw them and they all float under some generic "graphics" constructor without a name to select them with.

https://jsfiddle.net/e0ncLnjh/2/

Edit:: One last thing. I've tried really hard looking this up. But Pixi's documentation makes little attempt to explain this subject in adequate detail.

[botmaster]

First thing important to understand, there are no vector graphics in PIXI. Everything goes to GPU and GPU don't deal with vectors, only raster. It's important because you need to know what you are dealing with as you code.

Second, drawing is all about math, it's not really about PIXI or whatever methods to draw with PIXI offers, sure PIXI offers a bunch but all those methods make sense if you understand the math behind it, if you don't then you are left experimenting. Because it's all math you can draw a diamond shape in literally bunch of different ways in PIXI, rotated rectangle after a beginFill, rotated rectangle after a lineStyle, polygon, moveTo/lineTo, ect .... Ivan can probably tell us which ones is the less expensive to use but regardless it's all here and it's all math. Here this will get you started:

 

public drawDiamond(shape:PIXI.Graphics, width:number, height:number, thickness:number, color:number):void

{

shape.beginFill(color);

var halfheight:number = height / 2;

var halfwidth:number = width / 2;

shape.moveTo(halfwidth, 0);

shape.lineTo(0, halfheight);

shape.lineTo(thickness, halfheight);

shape.lineTo(halfwidth, thickness);

shape.lineTo(halfwidth, 0);

shape.beginFill(color);

shape.moveTo(halfwidth, 0);

shape.lineTo(width, halfheight);

shape.lineTo(width - thickness, halfheight);

shape.lineTo(halfwidth, thickness);

shape.lineTo(halfwidth, 0);

shape.beginFill(color);

shape.moveTo(width, halfheight);

shape.lineTo(halfwidth, height);

shape.lineTo(halfwidth, height - thickness);

shape.lineTo(width - thickness, halfheight);

shape.lineTo(width, halfheight);

shape.beginFill(color);

shape.moveTo(0, halfheight);

shape.lineTo(halfwidth, height);

shape.lineTo(halfwidth, height - thickness);

shape.lineTo(thickness, halfheight);

shape.lineTo(0, halfheight);

}

[forleafe]

52 minutes ago, botmaster said:

First thing important to understand, there are no vector graphics in PIXI. Everything goes to GPU and GPU don't deal with vectors, only raster. It's important because you need to know what you are dealing with as you code. 

Second, drawing is all about math, it's not really about PIXI or whatever methods to draw with PIXI offers, sure PIXI offers a bunch but all those methods make sense if you understand the math behind it, if you don't then you are left experimenting. Because it's all math you can draw a diamond shape in literally bunch of different ways in PIXI, rotated rectangle after a beginFill, rotated rectangle after a lineStyle, polygon, moveTo/lineTo, ect .... Ivan can probably tell us which ones is the less expensive to use but regardless it's all here and it's all math. Here this will get you started:

 

public drawDiamond(shape:PIXI.Graphics, width:number, height:number, thickness:number, color:number):void

{

shape.beginFill(color);

var halfheight:number = height / 2;

var halfwidth:number = width / 2;

shape.moveTo(halfwidth, 0);

shape.lineTo(0, halfheight);

shape.lineTo(thickness, halfheight);

shape.lineTo(halfwidth, thickness);

shape.lineTo(halfwidth, 0);

shape.beginFill(color);

shape.moveTo(halfwidth, 0);

shape.lineTo(width, halfheight);

shape.lineTo(width - thickness, halfheight);

shape.lineTo(halfwidth, thickness);

shape.lineTo(halfwidth, 0);

shape.beginFill(color);

shape.moveTo(width, halfheight);

shape.lineTo(halfwidth, height);

shape.lineTo(halfwidth, height - thickness);

shape.lineTo(width - thickness, halfheight);

shape.lineTo(width, halfheight);

shape.beginFill(color);

shape.moveTo(0, halfheight);

shape.lineTo(halfwidth, height);

shape.lineTo(halfwidth, height - thickness);

shape.lineTo(thickness, halfheight);

shape.lineTo(0, halfheight);

}

Okay then tell me, is there any advantage to using this mess to build a UI over simply importing sprites? Don't get me wrong. I really appreciate time you've taken to explain things to me so I can understand. But I really need to get a move-on with this project and unless there is a distinct advantage to having a difficult to manage wall of code for one solitary tiny diamond Icon, then I might need to go with a more time effective method.

Edit: Wait a minute, oh, this is a function you've written that draws a diamond? Huh... Public, void? Is this javascript? it looks like Java. Also still interested in knowing why what I did didn't work with addHole()

https://jsfiddle.net/e0ncLnjh/2/

[botmaster]

This is typescript, very little to do to turn into javascript. Just forget I replied here.

[forleafe]

@botmaster

Ah, thanks for that. I'll look into what you've written here. Sorry if I offended you. I really do appreciate it. just feeling a little over my head at times with this.

[forleafe]

Okay so for those of you who might run into similar issues as I have, I've figured things out a bit more clearly and am going to explain what I did.

First off, no, addHole() does not work on drawRect(). However, it does work with drawPolygon(). With draw polygon you make a shape by specifying points. Each pair of points are treated like a pair of x,y coordinate points. So for this:

.drawPolygon(0, 25, 25, 0, 50, 25, 25, 50)

this will give you 4 points that make up a diamond. One at (0,25) another at (25,0), (50,25), & (25,50).

okay the second thing that I guess is just too basic for people to bother explaining is that you have to run all of these methods together at once on the same line. You don't run them as separate commands.

var graphics = new PIXI.Graphics();


//Notice the dots before each method being called below. This is all a single line that will draw 2 polygons, subtract the second from the first, and make it all yellow in one line.

graphics.beginFill(0xFFFF00)
.drawPolygon(0, 25, 25, 0, 50, 25, 25, 50)
.drawPolygon(5, 25, 25, 5, 45, 25, 25, 45)
.addHole();

 

Again, this is probably laughably basic for most programmers. But I'm primarily an artist. So that'll be my excuse. Before what I was doing was calling each line individually, and I guess because I did that, addHole() didn't have a "first" polygon to subtract from:

 

var graphics = new PIXI.Graphics();


//this is what I was doing. Don't do this! Run it all as one single command.

graphics.beginFill(0xFFFF00)
graphics.drawPolygon(0, 25, 25, 0, 50, 25, 25, 50)
graphics.drawPolygon(5, 25, 25, 5, 45, 25, 25, 45)
graphics.addHole();

And that's that. There's still a ton more I don't understand about this I'm sure. But at least I have something to build from.

 

[ivan.popelyshev]

Its the same as in Flash and in HTML5 canvas2d context, and in other platforms. Its general 2d path API. However in other platforms there's no "addHole()" , holes are resolved automagically.

[OSUblake]

@forleafe

Your fiddle is using an old version of Pixi. Calling each line individually shouldn't matter. 

Here's another one for you. If you half the number of points in the .drawStar() method, you'll end up with a regular polygon.

var graphics = new PIXI.Graphics()
  .lineStyle(5, 0xffff00)
  .drawStar(55, 55, 2, 50, 50)
  .closePath();

 

https://codepen.io/osublake/pen/KRmBOQ

 

[forleafe]

@OSUblake It's using Pixi v4. That seems to be the newest edition?

[OSUblake]

Look at the numbers after the 4. Version 4.0.0 was released almost 2 years ago. There's been a lot of changes and bug fixes since then. 

https://github.com/pixijs/pixi.js/releases