This week has been a bit hectic. Lots to do and little time to do it. We’ve had some big features that feel absolutely necessary to implement for the final version of the game. One of those was a main menu from where the player can start the game and look at highscores, credits, and the control scheme. (And quit the application of course. This was a bit of a hassle to achieve, and the solution isn’t even very pretty. More about that later. Actually, probably not.) The different buttons in the menu are instances of the same class, GUIButton, separated by an Enum parameter. Their features include:

• Clicked using the mouse, which triggers different functions depending on the kind of button
• Changing the image when the cursor is on top of the button
• Hiding the button and making it non-clickable if the player is currently in a sub menu where the button is not supposed to be shown

Since there are only two layers in the menu: the main screen, and the other screens, all that’s needed to navigate back to the main screen is a back button which always sends the player back to the main screen, regardless of which sub menu it’s in.

The system seems simple enough, but the getting all the logic right took me some time. The worst part is the clicking, because since we haven’t used a clever way to manage inputs, all we know is whether the mouse button is pressed or not. Only getting the code to perform only one menu button click when the mouse button is held means we need another member variable to store a boolean whether the button has been let go of or not between ticks. The system as it turned out is not perfect, with the main issue being that a button is clicked if the cursor is moved to the GUI button while the mouse button is held. But I figured it’s not big enough a problem to spend more time on the code. Included below is the complete Update() method from the MenuState class. I think it’s rather self-explanatory, and I included some comments to possibly clarify some things. The Draw() function is not very interesting, it basically just checks what sub menu the player is in, and draws different backgrounds, and then it checks which buttons are visible and draws those. I was going to add a screenshot of the menu, but for some reason my screenshots have started to capture Visual Studio and the Console window instead of the game screen; so here’s a picture of a fish instead. He is not amused.

Since made by one of our artists as a placeholder for the highscore screen, it’s actually perfectly related to the rest of the post.

bool MenuState::Update(float deltatime)
<pre>{
    // This stuff is to make the mouse button perform only one click when held
    if (!sf::Mouse::isButtonPressed(sf::Mouse::Left))
        m_mousePressed = false;

    // Set button border to NOT show
    for (int i = 0; i < m_buttons.size(); i++)
    {
        m_buttons[i]->SetHover(false);
    }

    for (int i = 0; i < m_buttons.size(); i++)
    {
        int buttonX = m_buttons[i]->GetPosition().x;
        int buttonY = m_buttons[i]->GetPosition().y;
        int buttonWidth = m_buttons[i]->GetWidth();
        int buttonHeight = m_buttons[i]->GetHeight();
        int mouseX = sf::Mouse::getPosition().x;
        int mouseY = sf::Mouse::getPosition().y;
        ETYPE buttonType = m_buttons[i]->GetType();

        if (!m_buttons[i]->GetHidden())
        {
            
            if (mouseX >= buttonX && mouseX <= (buttonX + buttonWidth) && mouseY >= buttonY && mouseY <= (buttonY + buttonHeight)) // Horizontal and vertical
            {
                m_buttons[i]->SetHover(true);
                if (sf::Mouse::isButtonPressed(sf::Mouse::Left) == true && m_mousePressed == false)
                {
                    if (buttonType == START)
                    {
                        m_mousePressed = true;
                        return false; // Go to next State, which is the GameState
                    }

                    else if (buttonType == HIGHSCORE)
                    {
                        m_subMenu = HIGHSCORE_SCREEN;
                        for (int i = 0; i < 4; i++)
                        {
                            m_buttons[i]->SetHidden(true);
                        }
                        m_buttons[4]->SetHidden(false);
                        m_mousePressed = true;
                        return true;
                    }

                    else if (buttonType == CREDITS)
                    {
                        m_subMenu = CREDITS_SCREEN;
                        for (int i = 0; i < 4; i++)
                        {
                            m_buttons[i]->SetHidden(true);
                        }
                        m_buttons[4]->SetHidden(false);
                        m_mousePressed = true;
                        return true;
                    }

                    else if (buttonType == QUIT)
                    {
                        m_shutdown = true; // Will break the game loop in Engine
                    }

                    else if (buttonType == BACK)
                    {
                        m_subMenu = MAIN_SCREEN;
                        for (int i = 0; i < 4; i++)
                        {
                            m_buttons[i]->SetHidden(false);
                        }
                        m_buttons[4]->SetHidden(true);
                        m_mousePressed = true;
                        return true;
                    }
                }
                return true;

            }
        }
    }

    return true;
}

So we realized that our wall colliders were too many to be efficient. Each wall segment the size of one tile had its own collider which was created by the tile itself at the time of its instantiation. Every wall instance knew what kind of wall segment it was (information that was also used for determining which texture to load), and shaped the collider accordingly. (We had some struggles here because the shape of certain wall segments called for a more complex collider than a rectangle. It could have been achieved with two rectangular colliders, but this would have caused further problems with looping through all wall colliders when using them for collision checking; so we stuck with only one for each segment but adjusted the size of some colliders until there were no gaps.) In the picture below, the colliders can be seen visualized in yellow. Note that the angled perspective entails the colliders being placed at the bottom of the walls.

The point is that many colliders in a row just as well could be merged into one big collider to greatly reduce the number of collision calculations to be done. I coded a function that looks at the tile map and creates the colliders separately from the walls, storing pointers to them in a separate std::vector for later access. The result looks like below.

What it basically does is finding the end segments and creating colliders between them. It does so by looping through the walls looking at one at a time, starting at the upper left corner. The tile map can be seen below.

First of all, we copy the numbers in the tile map to an std::vector for easier access, like below. (The numbers in the tile map are actually separated by commas and it doesn’t contain any blank spaces like above. Those just make it align more prettily for a blog post.)

std::string number;
    for (int i = 0; i <= height - 1; i++)
    {
        for (int j = 0; j <= width - 1; j++)
        {
            std::getline(dataStream, number, ',');
            wallData[j + i * width] = stoi(number);
        }
    }

We do horizontal and vertical walls separately. The first round we do horizontal, and start by looking for any segment that works as a left end. (There are four different: 1, 3, 8 & 14.) After finding one, we step to the right until finding any segment that works as a right end (2, 4, 7 & 14). We then create a collider between these two tiles (the height being the constant value of a wall’s thickness). After this we continue from the rightmost tile and repeat the process of finding a left end segment and then a right end segment. When having reached the end of the row, we go to the row below, and so on. The code for this can be seen below:

int index = 0;
while (index < size)
{
    if (wallData[index] == 1 || wallData[index] == 3 || wallData[index] == 8 || wallData[index] == 14) // Search for left end segments
    {
        for (int search = index + 1; (search % width) != 0; search++) // Search until on the first position in a row, which means search while on the current row.
        {
            if (wallData[search] == 2 || wallData[search] == 4 || wallData[search] == 13 || wallData[search] == 7) // Search for right end segments
            {
                int colWidth, x, y, addLeft = 0, addRight = 0; // addLeft and addRight are to increase the width for the horizontal straight end pieces which are somewhat special
                if (wallData[index] == 14)
                    addLeft = 48;
                else
                    addLeft = 0;
                if (wallData[search] == 13)
                    addRight = 48;
                else
                    addRight = 0;
                colWidth = (search - index) * 128 + 32 + addLeft + addRight;

                x = (index % width) * 128 - 16 - addLeft;
                y = (floor(index / width) + 1) * 128 - 16; // floor() is just for clarity. Division between integers doesn't produce a remainder

                Collider* collider = new Collider(x, y); // Create the new collider
                collider->SetWidthHeight(colWidth, 32); // The height of horizontal walls is 32, the walls' thickness
                m_wall_colliders.push_back(collider); // Put the new collider in an std::vector for easy access
                index = search; // Set the position for the next search
                break;
            }
        }
    }
    index++; // Step one index to the right
}

Creating the vertical walls is very similar, except counting with adjacent positions vertically requires a bit more thinking than horizontally. For example, going one position down means adding the map’s width. I simplified the iteration so some unnecessary positions are checked, but this is insignificant in terms of optimization since it is still quite light and, most importantly, only performed at the start of each level.

index = 0;
<pre>while (index < size)
{
    if (wallData[index] == 1 || wallData[index] == 6 || wallData[index] == 2 || wallData[index] == 10)
    {
        for (int search = index; search < size; search += width)
        {
            if (wallData[search] == 3 || wallData[search] == 4 || wallData[search] == 11 || wallData[search] == 9)
            {
                int colHeight = (floor(search / width) - floor(index / width)) * 128 + 32;

                int x = (index % width) * 128 - 16;
                int y = floor((index / width) + 1) * 128 - 16;

                Collider* collider = new Collider(x, y);
                collider->SetWidthHeight(32, colHeight);
                m_wall_colliders.push_back(collider);
                index++;
                break;
            }
        }
    }
    index++;
}

This week was the week we decided to use the Tiled map editor software after all. Tiled is a level creator that exports data that can be read by the program to place the correct tiles at the correct places. The main advantage of this is that levels can be edited easily by someone unfamiliar with the code, and coding in general. Our first means of editing levels was to just write numbers manually in a text file, which kind of sucks, but is easy to read with code. We had previously decided against using Tiled because writing code for parsing the exported xml files seemed like more trouble than writing the level data text files manually; but then a wise man taught us how Tiled could also export normal text files.

These text files contain more data than we need and it also seemed like a good idea to split the data and save all we needed in different variables. It was up to me to write the code. The code we had simply read one text file (in which every tile was represented by a single character) and created the level immediately, which means the level was never copied from the text file which would have to be read again if the game was to revert to that level. The new system would also mean that three layers of tiles would be acquired, one for floors, one for walls, and one for all other objects like furniture and pickups. (We will possibly add a layer for patrol pattern nodes.) The text file structure can be seen in the picture below:

I cropped it for obvious aesthetic reasons; the missing part only contains two more “[layer]”s with different numbers in the map, and type “WALLS” and “Objects”, respectively.

The method LoadLevel() does the following:

1. Finds the “width=30” line and saves the value to a variable.
2. Does the same for the height.
3. Finds the line “data=” and saves the tile map data to a string.
4. Removes the line breaks from this string.
5. Saves the string to a variable.
6. Repeats steps 3 through 5 for the remaining two layers, storing them in different variables.
7. Creates a new instance of class Level, sending all the acquired level data into its constructor.
8. Returns a pointer to that instance of Level.

The complete method LoadLevel() with detailed comments can be found below. The main difficulty with this code was to make it look organized, which I think I partially failed. It would have been better to put the text file management in a new class with some operations having their own methods, to be able to reuse them and get a better structure.

{
    // All variables we need as parameters for Level
    int index = 1; // "Level 1"
    int width; // Level width, in number of tiles
    int height; // Level height, in number of tiles
    std::string floorData, wallData, objectData; // These will contain the tile map for each level

    // Read the map from the text file and put everything in a string
    std::ifstream levelFile(filepath);

    std::string str, levelData;
    while (std::getline(levelFile, str))
    {
        levelData += str;
        levelData.push_back('\n');
    }

    // Variables that will be needed
    std::size_t foundAt; // Data type "size_t" is a position in an std::string. It's used pretty much like an integer
    std::size_t position; // Will be the main position, only increasing in value since we start from the beginning and never go back
    std::size_t tempPos;
    std::string target;
    std::string tempString;

    //Start parsing levelData
    position = 0; // Beginning of string
    target = "[header]"; // Why don't I just search for "width=" ? I presumably planned a different, shinier approach for the parsing, that would work with slightly different looking text files.
    foundAt = levelData.find(target, position); // Search for the string "[header]" starting at the beginning of the string.
    position = foundAt + target.size() + 1; // Set position to the beginning of the next line. (foundAt is where the target string was found. target.size() is the length of target. + 1 is for going to the next line
    tempPos = levelData.find_first_of("\n", position); // Search for next line break
    tempString = levelData.substr(position, tempPos - position); // Create a temporary substring from the current line

    // More variables needed
    std::string strMain;
    std::string strResult;
    std::size_t pos;

    // Parse the substring for the value
    strMain = tempString; // Copy substring to new string. (Probably because I first planned to do this in a separate method.)
    pos = strMain.find_first_of("0123456789"); // Find the first digit
    while (pos != std::string::npos) // While not at end of string
    {
        strResult += strMain[pos]; // Add the digit
        pos = strMain.find_first_of("0123456789", pos + 1); // Find the next digit
    }

    if (!strResult.empty()) // If there are digits in the string
        width = stoi(strResult); // Save the string as an integer
    strResult.clear(); //Clear strResult for next use

    position = levelData.find("height", position); //Go to the line with "height" in it

    tempPos = levelData.find_first_of("\n", position); //Search for next line break
    tempString = levelData.substr(position, tempPos - position); //Create a temporary substring from the line with "height" in it

    // Here is the same parsing stuff as for width
    strMain = tempString;
    strResult.clear();
    pos = strMain.find_first_of("0123456789");
    while (pos != std::string::npos)
    {
        strResult += strMain[pos];
        pos = strMain.find_first_of("0123456789", pos + 1);
    }

    if (!strResult.empty())
        height = stoi(strResult);

    for (int i = 1; i <= 3; i++) // Once for each layer. This will be increased if we add more layers to the level
    {
        target = "data=";
        foundAt = levelData.find(target, position);
        position = (foundAt + target.size() + 1); // Go to beginning of the tile map

        tempPos = position;
        for (int i = 1; i <= height; i++) // Set tempPos to position, plus height number of lines down. This will encompass the whole map.
        {
            tempPos = levelData.find_first_of("\n", tempPos + 1);
        }

        tempPos++; // Get the last line break, too. Can't remember why...

        tempString = levelData.substr(position, tempPos - position); // Create a temporary string from the map

        // Loop through the map and delete all line breaks, as these will be an annoyance when reading this string and creating tiles based on the numbers
        for (std::size_t found = tempString.find("\n"); found != std::string::npos; found = tempString.find("\n"))
        {
            tempString.erase(found, 1);
        }

        if (i == 1) // If at first layer...
            floorData = tempString; // ...save in floor layer data container
        else if (i == 2) // If at second data layer...
            wallData = tempString; // ...save in wall layer data container
        else if (i == 3) // If at third data layer...
            objectData = tempString; // ... save in object layer data container

        position = tempPos; // Jump to the end of map, so the loop will search for the next "data="
    }

    Level* level = new Level(1, width, height, floorData, wallData, objectData); // Save level data in an instance of the Level class

    return level; // Return the pointer to the newly created Level instance
}