Drawing a hex grid?

Right, I’m getting back into Codea with all the recent updates and stuff!

I wanna make a 2d board game. I can’t even work out how to draw a hex based tile grid though?

Each tile could be a different type, so I’m guessing a 2d table? Have the pieces made up as sprites?

I get the theory, just can’t figure out how to draw to screen yet.

I was doing some testing yesterday and had a for loop running for 10 steps. On each step, output a test sprite in a position determined by a increment ign variable in the loop. But all that happened is the sprites continuously flickered when I ran the code?

Any help would be greatly appreciated!

This is an exemple for a not rect board hex :

Board = class()

local LI = 13
local CO = 16

-- movements table declared at the end of file

local _board = { {1,1,1,0,0,0,0,1,1,0,0,0,0,1,1,1},
                    {1,1,0,0,0,0,0,0,0,0,0,0,0,1,1,1},
                   {1,1,0,0,0,0,0,0,0,0,0,0,0,0,1,1},
                      {1,1,0,0,0,0,0,0,0,0,0,0,0,1,1,1},
                   {1,0,0,0,0,0,0,0,0,0,0,0,0,0,0,1},
                    {0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,1},
                   {0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0},
                    {0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,1},
                   {1,0,0,0,0,0,0,0,0,0,0,0,0,0,0,1},
                    {1,1,0,0,0,0,0,0,0,0,0,0,0,1,1,1},
                   {1,1,0,0,0,0,0,0,0,0,0,0,0,0,1,1},
                    {1,1,0,0,0,0,0,0,0,0,0,0,0,1,1,1},
                   {1,1,1,0,0,0,0,1,1,0,0,0,0,1,1,1} }

function Board:init()
    -- advise
    -- self.objectList = {{li=5, co=5}=[objectExample]}
end

-- VIEW
function Board:draw(pw, ph)

    local size = #_board
    local w = pw/16.5
    local h = ph/10

    for li=1,#_board do
        for co=1,#_board[li] do
            if _board[li][co] == 0 then
            pushMatrix()

            local x,y

            -- Mode Center
            if li % 2 == 1 then
                x = w/2 + ((co-1)*w)
            else
                x = co * w
            end

            y = h/2 + ((li-1)*h/1.5)

            translate(x, y)

            sprite("Documents:hexagone", 0, 0, w, h)

            popMatrix()
            end
        end
    end

end

-- UTILS
function Board:contain(li, co)
    return li >= 1 and li <= LI and co >= 1 and co <= CO and _board[li][co] == 0
end


```


I expect then can help you ;)

don’t forget the background command at start of draw!

Obviously, in the main.
And this is a hex board game that i’ve programmed : Asteroyds.

(Asteroyds.codea risk of not work correctly because of link to sprite…)

Thanks so much. I’ll have to pick through that to work it out as I dont want to just copy paste and ‘hey presto’ it works - I need to understand it :slight_smile:

*) I assume LI = Lines? CO = Columns
*) the ‘0’ is a hex piece to display right?
*) Why this comment? – self.objectList = {{li=5, co=5}=[objectExample]}
*) What does the last function do?

The rest I can look up and hopefully work out. Thanks again!

This is a good decision, It’s better understand than copy :wink:

Yes, you have understand. And for self.objectList = …; it’s just an advise, because some of people would stock object directly in the array that represent board (in this case : _board) but it’s better to make an another array just for stock key = locationOfObject and value = object.

And the last function return true if line and column are in board. (I think that can be useful for limit movement)

Yea I figured the last bit was to constrain the movement to the board.

Well, I changed the sprite, and ran it and it works! :slight_smile:

Definitely gives me something to work with, so thanks so much for that.

I really want to get into Codea a lot more - it seems ‘easy’, but still a long way for me to go right now.

I am a PHP developer and I know I could make this game in PHP in a browser, but really want to try to get it down in Codea!

:wink:

Good idea ! And You’ll see lua is a simple language to learn and powerful if you use it good.

I think this is the definitive guide for using hexagonal grids in games:

http://www.redblobgames.com/grids/hexagons/

Holy cow!!! Seriously? :frowning:

Didnt think it would ever be that complex lol

@Simeon, this is the best guide that i’ve seen ! Thanks for share =)

@Simeon - thanks from me as well, that’s an AWESOME resource site!

@Simeon, do you know good guide for plateformer ?

Hey all… I was trying to use the example near the top of the post to see a simple hex grid for a board game. I will also review that supper hex doc that @simeon posted.

With the example code in this post, when I run it I just have a blank screen without errors. I tried the code as listed above with the background draw. I also got a hex sprite from the web to use.

I also tried the code as below. Again this one didn’t draw anything. Any ideas what I am missing.

-- hex2

-- Use this function to perform your initial setup
function setup()
Board = class()
 
local LI = 13
local CO = 16
 
-- movements table declared at the end of file
 
local _board = { {1,1,1,0,0,0,0,1,1,0,0,0,0,1,1,1},
                    {1,1,0,0,0,0,0,0,0,0,0,0,0,1,1,1},
                   {1,1,0,0,0,0,0,0,0,0,0,0,0,0,1,1},
                      {1,1,0,0,0,0,0,0,0,0,0,0,0,1,1,1},
                   {1,0,0,0,0,0,0,0,0,0,0,0,0,0,0,1},
                    {0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,1},
                   {0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0},
                    {0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,1},
                   {1,0,0,0,0,0,0,0,0,0,0,0,0,0,0,1},
                    {1,1,0,0,0,0,0,0,0,0,0,0,0,1,1,1},
                   {1,1,0,0,0,0,0,0,0,0,0,0,0,0,1,1},
                    {1,1,0,0,0,0,0,0,0,0,0,0,0,1,1,1},
                   {1,1,1,0,0,0,0,1,1,0,0,0,0,1,1,1} }
 
function Board:init()
    -- advise
    --self.objectList = {{li=5, co=5}=[objectExample]}
end
end

-- This function gets called once every frame
function draw()
    -- This sets a dark background color 
    background(40, 40, 50)
function Board:draw(pw, ph)
 
    local size = #_board
    local w = pw/16.5
    local h = ph/10
 
    for li=1,#_board do
        for co=1,#_board[li] do
            if _board[li][co] == 0 then
            pushMatrix()
 
            local x,y
 
            -- Mode Center
            if li % 2 == 1 then
                x = w/2 + ((co-1)*w)
            else
                x = co * w
            end
 
            y = h/2 + ((li-1)*h/1.5)
 
            translate(x, y)
 
            sprite("Dropbox:Photo Jul 22, 12 38 42 PM", 1, 1, w, h)
 
            popMatrix()
            end
        end
    end
 
end
 
-- UTILS
function Board:contain(li, co)
    return li >= 1 and li <= LI and co >= 1 and co <= CO and _board[li][co] == 0
end

    strokeWidth(5)
    
end

Thanks in advance for all the assistance.

@Aalok, can you use the html tag <pre lang="lua"> for display code please ?

@HyroVitalityProtago. Thanks for the formatting tip in the forums. Handy :slight_smile:

It’s fixed now.

And you can’t use that code like this… I think, you should learn more about lua and object oriented language before try to make your own program.

For me, a very good training is to clone a template project like Bit Invader or brickout, try to understand the code and try to make an improvement with new sprites, new powers, new ennemy, etc…

I tried it the original way you had it in the top of the thread, then messed around with it to what I posted. I have tried both ways.

Yeah I have a lot to learn and I just wanted to learn how to draw a simple hex board. I am in no way creating a game now. I just wanted to use a working example to learn from and then go over the web page for hexes that Simeon provided.

@Aalok, what is written above is a class. You will need to copy that into a blank tab, then in your main tab in the setup() function you need to initialize the class:

newBoard = Board()

Then make sure to include the class draw function in the main draw() function:

function draw()
    newBoard:draw(pw,ph) -- set your pw and ph (board width and height, I used 600,600)
end

Whenever you see class() at the top, that means it must be initialized like so.

Screenshot of it working as expected: https://www.dropbox.com/s/svkbkjmfu1cjdky/2013-07-23%2013.55.29.jpg