Tile different Images

[alflashy]

Hi 

I am new to Phaser and building my first game with Phaser CE.

I am trying to build rows and column of images that will dragged and drop. I am having hard time understanding various ways to build tiles and can't find any resources of exactly what I am doing.

So I build squares in row but don't know how can I lay it in multiple rows like tiling and then how to put the images inside the thumbnailBg.Can someone please advice.

var thumbnails; var thumbnailBg;

var thumbnailsHolder = this.game.add.group();

thumbnailsHolder.x = 400; thumbnailsHolder.y = 100

for(var i=0; i<imageName.length; i++){

this.createThumb(thumbnailBg, i);

// thumbnailBg.x = 100*i;

if(imageName[i].indexOf('_mask') < 0 && imageName[i] !== 'bw_1'){

thumbnails = this.add.sprite(100*i, 0, imageName[i], null, thumbnailsHolder);

}

 

}

 function createThumb (thumbnailBg, i){

console.log('thumbCreator');

thumbnailBg = this.game.add.graphics(100*i, 0);

thumbnailBg.lineStyle(2, 0x276998, 0.6);

thumbnailBg.beginFill(0xFFFFFF);

thumbnailBg.drawRoundedRect(330, 50, 100, 100, 10); // draw a rounded rect mask

thumbnailBg.endFill();

}