Drawing hexagon tiles

[riston]

I am trying to create hexagon grid in Pixijs, but currently I have hit strange problem. What I want to do is first create the hexagon as sprite texture and then render the tiles as sprites. This is all great and drawing hexagon works but there is some margin between the rows that causes the problem.

 

Game.prototype.getHexagonTexture = function(cX, cY, size) {    // Draw hexagon    g = new PIXI.Graphics();    g.beginFill(0xAA00AA);    g.lineStyle(1, 0xFFAAFF, 1);    console.group();    g.moveTo(cX + size + Math.cos(0), cY + size + Math.sin(0));    for (var i = 0; i <= 6; i++) {        var angle = 2 * Math.PI / 6 * i,            x_i = cX + size * Math.cos(angle),            y_i = cY + size * Math.sin(angle);        g.lineTo(x_i, y_i);        console.log(x_i, y_i);    }    g.endFill();    g.drawRect(-size, -size, size * 2, size * 2);    g.boundsPadding = 0;    console.groupEnd();    console.log('Bounds', g.getBounds());    return g.generateTexture();};

[hubert]

I'm nut sure but this might be a similar to previous thread. Sebastian answered 

 

http://www.html5gamedevs.com/topic/8530-different-size-of-a-container-when-combining-graphics-and-sprite-in-a-displayobjectcontainer/

 

 

or maybe you should set the g.boundsPadding = 0; before drawRect?

g.boundsPadding = 0;g.drawRect(-size, -size, size * 2, size * 2);

http://www.sevenative.com

[riston]

I'm nut sure but this might be a similar to previous thread. Sebastian answered 

 

http://www.html5gamedevs.com/topic/8530-different-size-of-a-container-when-combining-graphics-and-sprite-in-a-displayobjectcontainer/

 

 

or maybe you should set the g.boundsPadding = 0; before drawRect?

g.boundsPadding = 0;g.drawRect(-size, -size, size * 2, size * 2);

http://www.sevenative.com

Good option but changing the boundsPadding call order did not have any effect. Also the strange is that the rectangulars are correctly drawn. Seems like the issue of code or calculation mistake but I could spot it.

[hubert]

Ok!

 

Please check this part of the code!

g.lineStyle(1, 0xFFAAFF, 1);change it tog.lineStyle(0, 0xFFAAFF, 1);

 I think that since you instantiate under your g variable with a one pixel lineWidth it is passed both to the hexagon and to the rectangle. under the hood pixi uses this in a traditional manner with lineWidth || 0 

PIXI.Graphics.prototype.drawRect = function( x, y, width, height ){    if (!this.currentPath.points.length) this.graphicsData.pop();    this.currentPath = {lineWidth:this.lineWidth, lineColor:this.lineColor, lineAlpha:this.lineAlpha,                        fillColor:this.fillColor, fillAlpha:this.fillAlpha, fill:this.filling,                        points:[x, y, width, height], type:PIXI.Graphics.RECT};    this.graphicsData.push(this.currentPath);    this.dirty = true;    return this;};

Since your new Graphics is outside the haxgon drawing function and the socope of javascript is based on functions it inherits it from the graphics g.lineStyle(1, 0xFFAAFF, 1); If so try putting the g.lineStyle(0, 0xFFAAFF, 1); outside where it is and then change it inside the hexagon draw for loop to g.lineStyle(1, 0xFFAAFF, 1); by redeclaring it inside or just change it after. I think this might be the problem.

 

I think this is it since both hexagon and the rectangle have this pinkish color.

 

http://www.sevenative.com