Forums

OverviewV-Play 1 Support › smooth opacity animation not having an effect

Viewing 8 posts - 1 through 8 (of 8 total)
  • Author
    Posts
  • #5649

    strattonbrazil

    I’m trying a simple transition where my scene smoothly fades out by mouse click.  Setting the opacity to zero makes the screen disappear, but doesn’t do it smoothly like the animation isn’t having any effect.  Am I doing something wrong?

    Scene {
        id: splashScene
    
    
        width: 480
        height: 320
    
    
        Rectangle {
            color: "green"
            anchors.fill: parent
        }
    
    
        // the Component element is the same as defining a MouseJoint in a separate file - it does not create the Joint immediately but only defines the QML item structure
        // it is used to create a MouseJoint every time the user clicks on the scene
    
    
        // if clicked on the scene, a new box will be created
        MouseArea {
            anchors.fill: parent
    
    
            // a click is defined as a press followed by a release - only create a new box if the user didnt initially press on an existing body
            // thus the creation must be done in onReleased, if selectedBody is not null
                    onClicked: {
                        console.log("onClick called")
                        splashScene.opacity = 0
                    }
    
    
        Text {
            anchors.centerIn: parent
    
    
            text: "some text"
            font.pixelSize: 18
            color: "white"
        }
    
    
        transitions: [
            Transition {
                NumberAnimation  {
                    property: "opacity"
                    easing.type: Easing.InOutQuad
                    duration: 10000
                }
            }
        ]
    }
    
    
    #5650

    Alex
    V-Play Team

    Hi,

    the first thing i notice is that the closing } of the MouseArea is missing (at the wrong spot), therefore the Text and the transitions elements are children of the MouseArea and not the Scene. This means the transition doesn’t effect the Scene properties. (Tip: CTRL+A followed by CTRL+I apllies the right indention to your whole code, this helps checking if all brackets are placed correct)

    Let me know if this fixes your problem or else i will investigate the code closer.

    Cheers,
    Alex

    #5651

    strattonbrazil

    I’m sorry, that was a copy/paste error.  I don’t know about other people, but when I paste text into this box, I get a code box per line, which makes editing this code very difficult.  I’ve linked what the code really looks like.

    http://pastebin.com/w0eAN7mL

    #5654

    Alex
    V-Play Team

    I see, what browser are you using? Do you paste it right into the reply box or are you using the “Code”-button and paste it there?

    Regarding your issue, i recommend using

    Behavior on opacity {
      NumberAnimation { duration: 10000 }
    }

    instead of the transitions.

    From the QML documentation: “A Transition defines the animations to be applied when a State change occurs.”
    In your case you are not using a state-machine to switch the opacity, thats why the transitions have no effect.

    Cheers,
    Alex

     

    #5656

    strattonbrazil

    I’m using Chrome on Ubuntu.  I’m copying/pasting directly into the text box without using the code button.  I usually go back afterward and format everything.  If I copy/paste it into an editor like gedit and recopy/paste it here, I don’t get the code boxes, but then I lose all my indentation as well.  :(

     

    I tried using the “Behavior on opacity”, but that still didn’t have any effect.  I updated my main qml code to have a couple of states, which I use to change the opacity of one scene to 1 and the opacity of the the other to 0.  This seems to update the opacities fine, but again there’s no smooth transition.  It’s just popping from one scene to the other.  I know the states are working because onStateChanged is being called and that’s what is handling the opacity now.  I’m just wondering why they still don’t animate with “Behavior on opacity” or “Transition”.

     

    http://pastebin.com/fsz7xiT0

     

    #5658

    Alex
    V-Play Team

    The transitions component must be declared in the GameWindow (where the states are changed) not in the Scene. You can have a look at the MultiSceneMultiLevel tutorial (http://v-play.net/doc/howto-multi-scene-multi-level.html) or just its source code in the Examples folder of the SDK.

    Furthermore you are not making use of a great feature of the state machine, the fact that it resets all PropertyChanges of a state when you leave the state.

    Scene {
      id: splashScene
      opacity: 0 // invisible by default
      // ...
    }
    Scene {
      id: starmapScene
      opacity: 0 // invisible by default
      // ...
    }
    
    states: [
      State {
        name: "splash"
        // if the state of the GameWindow is "splash" the splashScene gets visible --> opacity to 1
        // in any other state the PropertyChange gets reset automatically --> opacity of splashScene back to 0
        PropertyChanges { target: splashScene; opacity: 1}
      },
      State {
        name: "starmap"
        // no need to reset the opacity of the splashScene here
        PropertyChanges { target: starmapScene; opacity: 1}
      }
    ]

    Cheers,
    Alex

    #5659

    strattonbrazil

    I didn’t know that about state resetting the properties.  That’s nice.  Moving the transitions block to the game-world file still doesn’t do anything for the opacity fading out though.

    http://pastebin.com/iffECSny

    I see this line in the logs.  Is this significant?  I’m assuming it’s not, but figured I’d ask.

    CCSpriteManager: Updated blend function and set to {GL_SRC=GL_ONE, GL_DST=GL_ONE} for sprite: 0x14f9ee0 

     

    #5660

    Alex
    V-Play Team
    import VPlay 1.0
    import QtQuick 1.1
    
    GameWindow {
      id: gameWindow
      width: 960
      height: 640
    
      state: "splash"
    
      states: [
        State {
          name: "splash"
          PropertyChanges { target: splashScene; opacity: 1}
        },
        State {
          name: "starmap"
          PropertyChanges { target: starmapScene; opacity: 1}
        }
      ]
    
      onStateChanged: console.log("HUD: switched to state '", state, "'")
    
      transitions: [
        Transition {
          NumberAnimation {
            property: "opacity"
            easing.type: Easing.InOutQuad
            duration: 10000
          }
        }
      ]
    
      Scene {
        id: splashScene
        width: 480
        height: 320
        opacity: 0
        Rectangle {
          color: "green"
          anchors.fill: parent
        }
        MouseArea {
          anchors.fill: parent
          onClicked: {
              console.log("onClick called")
              gameWindow.state = "starmap"
          }
        }
        Text {
          anchors.centerIn: parent
          text: "Path to Orion"
          font.pixelSize: 18
          color: "white"
        }
      }
    
      Scene {
        id: starmapScene
        opacity: 0
        width: 480
        height: 320
        Rectangle {
          color: "red"
          anchors.fill: parent
        }
      }
    }

    This is my Code that works fine.

Viewing 8 posts - 1 through 8 (of 8 total)

RSS feed for this thread

You must be logged in to reply to this topic.

Voted #1 for:

  • Easiest to learn
  • Most time saving
  • Best support

Develop Cross-Platform Apps and Games 50% Faster!

  • Voted the best supported, most time-saving and easiest to learn cross-platform development tool
  • Based on the Qt framework, with native performance and appearance on all platforms including iOS and Android
  • Offers a variety of plugins to monetize, analyze and engage users
FREE!
create apps
create games
cross platform
native performance
3rd party services
game network
multiplayer
level editor
easiest to learn
biggest time saving
best support