Howdy, Stranger!

It looks like you're new here. If you want to get involved, click one of these buttons!

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

edited February 2017 in Questions Posts: 56

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.

IMG_0898.PNG 284.1K

Comments

  • SimeonSimeon Admin Mod
    Posts: 4,847

    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.
  • @Simeon hello,thank you,and did you see the picture? How about the color in each square?

  • dave1707dave1707 Mod
    edited February 2017 Posts: 7,470

    @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
    
  • @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?

  • dave1707dave1707 Mod
    Posts: 7,470

    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.

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

  • I'll try

  • @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.....

  • dave1707dave1707 Mod
    Posts: 7,470

    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
    
  • Posts: 160

    @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.

  • @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?

  • Posts: 1,141

    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

  • dave1707dave1707 Mod
    Posts: 7,470

    @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.

  • Posts: 1,141

    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

  • dave1707dave1707 Mod
    Posts: 7,470

    @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
    
  • @dave1707 yes,yes,something like that but,I mean I also can move those red block on my grid.....how to do that ....

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

    IMG_0935.PNG 219.6K
  • dave1707dave1707 Mod
    Posts: 7,470

    @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.

  • @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? :)

  • dave1707dave1707 Mod
    edited February 2017 Posts: 7,470

    @steelswing Just figure out the x,y coordinates for the center of each of your parallelograms. You can then use those coordinates to draw other sprites at those positions. Draw the background Sprite first, then your other sprites in the order you want them shown. The x,y values should be just offsets from each other by the same value. x+x+some xvalue. y+y+some yvalue.

  • Posts: 2,020

    @Bri_G yes, you can use addRect to create planes in 3D implementations. You can access the vertices the same as with other meshes (6 per rect)

  • Posts: 1,141

    Hi @yojimbo2000,

    Have you ever used this? Or do you always build up your vertices systematically?

    If you have used it could you post a little code to demonstrate, I'm sure I'm not the only one interested in this.

    Thanks,

    Bri_G
    :)

  • dave1707dave1707 Mod
    Posts: 7,470

    @Bri_G In response to your question above to me, you can use the mesh buffer statement to access and modify the vertices after they've been created. There are different options that let you modify different things for the mesh.

  • dave1707dave1707 Mod
    Posts: 7,470

    @Bri_G Using addRect, you can only specify x,y,w,h for 2D coordinates. But if you use the mesh buffer statement, you can modify the z coordinate which is 0 when the rect is first created. I think if you want to create 3D objects, it's a lot easier to calculate and set the 3 vertices of a triangle than using the addRect statement and then trying to modify its vertices.

  • Posts: 1,141

    Hi @dave1707 ,

    Thanks for that, don't want to get into the buffer yet, but looks interesting. I'm sticking with building up 3D meshes for now. Thought it would be possible but doesn't offer me much at the moment. Thanks again.

    Bri_G
    :)

  • Posts: 2,020

    yeah @dave1707 is right that z is set to 0 whenever you use addRect or setRect. If you're doing a "tabletop" environment with Z-up orientation, they're useful for a quick and easy floor plane.

  • dave1707dave1707 Mod
    Posts: 7,470

    @Bri_G You could use addRect to create other than flat planes, but there's a lot of changes to make to set the correct x,y coordinates plus rotations and translates. It would be a lot easier using vertices for triangles. Change the rotation axis ( ax,at,az) and the angle for different views.

    function setup()
        displayMode(STANDARD)  
        parameter.integer("angle",-180,180,45)
        parameter.integer("ax",0,1,1)
        parameter.integer("ay",0,1,0)
        parameter.integer("az",0,1,0)
    
        m1=mesh()
        m1:addRect(-25,0,50,100)
        m1:setColors(255,0,0,255) 
    
        m2=mesh()
        m2:addRect(25,0,50,100)
        m2:setColors(255,255,0,255)  
    
        m3=mesh()
        m3:addRect(67,0,50,100)
        m3:setColors(255,0,255,255)           
    end
    
    function draw()  
        background(0)
    
        perspective(90)
        camera(0,0,-300,0,0,0,0,1,0) 
        rotate(angle,ax,ay,az)
    
        pushMatrix()
        m1:draw() 
        popMatrix() 
    
        pushMatrix()
        rotate(30,0,1,0)
        m2:draw()  
        popMatrix()
    
        pushMatrix()
        rotate(-10,0,1,0)
        translate(-4,0,-32)
        m3:draw()
        popMatrix()
    end
    
Sign In or Register to comment.