Forums

OverviewV-Play 1 Support › Flickable

Viewing 15 posts - 1 through 15 (of 26 total)
  • Author
    Posts
  • #4006

    Heini

    Hi,

    i wanna make a highscore list for my game. It seams that ListView is not supported in VPlay so i tryed to do it with Flickable. While on the QML-renderer everything is working correctly, cocosrenderer is making some trouble: after loading the scene containig the flickable, it gets drawn as it should, but when i touch the surface to flick the items, they move upwarts out of the Flickable and partially out of the window. When i set the items y property to 200 it works, but then it gets drawn offset after entering the scene.

    Greetings

    Heini

    #4137

    Christian
    V-Play Team

    Hi Heini,
    could you please post the relevant source code?

    We are using the Flickable element in the demo games as well. For example in the Squaby demo in LevelSelectionScene.qml and LevelSelection.qml. You can also find our testing source code for the Flickable element in the examples/VPlayTests/FlickableTest.qml file.

    Cheers,
    Chris

    #4138

    Heini

    Hi Chris,

    following your examples i was able to realize a flickable that scrolls over the whole screen. I would like the flickable smaller than the screen with some border at its top and bottom. To control the flickables width i can simply change the width of its content items. Is there also a possibility to reduce the height of the scrollable area? (without overlaying an image on its bottom and top ;-))

    Here is some of the code:

     Flickable {
           id: flickable
           
           anchors.centerIn: parent
    
           width: (parent.width

    Greetings
    Heini

    #4139

    Christian
    V-Play Team

    Hi Heini,
    everything that is a child of Flickable, is also the scrollable area. If you want items that do not scroll, but stay at a fixed position, you would need to put them outside of the Flickable item.

    So with a header and footer that stays the same, something like this:

    Column {
      Item { id: header }
      Flickable {
        Column { /* flickable content here */ }
      } // end of scrollable area
      Item { id: footer }
    }

    Cheers,
    Chris

    #4141

    Heini

    Hi Chris,

    i don´t really want a header and a footer item, i just want some free space around my flickable. But also putting the flickable in a Column, like suggested above, does not work. In my example the green rect remains at its fixed position (as it should), but the flickable content keeps rolling over it and covers the rect (as it shouldn´t).

    Here is what i did:

    Column{
        id: columnOuter
        width: 400
        anchors.centerIn: parent
    
        Rectangle{
            id: haeder
            color: "green"
            height: 50
            width: parent.width
        }
    
        Flickable {
            id: flickable
            anchors.centerIn: parent
            width: (parent.width
    #4142

    Christian
    V-Play Team

    Hi guys, just to put this out there, I’ve had the same problem with a Flickable element:

    When you make a Flickable which doesn’t cover the whole height or width of the screen, and then scroll it, for example vertically, it scrolls to the top of the screen immediately after releasing the scroll. When you compare it with the QML renderer, there’s a clear difference, the QML renderer does not do that (when you enable both renderers you can see it).

    #4143

    Christian
    V-Play Team

    Hi,

    I could reproduce the error and fixed it. The issue is resolved in the next V-Play update, which will be released in 1-2 weeks.

    Thanks for pointing it out!
    Chris

    #4218

    Heini

    Hi Chris,

    could you please also put an eye on the contentY property. Changing its value does not have any effect with cocosrenderer. Thanks!

    #4219

    Christian
    V-Play Team

    Do you modify the contentY property manually? Could you send me an example code that showcases the missing functionality please?

    #4221

    Heini

    Hi Chris,

    i modify the contentY property manually to scroll to a certain position (what works on QML renderer).

     

    Here is my code:

    Scene {
      
      id: highscoreScene
      ....
      
      Component.onCompleted: {
        flickable.contentY = image.height * 10 //should bring  the 10th item to the top of the visible area
      }
      
      ListModel{
        id: listModel
        
        // there will be generated about 50 items  dynamically
      }
      
      Component {
        id: levelItemDelegate
        
        Image{
          id: image
          height: 40
          width: rect.width
          source: "image.png"
        }
      }
      
      Flickable {
        id: flickable
        anchors.centerIn: parent
        width: (parent.width<column.width) ? parent.width : column.width
        height: (parent.height<column.height) ? parent.height : column.height
        
        contentWidth: column.width
        contentHeight: column.height
        flickableDirection: Flickable.VerticalFlick
        
        Column {
          id: column
          anchors.centerIn: parent
          
          Repeater {
            id: repeater
            model: listModel
            delegate: levelItemDelegate
            
          }
        }
      }
    }

    ;

    Bye

    Heini

    #4468

    Heini

    Hi Chris,

    yesterday i installed the 1.3 update. Thank you for adding the clearCocosTextureCache-function, but the issue with the flickable is still there – the content is not getting clipped and i am not able to navigate to a defined YPosition.
    Then i tryed something other:
    i put an image into a custom Item – the images size is bigger then the surrounding item – so that it should be clipped (clip: true). While this on QML renderer happens, in Cocos renderer it doesn´t. So i assume, that it seems to be in general a clipping error in vplay. Please try to fix this, otherwise i´m not able to finish my project.

    Greetings
    Heini

    #4471

    Christian
    V-Play Team

    Hi Heini,

    I was not aware you would need the Flickable content to be clipped. This is currently not supported. What is your exact use-case, maybe we could find a solution which works without clipping?

    Changing the contentY property should work now, please make sure to clean your existing project so the 1.3 version is used.

    Cheers, Chris

    #4476

    Heini

    Hi Chris,

    i am using two flickables side by side, flickable directions  horizontal and vertical for both of them. Now when i flick one of the two flickables, its content moves out of its borders and over the other one.

     

    Greetings

    Heini

    #4478

    Christian
    V-Play Team

    Alright, and what is inside these flickables? Could you post some code please? Is it only gonna be 2 Flickables, or may there be more of them later?

    One solution that comes in my mind, is to use a MouseArea instead of the Flickable and use an Animation to get the snapping to the target position..

    Cheers, Chris

    #4480

    Heini

    Hi Chris,

    to explain a bit further: the two flickables are used like two windows to a playfield, witch can be zommed in by the player. There are only two flickables.

    Greetings
    Heini

Viewing 15 posts - 1 through 15 (of 26 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