Part 4 of the RayLib 2D Challenge was supposed to be adding an environment for scarfy to walk around in. I'm short of time, though, so I decided it was time to add the game menu. RayLib's raygui module exists for that purpose. Let's try it out...

Click here to watch the video on Odysee.

Immediate Mode GUI

RayGui is what's called an "Immediate Mode Graphical User Interface," or IMGUI for short. This means that the code that draws the GUI also handles user input. For example, RayGui's GuiButton() function returns true if the user clicked on the button. Model View Controller (MVC) advocates might shudder at the thought of mixing display and control code, but IMGUI libraries are very easy to use. Have a look at the core menu display code:

GuiSetStyle(BUTTON, TEXT_ALIGNMENT, GUI_TEXT_ALIGN_CENTER);
GuiSetStyle(DEFAULT, TEXT_SIZE, MENU_FONT_SIZE);
if (GuiButton((Rectangle){ currX, currY, BUTTON_WIDTH, BUTTON_HEIGHT }, "Start Game")) {
	startClicked = true;
}
currY += BUTTON_SPACING;
if (GuiButton((Rectangle){ currX, currY, BUTTON_WIDTH, BUTTON_HEIGHT }, "Quit")) {
	quit = true;
}

The code for our little two button menu is very easy to follow. The code that responds to user events is still separated out, but no complicated GUI messaging system is needed. The GUI code sets some flags, and the code that responds to events reads them. For example, the main menu class' update method returns a ScarfyScene if the "Start Game" button was pushed:

std::shared_ptr<Scene> MainMenuScene::update() {
	if(startClicked) {
		return std::make_shared<ScarfyScene>();
	} else {
		return nullptr;
	}
}

I still found RayGui harder to use than expected, but I usually find writing GUI code harder than I think it should be. So that's nothing new. Nevertheless, creating the main menu didn't take very long.

RayGui is adequate for simple game menus and possibly some game editors. If I were working on something more complicated, then I'd probably use Dear ImGui instead.

I won't go through all the changes for part 4 here. They're best seen in the video above. Or, download the code below...

HINT: Watch the video full-screen.

Download The Code

Click here to download the code.

 

Click here for part 5 of the RayLib 2D Challenge