Need help to delay a for loop

Help
#1 
for (col in -1 ...7)
{
	for (row in -1 ...9) 
		{
		_tiles = new NewTile();
		_tiles.y = row * 60;
		_tiles.x = col * 60 - 20;
		addChild(_tiles);
		_tileList.push(_tiles);
	}
}

this builds a grid off tiles and i was trying to delay the addchild so they each pop in one after the other i’ve tried a lot off thing but cant seem to work it out any help would be very appreciated thanks :slightly_smiling:

#2

Calling addChild in a for loop like that won’t delay it. You need to either use an ENTER_FRAME callback to have a game loop, or use another callback mechanism.

#3

what do you mean by “each pop in one after the other” ?

#4

this sets up a grid of _tiles which is a class with a bitmap that is 60x60 that all appear at the same time. i would like them to appear one at a time starting from the top left corner (as in the array this will be 1 i think. . . ) and then work there way down left to right row by row. im really not sure this is the best way to go about this but its what ive manage to work out :slightly_smiling:

#5

listening for Event.ENTER_FRAME event, which call a function to check/test/update your currents col/row can be a solution.
but you have no true controls of the speed of appearance (in HTML5 60FPS, in Flash 30FPS)

the best for controlling the speed of appearance may be with openfl.utils.Timer.

#6

Or haxe.Timer, which would be easier to use.

for (col in -1 ...7)
{
	for (row in -1 ...9) 
	{
		_tiles = new NewTile();
		_tiles.y = row * 60;
		_tiles.x = col * 60 - 20;
		_tileList.push(_tiles);
                
                haxe.Timer.delay(addChild.bind(_tiles), (col + row + 2) * 250);
	}
}

This makes the tiles appear diagonally from top left to bottom right. New tiles appear every 250ms (one quarter of a second).

You could tweak the formula to get different results:

//One full column appears every 250ms.
haxe.Timer.delay(addChild.bind(_tiles), (col + 1) * 250);

//Tiles appear one at a time, going left-to-right and then top-to-bottom.
haxe.Timer.delay(addChild.bind(_tiles), (col + 1 + (row + 1) * 8) * 250);

//Tiles appear one at a time, going top-to-bottom and then left-to-right.
haxe.Timer.delay(addChild.bind(_tiles), ((col + 1) * 10 + row + 1) * 250);
2 Likes
#7

rad thank you so much works perfectly :slightly_smiling: