Need ideas on how to start my little picture guessing game

crysii1

Hello Godot users,

I'm new to Godot and I don't know how to start my project and hope someone can give me some tips. I want to create a game that shows a picture below a grid (e.g. 4x3) of rectangles so that the picture is hidden by the rectangles. When a rectangle is being clicked, it should disappear and the part of the picture below should become visible. The player has to guess what the picture is displaying. The more rectangles he has to click the lower the score should be. If the picture is guessed right the next one should be shown below a new full grid. I need the game only for one event. The players say their guesses to me, so no mask is needed for that. And the score is also calculated by me. I can already load the pictures from a folder and safe them in the array sprites via following function:

! >func create_sprites_from_directory(): ! >>var dir = Directory.new() ! >>dir.change_dir("./images/") ! >>dir.list_dir_begin() ! >>var file = dir.get_next() ! >>while(file != ""): ! >>>if (file == "." || file == ".." || file.get_extension() == "import"): ! >>>>file = dir.get_next() ! >>>>continue ! >>>imageCount = imageCount + 1 ! >>>var position = Vector2(1920/2, 1080/2) ! >>>var imagetexture = ImageTexture.new() ! >>>var image = Image.new() ! >>>image.create(1920, 1080, true, Image.FORMAT_RGB8) ! >>>image.load("./images/" + file) ! >>>image.resize(1920, 1080) ! >>>imagetexture.create_from_image(image) ! >>>var sprite = Sprite.new() ! >>>sprite.set_texture(imagetexture) ! >>>sprite.set_position(position) ! >>>sprite.hide() ! >>>get_parent().add_child(sprite) ! >>>sprites.append(sprite) ! >>>file = dir.get_next() Then with a right mouse button click I can switch to the next image in the _input(event) function: ! >func _input(event): ! >>if(event.is_pressed()): ! >>>if event is InputEventMouseButton: ! >>>>if event.button_index == BUTTON_RIGHT and event.pressed: ! >>>>>if imageDisplayed < imageCount - 1: ! >>>>>>imageDisplayed = imageDisplayed + 1 ! >>>>>sprites[imageDisplayed].show()

But now I need the grid with my clickable rectangles (maybe buttons?). But I don't know what to use for that. Maybe a TileMap or a GridContainer? And how do I use them? The size of the grid cells and the grid itself should be fixed (e.g. 4x3 cells each 480x360 pixels). The game itself is running in fullscreen on a 1920x1080 monitor.

I would be very happy to get some ideas on how to do that, Thanks

P.S. How do I properly format multiline code?

Megalomaniak

@crysii1 said: P.S. How do I properly format multiline code?

Just add an extra indent before copying from your editor or paste here, select the whole thing and from the menu with the paragraph icon(should say Format in the alt text when hovering the menu) you click on code.

In this case I just copy pasted from your post, and it already was indented when I pasted:

func create_sprites_from_directory():

    var dir = Directory.new()
    dir.change_dir("./images/")
    dir.list_dir_begin()
    var file = dir.get_next()
    while(file != ""):

        if (file == "." || file == ".." || file.get_extension() == "import"):

            file = dir.get_next()
            continue

        imageCount = imageCount + 1
        var position = Vector2(1920/2, 1080/2)
        var imagetexture = ImageTexture.new()
        var image = Image.new()
        image.create(1920, 1080, true, Image.FORMAT_RGB8)
        image.load("./images/" + file)
        image.resize(1920, 1080)
        imagetexture.create_from_image(image)
        var sprite = Sprite.new()
        sprite.set_texture(imagetexture)
        sprite.set_position(position)
        sprite.hide()
        get_parent().add_child(sprite)
        sprites.append(sprite)
        file = dir.get_next()

Megalomaniak

So I quickly created an example for you, note that I didn't implement your scripts and I completely hooked up only the first 3 buttons, leaving the rest for you to do.

ImageRevealer

https://drive.google.com/file/d/1smhmK_-XCnHYuAILKsNrhFa3Gdj19PDW/view?usp=sharing

crysii1

Thank you for your example. I think I got the idea and I will try it like that tomorrow

crysii1

@Megalomaniak said: So I quickly created an example for you, note that I didn't implement your scripts and I completely hooked up only the first 3 buttons, leaving the rest for you to do.

I have used your example together with edited scripts of my own in my project and it works pretty well. I can use my own images and can go through all of them with a new grid everytime, which is archieved simply by setting the visibility of the buttons to true. It's a small and simple but very effective way. Thanks for that idea.

Megalomaniak

Honestly, you kinda already mentioned the idea in your own opening post. :)

crysii1

Yes that's right but I did not know the PanelContainer, MarginContainer and TextureRect. At first I made a spline out of every image but that turned out to be very complicated.