SFML Tutorials?

[1wU9216C]

Since I'm a beginner with SFML, I think this fits here.

In my last thread, Disch suggested I grab SFML and start poking around at it to begin programming small games... Well, from what I've read, I've been able to make a screen, make 2 CircleShape objects, and move one around with the arrow keys. Other than that, I have pretty much no clue what to do. I just can't find a good way to learn SFML. If anybody can point me in the right direction, that would be great. I have checked out what SFML-dev has for tutorials and I'm sure I could learn from them, but it isn't going well. It just doesn't seem like a great way to learn for me.

EDIT: I'm using SFML 2.0

[firedraco]

I would say the best way to learn is to have a goal in mind (like make a tic-tac-toe game or something), rather than simply following tutorials. Then once you have the goal you can look at the documentation and tutorials to see if there is anything that would help you get there.

[1wU9216C]

I do have a goal in mind. Disch gave good starting guidelines. They were something like :
Display something
Move it with arrow keys
Display something else that moves randomly
Make something happen when they collide

Right now, I wanna do that and slowly make a small game out of it. Probably dodging the other circles. But that's not all I want to do. I need some kind of tutorial or something I can read to figure out how to do what I want.

[Zhuge]

That's a start, so I'd look in the tutorials for "how to display something", "how to get keyboard input" to do the first three. Once you've gotten that far, you'll probably know enough about how the objects are stored to check for collisions (it's pretty simple at that point).

[1wU9216C]

In my first post, I said I could create 2 circles, display them, and move one with the arrow keys. I don't know how to do collision detection at all, though. I really don't like the SFML-dev tutorial pages because they aren't all that easy to understand. What I know, I learned from crappy Youtube tutorials.
If there's any other good options for tutorials that cover what I need to know, I'd love to hear about them.

[Zhuge]

Oh, you're right. Apologies my failure of reading comprehension.

Off the top of my head, if you want to see if two circles collide, then you could do it by checking the length of the line segment from one center to the other and seeing if it is less than the sum of the radii.

As for tutorial resources, I don't know too many as I always just searched for something similar to what I wanted to do (in general terms) or looking in the class/method listings to see what features were available. In general the descriptions of functions are detailed enough that you should be able to determine whether a function does something useful for you or not.

[1wU9216C]

It's fine~ x3

I'm not really sure how to go about doing that, though. I mean, I get it, but I don't know any of the functions I'd use. I can look through them and see what I can find.

I have been looking through the class/method listings to do some things. I'd just like to find something that explains SFML well enough that I don't have to look through them for every little thing I want to do. That's why I'd prefer to have some good resources.

[cire]

For SFML + collision you might want to check out:
https://github.com/LaurentGomila/SFML/wiki/Source%3A-Simple-Collision-Detection-for-SFML-2

The code is fairly readable.

[Disch]

There probably aren't going to be many collision detection tutorials for SFML because SFML doesn't really do collision detection. That's something you need to do in your own code. You'd probably have better luck doing a search for general collision detection... not anything SFML specific.

Anyway... circle/circle collision is pretty easy, but requires you understand the Pythagorean Theorem.:

a2 + b2 = c2

It tells us the length of 2 sides of a right triangle (a, b) squared, then summed, equals the length of the hypotenuse (c) squared.

We can use this by forming a right triangle given any 2 points in 2D space... treating the a,b sides as the x,y axis.... and treating the hypotenuse as the line connecting the two points.

Therefore a slightly modified version of the theorem:

(pt1.x - pt2.x)2 + (pt1.y - pt2.y)2 = (distance_between_points)2



Now for circle-circle collision you need to know 2 things about each circle: the Center point and the Radius.

Two circles overlap if their center points are within 'r' distance of each other... where 'r' is the sum of their radii.

So modifying the theorem even more:

(center1.x - center2.x)2 + (center1.y - center2.y)2 < (radius1+radius2)2

In code this is pretty easy to calculate:

bool doCirclesIntersect( const sf::Vector2f& center1, float radius1, 
    const sf::Vector2f& center2, float radius2 )
{
    sf::Vector2f dist = center1 - center2;
    float r = radius1 + radius2;

    return (dist.x*dist.x  +  dist.y*dist.y) < (r*r);  // returns true if the circles intersect
}

EDIT: fixed messed up tags

[BHX]

Yeah, collision detection is pretty much universal between libraries since you have to code it yourself. Lazyfoo has a set of tutorials for SDL where he covers this topic and I actually applied his code to my Allegro code. ( http://www.lazyfoo.net )

[1wU9216C]

Maybe I'm not wording this right.
I have 2 problems
1. hit detection (2 circles)
2. lack of basic knowledge of SFML

Expanding on these problems:

1. I figured hit detection had to be done by the programmer. I just didn't know a good way of doing it. Disch gave a good explanation, but the code only sort of works. The circles must be the same size, or they overlap at some points without being detected. I suppose that's fine for what I want to do, but I'd rather have the circle you move be bigger.

2. What I'd really like, though, is for a good general tutorial on SFML. It doesn't have to cover anything big. Just something that runs over the basics so I can understand what I'm doing.

[Disch]

YukiSnowmew wrote:

I just didn't know a good way of doing it. Disch gave a good explanation, but the code only sort of works. The circles must be the same size, or they overlap at some points without being detected

That is not true. The technique I illustrated will work perfectly for any 2 circles. They do not need to be the same size.

If you are having overlaps that are not being detected, you must have an implementation error. Can you show your code?

What I'd really like, though, is for a good general tutorial on SFML. It doesn't have to cover anything big. Just something that runs over the basics so I can understand what I'm doing.

The wiki on the SFML webpage has a tutorial section:
https://github.com/LaurentGomila/SFML/wiki/Tutorials

There's also a big tutorial section hosted on the SFML site:
http://sfml-dev.org/tutorials/2.0/


I personally have not looked at any of the tutorials. Instead I opt to learn by just viewing the reference pages:

http://sfml-dev.org/documentation/2.0/

Here you can look up individual classes and have what they do and how to use them clearly explained:

http://sfml-dev.org/documentation/2.0/annotated.php

[N36fSL3A]

Collision detection? It isn't library specific. It's Just math.

Make a rectangle struct:

struct Rectangle
{
    int x;
    int y;
    int w;
    int h;
};

Then, make a function that takes to rectangles as parameters. It checks if the two rectangles are inside eachother, then return true.

[1wU9216C]

That is not true. The technique I illustrated will work perfectly for any 2 circles. They do not need to be the same size.

It may have to do with sending in circle.getPosition() for the center of a circle. I can't find anything else that works.

Here's my code (it's sloppy at the moment because I'm just messing around with things to see what works):

#include<SFML\Graphics.hpp>
#include<iostream>  //sending things to the console to help find errors

using namespace sf;

bool doCirclesIntersect(const Vector2f& center1, float radius1,
     const Vector2f& center2, float radius2);

int main(){
    RenderWindow mainWindow(VideoMode(1080, 900), "Testing");

    CircleShape circle(20);
    circle.setFillColor(Color::Blue);
    circle.setOutlineColor(Color::Red);
    circle.setOutlineThickness(3);
    circle.setPosition(540, 450);

    CircleShape enemy(10);
    enemy.setFillColor(Color::Red);
    enemy.setOutlineColor(Color::Blue);
    enemy.setOutlineThickness(3);
    enemy.setPosition(300, 200);

    while(mainWindow.isOpen()){
        mainWindow.clear();
        mainWindow.draw(enemy);
        mainWindow.draw(circle);
        mainWindow.display();

        Event event;
        while(mainWindow.pollEvent(event)){
            if(event.type == Event::Closed)
                mainWindow.close();

            if(event.type == Event::KeyPressed){
                if(Keyboard::isKeyPressed(Keyboard::Up)){
                    circle.move(0, -2);  //move circle
                    if(doCirclesIntersect(circle.getPosition(), circle.getRadius(),
                       enemy.getPosition(), enemy.getRadius())){  //check if circle and
                                                                  //enemy overlap
                        circle.move(0, 2);  //if so, move circle back to where it was
                    }
                }
                else if(Keyboard::isKeyPressed(Keyboard::Down)){
                    circle.move(0, 2);
                    if(doCirclesIntersect(circle.getPosition(), circle.getRadius(),
                       enemy.getPosition(), enemy.getRadius())){
                        circle.move(0, -2);
                    }
                }
                else if(Keyboard::isKeyPressed(Keyboard::Left)){
                    circle.move(-2, 0);
                    if(doCirclesIntersect(circle.getPosition(), circle.getRadius(),
                       enemy.getPosition(), enemy.getRadius())){
                        circle.move(2, 0);
                    }
                }
                else if(Keyboard::isKeyPressed(Keyboard::Right)){
                    circle.move(2, 0);
                    if(doCirclesIntersect(circle.getPosition(), circle.getRadius(),
                       enemy.getPosition(), enemy.getRadius())){
                        circle.move(-2, 0);
                    }
                }

            }
        }
        enemy.move(.05, 0);
        if(doCirclesIntersect(circle.getPosition(), circle.getRadius(),
           enemy.getPosition(), enemy.getRadius()))
            enemy.move(-.05, 0);  //testing collisions while enemy is moving
    }
    return 0;
}

bool doCirclesIntersect(const Vector2f& center1, float radius1,
     const Vector2f& center2, float radius2){

    Vector2f dist = center1 - center2;
    float r = radius1 + radius2;

    return (dist.x*dist.x  +  dist.y*dist.y) < (r*r);  //returns true if the circles intersect
}

Also, I'm trying to avoid the SFML site's tutorial section because it's just not working for me. Thanks, though.

[Disch]

Looks like the position that getPosition is returning is the upper-left corner of the bounding rectangle and not the center point.

To change that, you can change the circle's "origin" so that it is the center point.

The quick and dirty way to do it:

    CircleShape circle(20);
    circle.setFillColor(Color::Blue);
    circle.setOutlineColor(Color::Red);
    circle.setOutlineThickness(3);
    circle.setPosition(540, 450);
    circle.setOrigin( 20, 20 );  // <-  add this

    CircleShape enemy(10);
    enemy.setFillColor(Color::Red);
    enemy.setOutlineColor(Color::Blue);
    enemy.setOutlineThickness(3);
    enemy.setPosition(300, 200);
    enemy.setOrigin( 10, 10 );  // <-  and this 

[1wU9216C]

Amazing how one simple thing can fix a huge problem xD
Thanks a lot for the help. This only proves to me that I need to know the basics of SFML better.

[BHX]

@Fredbill30
He said he is doing 2 circles so rectangles would be a waste as they would return a collision way before the circles actually touch. At this point he has to start using radius from the center of each to detect collision.

[Duthomhas]

The tutorials are only designed to give you the basics of using the library functions. They aren't good for learning to actually put together a game. In fact, some of the stuff I've seen online is just plain wrong.

A very good start is actually the pygame tutorials... Very simple but well organized with an eye for ore advanced stuff later... At least AFAIR.

Collision shapes are always approximations. For advanced collision detection you will actually have more than one primitive associated with your sprite so that bullets or kicks or whatever flying over the shoulder don't get considered as a collision. Circles, rectangles, both are about as efficient/quick.

Hope this helps.

[tntxtnt]

( You can get free pygame book here: http://inventwithpython.com/pygame/chapters/ )