OverviewV-Play 1 SupportChange Z-Position of QML Items at run time › Re: Change Z-Position of QML Items at run time

OverviewV-Play 1 SupportChange Z-Position of QML Items at run time › Re: Change Z-Position of QML Items at run time

V-Play Team

Hi again,
I delved a bit deeper into the z-ordering issue with isometric games.. From what I’ve found out, changing the vertexZ property is one approach to it, as it is used at the TMXTileMap class in cocos renderer to achieve z ordering within sprite sheets. It does have several disadvantages though:

  • If transparent images are used, the alpha test needs to be enabled for all child items of “layers” (which would be the rows in your case). What we found out at internal tests is, that alpha testing is quite expensive even on higher-end devices like the iPhone 4, and is tricky to set the right alpha testing value.
  • By using vertexZ, you override the painters algorithm approach where all items are pre-sorted. So if you use vertexZ for one item and thus overwrite the normal z property, you must use the vertexZ property in all other items as well to avoid z ordering and transparency issues.

Thus for your use-case, I think it is preferable to change the z property at runtime. I added the support to V-Play and added a test to the basicTests folder which will be available with the next update. Changing z at runtime should be done with respect to its performance penalties: a resorting needs to be done for reordering. This should be fine if you are not using too many siblings where you change the z order, e.g. something below 100 should be reasonable fast. And you should not do this every frame for a game entity obviously. In that case, vertexZ would be preferrable, even with its issues mentioned above.

Here is its source code of the ZChangingTest.qml, which will be part of V-Play 1.0.1:

import QtQuick 1.1

Rectangle {
  width: 800
  height: 600
  color: "lightgrey"

  // tests the changing of z at runtime for cocos renderer - by clicking on the window the z order of rect2 changes from 0 ... 2
  // this test must have the following behavior (for COCOS RENDERER!):
  // initially, rect2 must be below rect1: they have the same z value, but rect2 is defined first so it is rendered first and rect1 will be on top of it
  // with z=0 rect2 must be below rect1, as it has a lower z than the sibling
  // with z=1 rect2 must be on top of rect1, because it has the same z as the sibling, but is put at the end of all same z items
  // with z=2 rect2 must be on top of rect1, as it has a higher z than the sibling

  // the difference at QML renderer is, that when rect2 gets z=1, it still says behind rect1 as it was set initially! in cocos that is not easily possible, so mind this different behavior!
  // a workaround for same z values is, to put the items into different layers or just do not set the same z and be explicit about ordering

  Rectangle {
    id: rect2
    x: 40
    y: 40
    width: 100
    height: 100
    color: "red"

  Rectangle {
    id: rect1
    width: 100
    height: 100
    color: "green"
    z: 1

  Text {
    text: "green rect z: " + rect1.z + "\nred rect z:" + rect2.z
    anchors.centerIn: parent

  MouseArea {
    anchors.fill: parent
    onClicked: {
      // toggles the z order of rect2 from 0 to 2
      if(rect2.z === 2)

You can find the updated library for windows here, until the update is released:

Please make a backup of your VPlay.lib and VPlayd.lib in the folder \Desktop\V-PlaySDK\lib and copy the new ones from the zip file which come with support for z changing. Please note, that a clean of your build is required so the new library gets used. With the next engine update, this temporary libraries get replaced from the SDKMaintenance Tool.

Here are the most useful resources I found on this topic:

Please keep me updated if this solution works now.

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
create apps
create games
cross platform
native performance
3rd party services
game network
level editor
easiest to learn
biggest time saving
best support