Forums

OverviewV-Play 1 Support › Repeating background

Viewing 7 posts - 1 through 7 (of 7 total)
  • Author
    Posts
  • #5930

    Christian
    V-Play 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 ๐Ÿ˜€

    #5932

    Christian
    V-Play 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

    #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
    }
    }
    }

    #5947

    Alex
    V-Play 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

     

    #5948

    Alex
    V-Play 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

     

    #5964

    Alex
    V-Play 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

    #6011

    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://v-play.net/developers/forumsย <query> :)

     

Viewing 7 posts - 1 through 7 (of 7 total)

RSS feed for this thread

You must be logged in to reply to this topic.

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