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

Author Topic: How to make a sprite face a direction base on Arrow keys?  (Read 5882 times)

0 Members and 1 Guest are viewing this topic.

magneonx

  • Full Member
  • ***
  • Posts: 141
    • MSN Messenger - magnumneon04@hotmail.com
    • View Profile
How to make a sprite face a direction base on Arrow keys?
« on: November 30, 2012, 03:39:34 pm »
Hello, I just want to ask how can a Sprite face a direction base on arrawo keys, like a s w d ,  or up left right down buttons? I don't know the concept of how this is done, I am currently thinking of using 4 .png sprite files that faces 4 directions. I know this cumbersome and wrong and at the same time, a very space consuming. I want to challenge myself by using only 1 sprite and rotating it strictly on left right up and down. Just like Final Fantasy and Zelda.

I don't want movements just yet, I want my character face the direction of the keys I am pressing.

Thank you very much.

Mean while I am playing around sprite.rotate and trying to figure out how can I rotate a sprite to a specific direction.

gyscos

  • Jr. Member
  • **
  • Posts: 69
    • View Profile
Re: How to make a sprite face a direction base on Arrow keys?
« Reply #1 on: November 30, 2012, 04:02:28 pm »
If your sprite texture is facing north, then setRotation to 90, 180 or 270 to make it look west, south or east - or so I think... maybe rotation axis (trigonometric or clockwise) might be mentioned in the doc - every time an angle is involved...

magneonx

  • Full Member
  • ***
  • Posts: 141
    • MSN Messenger - magnumneon04@hotmail.com
    • View Profile
Re: How to make a sprite face a direction base on Arrow keys?
« Reply #2 on: November 30, 2012, 04:14:37 pm »
Oh actually I have tried it now. and it works. Yes your values are right. Actually everytime I rotate my sprite say on, north which is let say 90deg on my perspective, when I press up, it keeps rotating another more, so now it is 180 deg. I don't understand this. I am trying a bit more on this one.

gyscos

  • Jr. Member
  • **
  • Posts: 69
    • View Profile
Re: How to make a sprite face a direction base on Arrow keys?
« Reply #3 on: November 30, 2012, 04:26:42 pm »
Sprite::rotate adds to the current rotation.
Sprite::setRotattion replaces the current rotation.

magneonx

  • Full Member
  • ***
  • Posts: 141
    • MSN Messenger - magnumneon04@hotmail.com
    • View Profile
Re: How to make a sprite face a direction base on Arrow keys?
« Reply #4 on: November 30, 2012, 04:32:57 pm »
Thanks for the reply.

I finally have what I really wanted. I finally made this code.

Actually, What I want is this, just to make clear:

When the user press left, using sprite. Rotate Sprite such that the sprite facing left.
Take note that when the user press left, the Sprite will not rotate left based on its new orientation.

like:
<-- user press left:
    <0   // sprite facing west
<-- user press left again:
     <0 // sprite still facing west

unlike before I have this:
<-- user press left:
    <0   // sprite facing west
<-- user press left again:
     0 // sprite now faces south, since south is the left of the new orientation!

What i did is that, I get the actual rotation( sprite.getRotation() SFML 2.0 ) of the newly rotated sprite and subtract that to my desired angle,

Now I got my desired result.
     

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

#include<iostream>
using std::cout;
using std::endl;

int main()
{
    sf::RenderWindow window( sf::VideoMode( 800 , 640 , 32 ) , "Hello World!" );

    sf::Event event;

    sf::Texture texture;
    texture.loadFromFile("images/Trooper.png");

    sf::Sprite sprite;

    sprite.setTexture( texture );
    sprite.setPosition( 400 , 320 );
    sprite.setOrigin( sprite.getLocalBounds().height / 2 , sprite.getLocalBounds().width / 2 );
    sprite.setRotation( 90 );

    float angle;

    while( window.isOpen() )
    {
        window.waitEvent( event );

        switch( event.type )
        {
            case sf::Event::Closed:
                window.close();

            case sf::Event::KeyPressed:
            {

                switch( event.key.code )
                {
                    case sf::Keyboard::Escape:
                        window.close();

                    case sf::Keyboard::Left:
                        angle = 270.0f - sprite.getRotation();
                        cout << "angle : " << sprite.getRotation() << endl;
                        sprite.rotate( angle );
                        break;

                    case sf::Keyboard::Right:
                        angle = 90.0f - sprite.getRotation();
                        cout << "angle : " << angle << endl;
                        sprite.rotate( angle );
                        break;

                    case sf::Keyboard::Up:
                        angle = 360.0f - sprite.getRotation();
                        cout << "angle : " << sprite.getRotation() << endl;
                        sprite.rotate( angle );
                        break;

                    case sf::Keyboard::Down:
                        angle = 180.0f - sprite.getRotation();
                        cout << "angle : " << angle << endl;
                        sprite.rotate( angle );
                        break;

                }
            }
        }

        window.clear( sf::Color ( 0 , 0 , 0 ) );
        window.draw( sprite );
        window.display();
    }

    return 0;
}

 


I hope this question helps other people who want a zelda/final fantasy sprite orientation although I know the fact this might not be that so trivial. I got so much time wasted searching over the web but all I see is rotating sprite base on mouse direction! That is not what I want.

 So I hope if someone is searching for this specific sprite orientation behavior based on strict key press: left, right , up down, or a , s ,w ,d.

This is how I solved it.

gyscos

  • Jr. Member
  • **
  • Posts: 69
    • View Profile
Re: How to make a sprite face a direction base on Arrow keys?
« Reply #5 on: November 30, 2012, 04:52:17 pm »
Why don't you use setRotation, since that's exactly what you're looking for, and also what rotate does in the background ?

magneonx

  • Full Member
  • ***
  • Posts: 141
    • MSN Messenger - magnumneon04@hotmail.com
    • View Profile
Re: How to make a sprite face a direction base on Arrow keys?
« Reply #6 on: November 30, 2012, 05:21:48 pm »
Thanks for pointing that out. I knew there is something wrong in my code. Well thank you very much for pointing that out again. I'll try to use that, but at least I meddled and struggle to do a little experiment on paper and did some research. It's a nice learning experience though and I am so sorry, I am still new to SFML. Haha. ;D

magneonx

  • Full Member
  • ***
  • Posts: 141
    • MSN Messenger - magnumneon04@hotmail.com
    • View Profile
Re: How to make a sprite face a direction base on Arrow keys?
« Reply #7 on: November 30, 2012, 05:26:22 pm »
Alright here is my new code using setRotation()
This one works with me like a charm, now added some movements


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

#include<SFML/System/Time.hpp>
#include<SFML/System/Clock.hpp>


#include<iostream>
using std::cout;
using std::endl;

int main()
{
    sf::RenderWindow window( sf::VideoMode( 800 , 640 , 32 ) , "Hello World!" );

    sf::Event event;

    sf::Texture texture;
    texture.loadFromFile("images/Trooper.png");

    sf::Sprite sprite;

    sprite.setTexture( texture );
    sprite.setPosition( 400 , 320 );
    sprite.setOrigin( sprite.getLocalBounds().height / 2 , sprite.getLocalBounds().width / 2 );
    sprite.setRotation( 0 );

    sf::Clock clock;

    float elapsed;

    float angle;

    int moveX = 0;
    int moveY = 0;

    int velocity = 40.0;

    while( window.isOpen() )
    {
        window.pollEvent( event );
        elapsed = clock.restart().asSeconds();

        switch( event.type )
        {
            case sf::Event::Closed:
                window.close();

            case sf::Event::KeyPressed:
            {
                switch( event.key.code )
                {
                    case sf::Keyboard::Escape:
                        window.close();
                }
            }
        }

        if( sf::Keyboard::isKeyPressed( sf::Keyboard::Left ) )
        {
            //angle = 270.0f - sprite.getRotation();
            sprite.move( -40 * ( elapsed ) , 0 );
            sprite.setRotation( 270.0f );
        }

        if( sf::Keyboard::isKeyPressed( sf::Keyboard::Right ) )
        {
            //angle = 90.0f - sprite.getRotation();
            sprite.move( 40 * ( elapsed ) , 0 );
            sprite.setRotation( 90.0f );
        }

        if( sf::Keyboard::isKeyPressed( sf::Keyboard::Up ) )
        {
            //angle = 360.0f - sprite.getRotation();
            sprite.move( 0 , -velocity * elapsed );
            sprite.setRotation( 360.0f );
        }

        if( sf::Keyboard::isKeyPressed( sf::Keyboard::Down ) )
        {
            //angle = 180.0f - sprite.getRotation();
            sprite.move( 0 , velocity * elapsed );
            sprite.setRotation( 180.0f );
        }

        window.clear( sf::Color ( 0 , 0 , 0 ) );
        window.draw( sprite );
        window.display();
    }

    return 0;
}

 

Thank you very much!

gyscos

  • Jr. Member
  • **
  • Posts: 69
    • View Profile
Re: How to make a sprite face a direction base on Arrow keys?
« Reply #8 on: November 30, 2012, 07:18:03 pm »
Nice :)
As a bonus, you may try to handle diagonal orientation (if the user press both up and left, he'll move diagonally, but will still face up).

Some remarks :
You don't need moveX and moveY any more. Also, you use velocity for Up/Down moves, but 40 for Left/Right.
« Last Edit: November 30, 2012, 07:19:39 pm by gyscos »