[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

[ChristianFelgo 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

[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

[ChristianFelgo 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

[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

[ChristianFelgo 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).

[ChristianFelgo Team]

Hi,

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

Thanks for pointing it out!
Chris

[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!

[ChristianFelgo Team]

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

[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

[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

[ChristianFelgo 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

[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

[ChristianFelgo 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

[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