How can I rotate an array of images by 90 degrees?

Question

I am creating Blokus, and I am creating the game pieces by creating an array that draws a single, one tile image to create a full piece (i.e. a T would consist of 5 tile images placed into an array, which is not always a perfect square), I can move them around the board, but when it comes to rotating the piece, I am not sure what to do.

"T" piece button code

private void TButton_Click(object sender, EventArgs e)
    {
        //Tile ID 16

        tileWidth = 3;
        tileHeight = 3;
        generateNewPiece(16);
    }

Relevant portion of generating the piece

    public void generateNewPiece(byte tileNum)
    {
        pieceArray = new Cell[tileWidth, tileHeight];
        buttonClicked = tileNum;

        switch (tileNum)
        {
            case 16:
                pieceArray[0, 0] = new Cell(false);
                pieceArray[0, 1] = new Cell(true, currentPlayer, tileImages[currentPlayer], 40, 0);
                pieceArray[0, 2] = new Cell(false);
                pieceArray[1, 0] = new Cell(false);
                pieceArray[1, 1] = new Cell(true, currentPlayer, tileImages[currentPlayer], 40, 40);
                pieceArray[1, 2] = new Cell(false);
                pieceArray[2, 0] = new Cell(true, currentPlayer, tileImages[currentPlayer], 0, 80);
                pieceArray[2, 1] = new Cell(true, currentPlayer, tileImages[currentPlayer], 40, 80);
                pieceArray[2, 2] = new Cell(true, currentPlayer, tileImages[currentPlayer], 80, 80);
                pieceGenerated = true;

                break;
        }

Cell class

public class Cell
{

    public bool hasImage;
    public int color;
    public int x, y;
    public Image cellImage;
    //Resources.iconname

    public Cell()
    {
        this.hasImage = false;
        this.color = 0;
        this.cellImage = null;
        this.x = 0;
        this.y = 0;
    }

    public Cell(bool hasImage)
    {
        this.hasImage = hasImage;
    }

    public Cell(bool hasImage, int x, int y)
    {
        this.hasImage = hasImage;
        this.x = x;
        this.y = y;
    }

    public Cell(bool hasImage, int color, Image image, int x, int y)
    {
        this.hasImage = hasImage;
        this.color = color;
        this.cellImage = image;
        this.x = x;
        this.y = y;
    }

}

Single Tiles

Example T

I don't suppose you could use WPF and take advantage of `RenderTransform`... — BradleyDotNET, Nov 19 '14 at 20:19

score 0 · Accepted Answer · edited May 23 '17 at 11:49

0

Your problem is really how to rotate a two dimensional array by 90 degrees (you would need to fix up the x,y properties as well). A good implementation is provided here.

Solution:

int[,] array = new int[4,4] {
    { 1,2,3,4 },
    { 5,6,7,8 },
    { 9,0,1,2 },
    { 3,4,5,6 }
};

int[,] rotated = RotateMatrix(array, 4);

static int[,] RotateMatrix(int[,] matrix, int n) {
    int[,] ret = new int[n, n];

    for (int i = 0; i < n; ++i) {
        for (int j = 0; j < n; ++j) {
            ret[i, j] = matrix[n - j - 1, i];
        }
    }

    return ret;
}

edited May 23 '17 at 11:49

Community

1
1

answered Nov 19 '14 at 20:27

bigtlb

1,512
10
16

The array will not always be a perfect square, should have mentioned that in the original question. – Flak Nov 19 '14 at 20:36
If I understand that part of the game, the shapes are made of of a 3x3 coordinate system, with some of them being filled in and some not. This will rotated both the filled and empty spaces around. Essentially transform the pieceArray. – bigtlb Nov 19 '14 at 20:40
The biggest piece is 5x1, so it would make the coordinate system have to be 5x5 to accommodate the longest piece for both of it's possible rotations. I assume to make your solution work with that, it would be as simple as changing `RotateMatrix(array, 4);` to a 5? – Flak Nov 19 '14 at 21:46
Sounds right. Rotating a matrix 90 degrees presupposes that it has equal dimensions, otherwise you will lose some data. – bigtlb Nov 19 '14 at 22:06
For a 5X1 Piece it is a special case. It only has two orientations, and you can get those just by transposing the x, and y indexers. [0,0][1,0][2,0][3,0][4,0] is one direction, and [0,0][0,1][0,2][0,3][0,4] is the other orientation. – bigtlb Nov 19 '14 at 22:08

How can I rotate an array of images by 90 degrees?

1 Answers1