Jump to content
This forum will be closing down. Please move to the respective dedicated project forums.

moving a grid


espace
 Share

Recommended Posts

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

 

Link to comment
Share on other sites

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.

Link to comment
Share on other sites

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
}

 

Link to comment
Share on other sites

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
}

 

Link to comment
Share on other sites

 Share

  • Recently Browsing   0 members

    • No registered users viewing this page.
×
×
  • Create New...