How do I render a grid? (was: Please help about this problem)

Questions
1

I want do this kind of two grids (like the picture) how to make it,and also you can put your units on the grid ,and if you want attck your enemy ,so the grid on the opposite side to you (your enemy’s grid )will have some "colorful "sight beads?? But something like that ,like on the picture, please help me or give me some idea or some examples,thank you.

2

You should start by getting a grid rendered on your screen.

  • Figure out how to store your data. A table of tables? Or just the rows and column counts?
  • Iterate over your grid squares and draw each one
  • You can use the line or the rect function to render the lines necessary to make a grid.
3

@Simeon hello,thank you,and did you see the picture? How about the color in each square?

4

@steelswing Not sure if this will help you. You can change the image (img) to show whatever you want across all the grids. You can also change the angle of the grid using rotate. With more work, you can place an image on each square and rotate them.

EDIT: You can also drag the grid up/down/left/right.

displayMode(FULLSCREEN)

function setup()
    dx,dy=0,-1000
    m=mesh()
    for x=1,20 do
        for y=1,20 do
            m:addRect(x*100,y*100,100,100)
        end
    end
    img=readImage("Platformer Art:Block Brick")
end

function draw()
    background(0)
    pushMatrix()
    translate(dx,dy)
    rotate(45)
    m.texture=img
    m:draw()
    popMatrix()
end

function touched(t)
    dx=dx+t.deltaX
    dy=dy+t.deltaY
end
5

@dave1707 thank you ,but I mean I want do grid something like picture and also the importance thing is the colorful sight bead when I attck my enemys and the sight bead can move on grid,so can you give me some idea to solve this question?

6

Those will be seperate images from the grid. You can move them around to do whatever you want. You’ll have to supply the images, the image I use in the grid example was just an image supplied with Codea.

7

@dave1707 ok,thank you I’all try to do it.

8

I’ll try

9

@dave1707 hello, eh…there have some problem about make grid…how to make it…I try to use line …but it doesn’t work,maybe use rectangle?because I don’t want to use sprite,and actually I want grid using Parallelogram not rectangle or square…

10

Here’s a grid of parallelograms. It’s not perfect, but I don’t know if this is what you’re after anyways. The very edges don’t line up correctly, but if this is what you’re after, you can fix them. Move the grid around and you’ll see the edges.

displayMode(FULLSCREEN)

function setup()
    dx,dy=0,0
end

function draw()
    background(40, 40, 50)
    stroke(255)
    strokeWidth(2)
    for x=-40,20 do
        line(x*50+dx,-HEIGHT+dy,x*50+1500+dx,2*HEIGHT+dy)
    end
    for y=-20,40 do
        line(-WIDTH+dx,y*50+dy,2*WIDTH+dx,y*50+dy)
    end
end

function touched(t)
    dx=dx+t.deltaX
    dy=dy+t.deltaY
end
11

@steelswing You can easily make a parallelogram with meshes. Here are two ways of making a parallelogram in Codea:

  1. make a 2D mesh with vertices that form a parallelogram, then if you want to make it an outline instead of filled in, you can use an image as the mesh’s texture. You can also use m:setColors() to set the color of the parallelogram.
  2. You can make a 3D meshes that forms a square, set up the camera(), then draw the square in orthographic 3D.

I recommend using the first one.

12

@dave1707 thank you and there are two more questions as i said how to make sight bead one the grid,and how to put army on each square?

13

Hi All,

Could someone tell me what the details of the mesh:addRect() vertices is built on. Is it vec2() or vec3(). I think it should be vec3() so that you can set up 2D or 3D meshes. But how do you access it?

Bri_G

14

@Bri_G In the reference, mesh addRect uses x,y,w,h,r. So I don’t think you can use it for 3D. Mesh vertices uses vec2 or vec3, so that’s either 2D or 3D.

15

Hi @dave1707,

Thanks for the reply, what I was inferring is that you could use vec3() for either 2D or 3D by using 0 for the z value in 2D apps.

I am also interested in how to access the list of vertices for each triangle generated by mesh:addRect() so that I change the colours of each vertex to shade each rectangle.

Bri_G

16

@steelswing You said you don’t want to use meshes, but I think that might be the easiest way. I’m not sure what you mean by the sight bead, but I’m assuming it’s setting a color of a character position. You can move the grid around. Is this getting close to what you’re trying to do. This is something I already had. I just removed a lot of things and added a few.

displayMode(FULLSCREEN)

function setup()
    dx,dy=0,-400
    m=mesh()
    for x=1,20 do
        for y=1,20 do
            m:addRect(x*100,y*100,100,100)
        end
    end
    img=readImage("Platformer Art:Block Brick")
    buf=m:buffer("color")
    for z=146,150 do
        setBuf(z)
    end
    for z=167,169 do
        setBuf(z)
    end
end

function draw()
    background(0)
    pushMatrix()
    translate(dx,dy)
    perspective() 
    camera(0,-1000,1000,0,0,0,0,1,0)
    rotate(45)
    m.texture=img
    m:draw()
    popMatrix()
end

function touched(t)
    dx=dx+t.deltaX
    dy=dy+t.deltaY
end

function setBuf(val)
    v=(val-1)*6
    buf[v+1]=color(255,0,0)
    buf[v+2]=color(255,0,0)
    buf[v+3]=color(255,0,0)
    buf[v+4]=color(255,0,0)
    buf[v+5]=color(255,0,0)    
    buf[v+6]=color(255,0,0)
end
17

@dave1707 yes,yes,something like that but,I mean I also can move those red block on my grid…how to do that …

18

You see,I made something ,but I use sprite to make this grid…

19

@steelswing Apparently I’m trying to do something different than what you’re doing. You know what your end result is supposed to look like and you have the sprites you need to do it. You seem to be doing OK so far. You just need to extend your grid and then add your character sprites.

20

@dave1707 thank you ,I know,but…I mean my grid just a sprite,how to plus something on the sprite,and move it square by square,do you understand? :slight_smile: