SpriteKit creating maze

Question

I try to create a maze with SpriteKit, my created maze gets printed like this to the console:

###########
# #     # #
# ### # # #
#     #   #
######### #
# #     # #
# # # ### #
# # #   # #
# # ### # #
#     #   #
###########

That looks fine, but the maze on the screen looks like this:

My code look like this:

for (int a = 0; a < size * 2 + 1; a++)
{
    for (int b = 0; b < size *2 + 1; b++)
    {
        MazeCell* cell;
        NSNumber* number = [[arrayMaze objectAtIndex:a]objectAtIndex:b];

        if (number.integerValue == 1)
        {
            cell = [[MazeCell alloc]initWithType:1 sort:0];
        }
        else
        {
            cell = [[MazeCell alloc]initWithType:0 sort:1];
        }

        if (number.integerValue == 1)
            printf("#");
        else
            printf(" ");

        cell.position = CGPointMake(startPoint.x+(16*a), startPoint.y+(16*b));
        [self addChild:cell];
    }
    printf("\n");
}

I know it should really be simple to print an array to a screen, but it seams like I am missing something... Thanks for your help :)

Answer 1

Yes. You are printing this rotated 90 degree clockwise. Maybe a solution were to compensate this rotation:

cell.position = CGPointMake(startPoint.x+16*b, size*2-startPoint.y+16*(size*2-a));

Answer 2

Think about it this way: you print a newline each time you increment a. So we can deduce that, for printing, a represents the y coordinate, and b represents the x coordinate.

On the other hand, when you compute the cell's position, you are using a to compute the cell's x coordinate and you are using b to compute the cell's y coordinate.

You basically have two options.

1. You can swap the variable between the for loops:

   for (int b = 0; b < size * 2 + 1; b++) {
       for (int a = 0; a < size * 2 + 1; a ++) {
           ...
   

2. You can swap the variables when computing the cell coordinates:

   cell.position = CGPointMake(startPoint.x+(16*b), startPoint.y+(16*a));
   

It's common, when iterating over a two-dimensional grid, to consider the outer loop to be the y-iterating loop. So my recommendation is that you make these changes:

1. Rename a to y.
2. Rename b to x.
3. Swap the variables when computing the cell coordinates.

Thus:

for (int y = 0; y < size * 2 + 1; y++) {
    for (int x = 0; x < size *2 + 1; x++) {
        MazeCell* cell;
        NSNumber* number = arrayMaze[y][x];

        if (number.integerValue == 1) {
            cell = [[MazeCell alloc] initWithType:1 sort:0];
        } else {
            cell = [[MazeCell alloc] initWithType:0 sort:1];
        }

        if (number.integerValue == 1) {
            printf("#");
        } else {
            printf(" ");
        }

        cell.position = CGPointMake(startPoint.x+(16*x), startPoint.y+(16*y));
        [self addChild:cell];
    }
    printf("\n");
}

Also, your print output puts the origin at the top and increases y coordinates downward. However, SpriteKit puts the origin at the lower left and increases y coordinates upward. (See “Using the Anchor Point to Position the Scene’s Coordinate System in the View” in Sprite Kit Programming Guide. If you want the Y axis to run in the same direction in your graphics as in your print output, set the scene's anchor point to its top left and set the yScale to -1. Alternatively, you can subtract each y coordinate from the height of the parent (as in Horvath's answer).