Dude thank you so much for this tutorial. Extremely helpful and very clear in what you do in each step. I was able to take an image of a walking boy (6 frames) and I almost cried when I had it work. I spent an hour trying to get the right bounds for the character, but when the animation came in, it looked almost flawless. You're awesome, thanks again.
Hello guys, when I was using testing my spritesheets with this class, I found that there was a black box after every row of animation I tested. The problem can be solved by changing line 31 to == rather than >=
When using a sleep function, the speed at which the animation plays depends on how fast the program is running (fps), but when using delta time, it makes sure that the animation plays as fast as it would on a slow computer as on a fast computer.
When I say add class, only Animation.h file is created. Why couldn't I create a Animation.cpp file? Do we create the animation.ccp file by opening a new project or is it created automatically when creating the animation.h file?
Enhanced Syntax Highlighting. It lets you customize the syntax hightlighting so you can choose what color it will have, if it will highlight bold or italic. Google it. It's free.
In visual studio intellisense takes care of the highlighting, autocomplete and suggestions. Other IDE's should have something similar. If they do not have it out of the box, you can probably find one by simply googling for something like 'intellisense for MY_IDE'
Can someone explain how I can use this method on bigger sprite sheets that aren't structured like the one in this video? For example the ones that I found online have the different models all over the place so the first line would be the character idle animation as well as lets say the jumping animation.
If you want to use a sprite sheet where each sprite is a different size, you need to use an index that specifies exactly what the top left and bottom right coordinate of each image is. Then, whenever you need a specific sprite, you simply retrieve the top left and bottom right coordinates from the index.
I had the same problem and it turned out that I had totalTime -= deltaTime; when it should have been totalTime -=switchTime; if that doesn't work then just set totalTime = 0 ; but just mess with the switchTime and totalTime hope this helped
what is the difference between deltaTime and switchTime? I don't get it... are both used to count the time that passed before the texture was changed (the image changed)
Delta time is the time passed after each iteration of while loop, that is every time a frame is displayed.T his value is different for different machines . Some computer are fast and display frames one after the other very quickly so delta time is less . But SWITCH TIME on the other hand is decided by us, switch is the time on passing of which we are going to change the sprite. In this video we change the sprite or "Animate the sprite" only after 0.3 seconds are passed, so 0.3f is our switch time. we combine our delta times after each iteration, once this total combined time becomes more than 0.3 we change the srpite. Thats y the if condition says (totaltime >= switchTime).
Hi Hilze! I have a question. I'm trying to make an arkanoid/breakout clone. I have an explosion animation that plays when a block is hit, but how do I make it so that it only plays the animation once each time a block is hit? Thanks in advance!
I just have been stick on this par for 2 hours firguring why is does not work and i forgot to add the 'Rect' after the 'player.setTexture...' FInally I can move one :D
awesome tutorial but i have some questions while perfectly following your tutorials. i run the codes but i only get a white square. i also reviewed tutorial #8 and also got the white square but ignored it because i thought that it wasn't loading correctly, so i continued in #9. please help me :( thanks a lot
In my case I had have white box instead of texture because I deleted line "player.setTexture(&playerTexture);". I don`t know why but I was thinking that "player.setTexture(&playerTexture);" and "player.setTextureRect()" are the same so I deleted first one.
Hi, Hilze! I have two warnings in the Animation.cpp file : Warning C4244 '=': conversion from 'float' to 'int', possible loss of data sfmlAnimation 12 Warning C4244 '=': conversion from 'float' to 'int', possible loss of data sfmlAnimation 13 Is there is a way to fix it somehow? Thanks for the SFMLset, good job!
Hi! Yeah, it is quite easy to fix (thanks for pointing them out btw). This kind of warning is an conversion warning, so it is expecting a variable of one type (int in this case) but it is getting a variable from another kind (float in this case). So in order to fix this kind of warning you will have to cast the value that you give it to that specific type: uvRect.width = int(texture->getSize().x / float(imageCount.x)); uvRect.height = int(texture->getSize().y / float(imageCount.y)); I have added an int cast around the entire thing. int(....); Thank you!
Awesome video. I am completely new to FSML and your tutorial helps me to sink my teeth in it. However, there is one thing that even after the tenth time of listening I cannot figure out: the
Normally I drink about two cups of coffee a day. But lately I've been crunching (16 hour work days) to meet a few deadlines so now it is closer to 4 or 5 cups a day :')
Dude your the best I spent all yesterday trying to figure this out on my own and my animation was running way to fast. Your explanation on delta time really helped me understand how to slow it down according to the pc running the game thanks for all your hard work, you have a talent in explaining things.
5 років тому
can you pls elaborate about the sprite coordinates and allocations because i tried this template on the other imported png files and idk how to switch the Vector2f float value to make a proper animation, they keep showing me weird stuffs and behaves badly.
For about 3 hours I was putting the animation part in the wrong block of code. Put it in the while(window.isOpen()) (and not the while(window.pollEvent((evnt)) block).
i was following along all th things and understnding and experimenting, unntill now, I mean, Its a bit too much together at once, also and the like sound f the video is so low,
Basically if you pass the size by value, the constructor will take more time because it will have to create a copy of the value and then assign it to a variable. By passing a pointer you can access the size without copying thereby minimizing the time it takes to get the size. It's probably not going to make a huge difference but it's good coding practice to only pass by value if you absolutely need to.
I am using code::blocks to follow this series (which is great by the way!) and I do not know how to do " Quick actions and refactoring" could someone tell me how to do it, thanks!
Thanks for your work, but I think you should avoid complicating things like using classes and avoid unnecessary variables. The code you've created you should put on the main function so people have not to struggle to understand. The main thing in this topic is the clock constructor the rest is just logic and using Inrect which he have learned before. By creating classes, parameters people will just struggle, take more time to understand. These tuturials will become more advanced and if you don't use the right way to teach people they will be scared and not understand. I had to see over and over this video to understand what you're doing when the only important thing is the clock, but that was the last thing you've spoken. It should be quicker but the way you use to explain makes it much and much longer. Don't take me wrong I am thankful for your tutorial but at the same time if u don't explain in the right way they became pointless because it takes to much to understand things that should be simple.
Understanding the basics of oop is necessary if you want to use SFML, since the entire library is written in an oop fashion. I understand why putting everything into the main function and not using variables is easier, but it hurts the readability and flexibility of the code in the long run. By using variables you can change parameters like the speed of the player or the jump height in one place, and it will be changed for everything, while if you hard coded it, you would have to go through the code and change all appearances, which hurts the flexibility. Using classes makes it so you got the code for each specific thing in their own place, and it will only work for that specific thing (unless you use templates or polymorphism), which means that you cannot accidentally use the wrong piece of code for something, and you cannot accidentally mix things up with the logic of another object, this hurts the readability. You also won't have to refactor your code later once the main function becomes cluttered since everything is already organised.
@@HilzeVonck So good to see you replying to really old comments. I'm a big fan of yours and your sfml videos. It would be really cool to see you get back in UA-cam. Lots of love!
U r right , it was very confusing and didnt understand anything even though i know oop, i had to watch another video where the guy didnt use classes and directly used clock elapsed time to animate, this made me clear and now i have no problem understanding this video bcoz same variables are being used but they are just declared inside the class. I believe first understanding simplified version of the process helps alot rather than jumping directly to advanced
When it comes to pong, you do not need complicated physics. In fact, we do not need physics at all. We can simply check if there is a collision between the ball and the paddles, and then we can change the direction of the ball. One way of checking collision is using SFMLs getGlobalBounds() function. This function returns a FloatRect. That FloatRect contains a function called intersects(FloatRect other). And what this function does is checking wether or not the two FloatRects are intersecting. If they are colliding this function will return true, and if they are not colliding this function will return false. If this returns true, then you know that your ball is in the paddle. Then there are two things that you can do. (1) You can either set the horizontal speed to the negative version of the horizontal speed, (2) or the paddles contain a directiong that the ball needs to go in. 1): if (paddle.getGlobalBounds().intersects(ball.getGlobalBounds())) { ball.speed.x = -ball.speed.x; } 2): if (paddle.getGlobalBounds().intersects(ball.getGlobalBounds())) { ball.speed.x = abs(ball.speed.x) * paddle.direction; } If something is unclear or if I forgot something, don't be afraid to ask for more help. I will cover collision in more detail in a later episode.
dude honestly, i know java, i learned all the c++ basic stuff such as classes. loops and bidimensional arrays in a day cause i just had to learn a different syntax. Watching this tutorial I'm like whaaaat? this is so easy to do! Honestly i know it's cause it's sfml and it's not as complicated as openGL or other stuff, but if you find this hard then just don't even try java or ur dead
Loved how the facecam image just go bonkers at the end
Come to your 6 year comment please
Well I did. Where is my prize mr. ziphy?
Your tutorials are probably the best ones I have seen for SFML.
Dude thank you so much for this tutorial. Extremely helpful and very clear in what you do in each step. I was able to take an image of a walking boy (6 frames) and I almost cried when I had it work. I spent an hour trying to get the right bounds for the character, but when the animation came in, it looked almost flawless. You're awesome, thanks again.
how did you get yours to animate? my sprite just keeps flashing idk what i did wrong.
Straight forward tutorial, nothing compared to all the joke tutorials i ve seen, thank you very much. works like a charm.
I’m completely amazed by the quality of your channel, excellent job, keep going like that.
notice how programming tutorials always have a view half-life
Hello guys,
when I was using testing my spritesheets with this class, I found that there was a black box after every row of animation I tested. The problem can be solved by changing line 31 to == rather than >=
I didn't completely understand why we used delta time, what is the disadvantage in using sleep function instead?
The sleep function stops the program momentarily.
When using a sleep function, the speed at which the animation plays depends on how fast the program is running (fps), but when using delta time, it makes sure that the animation plays as fast as it would on a slow computer as on a fast computer.
I did it all right. But just so you know I had no fucking clue of what I was doing.
But it's a pretty good tutorial, but I'm still too new.
Why >= and not just equal to, or greater than at 11:39 on line 31?
When I say add class, only Animation.h file is created. Why couldn't I create a Animation.cpp file? Do we create the animation.ccp file by opening a new project or is it created automatically when creating the animation.h file?
Hey, can someone tell me you how i use the setSmooth and setRepeat functions, i know you need a bool var, but at which position should i insert it.
mine is not animating. im using a different sprite.. could that be the reason??
the entire sprite sheet
@@Blujay188 Mine is just a white box
I think we should set totalTime=0 in Animation.h
Thank you very much for this, this finally allowed the sprite to animate for me.
@@TensaiCollectibles took me 3 hours to realize ...
Hello, id love to know what syntax highlighting you use.
Enhanced Syntax Highlighting. It lets you customize the syntax hightlighting so you can choose what color it will have, if it will highlight bold or italic.
Google it. It's free.
Can i get his picture ? I don't know how to get it and use any other picture to practice.
What makes the program switch picture? I mean, it's a simple png, where do your code do this? Switching in the differents animations
uvrect
while(!understand)
{
watch the video;
}
@@starelite6332 ahahahhaahahahahaahahahahahaha omg you're soooo funny xD Never seen someone this funny
from where to download those penguins?
please anybody tell me the work of variable deltatime for what reason we have created this ??
I don't know if u goona read this but I am getting a undefined reference to animation error can you help pls.
Wow man, you are saving me!
Great lessons!! One ask: The uvRect (universal video rectangle) is a shape prototype of the sprite? Why does you dont use sprite class?
How to have that colors like you at visual studio?
thank you
SFML GOAT
Could you use bigger capital
How did you get those suggestions for color constructor??
In visual studio intellisense takes care of the highlighting, autocomplete and suggestions. Other IDE's should have something similar. If they do not have it out of the box, you can probably find one by simply googling for something like 'intellisense for MY_IDE'
so where do i input the sprite sheet file? in the player texture?
Can someone explain how I can use this method on bigger sprite sheets that aren't structured like the one in this video? For example the ones that I found online have the different models all over the place so the first line would be the character idle animation as well as lets say the jumping animation.
If you want to use a sprite sheet where each sprite is a different size, you need to use an index that specifies exactly what the top left and bottom right coordinate of each image is. Then, whenever you need a specific sprite, you simply retrieve the top left and bottom right coordinates from the index.
Hey man! hope you still responding but i have a question:
My runs but it runs really really fast. how can i fix this?
Same problem there
use the two headders and ,
std::this_thread::sleep_for(std::chrono::milliseconds(10));
this will cap ypur updates to 100 per second.
Do not use sleep... learn to work with delta time and it will solve everything.
I had the same problem and it turned out that I had totalTime -= deltaTime; when it should have been totalTime -=switchTime;
if that doesn't work then just set totalTime = 0 ;
but just mess with the switchTime and totalTime hope this helped
put your deltaTime = clock.restart().asSeconds() BESIDES your while (window.pollEvent(evnt)) loop.
what is the difference between deltaTime and switchTime?
I don't get it...
are both used to count the time that passed before the texture was changed (the image changed)
Delta time is the time passed after each iteration of while loop, that is every time a frame is displayed.T his value is different for different machines . Some computer are fast and display frames one after the other very quickly so delta time is less . But SWITCH TIME on the other hand is decided by us, switch is the time on passing of which we are going to change the sprite. In this video we change the sprite or "Animate the sprite" only after 0.3 seconds are passed, so 0.3f is our switch time. we combine our delta times after each iteration, once this total combined time becomes more than 0.3 we change the srpite. Thats y the if condition says (totaltime >= switchTime).
After one day of trying, i have fixed the white box problem:
Change the RectangleShape to a Sprite instead :O
Good job! :)
What is higher level, sfml or glfw? Glfw should be right since it's a C framework, but is the difference like huge?
Glfw is rarely ever used for drawing graphics to a screen. Most people, in my experience, use it as a windowing library.
Thank you for this tutorial !
Hi Hilze! I have a question. I'm trying to make an arkanoid/breakout clone. I have an explosion animation that plays when a block is hit, but how do I make it so that it only plays the animation once each time a block is hit?
Thanks in advance!
If I understand correctly, you probably want some kind of boolean flag, which you set to true when the animation plays.
I just have been stick on this par for 2 hours firguring why is does not work and i forgot to add the 'Rect' after the 'player.setTexture...'
FInally I can move one :D
Ok umm..I like you're videos
But is there a specific reason to not use getelaspedtime()?
awesome tutorial but i have some questions while perfectly following your tutorials. i run the codes but i only get a white square. i also reviewed tutorial #8 and also got the white square but ignored it because i thought that it wasn't loading correctly, so i continued in #9. please help me :( thanks a lot
I have the same problem, did you fix it?
I tried all day to fix it
In my case I had have white box instead of texture because I deleted line "player.setTexture(&playerTexture);".
I don`t know why but I was thinking that "player.setTexture(&playerTexture);" and "player.setTextureRect()" are the same so I deleted first one.
Fnx bro) nice work!
Where i cant find other images like that
You can find other spritesheets specifically made for games on opengameart.org/
Thanks
Hi, Hilze!
I have two warnings in the Animation.cpp file :
Warning C4244 '=': conversion from 'float' to 'int', possible loss of data sfmlAnimation 12
Warning C4244 '=': conversion from 'float' to 'int', possible loss of data sfmlAnimation 13
Is there is a way to fix it somehow?
Thanks for the SFMLset, good job!
Hi!
Yeah, it is quite easy to fix (thanks for pointing them out btw). This kind of warning is an conversion warning, so it is expecting a variable of one type (int in this case) but it is getting a variable from another kind (float in this case). So in order to fix this kind of warning you will have to cast the value that you give it to that specific type:
uvRect.width = int(texture->getSize().x / float(imageCount.x));
uvRect.height = int(texture->getSize().y / float(imageCount.y));
I have added an int cast around the entire thing.
int(....);
Thank you!
Awesome video. I am completely new to FSML and your tutorial helps me to sink my teeth in it.
However, there is one thing that even after the tenth time of listening I cannot figure out:
the
what is FSML
@@christiancarter255 nothing bro, just irony
@@hyperbhavik 😂
@@hyperbhavik oh wait, I think I get it now. Lol
where can i find such animation pictures?
+maffinpower you can find a lot of free animation sheets on www.opengameart.org
i followed every step carefully but in the animation the background color of the sprite doesn't go away. the sprite is in a black box.
use photoshop to make the background transparent
I know this was made a year ago I think you already found that out
works, but my penguin have 3 output?
where can i get the image?
Here: opengameart.org/content/tux-the-linux-mascot
@@HilzeVonck back to youtube please
@@HilzeVonck It says "You are not authorized to access this page." What do i do?
Please keep the tutorial videos coming
How many coffees do you drink per day?
Normally I drink about two cups of coffee a day. But lately I've been crunching (16 hour work days) to meet a few deadlines so now it is closer to 4 or 5 cups a day :')
Dude your the best I spent all yesterday trying to figure this out on my own and my animation was running way to fast. Your explanation on delta time really helped me understand how to slow it down according to the pc running the game thanks for all your hard work, you have a talent in explaining things.
can you pls elaborate about the sprite coordinates and allocations because i tried this template on the other imported png files and idk how to switch the Vector2f float value to make a proper animation, they keep showing me weird stuffs and behaves badly.
For about 3 hours I was putting the animation part in the wrong block of code. Put it in the while(window.isOpen()) (and not the while(window.pollEvent((evnt)) block).
Thank you!!! I am too.
@@NguyenTienMinh-vw8jt I'm glad it helped you. :)
i was following along all th things and understnding and experimenting, unntill now, I mean, Its a bit too much together at once, also and the like sound f the video is so low,
Thank you kurt cobain 👍
What do you mean the constructor would be too long if you pass the size and not a pointer to the texture
and thanks for good tutorials
Basically if you pass the size by value, the constructor will take more time because it will have to create a copy of the value and then assign it to a variable. By passing a pointer you can access the size without copying thereby minimizing the time it takes to get the size. It's probably not going to make a huge difference but it's good coding practice to only pass by value if you absolutely need to.
my project compiles fine with no errors, but the animation doesn't work at all (i see only one sprite), can you help me?
I am using code::blocks to follow this series (which is great by the way!) and I do not know how to do " Quick actions and refactoring" could someone tell me how to do it, thanks!
you just type void Update(int row, float deltaTime); thats all and just copy what he did on the animation.cpp
Thanks for your work, but I think you should avoid complicating things like using classes and avoid unnecessary variables. The code you've created you should put on the main function so people have not to struggle to understand. The main thing in this topic is the clock constructor the rest is just logic and using Inrect which he have learned before. By creating classes, parameters people will just struggle, take more time to understand. These tuturials will become more advanced and if you don't use the right way to teach people they will be scared and not understand. I had to see over and over this video to understand what you're doing when the only important thing is the clock, but that was the last thing you've spoken. It should be quicker but the way you use to explain makes it much and much longer. Don't take me wrong I am thankful for your tutorial but at the same time if u don't explain in the right way they became pointless because it takes to much to understand things that should be simple.
you're right to some extent but people gotta learn oop before coming to game development.
Understanding the basics of oop is necessary if you want to use SFML, since the entire library is written in an oop fashion. I understand why putting everything into the main function and not using variables is easier, but it hurts the readability and flexibility of the code in the long run. By using variables you can change parameters like the speed of the player or the jump height in one place, and it will be changed for everything, while if you hard coded it, you would have to go through the code and change all appearances, which hurts the flexibility. Using classes makes it so you got the code for each specific thing in their own place, and it will only work for that specific thing (unless you use templates or polymorphism), which means that you cannot accidentally use the wrong piece of code for something, and you cannot accidentally mix things up with the logic of another object, this hurts the readability. You also won't have to refactor your code later once the main function becomes cluttered since everything is already organised.
@@HilzeVonck So good to see you replying to really old comments. I'm a big fan of yours and your sfml videos. It would be really cool to see you get back in UA-cam. Lots of love!
U r right , it was very confusing and didnt understand anything even though i know oop, i had to watch another video where the guy didnt use classes and directly used clock elapsed time to animate, this made me clear and now i have no problem understanding this video bcoz same variables are being used but they are just declared inside the class. I believe first understanding simplified version of the process helps alot rather than jumping directly to advanced
as a beginner, i don't understand most of your explanation, have to admit im noob
Now with chroma key! :)
Can anyone help me make physics for a ball in a pong game. And collisions
When it comes to pong, you do not need complicated physics. In fact, we do not need physics at all. We can simply check if there is a collision between the ball and the paddles, and then we can change the direction of the ball.
One way of checking collision is using SFMLs getGlobalBounds() function. This function returns a FloatRect. That FloatRect contains a function called intersects(FloatRect other). And what this function does is checking wether or not the two FloatRects are intersecting. If they are colliding this function will return true, and if they are not colliding this function will return false.
If this returns true, then you know that your ball is in the paddle. Then there are two things that you can do. (1) You can either set the horizontal speed to the negative version of the horizontal speed, (2) or the paddles contain a directiong that the ball needs to go in.
1):
if (paddle.getGlobalBounds().intersects(ball.getGlobalBounds()))
{
ball.speed.x = -ball.speed.x;
}
2):
if (paddle.getGlobalBounds().intersects(ball.getGlobalBounds()))
{
ball.speed.x = abs(ball.speed.x) * paddle.direction;
}
If something is unclear or if I forgot something, don't be afraid to ask for more help. I will cover collision in more detail in a later episode.
It says sf rectangle shape has no member called speed
Oh yeah sorry, the speed variable is a separate variable. It is a Vector2f which contains the speed and the direction of the ball.
Another semi-related question. Is there an in-built function in SFML to create clickable buttons?
You definitely have a mathematical background.
"Let's make a tutorial for beginners, except I still want it to be kinda complicated..."
dude honestly, i know java, i learned all the c++ basic stuff such as classes. loops and bidimensional arrays in a day cause i just had to learn a different syntax.
Watching this tutorial I'm like whaaaat? this is so easy to do!
Honestly i know it's cause it's sfml and it's not as complicated as openGL or other stuff, but if you find this hard then just don't even try java or ur dead
this assumes you have a decent understanding of c++