Qt Forum

    • Login
    • Search
    • Categories
    • Recent
    • Tags
    • Popular
    • Users
    • Groups
    • Search
    • Unsolved

    Implementing States with QML

    QML and Qt Quick
    3
    4
    7475
    Loading More Posts
    • 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
      pixtur last edited by

      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 Reply Quote 0
      • D
        DenisKormalev last edited by

        Just use @ tags

        1 Reply Last reply Reply Quote 0
        • M
          mbrasser last edited by

          [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 Reply Quote 0
          • P
            pixtur last edited by

            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 Reply Quote 0
            • First post
              Last post