C++ SFML, Circular Movement - Help!

[Jycerian]

I started with creating my first real C++ SFML game based on Pong. Right now the paddles move from left to right but I would like to have them move like the picture below. How can I accomplish this?



Current Code:

#include <SFML/Graphics.hpp>
#include <SFML/Audio.hpp>

int main()
{
        const int gameWidth  = 640;
        const int gameHeight = 480;

        const float paddleSpeed = 400.f;

        sf::VideoMode videoMode(gameWidth, gameHeight);
    sf::RenderWindow window(videoMode, "Pong", sf::Style::Close);

        // Loading textures
        sf::Texture bgTexture;
        sf::Texture p1Texture;
        sf::Texture p2Texture;
        sf::Texture ballTexture;

        if (!bgTexture.loadFromFile("Media/Textures/Background.png"))
                return EXIT_FAILURE;
        if (!p1Texture.loadFromFile("Media/Textures/Player1.png"))
                return EXIT_FAILURE;
        if (!p2Texture.loadFromFile("Media/Textures/Player2.png"))
                return EXIT_FAILURE;
        if (!ballTexture.loadFromFile("Media/Textures/Ball.png"))
                return EXIT_FAILURE;

        // Loading Fonts
        sf::Font font;
        if (!font.loadFromFile("Media/Fonts/Unibody 8.ttf"))
                return EXIT_FAILURE;

        // Initializing sprites
        sf::Sprite background;
        sf::Sprite player1;
        sf::Sprite player2;
        sf::Sprite ball;

        background.setTexture(bgTexture);
        player1.setTexture   (p1Texture);
        player2.setTexture   (p2Texture);
        ball.setTexture      (ballTexture);

        // Sprites origin
        background.setOrigin(0,0);
        player1.setOrigin(player1.getLocalBounds().width / 2, player1.getLocalBounds().height / 2);
        player2.setOrigin(player2.getLocalBounds().width / 2, player2.getLocalBounds().height / 2);
        ball.setOrigin   (ball.getLocalBounds().width    / 2, ball.getLocalBounds().height    / 2);

        // Sprites position
        background.setPosition(0,0);
        player1.setPosition   (gameWidth / 2, gameHeight - 30);
        player2.setPosition   (gameWidth / 2, 30);
        ball.setPosition      (gameWidth / 2, gameHeight / 2);

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

                float deltaTime = clock.restart().asSeconds();

                // Move player1 paddle (bottom)
                if (sf::Keyboard::isKeyPressed(sf::Keyboard::Left) &&
                   (player1.getPosition().x - player1.getLocalBounds().width / 2 > 0.f))
                {
                        player1.move(-paddleSpeed * deltaTime, 0.f);
                }

                if (sf::Keyboard::isKeyPressed(sf::Keyboard::Right) &&
                   (player1.getPosition().x + player1.getLocalBounds().width / 2 < gameWidth))
                {
                        player1.move(paddleSpeed * deltaTime, 0.f);
                }


                window.clear(sf::Color::Black);

                // Drawing sprites
                window.draw(background);
                window.draw(player1);
                window.draw(player2);
                window.draw(ball);

                window.display();
        }
        return EXIT_SUCCESS;
}

[zsbzsb]

Here is some tips focusing on the player's paddle. (the difference is that the computer's paddle will be flat at 270^o)

First calculate the rotation of the paddle. So have a variable (float) for the position of the paddle. 90^o will be where your paddle is in the middle (straight down from the center of the origin). 0^o will be to the right and 180^o will be to the left. Note this rotation is from the center of your playing field.

Next you need to determine which way to angle the paddle. Do something like this

//playerPositionAngle is the float that tracks the position of your paddle - 90 degrees is straight down
playerPaddle.setRotation(playerPositionAngle - 90); // change to 270 for the computer paddle
//Remember to have the player's paddle's origin in the center of the paddle

Now that we have the rotation we need to calculate the actual position of the paddle. Do something like this

//Remember if you use std::sin/cos it takes radians, not degrees
playerPaddle.setPosition(sf::Vector2f(radius * Cos(playerPositionAngle), radius * Sin(playerPositionAngle)));
 

This is the basic algorithm you will need, try to code it along the lines I have given you and then if you need more help feel free to ask 

By the way, if you don't want to worry about the whole cos/sin functions and all that math, Nexus has written a beautiful library named Thor that has a nice thor::PolarVector that can take an angle and radius and calculate the X/Y position for you.

PS I really like the idea of a circular pong 

[Tigre Pablito]

you can convert degrees to radians by :

radians = degrees * PI / 180.0

and if i m not wrong, the paddle s absolute position would be, as zsbzsb said, but adding it to the center of the circle:

paddle.Position = new Vector2f( cos(angle) * radius + 320, sin(angle) * radius + 240 );

where 320,240 would be the center of the circle, from where its radius moves the paddle, ... actually, the paddle s angle is taken between the segments from the center of the circle to the center of the paddle, and from the center to the paddle s origin point

another matter:
you would have to get the angle of the ball, including when it touches the paddle, or the circunpherence:
first you should give and initial angle to the ball, por example, 60 degrees
when it bounces with any ot the 2 paddles,

ballAngle = 180 - 2 * paddleAngle - ballAngle;
while (ballAngle < 0) ballAngle += 360; 

when the ball bounces with the circunpherence:
i see the circunpherence as a great polygon, as if it had too many edges, then we would have to get the angle of that edge or segment where the ball hits, and apply the same formula (as if the edges were static paddles):

let s suppose we have the (xHit, yHit) Point of where the ball hit. That point belongs to the circunpherence.
the angle would be:

angleCirc = ASin( (yHit - 240) / radius ) + PI / 2;     // this angle is already in radians

ASin is the function that returns the angle whose sine is x. Here the only way to get the angle is getting the Sine, that is Y / radius. Adding PI /2 (that is 90 degrees) is because the edge is normal to the radius
then when the ball bounces with the circle line, the new ball angle could be:

ballAngle = 180 - 2 * angleCirc - ballAngle;      // remember angleCirc is already in radians

Perhaps you will need to detect in every loop if the ball hits weather the circle wall or a paddle. I suppose you will need the trigonometrical functions again ...
please let us know if you need more help ...
I agree with zsbzsb ... it s very nice your idea, very original ... I won t steal it, cos i m very busy with my poor Sonic ... then, when you finish the game, please post the link to it

the last thing: don t you forget the goal lines? 

I hope it helps    ... and also hope i m not wrong, i haven t tested it ... just into my mind 

Pablo
(from Bs As Argentina)

[Jycerian]

Oke so I got a different problem, I did read "Tigre Pablito" post but I can't get the circular collision to work. I tried mutiple things but I can't make it work, anyone knows how to fix it?

#include <SFML/Graphics.hpp>

#define PI 3.14159265359

unsigned const int SCREEN_WIDTH  = 640;
unsigned const int SCREEN_HEIGHT = 480;

int main()
{
        sf::ContextSettings settings;
        settings.antialiasingLevel = 8;

        sf::RenderWindow window(sf::VideoMode(SCREEN_WIDTH, SCREEN_HEIGHT, 32), "Pong", sf::Style::Close, settings);
        window.setFramerateLimit(60);

        // Loading textures
        sf::Texture bgTexture;
        sf::Texture p1Texture;
        sf::Texture p2Texture;
        sf::Texture ballTexture;

        if (!bgTexture.loadFromFile("Media/Textures/Background.png"))
                return EXIT_FAILURE;
        if (!p1Texture.loadFromFile("Media/Textures/Player1.png"))
                return EXIT_FAILURE;
        if (!p2Texture.loadFromFile("Media/Textures/Player2.png"))
                return EXIT_FAILURE;
        if (!ballTexture.loadFromFile("Media/Textures/Ball.png"))
                return EXIT_FAILURE;

        // Texture smoothing
        p1Texture.setSmooth(true);
        p2Texture.setSmooth(true);
        ballTexture.setSmooth(true);

        // Loading Fonts
        sf::Font font;
        if (!font.loadFromFile("Media/Fonts/Unibody 8.ttf"))
                return EXIT_FAILURE;

        // Initializing sprites
        sf::Sprite background;
        sf::Sprite player1;
        sf::Sprite player2;
        sf::Sprite ball;

        background.setTexture(bgTexture);
        player1.setTexture   (p1Texture);
        player2.setTexture   (p2Texture);
        ball.setTexture      (ballTexture);

        // Sprites origin
        background.setOrigin(0,0);
        player1.setOrigin(player1.getLocalBounds().width / 2, player1.getLocalBounds().height / 2);
        player2.setOrigin(player2.getLocalBounds().width / 2, player2.getLocalBounds().height / 2);
        ball.setOrigin   (ball.getLocalBounds().width    / 2, ball.getLocalBounds().height    / 2);

        // Sprites position
        background.setPosition(0,0);
        player1.setPosition   (SCREEN_WIDTH / 2, SCREEN_HEIGHT - 30);
        player2.setPosition   (SCREEN_WIDTH / 2, 30);
        ball.setPosition      (SCREEN_WIDTH / 2, SCREEN_HEIGHT / 2);

        // Paddle move and rotate variables
        float moveSpeed = 100.0f;
        float radius = 230.0f;
        float limit = 79.f;
        float p1Angle = 0.f;
        float p2Angle = 0.f;

        radius = radius - (player1.getLocalBounds().height / 2 + 10);

        // Creating the playfield
        sf::CircleShape circle(230);
        circle.setOrigin(circle.getLocalBounds().width / 2, circle.getLocalBounds().height / 2);
        circle.setPosition(SCREEN_WIDTH / 2, SCREEN_HEIGHT / 2);
        circle.setFillColor(sf::Color::Red);

        // Ball variables
         float ballSpeed = 100.f;
         float ballRadius = ball.getLocalBounds().width / 2;
         float initBallAngle = 90.f;
         float ballAngle = 0.f;

         ballAngle = initBallAngle * PI / 180.f;

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

                float deltaTime = clock.restart().asSeconds();

                // Move player1 paddle (bottom)
                if(sf::Keyboard::isKeyPressed(sf::Keyboard::Left) && !sf::Keyboard::isKeyPressed(sf::Keyboard::Right))
                        p1Angle -= moveSpeed * deltaTime;
                if(sf::Keyboard::isKeyPressed(sf::Keyboard::Right) && !sf::Keyboard::isKeyPressed(sf::Keyboard::Left))
                        p1Angle += moveSpeed * deltaTime;

                // Player1 movement limit
                if (p1Angle < -limit) p1Angle = -limit;
                if (p1Angle >  limit) p1Angle =  limit;

                // Move and rotate player1
                player1.setPosition(SCREEN_WIDTH / 2 + sin((float)(p1Angle * PI / 180)) * radius, SCREEN_HEIGHT / 2 + cos((float)(p1Angle * PI / 180)) * radius);
                player1.setRotation(p1Angle * -1.0f);

                // Move the ball
                float factor = ballSpeed * deltaTime;
                ball.move(cos(ballAngle) * factor, sin(ballAngle) * factor);

                // Collision
                //if (not sure what to put in here to get circular collision)
                //{
                //      ballAngle = -ballAngle;
                //}
               

                window.clear(sf::Color::Black);

                // Drawing sprites
                window.draw(background);
                window.draw(circle);
                window.draw(player1);
                window.draw(player2);
                window.draw(ball);
               
                window.display();
        }
        return EXIT_SUCCESS;
}

[Ixrec]

Well, by a "circular collision" I assume you mean "how do I check if something is inside a given circle?" which is very simple: get its distance from the center of the circle, and if that distance is less than the circle's radius, then it's inside the circle.

[Jycerian]

Yeah I have implemented some sort of collision only it is really bad haha but I am happy something is moving and bouncing and so it starts to look more like a game now. Any tips on how I can improve it?

This is my program: http://filebeam.com/acadd3b5a8b5ba3ad23ce9e7928f4728 ,so you can see how it runs. Also includes the media if you prefer to compile it yourself.

#include <SFML/Graphics.hpp>

#define PI 3.14159265359

unsigned const int SCREEN_WIDTH  = 640;
unsigned const int SCREEN_HEIGHT = 480;

int main()
{
        sf::ContextSettings settings;
        settings.antialiasingLevel = 8;

        sf::RenderWindow window(sf::VideoMode(SCREEN_WIDTH, SCREEN_HEIGHT, 32), "Pong", sf::Style::Close, settings);
        window.setFramerateLimit(60);

        // Loading textures
        sf::Texture bgTexture;
        sf::Texture p1Texture;
        sf::Texture p2Texture;
        sf::Texture ballTexture;

        if (!bgTexture.loadFromFile("Media/Textures/Background.png"))
                return EXIT_FAILURE;
        if (!p1Texture.loadFromFile("Media/Textures/Player1.png"))
                return EXIT_FAILURE;
        if (!p2Texture.loadFromFile("Media/Textures/Player2.png"))
                return EXIT_FAILURE;
        if (!ballTexture.loadFromFile("Media/Textures/Ball.png"))
                return EXIT_FAILURE;

        // Texture smoothing
        p1Texture.setSmooth(true);
        p2Texture.setSmooth(true);
        ballTexture.setSmooth(true);

        // Loading Fonts
        sf::Font font;
        if (!font.loadFromFile("Media/Fonts/Unibody 8.ttf"))
                return EXIT_FAILURE;

        // Initializing sprites
        sf::Sprite background;
        sf::Sprite player1;
        sf::Sprite player2;
        sf::Sprite ball;

        background.setTexture(bgTexture);
        player1.setTexture   (p1Texture);
        player2.setTexture   (p2Texture);
        ball.setTexture      (ballTexture);

        // Sprites origin
        background.setOrigin(0,0);
        player1.setOrigin(player1.getLocalBounds().width / 2, player1.getLocalBounds().height / 2);
        player2.setOrigin(player2.getLocalBounds().width / 2, player2.getLocalBounds().height / 2);
        ball.setOrigin   (ball.getLocalBounds().width    / 2, ball.getLocalBounds().height    / 2);

        // Sprites position
        background.setPosition(0,0);
        player1.setPosition   (SCREEN_WIDTH / 2, SCREEN_HEIGHT - 30);
        player2.setPosition   (SCREEN_WIDTH / 2, 30);
        ball.setPosition      (SCREEN_WIDTH / 2, SCREEN_HEIGHT / 2);

        // Paddle move and rotate variables
        float moveSpeed = 100.0f;
        float radius    = 230.0f;
        float limit     = 79.f;
        float p1Angle   = 0.f;
        float p2Angle   = 0.f;

        radius = radius - (player1.getLocalBounds().height / 2 + 10);

        // Creating the playfield
        sf::CircleShape circle(230);
        circle.setOrigin      (circle.getLocalBounds().width / 2, circle.getLocalBounds().height / 2);
        circle.setPosition    (SCREEN_WIDTH / 2, SCREEN_HEIGHT / 2);
        circle.setFillColor(sf::Color::Transparent);

        // Ball variables
         float ballSpeed     = 200.f;
         float ballRadius    = ball.getLocalBounds().width / 2;
         float initBallAngle = 90.f;
         float ballAngle     = 0.f;

         ballAngle = initBallAngle * PI / 180.f;

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

                float deltaTime = clock.restart().asSeconds();

                // Move player1 paddle (bottom)
                if(sf::Keyboard::isKeyPressed(sf::Keyboard::A) && !sf::Keyboard::isKeyPressed(sf::Keyboard::Right))
                        p1Angle -= moveSpeed * deltaTime;
                if(sf::Keyboard::isKeyPressed(sf::Keyboard::D) && !sf::Keyboard::isKeyPressed(sf::Keyboard::Left))
                        p1Angle += moveSpeed * deltaTime;

                // Player1 movement limit
                if (p1Angle < -limit) p1Angle = -limit;
                if (p1Angle >  limit) p1Angle =  limit;

                // Move and rotate player1
                player1.setPosition(SCREEN_WIDTH / 2 + sin((float)(p1Angle * PI / 180)) * radius, SCREEN_HEIGHT / 2 + cos((float)(p1Angle * PI / 180)) * radius);
                player1.setRotation(p1Angle * -1.0f);

                // Move the ball
                float factor = ballSpeed * deltaTime;
                ball.move(cos(ballAngle) * factor, sin(ballAngle) * factor);

                // Collision
                if (sqrt(pow(ball.getPosition().x - circle.getPosition().x, 2) +
                                 pow(ball.getPosition().y - circle.getPosition().y, 2)) >=
                                 circle.getRadius() - ballRadius)
                {
                        ballAngle = PI + ballAngle - (rand() % 30) * PI / 90;
                }

                // Collision player1 paddle
                if (ball.getGlobalBounds().intersects(player1.getGlobalBounds()))
                        ballAngle = PI + ballAngle - (rand() % 30) * PI / 90;

                window.clear(sf::Color::Black);

                // Drawing sprites
                window.draw(background);
                window.draw(circle);
                window.draw(player1);
                window.draw(player2);
                window.draw(ball);
               
                window.display();
        }
        return EXIT_SUCCESS;
}

[Clockwork]

Hello!

I ran you demo and it's pretty nice!  It's a cool concept and I'm glad you were able to implement that circular movement, I did notice a couple problems though.

Firstly, when the paddle isn't at the very bottom of the circle, it's collision box (I mean where the ball can hit it) seems extended, and so even though you aren't directly underneath where the ball SHOULD go, you hit it anyway.  So you may want to look that.

Lastly, the ball bugged out on me and got stuck inside the walls at some point.

[Jycerian]

Firstly, when the paddle isn't at the very bottom of the circle, it's collision box (I mean where the ball can hit it) seems extended, and so even though you aren't directly underneath where the ball SHOULD go, you hit it anyway.  So you may want to look that.

Any tips on how I can improve it?

I know the bugs and that's why my collision sucks haha but it is all I can do at the moment that why I asked for help here.

It gets stuck in walls sometimes because it uses the rand option and so it sometimes rands into a certain angle that is the wrong way and then again and again and then it is stuck

[Tigre Pablito]

I understand that by "circular collision" you mean that the ball bounces on the circunpherence
try this:  (applying the Pithagoras Theorem)

private bool DetectCircunpherenceCollision(int ballX, int ballY)
{
    int posY, posX;
    posX = ballX - 320;
    posY = Math.Sqrt( radius * radius -  posX * posX );

    if (ballY >= 240 + posY || ballY <= 240 - posY) return true;
    return false;
}

you can use this function on every loop, if it returns true, then you would have to get the new ballAngle ; the circunpherence X, Y to get the new angle will be the same than the ball,

the args to be passed should be the x, y of the ball center or origin, to get more precission
Also the function could be optimized and more exact, using the ball radius to detect when it just touch the circle line with its first point, but it would be too much difficult ... and unnecesary ... at least by now

i was forgetting, ... the ball scroll:  (let s supose it runs 5.0 px every loop)

ball.Position = new Vector2f( ball.Position.X + cos(ballAngle) * 5.0, ball.Postion.Y + sin(ballAngle) * 5.0 );

you don t have to worry for the sign of the ball scroll, depending on the angle it changes automatically

We would need -i think- a lady or a guy from SFML forum, that translates for you the code i wrote here to C++ ... i m sorry, i just use C#

let me know if this works, and if you need anything else
and if you get the game better, please update the link or repost it so we can see

Pablo

[Hiura]

Math.Sqrt( radius * radius -  posX * posX ); can crash or result in undefined behaviour (depending on the implementation) when |posX| > |radius|. Square root of negative number doesn't exist [in R].

[Tigre Pablito]

you are very right, MiLord / MiLady

then we could do something like this:

private bool DetectCircunpherenceCollision(int ballX, int ballY)
{
    int posY, posX;
    posX = ballX - 320;
   
    if (posX > radius) posX = radius;           
    else if (posX < -radius) posX = -radius;
   
    posY = Math.Sqrt( radius * radius - posX * posX );    // now the arg >= 0

    if (ballY <= 240 - posY || bally >= 240 + posY) return true;
    return false;
}

I really thank you for the detail, cos the ball could overpass the circle line, that is, it won t land exactly at the border line ... i supose now it s fixed 

[Hiura]

I'm not sure I understood what you're trying to achieve – I haven't read the whole thread.. But one more advice on your code: don't use magic numbers.

For example, I've no idea what 320 or 240 mean in this function. And so will you when you read your code in a few weeks / months. 

[FRex]

Sqrt of negative number desn't cause undefined/implementation defined behaviour or crash.

Not in C#:
http://msdn.microsoft.com/library/system.math.sqrt.aspx
http://buttle.shangorilla.com/1.1/handlers/monodoc.ashx?link=M%3ASystem.Math.Sqrt%28System.Double%29

Not even in C or c++:
http://www.cplusplus.com/reference/cmath/sqrt/

http://oi40.tinypic.com/6plt1c.jpg

Not that you can do anything useful with +/-NaN except detect it with isnan and throw it away and it'll spread like a virus through any number it touches but calling sqrt with negative doesn't crash by itself.

[Hiura]

Gosh, I've got a value of only -20!

Thank you for the precision.

[Tigre Pablito]

320, 240 are the coordinates of the center of the screen, and of the circle

what i was trying is to give to Jycerian a function to detect when the ball bounces on the circunpherence, he is developing a pong game where the paddles are inside a circle ... 

we could write, instead of 320, screenWidth/2, and instead of 240, screenHeight/2 ... technically, you are right, again, but i don t usually do this, cos i m lazy

feel free to read all the thread, it s very interesting ...
i hope the binaries are ready soon, so we can play ...

but .... I ask again, Jycerian, shouldn t there be goal lines?