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

Author Topic: Spinning Card  (Read 15371 times)

0 Members and 1 Guest are viewing this topic.

Hapax

  • Hero Member
  • *****
  • Posts: 3058
  • My number of posts is shown in hexadecimal.
    • View Profile
Spinning Card
« on: September 24, 2014, 02:16:06 am »
NOTE: you may be interested in the much more flexible follow-up to this class, called Sprite3D.
Sprite 3D is now included (and maintained) as a part of Selba Ward.



I remember someone once mentioning animating a card so that it spins around without using OpenGL. I think the answer was simply "scale the width". I had said it could be faked by animating the corners but I think they thought that might be too complicated.

It inspired me to create something that spins a card easily without using OpenGL but still looks 3D (enough).

I bring you...
Spinning Card

Here's a video of a really basic example of it in action (source code for example is on github):
http://www.youtube.com/watch?v=u428K0xyorI
The example code uses two SpinningCards - one for the front and one for the back - and switches which one to draw depending on the current angle. It animates the angle linearly from 0 to 360 degrees and animates the scale depending on the angle (to make it float forwards).
In this example, the card starts the spinning animation whenever the Space Bar is pressed. The "stuttering" is because of the key pressed quickly.

The class takes a sprite and mimics it by creating a vertex array and taking the sprite's position, origin, scale, rotation, colour, and its texture, which it takes a pointer to.

The card, by the way, can also be spun vertically.

If you can think of something that this class is missing, let me know. It's a simple class with a specific task in mind, though, so it probably shouldn't start including an ability to bend the card or anything  :P

As always, feel free to let me know if my code could be improved and how.  ;)
« Last Edit: November 17, 2015, 11:44:45 pm by Hapax »
Selba Ward - SFML drawables
Kairos - Timing Library
Rectangular Boundary Collision - Rectangular SAT Collision

@Hapaxiation - Hapaxia on Twitter

Tommas

  • Newbie
  • *
  • Posts: 8
    • View Profile
    • Email
Re: Spinning Card
« Reply #1 on: September 24, 2014, 09:10:06 pm »
Thank you so much for this! I just got to the point in my card game where I was thinking, "Hmm... Now how do I flip the card over?" You were inspired.   :D

Hapax

  • Hero Member
  • *****
  • Posts: 3058
  • My number of posts is shown in hexadecimal.
    • View Profile
Re: Spinning Card
« Reply #2 on: September 24, 2014, 11:08:37 pm »
how do I flip the card over?
You could just animate the card's width  :P
This class was to give that spin a little more...depth. In fact, if you set the depth in this class to zero, it looks the same as just animating the width/height!

I'm glad you like it and it was of some help to you  :)
« Last Edit: September 24, 2014, 11:16:26 pm by Hapax »
Selba Ward - SFML drawables
Kairos - Timing Library
Rectangular Boundary Collision - Rectangular SAT Collision

@Hapaxiation - Hapaxia on Twitter

zsbzsb

  • Hero Member
  • *****
  • Posts: 1409
  • Active Maintainer of CSFML/SFML.NET
    • View Profile
    • My little corner...
    • Email
Re: Spinning Card
« Reply #3 on: September 25, 2014, 02:20:26 am »
Just my personal opinion... but I think this should belong in the 'wiki' section of the forum and maybe you should also post it on the actual SFML wiki.  ;)
Motion / MotionNET - Complete video / audio playback for SFML / SFML.NET

NetEXT - An SFML.NET Extension Library based on Thor

Hapax

  • Hero Member
  • *****
  • Posts: 3058
  • My number of posts is shown in hexadecimal.
    • View Profile
Re: Spinning Card
« Reply #4 on: September 25, 2014, 10:39:58 pm »
this should belong in the 'wiki' section of the forum
I must admit that I'm not fully sure that I understand what the difference is between the two forums  ???
Selba Ward - SFML drawables
Kairos - Timing Library
Rectangular Boundary Collision - Rectangular SAT Collision

@Hapaxiation - Hapaxia on Twitter

zsbzsb

  • Hero Member
  • *****
  • Posts: 1409
  • Active Maintainer of CSFML/SFML.NET
    • View Profile
    • My little corner...
    • Email
Re: Spinning Card
« Reply #5 on: September 25, 2014, 10:55:43 pm »
What is the difference between github gists and full github repos? Really its not that complicated. Projects belong here, small snippets belong on the wiki.
Motion / MotionNET - Complete video / audio playback for SFML / SFML.NET

NetEXT - An SFML.NET Extension Library based on Thor

eXpl0it3r

  • SFML Team
  • Hero Member
  • *****
  • Posts: 10226
    • View Profile
    • development blog
    • Email
Re: Spinning Card
« Reply #6 on: September 25, 2014, 11:25:17 pm »
Slow down zsbzsb. ;D

The Projects sub forum is for any kind of project you want to present. You're free to choose how much you want to share and place it wherever you want to have it placed.

The Wiki sub forum is to link your tutorials or source codes which you've posted on the official wiki here in the forum as well.

If someone makes a small example of something, it's nice if they put it on the wiki as well, so it wouldn't get lost as easily, but just because something has a small code base doesn't mean it belongs into the wiki sub forum. ;)

Anyways, back to topic. The effect looks really cool, nicely done! :)
Official FAQ: https://www.sfml-dev.org/faq.php
Nightly Builds: https://www.nightlybuilds.ch/
——————————————————————
Dev Blog: https://dev.my-gate.net/
Thor: http://www.bromeon.ch/libraries/thor/

zsbzsb

  • Hero Member
  • *****
  • Posts: 1409
  • Active Maintainer of CSFML/SFML.NET
    • View Profile
    • My little corner...
    • Email
Re: Spinning Card
« Reply #7 on: September 25, 2014, 11:40:15 pm »
I thought we were already in my personal opinion land  :P (*writes note to start every post with IMO) Hapax asked what the difference was between the two forums and I said what I think people should use to separate them.

Quote
The Projects sub forum is for any kind of project you want to present.

Of course, nobody said otherwise.

Quote
it's nice if they put it on the wiki as well, so it wouldn't get lost as easily

And yes, that is another good reason to put it on the wiki (and the thread in that section), so it doesn't get lost.

And on topic... It does look really good.  :)
« Last Edit: September 25, 2014, 11:48:37 pm by zsbzsb »
Motion / MotionNET - Complete video / audio playback for SFML / SFML.NET

NetEXT - An SFML.NET Extension Library based on Thor

Hapax

  • Hero Member
  • *****
  • Posts: 3058
  • My number of posts is shown in hexadecimal.
    • View Profile
Re: Spinning Card
« Reply #8 on: September 25, 2014, 11:50:44 pm »
What is the difference between github gists and full github repos?
I have absolutely no idea. What's a gist?

The effect looks really cool, nicely done! :)
Thank you so much  :)

If I made an error and you think this post should be in a different forum, please feel free to move it.
Selba Ward - SFML drawables
Kairos - Timing Library
Rectangular Boundary Collision - Rectangular SAT Collision

@Hapaxiation - Hapaxia on Twitter

dabbertorres

  • Hero Member
  • *****
  • Posts: 506
    • View Profile
    • website/blog
Re: Spinning Card
« Reply #9 on: September 26, 2014, 12:26:37 am »
I have absolutely no idea. What's a gist?
It's github's version of pastebin pretty much.

And this does look quite good! Good job!

Hapax

  • Hero Member
  • *****
  • Posts: 3058
  • My number of posts is shown in hexadecimal.
    • View Profile
Re: Spinning Card
« Reply #10 on: September 26, 2014, 04:02:35 pm »
pastebin
???
I think you're underestimating just how noob I am  :P

And this does look quite good! Good job!
It does look really good.  :)
Thanks. I really appreciate this  :)
Selba Ward - SFML drawables
Kairos - Timing Library
Rectangular Boundary Collision - Rectangular SAT Collision

@Hapaxiation - Hapaxia on Twitter

dabbertorres

  • Hero Member
  • *****
  • Posts: 506
    • View Profile
    • website/blog
Re: Spinning Card
« Reply #11 on: September 26, 2014, 06:46:51 pm »
lol. Here's a link: https://gist.github.com

It's essentially a place to store codes snippets. Say... minimal examples?

Jesper Juhl

  • Hero Member
  • *****
  • Posts: 1405
    • View Profile
    • Email
Re: Spinning Card
« Reply #12 on: September 26, 2014, 06:52:38 pm »
Nice effect. I may be tempted to "borrow" it if I ever make a card game  ;D

Hapax

  • Hero Member
  • *****
  • Posts: 3058
  • My number of posts is shown in hexadecimal.
    • View Profile
Re: Spinning Card
« Reply #13 on: September 27, 2014, 09:06:44 pm »
I wanted to experiment to see what I could do with this class and I came up with this short experimental animation:
http://www.youtube.com/watch?v=yNSEmSMfbgQ
The class was unaltered  8)
It also allowed me to test out some of my mini-codes (easing, for example).

p.s. It seems ten seconds before beginning is a little too much  :'(

EDIT: If anyone's interested, here are the textures for the SFML card (front and back). Both are PNG format (they have rounded corners).
Download SFML card textures from MediaFire
The only face provided is the SFML one. I doubt you'll have much need for the Hapax ones  ;D

Nice effect. I may be tempted to "borrow" it if I ever make a card game  ;D
Thanks :)
« Last Edit: September 27, 2014, 09:23:53 pm by Hapax »
Selba Ward - SFML drawables
Kairos - Timing Library
Rectangular Boundary Collision - Rectangular SAT Collision

@Hapaxiation - Hapaxia on Twitter

StormWingDelta

  • Sr. Member
  • ****
  • Posts: 365
    • View Profile
Re: Spinning Card
« Reply #14 on: November 28, 2014, 08:51:01 pm »
hmm looks interesting.
I have many ideas but need the help of others to find way to make use of them.