moving a grid

[espace]

Hi,

I have the file background.js (below) and in use it to draw some elements of my background. The problem is with my grid.

My grid is correctly drawing in my stage but i can't move his position. By default the origin is (0,0). i put grid.x=400 but it's still to x=0.

How do you move it ?

I try also to build my grid with the prototype function but i don't know do it...

 

//background.js
//e for background

function draw(e,game,nameA,posx,posy,wi,he,color,valueAlpha) {  
	var e=game.add.sprite(0,0,nameA);
	e.x=posx;
	e.y=posy;
	e.width=wi;
	e.height=he;
	e.tint=color;
	e.alpha=valueAlpha
return e
}

//g for game, w for width, h for height
//color like white and red is on a separate file
function Grid(e,g,row,line,w,h) {
	//var group=g.add.group()
	var grid=[];
	for (var j = 0; j < line; j++) {
		grid[j] = [];
		for (var i = 0; i < row; i++) {
			grid[j][i] = draw(e,g,"rect",0,0,w,h,white,1)
				; 
			grid[j][i].x = i*(w+1)
				grid[j][i].y =j*(h+1)
		};
	};
	grid.x=400
return grid
}


function drawE(g,e) {
	var e=[]
		e.player=draw(e,g,"rect",0,0,320,480,red,1)
		e.papers=Grid(e,g,1,9,10,10,80,240)
	return e
}

//game.js

var theGame = function(game){
	background = null
}
theGame.prototype = {
  	create: function(){
		background=drawE(this.game,this.background)
	}
}

 

[Cudabear]

I find this code really confusing, what are you trying to accomplish here?

That said, the problem is your "grid" object is basically just a double-indexed array of Phaser sprite objects.  If you set a property "x" on the grid object, you are really just adding it to that array.

If you want to update the X coordinate of your grid, you'll have to loop through it and update the X coordinate of every single sprite within the double-indexed array.  Sort of like how you're creating it.

[espace]

Is not possible to consider the grid as an object or a group ??

[espace]

i know to put a grid  at a position (posx and posy in my snippet below) but if i want to move all the grid.

in an update function (my example don't work), how do you do  ?

is it not possible to put all the grid in a group and after move this group ?

//to draw a simple sprite
function draw(square,game,nameA,posx,posy,wi,color,valueAlpha) {  
	var square=game.add.sprite(0,0,nameA);
	square.x=posx;
	square.y=posy;
	square.width=wi;
	square.height=wi;
	square.tint=color;
	square.alpha=valueAlpha
return square
}

function Grid(square,g,row,line,w,posx,posy) {
  var grid=[];
    for (var j = 0; j < line; j++) {
      grid[j] = [];
	for (var i = 0; i < row; i++) {
	  grid[j][i] = draw(square,game,"rect",0,0,wi,white,1)	
	  grid[j][i].x = posx+(i*(w+1))
	  grid[j][i].y = posy+(j*(h+1))
        };
    };
  return grid
}

var array = Grid(array,game,1,9,30,200,300)

update: function(){
array.y+=10
}

 

[espace]

finded by myself in reading the examples of the site :).

var game = new Phaser.Game(800, 600, Phaser.CANVAS, 'phaser-example', { preload: preload, create: create });

var G;
var enemies;

function preload() {

    game.load.image('ufo', 'assets/rect.png');
    
}
// create group
function create() {
    enemies = game.add.group();

// create a sprite that be reuse with the grid
function draw() {

var sprite=game.add.sprite(0,0,'ufo')
sprite.width=10
sprite.height=10
return sprite
}

// create a grid 
G=[];
for (var j=0; j < 5 ; j++ ) {
    G[j] = [];
    for ( var i=0 ; i < 5 ; i++ ) {
        G[j][i] = draw() 
        G[j][i].x=j*20
        G[j][i].y=i*20
        enemies.add(G[j][i]);
    }
}

//move the group here and the grid
enemies.x=400
enemies.y=400
}

 

[Cudabear]

Bingo, groups are the key here.  Glad you figured it out.

[espace]

Thanks have a nice day.