I'm making a hex grid for our project using as3. I wonder why my hex grid isn't tiling properly.

Running my code within Flash CS6 produces seamless tiling

but on FlashDevelop it looks like this

Here is my code (in FlashDevelop):

    public class PlayState extends FlxState {
    private var player:PlayerSprite;
    private var hexMap:GenerateGrid;

    protected var hexagonWidth:int = 128;
    protected var hexagonHeight:int = 132;
    protected var hexagonNumber:Number = 0;
    protected var gridX_Size:int = 7;
    protected var gridY_Size:int = 10;

    public function PlayState() {


    override public function create():void {

        for (var yPos:int = 0; yPos < gridY_Size; yPos++) {
            for (var xPos:int = 0; xPos < gridX_Size; xPos++) {
                var hexagonX_Pos:Number = hexagonHeight * xPos + (yPos % 2) * hexagonWidth / 2;
                var hexagonY_Pos:Number = hexagonHeight * yPos / 4 * 3;
                hexagonNumber = xPos + yPos * gridX_Size;
                hexMap = new GenerateGrid(hexagonX_Pos - hexagonWidth, hexagonY_Pos - hexagonHeight);

And for the class where the hex tiles are drawn

    public class GenerateGrid extends FlxSprite {
    [Embed(source = "../res/hextile_grass.png")] private var HexGrassPng:Class;

    public function GenerateGrid(X:Number = 0, Y:Number = 0):void {
        super(X, Y);

        var hex:FlxSprite = new FlxSprite();
        hex = loadGraphic(HexGrassPng, false, false);
        hex.x = X;
        hex.y = Y;

    override public function update():void {

Any help would be greatly appreciated.

EDIT : EDIT: I have noticed my mistake a while ago. Code should be var hexagonX_Pos:Number = hexagonWidth * xPos + (yPos % 2) * hexagonWidth / 2;


My guess would be it's a floating point precision difference (do the two environments use different runtimes/sandboxes? I'm not very familiar with flash).

It looks like yPos is always turning out fine. My suspicion is that it has something to do with "(yPos % 2)", try yPos as a float instead of an int. A little hack that could fix it if that doesn't work is to negate a small constant off of your resultant xPos, tweak it untill it looks just right. Something like:

var hexagonX_Pos:Number = hexagonHeight * xPos + (yPos % 2) * hexagonWidth / 2 - 0.4;

This isn't very flexible if hexagonHeight/hexagonHeight can change though. You would have to derrive the value to negate based on hexagonHeight, that's if my fix even helps :)

  • 1
    \$\begingroup\$ My bad. I've only noticed until now that instead of using hexagonWidth to calculate for the horizontal spacing I've used hexagonHeight. Guess I need some sleep. Thanks though! :) \$\endgroup\$ – fierron Aug 11 '14 at 19:55
  • 1
    \$\begingroup\$ @fierron please click the checkmark next to this answer if it solved your problem \$\endgroup\$ – ashes999 May 9 '15 at 3:57

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.