Drawing the board game Ludo in XNA using 2Darrays

Question

I’m a beginner in C# and XNA, and I am currently trying to make the board game LUDO. I have done some java programming before and are common with object oriented programming. So the thing that I am stuck at, at this moment is to draw the sprites of the “board”.

I made all the sprites I am using myself in MS paint, all the different sprites (26 different sprites) have all the same size 45px X 45px. What I was thinking was to make a 2Darray that contains of numbers, these numbers will refer to the specific sprite in a texture array. Example: Here is a link to the type of board I am setting up: http://upload.wikimedia.org/wikipedia/commons/thumb/6/6c/Klassisk_ludo-spill.JPG/220px-Klassisk_ludo-spill.JPG

My 2Darray is setup is as follow: it starts on the top of the board and then goens from left to right. So this is how i made my 2Darray:

//Create the full grid of the board, where the numbers refer to the sprites that is supposed to be
    // placed here. the array starts from the top of the bord from left to right and then goes downwards.
    int[,] myArray = new  int[,] {{3,3,3,3,3,3,4,4,4,0,0,0,0,0,0},
                                  {3,24,25,23,25,3,4,0,0,0,12,13,12,13,0},
                                  {3,22,23,22,23,3,4,0,4,0,10,11,10,11,0},
                                  {3,24,25,23,25,3,4,0,4,0,12,13,12,13,0},
                                  {3,22,23,22,23,3,4,0,4,0,10,11,10,11,0},
                                  {3,3,3,3,3,3,4,0,4,0,0,0,0,0,0},
                                  {4,3,4,4,4,4,6,0,5,4,4,4,4,4,4},
                                  {4,3,3,3,3,3,3,9,1,1,1,1,1,1,4},
                                  {4,4,4,4,4,4,7,2,8,4,4,4,4,1,4},
                                  {2,2,2,2,2,2,4,2,4,1,1,1,1,1,1},
                                  {2,20,21,20,21,2,4,2,4,1,16,17,16,17,1},
                                  {2,18,19,18,19,2,4,2,4,1,14,15,14,15,1},
                                  {2,20,21,20,21,2,4,2,4,1,16,17,16,17,1},
                                  {2,18,19,18,19,2,2,2,4,1,14,15,14,15,1},
                                  {2,2,2,2,2,2,4,4,4,1,1,1,1,1,1}};

like i said these numbers are suppose to correspond to a spesific sprite in another texture array. Here is a overview of what number corresponds to what sprite:

textureArray = newTexture2D[26];
0 = blueblock;
1 = redblock;
2 = yellowBlock;
3 = greenBlock;
4 = whiteBlock;
5 = blueredBlock;
6 = greenblueBlock;
7 = greenyellowBlock;
8 = yellowredBlock;
9 = xcenterBlock;
10 = BlueBottomLeftBlock;
    11 = BlueBottomRightBlock;
    12 = BlueTopLeftBlock;
    13 = BlueTopRightBlock;
    14 = RedBottomLeftBlock;
    15 = RedBottomRightBlock;
    16 = RedTopLeftBlock;
    17 = RedTopRightBlock;
    18 = YellowBottomLeftBlock;
    19 = YellowBottomRightBlock;
    20 = YellowTopLeftBlock;
    21 = YellowTopRightBlock;
    22 = GreenBottomLeftBlock;
    23 = GreenBottomRightBlock;
    24 = GreenTopLeftBlock;
    25 = GreenTopRightBlock;

At the moment i have made a content manager in my background class that looks like this:

// ContentManager that is loadedes textures and position for the objects in to game1
    public void LoadContent(ContentManager content)
    {
        this._BlueBlock = content.Load<Texture2D>("blue-block");
        this._RedBlock = content.Load<Texture2D>("red-block");
        this._YellowBlock = content.Load<Texture2D>("yellow-block");
        this._GreenBlock = content.Load<Texture2D>("green-block");
        this._WhiteBlock = content.Load<Texture2D>("white-block");
        this._BlueRedBlock = content.Load<Texture2D>("blue-red-block");
        this._GreenBlueBlock = content.Load<Texture2D>("green-blue-block");
        this._GreenYellowBlock = content.Load<Texture2D>("green-yellow-block");
        this._YellowRedBlock = content.Load<Texture2D>("yellow-red-block");
        this._XCenterBlock = content.Load<Texture2D>("x-center-block");
        this._BlueBottomLeftBlock = content.Load<Texture2D>("blue-bottomleft-block");
        this._BlueBottomRightBlock = content.Load<Texture2D>("blue-bottomright-block");
        this._BlueTopLeftBlock = content.Load<Texture2D>("blue-topleft-block");
        this._BlueTopRightBlock = content.Load<Texture2D>("blue-topright-block");
        this._RedBottomLeftBlock = content.Load<Texture2D>("red-bottomleft-block");
        this._RedBottomRightBlock = content.Load<Texture2D>("red-bottomright-block");
        this._RedTopLeftBlock = content.Load<Texture2D>("red-topleft-block");
        this._RedTopRightBlock = content.Load<Texture2D>("red-topright-block");
        this._YellowBottomLeftBlock = content.Load<Texture2D>("yellow-bottomleft-block");
        this._YellowBottomRightBlock = content.Load<Texture2D>("yellow-bottomright-block");
        this._YellowTopLeftBlock = content.Load<Texture2D>("yellow-topleft-block");
        this._YellowTopRightBlock = content.Load<Texture2D>("yellow-topright-block");
        this._GreenBottomLeftBlock = content.Load<Texture2D>("green-bottomleft-block");
        this._GreenBottomRightBlock = content.Load<Texture2D>("green-bottomright-block");
        this._GreenTopLeftBlock = content.Load<Texture2D>("green-topleft-block");
        this._GreenTopRightBlock = content.Load<Texture2D>("green-topright-block");



    }

And this is where I stumble up on my main problem. Should I load the content like this? And if so how am I supposed to refer to the texture in the textureArray so that the numbers correspond with the textures they are supposed to have in my 2DArray?

I was thinking of making a nested for loop that places all the sprites in the right position since the board is 15 X 15 sprites (a total of 225). And also should I use a foreach statement in my “public void Draw(SpriteBatch spriteBatch)” metod?

I really hope someone can give me some pointers they will be very much appreciated!

Best regards!

Would be easier to change the colour of these sprites rather than have all 26 different block types ? Also rotating the sprites may cut down the number as well ? — TheKingDave

Blau Blau · Accepted Answer · 2013-03-29T20:02:17

I have coded it for fun without bitmaps... :)

https://dl.dropbox.com/u/59983887/ludo.rar

 protected override void Draw( GameTime gameTime ) {
        GraphicsDevice.Clear( Color.CornflowerBlue );

        var ss = 3 * BLOCK_TOTAL_SIZE + BLOCK_GAP;
        var bounds = new Rectangle( S, S, ss, ss );                         // Triangle background
        spriteBatch.Begin( SpriteSortMode.Deferred, BlendState.Opaque );
        spriteBatch.Draw( white, bounds, BackColor );
        spriteBatch.End( );

        Matrix transform = Matrix.Identity;

        for (int i = 0; i < 4; i++) {
            // Player area by color
            spriteBatch.Begin( SpriteSortMode.Deferred, BlendState.Opaque, null, null, null, null, transform );
            DrawPlayerAreaByColor( colors[i] );
            spriteBatch.End( );

            transform = Matrix.CreateRotationZ( -MathHelper.PiOver2 ) * Matrix.CreateTranslation( 0, BLOCK_TOTAL_SIZE * 15 - BLOCK_GAP, 0 ) * transform; 

            // Triangle
            for (int j = 0; j < vertex.Length; j++) vertex[j].Color = colors[i];
            basicEffect.World = Matrix.CreateRotationZ( -i * MathHelper.PiOver2 ) * Matrix.CreateTranslation( bounds.Center.X, bounds.Center.Y, 0 );
            basicEffect.CurrentTechnique.Passes[0].Apply( );
            GraphicsDevice.DrawUserPrimitives<VertexPositionColor>( PrimitiveType.TriangleList, vertex, 0, 1 );
        }


        base.Draw( gameTime );
    }

    void DrawPlayerAreaByColor( Color color ) {
        Rectangle bounds = new Rectangle( 0, 0, S, S );
        spriteBatch.Draw( white, bounds, color );                       // Big area
        bounds.Inflate( -BLOCK_SIZE, -BLOCK_SIZE );
        spriteBatch.Draw( white, bounds, BackColor );                   // Background inside big area
        bounds.Inflate( -BLOCK_GAP, -BLOCK_GAP );
        spriteBatch.Draw( white, bounds, Color.White );                 // White area inside big area

        for (int x = 0; x < 2; x++)
            for (int y = 0; y < 2; y++) {
                var mw = bounds.Width - 2 * BLOCK_SIZE - 4 * BLOCK_GAP;
                var mh = bounds.Height - 2 * BLOCK_SIZE - 4 * BLOCK_GAP;
                mw /= 3;
                mh /= 3;
                var mb = new Rectangle( bounds.X + mw, bounds.Y + mh, BLOCK_TOTAL_SIZE, BLOCK_TOTAL_SIZE );
                mb.X += x * ( mw + BLOCK_SIZE + 2 * BLOCK_GAP );
                mb.Y += y * ( mh + BLOCK_SIZE + 2 * BLOCK_GAP );

                spriteBatch.Draw( white, mb, BackColor );
                mb.Inflate( -BLOCK_GAP, -BLOCK_GAP );
                spriteBatch.Draw( white, mb, color );
            }

        bounds = new Rectangle( 0, S, S, 3 * BLOCK_TOTAL_SIZE + BLOCK_GAP );
        spriteBatch.Draw( white, bounds, BackColor );
        for (int x = 0; x < 6; x++)
            for (int y = 0; y < 3; y++) {
                bounds = new Rectangle( x * BLOCK_TOTAL_SIZE, S + BLOCK_GAP + y * BLOCK_TOTAL_SIZE, BLOCK_SIZE, BLOCK_SIZE );
                spriteBatch.Draw( white, bounds, ( x == 1 && y == 0 || x > 0 && y == 1 ) ? color : Color.White );
            }
    }

Drawing the board game Ludo in XNA using 2Darrays

2 Answers