Welcome, Guest. Please login or register. Did you miss your activation email?

Author Topic: Smooth sprite movement/FPS  (Read 1716 times)

0 Members and 2 Guests are viewing this topic.

wojo1086

  • Newbie
  • *
  • Posts: 11
    • View Profile
    • Email
Smooth sprite movement/FPS
« on: December 22, 2013, 09:48:45 pm »
I currently have a sprite that I can move around the screen and have his little feet cycle through their left and right steps without any issues, except for one; when he walks, his feet move fast. I mean, if I slow the framerate down to about 8 or 9, you can see them move.  What I would like to know is if there is a better way to slow his feet movement down without having to limit the FPS.

This is the code for loading his different sprite movements. I currently only have his front and back cycling, that's why there is only sprites loaded for that. also, his set position is here as well.
// create the window
        sf::RenderWindow window(sf::VideoMode(1280, 768, 32), "Tilemap");
        window.setFramerateLimit(12);

        //load sprites
        sf::Sprite Bob;
        sf::Sprite BobBack;
        sf::Sprite BobBackLeft;
        sf::Sprite BobBackRight;
        sf::Sprite BobFront;
        sf::Sprite BobFrontLeft;
        sf::Sprite BobFrontRight;
        sf::Texture BobB;
        sf::Texture BobBL;
        sf::Texture BobBR;
        sf::Texture BobF;
        sf::Texture BobFL;
        sf::Texture BobFR;
        if (!BobB.loadFromFile("images/char1-back.png"))
                return false;
        BobBack.setTexture(BobB);
        if (!BobBL.loadFromFile("images/char1-back-left.png"))
                return false;
        BobBackLeft.setTexture(BobBL);
        if (!BobBR.loadFromFile("images/char1-back-right.png"))
                return false;
        BobBackRight.setTexture(BobBR);
        if (!BobF.loadFromFile("images/char1-front.png"))
                return false;
        BobFront.setTexture(BobF);
        if (!BobFL.loadFromFile("images/char1-front-left.png"))
                return false;
        BobFrontLeft.setTexture(BobFL);
        if (!BobFR.loadFromFile("images/char1-front-right.png"))
                return false;
        BobFrontRight.setTexture(BobFR);

        //set Bob's position with x and y
        struct Player
        {
                float tileX = 10;
                float tileY = 10;
        };
        Player p;

        Bob.setTexture(BobF);
        Bob.setPosition(p.tileX * 32, p.tileY * 32);

        //set Bob's left or right step boolean
        bool step = false;


And this is the code to move him. Pay attention only to the first two sf::Keyboard presses (W and S) because that's all I've gotten done. Basically, a boolean was set in the first bit of code. The for() loop is the actual cycling of his images. The "p.tileY -= .25" piece of code is so the player is moved a fourth of the 32 pixels in a tile. The stepping sequence is run four times and the boolean determines if his right or left step should happen. I plan on putting all this into  function later so that I can just call it as I need it.
// run the main loop
        while (window.isOpen())
        {
                // handle events
                sf::Event event;
                while (window.pollEvent(event))
                {
                        switch (event.type)
                        {
                        case sf::Event::Closed:
                                window.close();
                                break;

                        case sf::Event::KeyPressed:
                                if (sf::Keyboard::isKeyPressed(sf::Keyboard::W))
                                {
                                        for (int n = 0; n < 3; ++n)
                                        {
                                                p.tileY -= .25;
                                                if (step == false)
                                                {
                                                        BobBackLeft.setPosition(p.tileX * 32, p.tileY * 32);
                                                        window.clear();
                                                        window.draw(map);
                                                        window.draw(BobBackLeft);
                                                        window.display();
                                                        step = true;
                                                }
                                                else{
                                                        BobBackRight.setPosition(p.tileX * 32, p.tileY * 32);
                                                        window.clear();
                                                        window.draw(map);
                                                        window.draw(BobBackRight);
                                                        window.display();
                                                        step = false;
                                                }
                                        }
                                        p.tileY -= .25;
                                                Bob.setTexture(BobB);
                                                Bob.setPosition(p.tileX * 32, p.tileY * 32);
                                }
                                if (sf::Keyboard::isKeyPressed(sf::Keyboard::S))
                                {
                                        for (int n = 0; n < 3; ++n)
                                        {
                                                p.tileY += .25;
                                                if (step == false)
                                                {
                                                        BobFrontLeft.setPosition(p.tileX * 32, p.tileY * 32);
                                                        window.clear();
                                                        window.draw(map);
                                                        window.draw(BobFrontLeft);
                                                        window.display();
                                                        step = true;
                                                }
                                                else{
                                                        BobFrontRight.setPosition(p.tileX * 32, p.tileY * 32);
                                                        window.clear();
                                                        window.draw(map);
                                                        window.draw(BobFrontRight);
                                                        window.display();
                                                        step = false;
                                                }
                                        }
                                        p.tileY += .25;
                                        Bob.setTexture(BobF);
                                        Bob.setPosition(p.tileX * 32, p.tileY * 32);
                                }
                                if (sf::Keyboard::isKeyPressed(sf::Keyboard::A))
                                {
                                        p.tileX -= 1;
                                        Bob.setPosition(p.tileX * 32, p.tileY * 32);
                                        window.clear();
                                        window.draw(map);
                                        window.draw(BobFront);
                                        window.display();
                                }
                                if (sf::Keyboard::isKeyPressed(sf::Keyboard::D))
                                {
                                        p.tileX += 1;
                                        Bob.setPosition(p.tileX * 32, p.tileY * 32);
                                        window.clear();
                                        window.draw(map);
                                        window.draw(BobFront);
                                        window.display();
                                }
                                break;
                        }
                }

                // draw the map
                window.clear();
                window.draw(map);
                window.draw(Bob);
                window.display();
        }

Is there a better way to do accomplish this same task?

Raincode

  • Full Member
  • ***
  • Posts: 118
    • View Profile
Re: Smooth sprite movement/FPS
« Reply #1 on: December 22, 2013, 10:18:13 pm »
yeah, you run animations on a seperate timer, like give them their own "framerate"

You should put all the sprites in one image file (spritesheet) and play the animations by changing the textureRect

You can check out this for starters
« Last Edit: December 22, 2013, 10:21:08 pm by Raincode »

AlexAUT

  • Sr. Member
  • ****
  • Posts: 396
    • View Profile
Re: Smooth sprite movement/FPS
« Reply #2 on: December 22, 2013, 11:13:24 pm »
If you don't want to reinvent the wheel you could use thor, it offers a nice animation class with a lot of nice features. I never used it but I saw some quite nice code snippets.

Links: http://www.bromeon.ch/libraries/thor/



AlexAUT

wojo1086

  • Newbie
  • *
  • Posts: 11
    • View Profile
    • Email
Re: Smooth sprite movement/FPS
« Reply #3 on: December 22, 2013, 11:27:24 pm »
Thank you both! I completely forgot about Thor! I'll check it out!

 

anything