A QML Memory Game Tutorial
In this article we will cover very basic QML elements that will help you to create an easy but cool Memory game using the recent QML technology.
About The Game
What Is the Game About
This is the game description in short
- This game consists of a deck with 32 paired cards arranged randomly.
- You open a card by clicking or tapping on it, if so, the card will show its content
- You can open a second card in the same way
- If cards match, then they are removed from the deck
- If cards don't match, they cover themselves again
- Match or not, the pair counter will go up 1 unit and this is displayed in the top/right
- On the top/left you will be able to see the elapsed time
Here is an image of the game scene:
Main Menu and other Screens
The game contains a main menu presented in two different scenarios
- When the app starts or game is over: two options (Start/Exit)
- When the game is paused: three options (Continue/Restart/Exit)
It also contains an End Dialog displayed when all the cards are matched and the game is over.
Constructing The Game
This is the list of concepts we need to keep in mind for making this game
Creating a single Card
To build the card we need to understand the concept of States and Transitions.
State: Is a set of values of different properties of an Item in a very specif instant of time. For example, think about a car (Item), it has an engine (property) and different states like off and on. In on state, the engine is turned on, in off state, the engine is off.
Transitions: Is something that happens when you change from one state to another. You can animate the change of value of one property between states using a set of animations defined in QML.
Following these ideas, our card will basically have 3 different states
closed: The cover of the card is shown. This is the default state and its represented by an empty quotes /"/" Open: The content of the card is shown removed: The card is not visible and has no interaction
We can create a very cool transition between Closed and Open states using a Rotation transform in each of the two images. A Rotation transform allow us to rotate an Item over any of the image axis.
This is how we create the effect: On a Closed state we rotate the content Image over the Y axis 90 degrees, it is there, but you cannot see it. The cover Image is then shown completelly.
On an Open state, we first rotate the cover Image 90 degrees so it is not visible, after that, we rotate the content Image 90 degrees so it is completelly visible. We have achieved a flip animation.
You will see as well in the code bellow a transition between the "Open" and "removed" states that creates a spin effect rotating the card and decreasing size.