2 Replies - 6176 Views - Last Post: 10 February 2011 - 11:43 AM

#1 Mallaboro  Icon User is offline

  • D.I.C Head

Reputation: 0
  • View blog
  • Posts: 55
  • Joined: 26-April 10

Drawing only a part of an image to screen

Posted 08 February 2011 - 11:39 AM

Hiya. I'm trying to make some sort of 2D birds-eye-view tile engine in C# XNA.
So far everythings working fine.
I can successfully select the tile I wish to place.
My problem is I've an image with multiple tiles on it and I don't know how to draw the selected tile to screen.

Sorry if this is considered "asking you to give me code". I did previous look for tutorials on how to do this and the only help I could find was [Hidden]
        Texture2D YourCharacter;
        Point frameSize = new Point(118, 404); //Size of graphic to draw on screen taken
        Point currentFrame = new Point(0, 0);
        Point sheetSize = new Point(3, 4); //3 along, 4 down (sprite sheet)
        Vector2 pos1 = Vector2.Zero;

        public Level_1(Texture2D yourCharacter)
        {
            YourCharacter = yourCharacter;
        }

        public void Initialize()
        {

        }

        public void Update(GameTime gameTime)
        {
            #region
            KeyboardState keyboardState = Keyboard.GetState();
            if (keyboardState.IsKeyDown(Keys.Up))
            {
                pos1.Y -= speed1;
                currentFrame.Y = 0;
                timeSinceLastFrame += gameTime.ElapsedGameTime.Milliseconds;
                if (timeSinceLastFrame > millisecondsPerFrame)
                {
                    timeSinceLastFrame -= millisecondsPerFrame;
                    if (currentFrame.Y >= sheetSize.Y)
                        currentFrame.Y = 0;
                    {
                        ++currentFrame.X;
                        if (currentFrame.X >= sheetSize.X)
                        {
                            currentFrame.X = 0;

                        }
                    }
                }

            }

[/Hidden] ^ but that's just sprite animation.

Posted Image

Is This A Good Question/Topic? 0
  • +

Replies To: Drawing only a part of an image to screen

#2 Fib  Icon User is offline

  • D.I.C Addict
  • member icon

Reputation: 162
  • View blog
  • Posts: 554
  • Joined: 12-March 09

Re: Drawing only a part of an image to screen

Posted 08 February 2011 - 01:44 PM

Hello, welcome to DIC. I hope you enjoy your stay :)

In order to only draw a certain portion of a texture to the screen, you need to pass a "source rectangle" to the SpriteBatch.Draw() method.

A source rectangle is a rectangle that has the x, y, width, and height set to the portion inside of the texture you want drawn.

So if you have a sprite that is 32 by 32 pixels, and is 10 pixels over, and 20 pixels down, then your source rectangle would be this:
Rectangle sourceRect = new Rectangle(10, 20, 32, 32);



You would then pass sourceRect to the correct parameter in the SpriteBatch.Draw() method.

I hope this helps you. If you still don't understand, then don't hesitate to ask more questions.

This post has been edited by Fib: 08 February 2011 - 01:46 PM

Was This Post Helpful? 1
  • +
  • -

#3 bonyjoe  Icon User is offline

  • D.I.C Addict
  • member icon

Reputation: 178
  • View blog
  • Posts: 548
  • Joined: 08-September 10

Re: Drawing only a part of an image to screen

Posted 10 February 2011 - 11:43 AM

You will be able to form the rectangle from the current points you have declared.

Rectangle source = new Rectangle(currentFrame.X * frameSize.X, currentFrame.Y * framesize.Y, framesize.X, framesize.Y


assuming that framesize is the size of a tile

then when the current frame is (0,0) the rectangle is (0, 0, 118, 404)
when it is (1,1) the rectangle is (118, 404, 118, 404)
Was This Post Helpful? 0
  • +
  • -

Page 1 of 1