Can I set the group width?

[sinanqd10]

Hi all,

 

I want to set the group width in order to wrap my objects,

 

what method should I use?

 

Can anyone show me a example on jsfiddler?

[hellspawn_bg]

I am not sure that you can set group width. The group is used to simply logically group objects having the same behaviour.

[lewster32]

Yeah, a group's dimensions are derived from what's inside it - you only set its position normally. If you want objects to wrap, you'll have to put some custom logic in your code to explicitly handle this; ideally by extending Phaser.Group like in this example: http://jsfiddle.net/lewster32/skhsbkk4/

[sinanqd10]

@lewster32,

for my purpose is that,

I have created sprite in order

Eg: sprite 1 sprite 2 sprite 3 sprite 4 then sprite 5 i want to break the line into second row. Therefore, can i get number of sprites as total number and specific frame of sprite in order to count the different frame in the group?

Could you show example related to my question? Thanks in advance bro.

[lewster32]

This is basically a grid layout, which is usually done with nested for loops for rows and columns, and a value for the grid/cell size:

var sprite, gridSize = 32;for (var rows = 0; rows < 4; rows++) {  for (var cols = 0; cols < 6; cols++) {    sprite = game.add.sprite(rows * gridSize, cols * gridSize, 'sprite');  }}

[sinanqd10]

@lewster32,

Eg : first row contains

sprite 1 sprite 2 sprite 2 sprite 3

and the second row is

Sprite 2 sprite 1 sprite 1 sprite 3

Can i count the number sprite 2 in the row?

[lewster32]

Your best bet here is to create a separation between your data and what you render. Maybe start off by defining your grid as a 2-dimensional array:

var grid = [  [1, 2, 2],  [2, 1, 3],  [1, 2, 3],  [3, 2, 1]];

Then create a function which renders the grid:

var gridGroup = game.add.group();function generateGrid(grid, size) {  size = size || 32; // default size of 32 pixels for the grid  var col, row;  for (row = 0; row < grid.length; row++) {    for (col = 0; col < grid[row].length; col++) {      // draw the sprite with the frame number specified in the appropriate grid cell      gridGroup.create(row * size, col * size, 'sprite', grid[row][col]);    }  }}generateGrid(grid, 32);

If you need to update the grid afterwards, you'll probably want to create another 2-dimensional array to store the created sprites in the same way, and then just change their .frame or .frameName as appropriate, rather than destroy and recreate the entire group.

[sinanqd10]

@lewster32, thanks you bro.

[lewster32]

Forgot to answer your other question - to work out how many of a particular number is in a row or column, try something like this:

function countInRow(grid, row, number) {  return grid[row].filter(function(n) { return n === number; }).length;}function countInColumn(grid, column, number) {  var found = 0;  for (var row = 0; row < grid.length; row++) {    if (grid[row][column] === number) {      found++;    }  }  return found;}

Remember arrays are zero indexed, so the first row or column is 0, not 1!