[ChristianFelgo Team]

Hi,

I’m trying to make a background for the levels in my game, and would like to have one image that is repeated until it fits the whole level.

Normally this would be done with Image’s property fillMode, like in this code:

    Image {
        anchors.fill: parent
        source: "../resources/bg-hd.png"
        fillMode: Image.Tile
    }

But it seems that fillMode is not supported by the cocos 2D renderer?

 

Cheers, Chrisu

 

EDIT: Seems like this was just the 1000th post in this forum 😀

[ChristianFelgo Team]

Hi Chrisu,

woohoo – congrats to the 1000th post!!! You well deserve this honor 😀

See the twitter & facebook accounts for some surprise 😉

Regarding your question: yes you are right, the fillMode property is not supported. For performance reasons, I would recommend to use a sprite sheet component like SingleSpriteFromFile, and either use the Repeater element together with a Column, Row or Grid, depending on your requirements. Alternatively you could also create and position the images from JavaScript of course.

Cheers, Chris

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


[AlexFelgo Team]

Hi Chrisu,

the correct way of using clip in this case would be applying it to the Item, unfortunately this is not fully supported at the moment.

A workaround that comes to my mind would be this:

    Item {
      id: item
      property int rows : 1
      property int cols : 1
      property string imgSource
      property double tileWidth: width/cols
      property double tileHeight: height/rows

      Repeater {

        id: repeater
        model: item.rows * item.cols

        Image {
          property int col: index % item.cols
          property int row: Math.floor(index / item.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
          z: -1
        }
      }
    }

This is of course not fully flexible, as you will have to determine the number of rows and cols yourself, and maybe it will stretch/collapse your tiles. But if this is no problem, maybe it’s good enough for your use case?

Cheers,
Alex

 

[AlexFelgo Team]

This would be a little more flexible, but still having the possible stretch/collapse issue. The idea is that you provide the tileWidth and tileHeight to determine the number of tiles, just like in your code, but the actual tiles get adjusted a little bit (if needed) to fit in the available space.

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

      Repeater {

        id: repeater
        property int rows: Math.round(item.height / item.tileWidth)
        property int cols: Math.round(item.width / item.tileHeight)
        property double rowWidth : item.width/cols
        property double colHeight : item.height/rows
        model: rows * cols

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

Cheers,
Alex

 

[AlexFelgo Team]

Another possibility would be using a PolygonItem with its texture property, it will automatically repeat and crop the texture tiles if necessary.

Cheers,
Alex

[surya]

Ah! I was looking exactly for this! Since the forum has crossed 1000 posts, you should put a search box somewhere. It’d be a pain to enter this every time in Google:

site: https://felgo.com/developers/forums <query> :)