Moving squares for a sliding puzzle with sfml

Jun 8, 2021 at 2:30pm
So I am making a sliding puzzle game with SFML in C++ and I am unsure what I am doing wrong to move these boxes. I there something wrong with the code I have?

the cpp file:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
MainGame::MainGame() : window({1920, 1080, 32}, "SFML Final Project")
{

    button.setOrigin({button.getGlobalBounds().width/2,
                      button.getGlobalBounds().height/2});

    button.setPosition({window.getSize().x/2.f,
                        window.getSize().y/2.f});

    exitButton.setOrigin({button.getGlobalBounds().width/2,
                      button.getGlobalBounds().height/2});

    exitButton.setPosition({window.getSize().x/2.f,
                        window.getSize().y/1.5f});

    title.setFont(Fonts::getFont());
    title.setOrigin(title.getGlobalBounds().width/2,
                      title.getGlobalBounds().height/2);
    title.setPosition(window.getSize().x/5.5f,
                      window.getSize().y/9.5f);
    title.setFillColor(sf::Color::Blue);
    title.setCharacterSize(150);
    title.setString("Final Siding Puzzle Game");

    r.setSize({100, 100});
    r.setPosition({window.getSize().x / 2.f,
                   window.getSize().y / 2.f});
    r.setFillColor(sf::Color(53, 189, 164));

    rTwo.setSize({100,100});
    rTwo.setPosition({window.getSize().x/2.25f,
                      window.getSize().y/2.f});
    rTwo.setFillColor(sf::Color::Yellow);

    rThree.setSize({100, 100});
    rThree.setPosition({window.getSize().x / 2.f,
                   window.getSize().y / 2.48f});
    rThree.setFillColor(sf::Color::Yellow);

    rFour.setSize({100,100});
    rFour.setPosition({window.getSize().x/2.25f,
                      window.getSize().y/2.48f});
    rFour.setFillColor(sf::Color::Yellow);

}

void MainGame::run()
{

    while(window.isOpen())
    {
        sf::Event event;
        while(window.pollEvent(event))
        {
            if(event.type == sf::Event::Closed)
            {
                window.close();
            }

            sf::FloatRect bounds = button.getGlobalBounds();
            sf::FloatRect boundsTwo = exitButton.getGlobalBounds();
            sf::Vector2f mPos = (sf::Vector2f) sf::Mouse::getPosition(window);

            if(sf::Mouse::isButtonPressed(sf::Mouse::Left) && bounds.contains(mPos))
            {
                //this will set the rectangle to a fade state
                button.enableState(States::HIDDEN);
                exitButton.enableState(States::HIDDEN);
                r.disableState(States::HIDDEN);
                rTwo.disableState(States::HIDDEN);
                rThree.disableState(States::HIDDEN);
                rFour.disableState(States::HIDDEN);

            }

            else if(sf::Mouse::isButtonPressed(sf::Mouse::Left) && boundsTwo.contains(mPos))
            {
                exit(1);
            }

            if(sf::Keyboard::isKeyPressed(sf::Keyboard::Up))
            {
                if(boxCanMove(UP))
                {
                    sf::FloatRect bounds = r.getGlobalBounds();

                    r.setPosition({
                                          bounds.left,
                                          bounds.top - bounds.height
                                  });
                }
            }
            else if(sf::Keyboard::isKeyPressed(sf::Keyboard::Left))
            {
                if(boxCanMove(LEFT))
                {
                    sf::FloatRect bounds = r.getGlobalBounds();

                    r.setPosition({
                                          bounds.left + bounds.width,
                                          bounds.top
                                  });
                }
            }
       

            //other events
            button.addEventHandler(window, event);
            exitButton.addEventHandler(window, event);


        }

        button.update();
        exitButton.update();
        window.clear(sf::Color(53, 189, 164));
        window.draw(button);
        window.draw(exitButton);
        window.draw(title);
        window.draw(r);
        window.draw(rTwo);
        window.draw(rThree);
        window.draw(rFour);
        window.display();
    }
}



and this is the header file

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
#include <SFML/Graphics.hpp>
#include "Button.h"
#include "ButtonTwo.h"
#include "Fonts.h"
#include "Rectangle.h"

class MainGame
{
private:
    sf::RenderWindow window;
    Button button;
    ButtonTwo exitButton;
    Rectangle r;
    Rectangle rTwo;
    Rectangle rThree;
    Rectangle rFour;
    sf::Text title;
    WindowDialog dialog;
public:
    enum boxCanMove{UP, LEFT, DOWN, RIGHT};
    MainGame();
    void run();

};
Jun 8, 2021 at 3:19pm
Can you describe the actual problem you are having? Be specific as possible.

It seems more information was also posted here https://en.sfml-dev.org/forums/index.php?topic=28082.0 although I'm still not sure how to give specific advice.

If you want one of your rectangles to move after a key press, the simplest thing would be to handle it in some way like:
1
2
3
4
5
6
7
8
9
10
11
12
sf::RectangleShape my_rectangle;

// ... main loop
{


    if (sf::Keyboard::isKeyPressed(sf::Keyboard::Left))
    {
        // left key is pressed
        my_rectangle.move(1.f, 0.f);
    }
}

https://www.sfml-dev.org/tutorials/2.5/window-inputs.php

Also, you have 'boxCanMove' defined as an enum, but you are using it as if it's a bool function.
Last edited on Jun 8, 2021 at 4:35pm
Jun 9, 2021 at 12:37am
Yeah my question was how to move or flip both boxes around to make sure that the flip happens and there is only one blank box. and I see I tried move but have it on my rectangle class. I had trouble with it at first but I see now.

That is me on that one but no one has answered so I tried here to see if anyone can help.

Yeah it started to move once I used what linked you showed me.

Here is what I did to move it

this is in my rectangle class by the way and this is the cpp file:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
Rectangle::Rectangle() { enableState(HIDDEN);}

void Rectangle::update()
{
    rectangle.move(rectangle.getGlobalBounds().width/2,
                   rectangle.getGlobalBounds().height/2);
}

void Rectangle::draw(sf::RenderTarget& window, sf::RenderStates states) const
{
    if(!checkState(HIDDEN))
        window.draw(rectangle);
}

void Rectangle::center()
{

}

void Rectangle::addEventHandler(sf::RenderWindow &window, sf::Event event)
{

}

void Rectangle::setSize(sf::Vector2f size)
{
    rectangle.setSize(size);
}

void Rectangle::setPosition(sf::Vector2f position)
{
    rectangle.setPosition(position);
}

sf::FloatRect Rectangle::getGlobalBounds()
{
    return background.getGlobalBounds();
}

void Rectangle::setFillColor(sf::Color color)
{
    return rectangle.setFillColor(color);
}


this is my header

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
#include <SFML/Graphics.hpp>
#include "States.h"
#include "LinkedListPiece.h"

class Rectangle : public sf::Drawable, public States
{

private:
    sf::RenderWindow window;
    sf::RectangleShape background;
    sf::RectangleShape rectangle;
    
public:
    Rectangle();
    void center();
    void draw(sf::RenderTarget& window, sf::RenderStates states) const;
    void addEventHandler(sf::RenderWindow &window, sf::Event event);
    void update();

    void setFillColor(sf::Color color);

    void setSize(sf::Vector2f size);
    void setPosition(sf::Vector2f position);


    sf::FloatRect getGlobalBounds();
};


So yeah hope this makes a bit more sense. I am sorry, I am bad at asking questions online >.< as I do not want to seem like I want someone to do the work for me and very cautious what I say online as I worried to get hated on or something >.<

but yeah my question is to make it look or make the rectangles switch between each other to make it look like a sliding puzzle as I have trouble making them move. Thank you for your time and patience and I am sorry. >.<
Topic archived. No new replies allowed.