Forums

OverviewV-Play 1 SupportPerformance: spritesheets and particles › Re: Performance: spritesheets and particles

OverviewV-Play 1 SupportPerformance: spritesheets and particles › Re: Performance: spritesheets and particles
#4106

Christian
V-Play Team

Hi,
yes this is expected behavior, because all sprites from the same spritesheet are added on top of all other sprites by default. To change that, you can put a SpriteBatchContainer wherever you want to:
http://doc.v-play.net/qml-components-vplay1-spritebatchcontainer.html

We did the same with Squaby for example, where you can have a look at the source code.

So please note that z-ordering does only work for the sprites within the same sprite sheets, and all sprites are drawn in the SpriteBatchContainer.

If placing the SpriteBatchContainer manually does not work, here is another approach:
Put all sprites of your game into the same spritesheet. That way, z-ordering of them works because they are drawn correctly. If you exceed the maximum texture size of 2048×2048 if you put all into one spritesheet, you could separate the graphics into different sprite sheets, e.g. one for the overlay menus, one for the game graphics, etc.

Please also mention to clean your build when using the updated library with z changing support of sprite sheets from the dropbox link above. For testing if the z-ordering works, you can use this qml file and use the all-*.png and all-*.json files from Squaby demo:


import QtQuick 1.1
import VPlay 1.0

GameWindow {
  Scene {
    id: scene

    Rectangle {
      anchors.fill: parent
      color: "lightgrey"
    }

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

    // NOTE: in contrast to the ZChangeTest, the behavior in cocos renderer is exactly the same as in QML what is desired!
    // so even when z changes later on to the same value, the twenty is put on top of the ten image!

    SingleSpriteFromFile {
      id: ten
      x: twenty.width/2
      y: twenty.height/2

      filename: "img/all-sd.json"
      source: "10.png"

      translateToCenterAnchor: false

      z:1
    }
    SingleSpriteFromFile {
      id: twenty

      filename: "img/all-sd.json"
      source: "20.png"

      translateToCenterAnchor: false

      z:1
    }

    // this simulates the behavior, when the Sprite is put as child of an entity, and the entity z order changes
    // this also has to change the sprite z order then!
    // so the test must show the same z ordering of both the left and right 2 sprites
    Item {
      id: tenFolded
      x: scene.width-twenty.width*1.5
      y: twenty.height/2

      z: 1
      SingleSpriteFromFile {

        filename: "img/all-sd.json"
        source: "10.png"
        translateToCenterAnchor: false
      }
    }
    Item {
      id: twentyFolded
      z: 1
      x: scene.width - twenty.width

      SingleSpriteFromFile {
        filename: "img/all-sd.json"
        source: "20.png"
        translateToCenterAnchor: false
      }
    }

    Text {
      text: "10 z: " + ten.z + "\n20 z:" + twenty.z
      anchors.centerIn: parent
    }

    MouseArea {
      anchors.fill: parent
      onClicked: {

        // toggles the z order of twenty from 0 to 2
        if(twenty.z === 2)
          twenty.z=0
        else
          twenty.z++

        // also change the entity-simulation
        if(twentyFolded.z === 2)
          twentyFolded.z=0
        else
          twentyFolded.z++
      }
    }
  }
}

Cheers,
Chris

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