Why my tiles became small?

Question

I'm currently doing a game that I will present for my software engineering subject in school. To be truth, I am not experienced in C# that's why I'm following this TileEngine tutorial. But when I'm in the part of adding the tiles to the game, my tile are rendered so small. I even used 256 x 256 image. Just like in the tutorial video.

You can see a screenshot of the problem here. Here is my code:

using System;
using System.Collections.Generic;
using System.Linq;
using Microsoft.Xna.Framework;
using Microsoft.Xna.Framework.Audio;
using Microsoft.Xna.Framework.Content;
using Microsoft.Xna.Framework.GamerServices;
using Microsoft.Xna.Framework.Graphics;
using Microsoft.Xna.Framework.Input;
using Microsoft.Xna.Framework.Media;

namespace TileEngine
{
    public class Game1 : Microsoft.Xna.Framework.Game
    {
        GraphicsDeviceManager graphics;
        SpriteBatch spriteBatch;

        List<Texture2D> tileTextures = new List<Texture2D>();

        int[,] tileMap = new int[,]
        {
            { 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, },
            { 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, },
            { 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, },
            { 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, },
            { 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, },
            { 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, },
            { 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, },
            { 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, },
            { 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, },
            { 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, },
            { 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, },
        };

        int tileWidth = 64;
        int tileHeight = 64;

        public Game1()
        {
            graphics = new GraphicsDeviceManager(this);
            Content.RootDirectory = "Content";
        }

        protected override void Initialize()
        {
            base.Initialize();
        }

        protected override void LoadContent()
        {
            // Create a new SpriteBatch, which can be used to draw textures.
            spriteBatch = new SpriteBatch(GraphicsDevice);

            Texture2D texture;

            texture = Content.Load<Texture2D>("Tiles/se_free_dirt_texture");
            tileTextures.Add(texture);

            texture = Content.Load<Texture2D>("Tiles/se_free_grass_texture");
            tileTextures.Add(texture);

            texture = Content.Load<Texture2D>("Tiles/se_free_ground_texture");
            tileTextures.Add(texture);

            texture = Content.Load<Texture2D>("Tiles/se_free_mud_texture");
            tileTextures.Add(texture);

            texture = Content.Load<Texture2D>("Tiles/se_free_road_texture");
            tileTextures.Add(texture);

            texture = Content.Load<Texture2D>("Tiles/se_free_rock_texture");
            tileTextures.Add(texture);

            texture = Content.Load<Texture2D>("Tiles/se_free_wood_texture");
            tileTextures.Add(texture);
        }

        protected override void UnloadContent() { }

        protected override void Update(GameTime gameTime)
        {
            if (GamePad.GetState(PlayerIndex.One).Buttons.Back == ButtonState.Pressed)
                this.Exit();

            base.Update(gameTime);
        }

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

            spriteBatch.Begin();

            int tileMapWidth = tileMap.GetLength(1);
            int tileMapHeight = tileMap.GetLength(0);

            for (int x = 0; x < tileMapWidth; x++)
            {
                for (int y = 0; y < tileMapHeight; y++)
                {
                    int textureIndex = tileMap[y, x];
                    Texture2D texture = tileTextures[textureIndex];

                    spriteBatch.Draw(
                        texture,
                        new Rectangle(x * tileWidth, y * tileHeight, tileMapWidth, tileMapHeight),
                        Color.White);
                }
            }

            spriteBatch.End();

            base.Draw(gameTime);
        }
    }
}

score 2 · Answer 1 · edited Nov 22 '13 at 17:24

You just need to replace 3rd line in below block:

spriteBatch.Draw(
    texture,
    new Rectangle(x * tileWidth, y * tileHeight, tileMapWidth, tileMapHeight),
    Color.White);

so that it is like 3rd line in next block:

spriteBatch.Draw(
    texture,
    new Rectangle(x * tileWidth, y * tileHeight, tileWidth, tileHeight),
    Color.White);

So problem was: in your code texture's rectangle width and height was set to your map's width and height - which appears to be much smaller than size of your texture's image.

Nick · Answer 2 · 2013-11-22T18:24:50.517

1

Change the width and height of each tile to make it bigger:

int tileWidth = 300;
int tileHeight = 300;

Basically add whatever number produces the size you please.

Also the rectangle is formed by adding start point + size so the size needs to match the points as well otherwise they will be drawn on top of each other.

If you want to render it in squares for example then titleWidth should be the same as tileMapWidth.

Currently it looks like it is the length of the matrix which is certainly wrong because that number is small (10) and would render small squares (10x10).

Therefore do this:

int tileMapWidth = tileWidth;
int tileMapHeight = tileHeight;

Instead of

int tileMapWidth = tileMap.GetLength(1);
int tileMapHeight = tileMap.GetLength(0);

edited Nov 22 '13 at 18:24

answered Nov 22 '13 at 16:03

Nick

2,877
2
33
62

1

Thanks for your quick response sir, i did what you tell me and this is the result http://postimg.org/image/iwrigei5x/ – user3022332 Nov 22 '13 at 16:07
It just add more gap between the tiles :( – user3022332 Nov 22 '13 at 16:20
Looks like the tiles are drawn, but the texture you use produces this result. Try replacing the texture with a simple colour with a simple border – Nick Nov 22 '13 at 18:15
Oh! Also, your rectangle function looks wrong. Please check my updated response – Nick Nov 22 '13 at 18:25

score 0 · Answer 3 · answered Nov 22 '13 at 18:30

0

you can try like this

width = 64 ' or texture.width
height = 64 ' or texture.height
pos = new vector2d(x * width , y * height)
spriteBatch.Draw(texture, pos, Color.White);

if x starts from 0 then first texture will be at 0,0 second at 64,0 ....

answered Nov 22 '13 at 18:30

Davor Mlinaric

1,989
1
19
26

Why my tiles became small?

3 Answers3