Wading into Godot - Episode 1

To recap - I am taking some time in-between gigs to learn about Godot, a 2D/3D game engine. My eventual intention is to use Godot to create some gamification of some coaching and operational practices to help people learn how to execute and improve planning engagement and collaboration.

Here is a link to the Godot home page.

I have some pretty big plans, but I think it will be wise to keep my ambitions low. I decided a good way to learn the tool and get familiar with the scripting language was to start with a 2D idea and to keep it single player. I decided to go with a 'jeopardy'-style game where a player can try to answer some trivia questions. The questions will be laid out in a grid with categories running horizontally and question values vertically.

Requirements for the game

Here is a quick synopsis of my game's minimal requirements:

• Randomly pick four categories of questions from the question bank. For MVP, categories and questions will be hard-coded. For a full implementation, we could do import from some object format such as JSON. It would also be cool to have an editor and format checker if this were a real product.
• For each category, present five questions of values 100, 200, 300, 400 and 500. For now, let's leave this static. We could expand the question objects to be more complex and have arbitrary or dynamic values. We could also make the number of categories chosen and the point values dynamic too.
• Player picks an unasked question by clicking on the question box. The question value will show until clicked, then the question will show. When the question is done, the value will be shown with a plus or minus of the value in green or red.
• Question is displayed and timer starts for player to answer. I will probably do a first pass without the timer to keep it as linear and simple as possible. Timers will require signaling, and that is a concept I can wait on for a bit.
• Correct answer adds point value of question; incorrect answer subtracts. After the answer is assessed, the question cell will display the value of the question as explained above.
• After all questions are exhausted, final status is displayed with option to restart the game. For first pass, ignore time. For future, we can include the aggregate time since the game was started and the final score as a 'nice to have'.

Getting a 'head start'

I went to the Godot community and found a 'tile matching' game that seems quite similar to how I imagine the board will look. Here are the links to the asset library and the YouTube tutorial prepared by the author, ThinksWithGames.

Tile matching game - Godot asset library

Tile matching game - Tutorial on YouTube

This seemed like a great place to start! I thought I would pay particular attention to the following things:

• What determines the size of the matching grid? What controls the size of the game window? I will need to know this to scale it up to the game board I am envisioning.
• How does the gameplay communicate with the 'Score' and 'Turns Taken' indicators? I can see it is nothing fancy - it just re-renders the scoreboard every time the user picks their two tiles. No need for signals or other complex processing here.
• How are 'layers' used in this game? I will be using something similar for the question cells on the board. This implies a state machine for each question to decide which layer to render. Layer handling is built into the TileMap object, which handles the different icons displayed in the game.
• How is user input handled? The interaction will be the same for my game.

Creating the initial board

Like the example program, I will use TileSet and TileMap to create the content of the gameboard. TileMap is a basic 2D component that we will use to create the game board. TileMap can render a few different styles of map, but we will be using a rectangular one. Each category will map to a column in the TileMap and each row will be a row of the board, including the category headers. TileSet is a factory that produces the images that can appear in the TileMap from an image file. We will create an icon set image in GIMP. I use the Filters>Map>Tile... feature of GIMP to create regular areas for each tile:

We will create eight different cells. One will be used for the logo, one each for the question score cards, one for a 'correct' answer indicator and one for an 'incorrect'. For our first try, we are going to get all the tiles in the TileMap to show the logo.

After a few minutes in GIMP, the tile set image is complete:

So, I need to create a 2D root and put a TileMap on it. I will also create a camera and align it with the TileMap using the same techniques as in the Tile matching game tutorial. Then, create a TileSet that will give us the graphics we will paint onto our TileMap when we add the new graphic. I will set it up to show the pristine board and call that an accomplishment.

There are still some things I have yet to figure out. I will leave these to the next episode:

• How do I control the size of the rendered window and the position of the TileMap within the viewport?
• How do I render a 'dialog' box that will appear over the board and deliver the actual question?