How to draw a simple grid with the drawing functions ?

:information_source: Attention Topic was automatically imported from the old Question2Answer platform.
:bust_in_silhouette: Asked By Bacca là

Hello everyone,

I’m new to this forum and to the godot project in general :slight_smile:

I would like to make a connect 4 game for training, but I don’t know how to draw the grid with the drawing functions ( draw_rect, draw_circle etc…)

I had in mind to first draw a blue filled rectangle, then the circles, and finally subtract them to make holes in the rectangle.

Is there a way for doing this ?

:bust_in_silhouette: Reply From: njamster

Yes, there is. Just not for the subtraction part. Check out the documentation on custom drawing as well as the drawing-functions of the CanvasItem class:

const COLUMNS = 7
const ROWS = 6

func _draw():
	draw_rect(Rect2(0, 0, COLUMNS*100+20, ROWS*100+20), "#0000FF")
	for x in range(COLUMNS):
		for y in range(ROWS):
			draw_circle(Vector2(60+x*100, 60+y*100), 40, "#FFFFFF")

That said, practice aside, there really isn’t any reason to do it like that. Just use a Sprite or TextureRect. Then you can create the images in the image editor of your choice (including transparent areas) and directly use these in Godot.

Thank you for your answer

Indeed the grid is drawn, but with no transparency…

But anyway, you’re right, I should use a Sprite or TextureRect.

Thx ! :slight_smile:

Bacca là | 2020-03-07 21:22

Is there a way to get rid of the fill, so that only line and a setting for its thickness?

verbaloid | 2020-05-16 12:47

I assume in order to generate these Styleboxes for a number or ROWS and COLUMNS of the same size,I need to get something like this, but what should I put into draw_style_box there in the brackets?

   const COLUMNS = 7
   const ROWS = 6
    for x in range(COLUMNS):
    		for y in range(ROWS):
    			draw_style_box(style_box, Rect2(POSITION, SIZE)) -???

verbaloid | 2020-05-16 13:00

Is there a way to get rid of the fill […} ?

Not sure if I can follow… The fill of what?

  • The circles? Yes, but not with a built-in function. The documentation includes an example for drawing a circle arc. Just draw a full circle (from 0-360°).

  • The blue background? Yes, simply remove the call to draw_rect.

  • Both, i.e. a blue grid of fully transparent holes? No, at least not with substantial efforts. And as mentioned above, I don’t think these are warranted.

I assume in order to generate these Styleboxes […]

Is that a different question or do I just fail to see the connection? Anyways:

const COLUMNS = 7
const ROWS = 6

func _draw():
    var style_box = StyleBoxFlat.new()
    for x in range(COLUMNS):
        for y in range(ROWS):
            var position = Vector2(60+x*100, 60+y*100)
            var size = Vector2(40, 40)
            draw_style_box(style_box, Rect2(position, size))

njamster | 2020-05-17 12:42