PDA

View Full Version : Shuffling deck cards Animation with images(gif)



Kuushie118
27th December 2018, 13:43
Is it possible to create a shuffling deck card animation then giving 26 random cards to the player?
I already have the 52 cards images...I just need help with the animation please.

d_stranz
28th December 2018, 01:35
Is it possible to create a shuffling deck card animation then giving 26 random cards to the player?

Yes to both, and it would probably be easiest to do using the Graphics / View Framework (https://doc.qt.io/qt-5/graphicsview.html), with the cards represented as QGraphicsPixmapItem instances. You can use QPropertyAnimation on the card's position to move the cards around in the scene to simulate shuffling, as well as changing the z-value to move cards on top of each other.

Take a look at the Animated Tiles (https://doc.qt.io/qt-5/qtwidgets-animation-animatedtiles-example.html) example. The main.cpp file shows how to add pixmap-based items to a scene and how to animate their positions using a property animation.

The code to animate shuffling like it is done in a casino (split the deck, then riffling to interleave them) would probably be pretty hard to write to get a realistic effect. Easier (and probably more flashy from a gui point of view) would be to start with a deck, explode all the cards outward, then bring them all back together again using animation of their positions. Before you bring them together, you assign a random new z-value to each card, so that as they come together, they will appear to "stack" in a different order than when they started. You can do this with the cards face up, then as the cards come together switch them all to show the back face.

As for dealing out the cards at random, keep the card items in a vector. For each card you deal, choose a random number between 0 and the size of the vector. Remove the card item at that position from the deck, and repeat until you have dealt as many cards as you want. (By removing the card item from the vector, you decrease the size of the vector, so you can never try to deal out more cards than remain in the vector, and can never deal the same card twice).

You'll have a lot of code to write, but the animated tiles example has the basics of what you'll need.

It would be a pretty good idea to keep the game logic separate from the display logic, if you aren't doing that already. That is, make a distinction between a "card" as a logical card in the game and a "card pixmap" as something you display and move about on the screen. The logical card item might have a pointer to the QGraphicsPixmapItem that represents its visual appearance, or you might make a QMap that stores the association between a logical card and card image as a pair of pointers. By separating things in this way, you can change many things about the game and its rules without changing what's on screen, and vice-versa.

Kuushie118
28th December 2018, 05:32
I've been wondering about those animated tiles for a while now:D
so I'll just use the animated tiles as a guide for my animation of shuffling cards and just put card images from a resource file?

Added after 21 minutes:

Will I use console or widget application in creating a new project?

d_stranz
28th December 2018, 06:48
Will I use console or widget application in creating a new project?

Widget application is what you usually want if you have a Qt GUI. If you want menus, toolbars, etc., then you would choose a main window-based application instead of a dialog-based one. If you use a main window, set the QGraphicsView as the "centralWidget" of the main window. You will also want to override the resizeEvent() of the main window and call QGraphicsView::fitInView() using a QRect based on the resize event's QSize to create the correct scaling so the scene is scaled to fit the window.


card images from a resource file?

That's the best way to do it. All the images are compiled into the program instead of living as separate image files that have to be loaded at runtime. It would probably be a good idea to name your resource images so you can generate the name in a loop (e.g. "card01.png" instead of "aceofspades.png"). Otherwise you'll have to write 52 lines to load the images one-by-one instead of three lines to load them in a loop. You can make an enum that allows you to know the card (eAceOfSpaces = 01, eTwoOfSpades = 02, etc.) and match it to the correct index (card01, card02, ... ), the correct QGraphicsPixmapItem, the correct logical card, and so forth.

Kuushie118
28th December 2018, 07:54
Thank you so much for the tips :D :D

d_stranz
2nd July 2019, 06:02
Last comment reported as spam.

d_stranz
2nd July 2019, 16:55
... and it was deleted by the admins. To be clear, my comment reporting spam does not refer to Kuushie118's last post on Dec 27 but to the one in between that one and mine which has since been deleted.