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

Author Topic: How to do animation  (Read 9822 times)

0 Members and 3 Guests are viewing this topic.

asdatapel

  • Jr. Member
  • **
  • Posts: 76
    • View Profile
How to do animation
« on: August 23, 2011, 11:18:57 pm »
Hello everyone. Im kinda new to sfml, and im trying to figure out how to do animation. Actually, I know how to do animation, but theres a few part about that are really bugging me. For example, if i wanted to switch between three images for a running animation, I would switch between three images with a Sleep(int) in between these, right? But the problem with this is that while its sleeping, NOTHING else can happen. I dont know how to get around this.

I hope you understand what  im saying here, but yeah...

OniLinkPlus

  • Hero Member
  • *****
  • Posts: 500
    • View Profile
How to do animation
« Reply #1 on: August 23, 2011, 11:35:30 pm »
I'll give you a hint: sf::Clock.
I use the latest build of SFML2

Nexus

  • SFML Team
  • Hero Member
  • *****
  • Posts: 6287
  • Thor Developer
    • View Profile
    • Bromeon
How to do animation
« Reply #2 on: August 24, 2011, 12:18:22 am »
If you don't want to implement animations yourself, my Thor.Animations module might be an option for you. But maybe it is overkill for your use case. Anyway, in case of interest consider the documentation and a complete example.

The module is currently far from feature-complete, but I am constantly improving it ;)
Zloxx II: action platformer
Thor Library: particle systems, animations, dot products, ...
SFML Game Development:

eXpl0it3r

  • SFML Team
  • Hero Member
  • *****
  • Posts: 11032
    • View Profile
    • development blog
    • Email
How to do animation
« Reply #3 on: August 24, 2011, 01:52:51 am »
Just to be said, the sleep method isn't such a nice thing...

For animation you need two things:
- diffrent images
- the right timing

Dependend on what you're trying to do there are two solutions that pop into my mind:

Use sf::Clock (as mentioned)
Instead of letting your application sleep check with a sf::Clock how much time has passed and change the image, play around with (or calculate) the timing.

Make your animation depended of the framerate
Your application runs with a framerate, which without fix limit only depends on your graphiccard and CPU power. Normaly 24-120fps will be enough so the extra 5000 that your PC maybe could produce are just waste, so it makes sense to set a limit.
With sf::Clock again you can findout the time between frames and use that to calculate for how many frames you show a image.
Official FAQ: https://www.sfml-dev.org/faq.php
Official Discord Server: https://discord.gg/nr4X7Fh
——————————————————————
Dev Blog: https://duerrenberger.dev/blog/

Nexus

  • SFML Team
  • Hero Member
  • *****
  • Posts: 6287
  • Thor Developer
    • View Profile
    • Bromeon
How to do animation
« Reply #4 on: August 24, 2011, 02:03:20 am »
Quote from: "eXpl0it3r"
With sf::Clock again you can findout the time between frames and use that to calculate for how many frames you show a image.
The frame time can be retrieved even easier with sf::RenderWindow::GetFrameTime() :)

Using a sf::Clock alone is not a good idea since you can't interrupt the animation (for example when pausing the game). You are bound to the really passed time, not the game time. However, things look different if you use a pausable clock class.
Zloxx II: action platformer
Thor Library: particle systems, animations, dot products, ...
SFML Game Development:

Haikarainen

  • Guest
How to do animation
« Reply #5 on: August 24, 2011, 02:31:51 am »
I myself use thor::Timer for the timing issues, works like a charm!
Also, dont forget to create a resource-manager first, you wouldnt wanna store images in each frames!

asdatapel

  • Jr. Member
  • **
  • Posts: 76
    • View Profile
thanks
« Reply #6 on: August 24, 2011, 05:47:13 pm »
wow thanks guys!

asdatapel

  • Jr. Member
  • **
  • Posts: 76
    • View Profile
my try
« Reply #7 on: August 24, 2011, 06:24:54 pm »
Hello Guys, I tried this but it doesnt works. The image stays the same unless I press the Right button.

Code: [Select]

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

using namespace std;
//using namespace sf;

int main() {

    sf::Sprite marioSprite;
    sf::Image run[3];
    sf::RenderWindow App(sf::VideoMode(800, 600, 32), "JustAnimation");
    int whichOne = 0;
    sf::Clock timer;

    if (!run[0].LoadFromFile("resources/0000.png")) {}
    if (!run[1].LoadFromFile("resources/0001.png")) {}
    if (!run[2].LoadFromFile("resources/0002.png")) {}

    marioSprite.SetImage(run[0]);

    while (App.IsOpened()) {
        App.Clear(sf::Color::Black);

        sf::Event Event;

        if (App.GetEvent(Event))
            if (Event.Type == sf::Event::Closed)
                App.Close();

        App.Draw(marioSprite);

        if (timer.GetElapsedTime()<100) {
            whichOne=0;
        } else if (timer.GetElapsedTime()<200) {
            whichOne=1;
        } else {
            whichOne=2;
            timer.Reset();
        }
        marioSprite.SetX(marioSprite.GetPosition().x);

        if (App.GetInput().IsKeyDown(sf::Key::Right)) {
            marioSprite.SetX(marioSprite.GetPosition().x+2);

        }

        marioSprite.SetImage(run[whichOne]);


        App.Display();
    }

    return 0;
}

OniLinkPlus

  • Hero Member
  • *****
  • Posts: 500
    • View Profile
How to do animation
« Reply #8 on: August 24, 2011, 10:58:46 pm »
Well, first of all, you should be using while (App.GetEvent(Event)), but that likely isn't the cause.
I use the latest build of SFML2

Nexus

  • SFML Team
  • Hero Member
  • *****
  • Posts: 6287
  • Thor Developer
    • View Profile
    • Bromeon
How to do animation
« Reply #9 on: August 24, 2011, 11:34:00 pm »
When pressing the right button, you don't change the image, only the position. Maybe your description applies to another than the shown code?

And please keep the code as minimal as possible and try to search some time for the mistake yourself. With a debugger, such problems are usually found in a few minutes. Or output the variable values. Or simplify code until the issue becomes obvious.

For example, I don't think that you should reset the timer immediately when setting whichOne to 2. You may also think about the order of event handling, Clear(), Draw() and Display().
Zloxx II: action platformer
Thor Library: particle systems, animations, dot products, ...
SFML Game Development:

asdatapel

  • Jr. Member
  • **
  • Posts: 76
    • View Profile
How to do animation
« Reply #10 on: August 25, 2011, 02:04:50 am »
I know I suck at this, but an example code would be very very useful.

slotdev

  • Sr. Member
  • ****
  • Posts: 385
    • View Profile
How to do animation
« Reply #11 on: August 25, 2011, 05:02:00 pm »
Hi

Code: [Select]

        if (timer.GetElapsedTime()<100) {
            whichOne=0;
        } else if (timer.GetElapsedTime()<200) {
            whichOne=1;
        } else {
            whichOne=2;
            timer.Reset();
        }


This isn't a very clear way to do things. Instead, do:
Code: [Select]

if (timer.GetElapsedTime() >= 100)
{
if (++whichOne > 2)
{
whichOne = 0;
}
marioSprite.SetImage(run[whichOne]);

timer.Reset();
}


Also you don't need to keep calling SetX - do this only when you want to change the positition :)
SFML 2.1

slotdev

  • Sr. Member
  • ****
  • Posts: 385
    • View Profile
How to do animation
« Reply #12 on: August 25, 2011, 05:07:01 pm »
Actually, try this.

Code: [Select]

int main() {

    sf::Sprite marioSprite;
    sf::Image run[3];
    sf::RenderWindow App(sf::VideoMode(800, 600, 32), "JustAnimation");
    int whichOne = 0;
    sf::Clock timer;
    sf::Event Event;

    if (!run[0].LoadFromFile("resources/0000.png")) {}
    if (!run[1].LoadFromFile("resources/0001.png")) {}
    if (!run[2].LoadFromFile("resources/0002.png")) {}

    marioSprite.SetImage(run[0]);

    while (App.IsOpened())
    {
        App.Clear(sf::Color::Black);

if (timer.GetElapsedTime() >= 100)
{
if (++whichOne > 2)
{
whichOne = 0;
}
marioSprite.SetImage(run[whichOne]);
timer.Reset();
}
       
        if (App.GetInput().IsKeyDown(sf::Key::Right))
        {
marioSprite.SetX(marioSprite.GetPosition().x+2);
}
// Some frame rate control would be nice here, now it'll be going as fast as possible!!
App.Draw(marioSprite);
        App.Display();

        if (App.GetEvent(Event))
        {
            if (Event.Type == sf::Event::Closed)
                App.Close();
        }
    }

    return 0;
}
SFML 2.1

asdatapel

  • Jr. Member
  • **
  • Posts: 76
    • View Profile
How to do animation
« Reply #13 on: August 26, 2011, 01:16:29 am »
I would really appreciate it if someone could give me a proper example. thanks

slotdev

  • Sr. Member
  • ****
  • Posts: 385
    • View Profile
How to do animation
« Reply #14 on: August 26, 2011, 09:45:39 am »
A proper example of what?!
SFML 2.1

 

anything