Best way to make a game menu in Qt Quick

Donner

Hey,

I started working with QML a few days ago, and I think I'm getting the basics now.

However, I'm not sure about how to solve the following problem:
Basicly I just want to have some kind of menu, but with different pages. On each page there are three buttons that do something or lead to another menu page.

I started out creating a main.qml file and one qml file for each menu page. Now I planned on putting the menu pages all in the main.qml file but into different states. The problem would then be, how to create nice transitions between the pages - when you switch from page A to page B by pressing a button, page A should move out to the left of the screen and page B should move in from the right.
The problem I'm having is how to create those transitions: The menu pages are being placed using "anchors.fill: parent", because I don't want to use absolute positions. How can I make it move to the left or right of the screen, so it's not visible anymore?

Or is there a better solution than putting the menu pages into one file with different states?

Thank you a lot for your help!!
D.

Peppy

I am not interested in Quick, but:

I think a vertical box of buttons will help you.
If you want some nice effect, use Animation framework (?)

Donner

Hey,
thanks for your answer ;)
However, I know how to create the buttons, my problem is the following:

is it a good idea to put the menu pages into different states of one qml document? Or is there a better way of handling this? I bet there are some people out there who have developed menus with QML - how did you do it?
if i follow my approach: how do I move one menu page from the screen to a place left of the screen, so it's invisible using a nice transition? I know how to do it when using absolute positions, but I'm using anchors (so that the menu is resolution independent) - how does it work there?

Thank you!
D.

Chuck Gao

@Donner Donner: I don't think it's a good way to use "anchors.fill: parent" in this case.

You can set width and height to parent.width/height to the MenuPage(assume it's the menu item's name)
You can put the anchor(s) in the states and use animation if you want some nice effect, using AnchorAnimation, PropertyAnimation to change the anchor, the opacity, or other kind of things.
Use "clip: true" in the parent item(which your menu pages anchored in) to ensure the pages won't be paint, when it move out of the scene.

Donner

Hey,

thanks! I tried using NumberAnimation for the Anchors, now with AnchorAnimation it works fine.

One more question: if I have 3 states, lets call them A, B and C. Between A and B there is a transition. Is there a way to automatically switch from state B to state C as soon as the transition from A to B is finished?

What I want to do is to move an item out of the screen to the left, but when it comes back in, it's supposed to move in from the right, so as soon as it is completely outside the screen on the left side i somehow have to get it to the right side without the user noticing it.

Chuck Gao

Can i understand B and C is one state? I mean, actually, there is only 2 states, you just want an animation between B and C. For this case, you can use "easing curve" when you do the transition.

You can set "easing.type: Easing.OutBack" to your animation.

Or, an alternative way, using SequentialAnimation just like:
@Rectangle {
id: rect
width: 100; height: 100
color: "red"

 SequentialAnimation {
     running: true
     NumberAnimation { target: rect; property: "x"; to: 50; duration: 1000 }
     NumberAnimation { target: rect; property: "y"; to: 50; duration: 1000 }
 }

}@

Donner

Hey, thanks for your reply! :)
No, B and C are different states and I don't want an animation in between those states.

There is an item on the screen (state A) and it moves out of the screen to the left so it is invisible to the user (left of the screen is state B). Once it is completely outside the screen I want it to switch to state C, which is the item being right of the screen, so when it moves back into the screen it comes from the right.

But moving from B to C is supposed to happen WITHOUT the user noticing anythin and only once the transition from A to B is finished...

Chuck Gao

Donner: I got your point. The normal way is, you can specify a property to binding with the State.
@ State {
name: "C"
when: menuPage.x == STATE_B_POSITION_X
PropertyChanges {
target: menuPage
x: STATE_C_POSITION_X
... ...
}
}@

It will have a warning "<Unknown File>: QML StateGroup: Can't apply a state change as part of a state definition.", but you can ignore it.