Forums

OverviewV-Play 1 SupportRepeating background › Reply To: Repeating background

OverviewV-Play 1 SupportRepeating background › Reply To: Repeating background
#5946

Christian
V-Play Team

OK thanks for your answer :)
I got it to work using a repeater, only one problem, how can I clip the images to the size of the parent item?
Because the last “tile” is drawn outside of it’s parent item, so the background gets bigger than the item it is drawn for. I tries using “clip: true” for the image, but that didn’t change anything.

Source code:
TiledBackground.qml

Item {
id: item
property string imgSource
property int tileWidth: 24
property int tileHeight: 24

Repeater {

id: repeater
property int rows: Math.ceil(item.height / item.tileWidth)
property int cols: Math.ceil(item.width / item.tileHeight)
model: rows * cols

BackgroundImage {
property int col: index % repeater.cols
property int row: Math.floor(index / repeater.cols)
x: item.tileWidth * col
y: item.tileHeight * row
width: item.tileWidth//col < repeater.cols - 1 ? item.tileWidth : (item.width % item.tileWidth)
height: item.tileHeight//row < repeater.rows - 1 ? item.tileHeight : (item.height % item.tileHeight)
source: item.imgSource

clip: true
z: -1
}
}
}

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