Skip to content
  • Categories
  • Recent
  • Tags
  • Popular
  • Users
  • Groups
  • Search
  • Get Qt Extensions
  • Unsolved
Collapse
Brand Logo
  1. Home
  2. Qt Development
  3. QML and Qt Quick
  4. Implementing States with QML
Forum Updated to NodeBB v4.3 + New Features

Implementing States with QML

Scheduled Pinned Locked Moved QML and Qt Quick
4 Posts 3 Posters 7.7k Views 1 Watching
  • Oldest to Newest
  • Newest to Oldest
  • Most Votes
Reply
  • Reply as topic
Log in to reply
This topic has been deleted. Only users with topic management privileges can see it.
  • P Offline
    P Offline
    pixtur
    wrote on 9 Nov 2010, 14:33 last edited by
    #1

    Hi everybody,

    I spent some days struggling with a nice implementation of states for a little game. From other projects, I'm used to implementing a small state-machine that provides the following attributes for each state:

    1. actions on entering state
    2. sub states with default state
    3. action on leaving state
    4. transition between states (action/methods that can be invoked)
    5. automatic transition to another state if state is complete (e.g. after loading, etc.)

    Although QML transition seem to be nice for small animation demos, they feel immature when it comes to logic and structure.

    I want to implement the following state-chart:

    [url]http://www.pixtur.de/pub/game-state-chart.png[/url]

    Some of my questions:

    1. Why are are states identified by Strings instead of IDs ?
    2. Why can't Transitions be normal objects of a state (instead of items in the transitions property list?
    3. How can I easily define to jump from one state to another after a timeout or a keypress?

    My current implementation looks like this:

    @
    import Qt 4.7
    import "ovilogo"
    import "warp5"

    Item {
    id: main
    width: 864
    height: 480

    Component.onCompleted: {
        main.state = "OVI_LOGO";
        console.log("onCompleted");
    }
    
    
    Image {
        anchors.fill:  parent
        source:  "images/game-background.jpg"
    }
    
    Image {
        anchors.fill:  parent
        source:  "images/game-shading-with-playfields.png"
    }
    
    
    Component {
        id: ovilogo
        Ovilogo {  }
    }
    Component {
        id: warp5
        Warp5 { id:qmlRef }
    }
    
    Game {
        id:game
        visible: false
    }
    
    Loader {
        anchors.fill:  parent
        id:mainLoader
    }
    
    states: [
        State {
            name: "OVI_LOGO"
        },
        State {
            name: "WARP5_LOGO"
        },
        State {
            name: "GAME"
        }
    ]
    
    
    transitions: [
        Transition {
            to: "OVI_LOGO"
            SequentialAnimation {
                ScriptAction {
                    script: { console.log("mainLoader"); mainLoader.sourceComponent = ovilogo;}
                }
                PauseAnimation { duration: 2000 }
                ScriptAction {
                    script: { console.log("settings state to warp5..."); main.state = "WARP5_LOGO"; }
                }
            }
        },
    
        Transition {
            to: "WARP5_LOGO"
            SequentialAnimation {
                ScriptAction {
                    script: { console.log("setting source to warp5..."); mainLoader.sourceComponent = warp5;}
                }
                PauseAnimation { duration: 5000 }
                ScriptAction { script: { console.log("settings state to game...");  main.state = "GAME";}  }
            }
        },
    
        Transition {
            to: "GAME"
            ScriptAction {
                script: { console.log("setting source to warp5..."); mainLoader.visible = false; game.visible = true;}
            }
        }
    ]
    

    }
    @


    ps: Is there a link how formatting works on this forum?

    [edit : Code highlighted properly / Denis Kormalev]

    1 Reply Last reply
    0
    • D Offline
      D Offline
      DenisKormalev
      wrote on 9 Nov 2010, 14:59 last edited by
      #2

      Just use @ tags

      1 Reply Last reply
      0
      • M Offline
        M Offline
        mbrasser
        wrote on 10 Nov 2010, 01:29 last edited by
        #3

        [quote author="pixtur" date="1289313223"]
        Although QML transition seem to be nice for small animation demos, they feel immature when it comes to logic and structure.
        [/quote]

        Yes, QML states certainly don't provide the level of sophistication found in e.g. the Qt C++ "State Machine Framework":http://doc.qt.nokia.com/4.7/statemachine-api.html

        [quote author="pixtur" date="1289313223"]

        1. Why are are states identified by Strings instead of IDs ?
          [/quote]

        In part so they can be easily manipulated outside the component in which they are defined.

        [quote author="pixtur" date="1289313223"]
        2. Why can't Transitions be normal objects of a state (instead of items in the transitions property list?
        [/quote]

        One transition can apply to multiple state changes, which is why they aren't associated with a single state.

        [quote author="pixtur" date="1289313223"]
        3. How can I easily define to jump from one state to another after a timeout or a keypress?
        [/quote]

        A keypress could be accomplished with something like:
        @
        // in OVI_LOGO state
        PropertyChanges {
        target: main
        Keys.onPressed: main.state = "WARP5_LOGO"
        }
        @

        1 Reply Last reply
        0
        • P Offline
          P Offline
          pixtur
          wrote on 12 Nov 2010, 07:44 last edited by
          #4

          Hi,

          thanks for these answers. Most of them makes sense. However, I am still convinced that transitions and states are not so closely related as it is enforced by QML. To me, states are more about logic, than about properties and assigned transitions. Thus the most important thing would not be transitions but onEnter, onLeave, onUpdate handlers and of course custom methods/actions. From these I could easily invoke any transition, which would more become a collection of Animations. This would nicely decouple the two things, and I could even reusing transitions for different states or objects or even refactor them into a separate file.

          I have to try your key-press example. I guess, I'm slowly understanding what you are doing there. :-)

          Powerful stuff, once you understood QML's potential...

          1 Reply Last reply
          0

          3/4

          10 Nov 2010, 01:29

          • Login

          • Login or register to search.
          3 out of 4
          • First post
            3/4
            Last post
          0
          • Categories
          • Recent
          • Tags
          • Popular
          • Users
          • Groups
          • Search
          • Get Qt Extensions
          • Unsolved