Page 1 of 3 123 LastLast
Results 1 to 10 of 26
  1. #1
    Join Date
    Jun 2008
    Posts
    38

    Vertical Scrolling Background Issues

    I'm currently working on a 2D shooter that requires a vertical scrolling background and am having difficulty getting VS to draw and scroll the background images properly. I've combed through the code for about 2 hours now and don't see where I'm going wrong. Below is all of the code in a test project using the preferred 640x480 resolution. Any help is much appreciated!!

    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;
    using Microsoft.Xna.Framework.Net;
    using Microsoft.Xna.Framework.Storage;
    
    namespace WindowsGame6
    {
        public class Game1 : Microsoft.Xna.Framework.Game
        {
            GraphicsDeviceManager graphics;
            SpriteBatch spriteBatch;
    
            Sprite background1;
            Sprite background2;
            Sprite background3;
            Sprite background4;
            Sprite background5;
    
            public Game1()
            {
                graphics = new GraphicsDeviceManager(this);
                graphics.PreferredBackBufferWidth = 640;
                graphics.PreferredBackBufferHeight = 480;
                Content.RootDirectory = "Content";
            }
    
            protected override void Initialize()
            {            
                background1 = new Sprite();
                background2 = new Sprite();
                background3 = new Sprite();
                background4 = new Sprite();
                background5 = new Sprite();
    
                base.Initialize();
            }
    
            protected override void LoadContent()        
            {
    
                spriteBatch = new SpriteBatch(GraphicsDevice);
    
                background1.LoadContent(this.Content, "Cannon_Background1");
                background1.Position = new Vector2(0, 0);
                background2.LoadContent(this.Content, "Cannon_Background2");
                background2.Position = new Vector2(0, background1.Position.Y + background1.Size.Height);
                background3.LoadContent(this.Content, "Cannon_Background3");
                background3.Position = new Vector2(0, background2.Position.Y + background2.Size.Height);
                background4.LoadContent(this.Content, "Cannon_Background4");
                background4.Position = new Vector2(0, background3.Position.Y + background3.Size.Height);
                background5.LoadContent(this.Content, "Cannon_Background5");
                background5.Position = new Vector2(0, background4.Position.Y + background4.Size.Height);
            }
    
            protected override void UnloadContent()
            {
    
            }
    
            protected override void Update(GameTime gameTime)
            {
    
                if (GamePad.GetState(PlayerIndex.One).Buttons.Back == ButtonState.Pressed)
                    this.Exit();
    
                if (background1.Position.Y < -background1.Size.Height)
                {
                    background1.Position.Y = background5.Position.Y + background5.Size.Height;
                }
    
                if (background2.Position.Y < -background2.Size.Height)
                {
                    background2.Position.Y = background1.Position.Y + background1.Size.Height;
                }
    
                if (background3.Position.Y < -background3.Size.Height)
                {
                    background3.Position.Y = background2.Position.Y + background2.Size.Height;
                }
    
                if (background4.Position.Y < -background4.Size.Height)
                {
                    background4.Position.Y = background3.Position.Y + background3.Size.Height;
                }
    
                if (background5.Position.Y < -background5.Size.Height)
                {
                    background5.Position.Y = background4.Position.Y + background4.Size.Height;
                }
    
                Vector2 direction = new Vector2(0, 1);
                Vector2 speed = new Vector2(0, 80);
    
                background1.Position += direction * speed * (float)gameTime.ElapsedGameTime.TotalSeconds;
                background2.Position += direction * speed * (float)gameTime.ElapsedGameTime.TotalSeconds;
                background3.Position += direction * speed * (float)gameTime.ElapsedGameTime.TotalSeconds;
                background4.Position += direction * speed * (float)gameTime.ElapsedGameTime.TotalSeconds;
                background5.Position += direction * speed * (float)gameTime.ElapsedGameTime.TotalSeconds;
    
                base.Update(gameTime);
            }
    
            protected override void Draw(GameTime gameTime)
            {
                GraphicsDevice.Clear(Color.CornflowerBlue);
    
                spriteBatch.Begin();
                background1.Draw(this.spriteBatch);
                background2.Draw(this.spriteBatch);
                background3.Draw(this.spriteBatch);
                background4.Draw(this.spriteBatch);
                background5.Draw(this.spriteBatch);
                spriteBatch.End();
    
                base.Draw(gameTime);
            }
        }
    }

  2. #2
    Join Date
    Jul 2007
    Location
    Minnesota
    Posts
    234
    If background1 doesn't draw, I'd look into your LoadContent method in the Sprite class. If it does draw, I'd double check your update position logic. Have you tried using the debugger and looking at their actual positions? Furthermore, you're stacking the pictures downward:
    background1
    background2
    background3
    background4
    background5
    But then you're telling them to scroll downward, too.
    Code:
                Vector2 direction = new Vector2(0, 1);
                Vector2 speed = new Vector2(0, 80);
    As such, this line of code will never execute:
    Code:
                if (background1.Position.Y < -background1.Size.Height)
                {
                    background1.Position.Y = background5.Position.Y + background5.Size.Height;
                }
    nor any of the similar lines.
    Last edited by Olson.dev; 02-09-2009 at 10:29 PM. Reason: Further understanding of issues

  3. #3
    Join Date
    Jun 2008
    Posts
    38
    Thanks for the reply but I'm not sure I follow. Can you elaborate a bit? Also, what do you mean by checking the debugger?

    The first background image always draws perfectly but I can't get the others to follow properly. Throughout the code I have the backround images listed in order of 1-5 and I'm intending on scrolling them in-game from north to south starting with 1. So, with the way this is coded, my thinking was that VS would start with background1 and go through each background image in that order. So, I call for it to draw background1, do the checks for background1, and then move onto background2, etc. The images would fall as seen below and be attached as essentially one long 640x2400 background image.

    [screen top]
    5 (end)
    4
    3
    2
    1 (start)
    [screen bottom]
    Last edited by 93_Confirmed; 02-09-2009 at 11:49 PM.

  4. #4
    Join Date
    Jul 2007
    Location
    Minnesota
    Posts
    234
    I meant, use Visual Studio's built-in debugging tools to watch the flow of your application. If you go to the following line and hit F9, you can insert a breakpoint. You can also left-click in the left-margin to toggle the breakpoint.
    Code:
    if (background1.Position.Y < -background1.Size.Height)
    This tells Visual Studio to halt execution before executing the line of code. Hit F5 or use the menu Debug > Start Debugging. The application should start and quickly Visual Studio should bring focus to itself (and away from your application) and throw up a few extra panels where you can look at what's going on. If you can't figure out how to use the debugging tools, do a quick search for how to debug in C#.

    What I was getting at before is your code inside your if statement would never execute because you keep increasing Y in the positive direction. How can something that's always positive (and getting more so) be less than an unchanging negative? Look at the order I put your background images in in my previous post - that's the order you're setting them up. Y at the top of the screen is 0. The bottom is 480 in this instance. So, you're saying background1 should be at 0 (top left corner)... then background2 should be at the bottom of it:
    Code:
    // background1.Position.Y is 0
    background2.Position = new Vector2(0, background1.Position.Y + background1.Size.Height);
    // based on the 2400, I assume divided evenly over 5 images, that's 480, so
    // background1.Size.Height is 480, 0+480 = 480
    
    background3.Position = new Vector2(0, background2.Position.Y + background2.Size.Height);
    // background2.Position.Y was just set to 480
    // assume its height is also 480 so background3 is set to (0,960)
    
    // 4, 5, etc.
    If you want them to go toward the top, you need to change the direction vector creation.
    Code:
    // from
    Vector2 direction = new Vector2(0, 1);
    // to
    Vector2 direction = new Vector2(0, -1);
    If you're able to fix it without using the debugger, I would still highly recommend playing around with it. It's a powerful tool; using it, you could have probably solved this problem in less than 10 minutes. No joke.

  5. #5
    Join Date
    Jun 2008
    Posts
    38
    Disregard this post. I had to get my thoughts straight. See the post below instead.
    Last edited by 93_Confirmed; 02-10-2009 at 01:38 AM.

  6. #6
    Join Date
    Jun 2008
    Posts
    38
    Ignore the last post - I've been looking at this so long I coudln't get my thoughts straight.

    I just ran through the code with the debug tool and all I really see is that it's jumping over the code inside the if statements. I went through all of the math manually and concluded that the code should read as follows.

    Code:
    background1.LoadContent(this.Content, "Cannon_Background1");
    background1.Position = new Vector2(0, 0);
    background2.LoadContent(this.Content, "Cannon_Background2");
    background2.Position = new Vector2(0, background1.Position.Y + background1.Size.Height);
    background3.LoadContent(this.Content, "Cannon_Background3");
    background3.Position = new Vector2(0, background2.Position.Y + background2.Size.Height);
    background4.LoadContent(this.Content, "Cannon_Background4");
    background4.Position = new Vector2(0, background3.Position.Y + background3.Size.Height);
    background5.LoadContent(this.Content, "Cannon_Background5");
    background5.Position = new Vector2(0, background4.Position.Y + background4.Size.Height);
    The reason being is that my background images are moving downward toward the negative y-axis so I should positioning them in LoadContent() so they're behind one another background1 (0,0), background2 (0,480), background3 (0,960), background4 (0, 1440), and background 5 (0,1920).

    Now, the Update method contains the if statements below and if I read this correctly, the first basically says when background1's Y position hits -481, move background 1 directly behind the Y position of background image 5.

    Code:
    if (background1.Position.Y < -background1.Size.Height)
                {
                    background1.Position.Y = background5.Position.Y + background5.Size.Height;
                }
    
    if (background2.Position.Y < -background2.Size.Height)
                {
                    background2.Position.Y = background1.Position.Y + background1.Size.Height;
                }
    
    if (background3.Position.Y < -background3.Size.Height)
                {
                    background3.Position.Y = background2.Position.Y + background2.Size.Height;
                }
    
    if (background4.Position.Y < -background4.Size.Height)
                {
                    background4.Position.Y = background3.Position.Y + background3.Size.Height;
                }
    
    if (background5.Position.Y < -background5.Size.Height)
                {
                    background5.Position.Y = background4.Position.Y + background4.Size.Height;
                }
    The vector, speed, and direction code is fine so no changes needed there. Lastly, at the beginning of my Draw Method, I've got these:

    Code:
    background1.Draw(this.spriteBatch);
    background2.Draw(this.spriteBatch);
    background3.Draw(this.spriteBatch);
    background4.Draw(this.spriteBatch);
    background5.Draw(this.spriteBatch);
    So, with all that said, I can't figure out where I'm off and furthermore, why the number and order of images scrolling changes by entering different screen heights and widths. I'd really appreciate any help here!!
    Last edited by 93_Confirmed; 02-10-2009 at 11:42 AM.

  7. #7
    Join Date
    Nov 2006
    Location
    UK
    Posts
    3,774
    Im not sure the loadcontent positioning is necessarily the issue. You should more likely want a class which holds your background and then you can just itterate the changes through each item. Also as you only move your item if its less than the height, what if for example you had moved up and pushed it off screen? Now your tile wont move at all.

    The reason your tiles possibly seem to move is because of the above. Are they all the same height and width? Personally, I would make a delta variable where you move L or R by the delta, making the code clearer that each part moves by exactly the same number
    Delphi !ROCKS!
    Got a question? Read this first!!!
    "You gotta help us, Doc. We've tried nothin' and we're all out of ideas"

  8. #8
    Join Date
    Jun 2008
    Posts
    38
    LizRiley - with the way I coded this, shouldn't the background1 tile move to the designated Y position (behind background5) immediately after it's Y position is less than it's height? In other words, as soon as the Position.Y hits -481, it gets moved to back of the line of background images and the check continues. Why would it not move when it's off screen?

    I'm not familiar with delta variables so I'll have to read up on that. Do you have a brief example of one?

  9. #9
    Join Date
    Nov 2006
    Location
    UK
    Posts
    3,774
    Its hard to put into words, but, for example if your window is half the height and width of your composed back area.. eg, window is 50x50, the area to view is 100x100.. (comprising of 4 images)

    1 2
    3 4

    If you start looking at image 1, image 3's X is > than the height of your image, as well as your window. So, image 1 would move, so would 2, but 3 and 4 wouldnt you would end up with
    1 2
    x x
    3 4

    with a gap in the middle

    However, if you had started at 3, you would get

    1 2
    3 4

    because both were less..

    a delta variable is not special, its just 1 thing which if you watch 3dbuzz tutorials they would almost certainly use, because it means you have 1 variable which holds the amount to effect all items by

    After all

    if in our square, 3 and 4 were twice as tall..

    1 2
    3 4

    but if image 2 and 5 were twice as tall... by your code

    You would actually move them by their height so.. both would end up on the same place, as 1 would have the same starting point as 3.. and 2 as 4..

    whereas in fact you want them all to move by a given amount.. eg "delta" its the same amount for all
    Last edited by LizKimber; 02-10-2009 at 03:12 PM. Reason: small correction.. its late, Im tired hungry..
    Delphi !ROCKS!
    Got a question? Read this first!!!
    "You gotta help us, Doc. We've tried nothin' and we're all out of ideas"

  10. #10
    Join Date
    Jun 2008
    Posts
    38

    Me = Confused!

    I don't get that. Why wouldn't the next frame following the one that is being drawn? Yes, it is off-screen but it's direction and speed are set in motion for them to fall downward so wouldn't 2 follow 1, 3 follow 2, etc. in a infinite scrolling loop.

    It helps at all here's a download for the sample code I'm working with:

    http://uploading.com/files/MGNY8CBH/...Game6.zip.html

Page 1 of 3 123 LastLast

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •