Andidy / engine-v2

1 stars 0 forks source link

Add FPS and FrameTime displays to debug window #11

Open Andidy opened 3 years ago

Andidy commented 3 years ago

It is important to be able to measure the frame times of the game to ensure a smooth experience for the player. A simple display should be added to show the FPS and FrameTime values so that developers can know if the game is running too slowly and needs to be optimized.

Using the Raylib functions: GetFPS() and GetFrameTime() it should be possible to display those metrics in the existing GUI with a bit of modification and a few new variables.

Edit: I removed the old code snippets to prevent confusion since the preferred function calls have changed.

Andidy commented 3 years ago

The code that was shown above was out of date. New code has been added to improve use of raygui and make it easier. Here is an updated example:

In this example, I am using the GUI to shown the x, y position of the mouse, in pixels from the top-left of the window. In the below code snippet, I create a "context" which contains all the information needed to create the GUI element that will display the mouse position information. gui::LabelContext is a struct with two member variables. The .bounds value stores 4 things about the GUI element, in order they are: The x position in pixels, the y position in pixels, the width in pixels, and the height in pixels. The .text is a std::string which will store the text you want to display on the screen. We haven't put the text into the string yet because we don't have the information we want yet. https://github.com/Andidy/engine-v2/blob/a26fe863bc7d41120c37ec7d3f015f9decf5f0da/engine-v2/src/main.cpp#L93-L95

In the below snippet, we will use std::string's functionality and the information we want to display to populate the .text field of the LabelContext before passing it to the function which displays the GUI. I want the GUI to show the mouse position with the format: "Mouse Pos: x, y". So lines 258-262 are filling out the .text variable with the right formatting and information. Line 263 calls the function which tells Raygui how to draw the GUI element on the screen.

.clear() means "delete the contents of the string". We do this because we don't want to leave the contents of the last frame of rendering in the string. That would cause a bug that would make the GUI display this: image Which clearly isn't what we want.

+= means "append the string on the right side of += to the string on the left side (In this case our .text variable.

std::to_string() takes the variable you give it and returns a string which is the textual representation of the variable you passed in.

gui::Label() is what is called a "helper function". I created it in order to simplify the usage of another function called GuiLabel() which had more parameters. gui::Label() only has 1 parameter instead. https://github.com/Andidy/engine-v2/blob/a26fe863bc7d41120c37ec7d3f015f9decf5f0da/engine-v2/src/main.cpp#L258-L263

Here is the result of the two code snippets from above: image