×
Namespaces

Variants
Actions
(Difference between revisions)

A QML Memory Game Tutorial

From Nokia Developer Wiki
Jump to: navigation, search
chintandave_er (Talk | contribs)
m (minor spelling)
rdrincon (Talk | contribs)
Line 40: Line 40:
 
= Constructing The Game =
 
= Constructing The Game =
  
This is the list of concepts we need to keep in mind for making this game
+
This is the list of concepts we need to keep in mind for making this game.
 +
QML objects are a set of Items that contain properties (defined by the Item or by the user), states, transitions and many other things we will not cover here.
 +
Items can be defined by the language like Rectangle, Image, Text or can be just a container (in this case only use Item).
 +
An Item can contains as many other items as it is necesary and these enclosed Items can have other Items, etc.
 +
 
  
 
== Creating a single Card ==
 
== Creating a single Card ==
  
To build the card we need to understand the concept of  '''States''' and '''Transitions'''.
+
 
 +
Basically, the card is composed by two Images, one is the cover and the other one is the content.
 +
The cover is a single Image and we can address it directly, but the content could be any of the 16 Images of the deck and must be passed from outside.
 +
To do this, we can use '''properties''' and bind the content Image to this property.</br>
 +
 
 +
We can rotate the images in its default state using a transform. In this case we will use a '''Rotation'''
 +
With this, we can rotate the image in any of its axes.
 +
 
 +
The idea is to have one image perpendicular to the screen, meaning rotated 90 degrees on the Y axis and then not visible; and the other one paralel to the screen, rotated 0 degrees on the Y axis and then visible.
 +
These rotations need an '''id''', which is a defined '''property''' we can use to address it later and change one of its properties.
 +
 
 +
 
 +
These is for instance the code of the image that contains the content of the card
 +
 
 +
<code css>
 +
//Content of the card
 +
    Image {
 +
        id: contentImg
 +
       
 +
        source: "img/card"+parNumber+".PNG"
 +
 
 +
        // Centers the image on its own container
 +
        anchors.horizontalCenter: parent.horizontalCenter
 +
        anchors.verticalCenter: parent.verticalCenter
 +
 
 +
        //this rotation produces de effect of the card content turning over and showing up
 +
        transform:  Rotation{
 +
            id: contentRotation
 +
            origin.x: 35;
 +
            origin.y: 35;
 +
            axis { x: 0; y: 1; z: 0 }
 +
            angle: 90
 +
        }
 +
    }
 +
 
 +
</code>
 +
 
 +
The way an Item can communicate to the outside world is using '''signals''' .
 +
This is very simple,  you only have to declare the signal and emit it in some time you need (usually when the user taps/clicks on some specific Item).
 +
 
 +
<code css>
 +
 
 +
    signal selected
 +
 
 +
    MouseArea {
 +
 
 +
        id: interactiveArea
 +
        anchors.fill: parent
 +
        onClicked: card.selected()
 +
    }
 +
 
 +
<code css>
 +
 
 +
On the outside world you can then use the following method to catch the signal
 +
 
 +
</code>
 +
 
 +
onClicked()
 +
 
 +
</code>
 +
 
 +
 
 +
 
 +
 
 +
We also need to understand the concept of  '''States''' and '''Transitions'''.
  
  
Line 63: Line 131:
  
 
We can create a very cool '''transition''' between Closed and Open states using a '''Rotation transform''' in each of the two images.
 
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:
 
This is how we create the effect:

Revision as of 14:55, 25 January 2011

Underconstruction.pngUnder Construction: This article is under construction and it may have outstanding issues. If you have any comments please use the comments tab.

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.

Contents

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:


QMLMemory.jpg


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.


QMLMemoryMenus.jpg


Constructing The Game

This is the list of concepts we need to keep in mind for making this game. QML objects are a set of Items that contain properties (defined by the Item or by the user), states, transitions and many other things we will not cover here. Items can be defined by the language like Rectangle, Image, Text or can be just a container (in this case only use Item). An Item can contains as many other items as it is necesary and these enclosed Items can have other Items, etc.


Creating a single Card

Basically, the card is composed by two Images, one is the cover and the other one is the content. The cover is a single Image and we can address it directly, but the content could be any of the 16 Images of the deck and must be passed from outside. To do this, we can use properties and bind the content Image to this property.</br>

We can rotate the images in its default state using a transform. In this case we will use a Rotation With this, we can rotate the image in any of its axes.

The idea is to have one image perpendicular to the screen, meaning rotated 90 degrees on the Y axis and then not visible; and the other one paralel to the screen, rotated 0 degrees on the Y axis and then visible. These rotations need an id, which is a defined property we can use to address it later and change one of its properties.


These is for instance the code of the image that contains the content of the card

//Content of the card
Image {
id: contentImg
 
source: "img/card"+parNumber+".PNG"
 
// Centers the image on its own container
anchors.horizontalCenter: parent.horizontalCenter
anchors.verticalCenter: parent.verticalCenter
 
//this rotation produces de effect of the card content turning over and showing up
transform: Rotation{
id: contentRotation
origin.x: 35;
origin.y: 35;
axis { x: 0; y: 1; z: 0 }
angle: 90
}
}

The way an Item can communicate to the outside world is using signals . This is very simple, you only have to declare the signal and emit it in some time you need (usually when the user taps/clicks on some specific Item).

    signal selected
 
MouseArea {
 
id: interactiveArea
anchors.fill: parent
onClicked: card.selected()
}
 
<code css>
 
On the outside world you can then use the following method to catch the signal

onClicked()

</code>



We also 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.

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 completely.

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 completely 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.

396 page views in the last 30 days.