Author Topic: Spinning Card  (Read 15369 times)

0 Members and 1 Guest are viewing this topic.

Hapax

• Hero Member
• Posts: 3058
• My number of posts is shown in hexadecimal.
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):
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

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

Tommas

• Newbie
• Posts: 8
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.

Hapax

• Hero Member
• Posts: 3058
• My number of posts is shown in hexadecimal.
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
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

zsbzsb

• Hero Member
• Posts: 1409
• Active Maintainer of CSFML/SFML.NET
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.
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

zsbzsb

• Hero Member
• Posts: 1409
• Active Maintainer of CSFML/SFML.NET
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: 10225
Re: Spinning Card
« Reply #6 on: September 25, 2014, 11:25:17 pm »
Slow down zsbzsb.

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.

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
Re: Spinning Card
« Reply #7 on: September 25, 2014, 11:40:15 pm »
I thought we were already in my personal opinion land  (*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.
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

dabbertorres

• Hero Member
• Posts: 506
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.
Re: Spinning Card
« Reply #10 on: September 26, 2014, 04:02:35 pm »
pastebin

I think you're underestimating just how noob I am

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

dabbertorres

• Hero Member
• Posts: 506
Re: Spinning Card
« Reply #11 on: September 26, 2014, 06:46:51 pm »

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

Jesper Juhl

• Hero Member
• Posts: 1405
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

Hapax

• Hero Member
• Posts: 3058
• My number of posts is shown in hexadecimal.
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:
The class was unaltered
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).
The only face provided is the SFML one. I doubt you'll have much need for the Hapax ones

Nice effect. I may be tempted to "borrow" it if I ever make a card game
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