Geeks With Blogs
George Clingerman       XNADevelopment.com

scrollingbackground I have completely re-written and posted the tutorial covering scrolling a 2D background on my site . This tutorial has been upgraded with improved code and art assets and is now completely re-written for the XNA 2.0 framework.

I have also take the time to create a more advanced version of the source code. I tend to target beginners with my site so I don't always make my code as "robust" as it could be. Often, it teaches a concept, but it's not easy to reuse in another project. The advanced version of the code attempts to delve a little deeper into just how you might structure your code in a more object oriented approach for future reuse. Both the simpler and advanced versions of the code are available as separate source code downloads.

Head on over and check out the tutorial on Scrolling a 2D Background.

As always, I'm *BEGGING* for some comments and feedback. Seriously, even if it's just to say "Hi!". I love to hear from people that have read the tutorials and enjoyed them or even from people that didn't enjoy them. If you have some advice to give on how I should improve, I'd love to hear that too. And of course, if they're helping you out, I'd love to hear that as well. Just a couple comments can really make a difference in helping me stay motivated so if you have a few seconds, just take a little time, I really appreciate them!

Technorati Tags:
Posted on Saturday, March 8, 2008 10:22 PM XNA Development , XNA | Back to top


Comments on this post: XNADevelopment.com - Scrolling a 2D Background (2.0)

# re: XNADevelopment.com - Scrolling a 2D Background (2.0)
Requesting Gravatar...
Great tutorial!!How about parallax scrolling?
Left by Francesco on Mar 08, 2008 11:16 PM

# re: XNADevelopment.com - Scrolling a 2D Background (2.0)
Requesting Gravatar...
Here is a link to a Parallax Scrolling Example.

http://www.virtualrealm.com.au/blogs/mykre/archive/2007/08/18/parallax-scrolling-background-using-the-xna-framework.aspx
Left by Glenn Wilson on Mar 08, 2008 11:39 PM

# re: XNADevelopment.com - Scrolling a 2D Background (2.0)
Requesting Gravatar...
hi there you like people saying hi? HI!!

more serious now, i had started following joran omarks xnatutorial series and was thoroughly enjoying them until he exploded (or something.. he s currently very busy with other stuff). unfortunately i couldnt find anything else out there that fitted my requirements (no previous c# knowledge, though previous c/basic/directx/java etc knowledge). everything seems either aimed at being fully proficient at xna beta/1.0 and no c# skills... or full c# skills and totally proficient at xna 1.0!

all i wanted was something to guide me as a total beginner and i think in your site i have found it.
for some strange reason, despite my c and directx background, i have so far struggled with xna. its very frustrating.

thanks for the ray of light your tutorials have given me, and i hope you dont "blow up" a la joran!

thanks again, pugmartin
Left by pugmartin on Mar 09, 2008 8:30 AM

# re: XNADevelopment.com - Scrolling a 2D Background (2.0)
Requesting Gravatar...
@pugmartin - Thanks for the great comment! Yeah, when we all started our XNA sites years ago when the beta came out, Joran was one of my favorites. I LOVED his weekly roundups of everything XNA. His life got kind of busy so he had to stop, but he had made a lot of great content.

I can't see myself stopping writing tutorials anytime soon. I've been running XNADevelopment.com for over a year now and I still really like doing it. It's good to hear you think they might work for you.

Awesome feedback! Thanks so much for taking the time!
Left by George W. Clingerman on Mar 09, 2008 9:36 AM

# re: XNADevelopment.com - Scrolling a 2D Background (2.0)
Requesting Gravatar...
@Francesco - Thanks for the feedback :) . I don't currently have a parallax scrolling tutorial, but I will probably at one at some point.

Until then, I Glenn's right he's got one currently on his site that should help you out.

Thanks again for taking the time to comment! I appreciate it.
Left by George W. Clingerman on Mar 09, 2008 9:38 AM

# re: XNADevelopment.com - Scrolling a 2D Background (2.0)
Requesting Gravatar...
Hey, I like your tutorials very much, they are really nice written. I´n in C# but a total noob at xna so I need more tutorial like that ;).

mfg
samizel
Left by samizel on Mar 11, 2008 9:00 AM

# re: XNADevelopment.com - Scrolling a 2D Background (2.0)
Requesting Gravatar...
Hey, just wanted to say thank you for the tutorials. I really do appreciate the work you've done.

If I could make a suggestion it would be for a tutorial about organization. I find my projects get quite larger and it can often seem overwhelming.

Apart from that please keep up the good work. :)
Left by Chris R on Mar 11, 2008 12:32 PM

# re: XNADevelopment.com - Scrolling a 2D Background (2.0)
Requesting Gravatar...
Just wanted to say thanks for this tutorials.. If it's a boost to your ego, your original 1.0 tutorials is what got me started on xna.. =) I remember the original tutorial for scrolling backgrounds had a couple issues, this looks wonderful! Thanks! Parallax next, then .. no, the list is too long..

also, whatever cms your using to run this site wont validate my email. May need an update, its cdxgames@q.com and apparently thinks a 1 letter domain isnt real.
Left by Cory F - cdxgames on Mar 13, 2008 1:04 PM

# re: XNADevelopment.com - Scrolling a 2D Background (2.0)
Requesting Gravatar...
@samizel - Thanks! I've been working hard at making my site a great place to come for beginners. It's good to hear the hard work is paying off.
Left by George Clingerman on Mar 17, 2008 7:26 AM

# re: XNADevelopment.com - Scrolling a 2D Background (2.0)
Requesting Gravatar...
@Chris R - Thanks for taking the time to comment!

Project organization is a tricky thing. I'm still not sure *I* do it right. I think, like a lot of development topics, it's one of those things you pick up over time and it's an evolutionary process.

If I can think of a good way to approach the topic, I'll see if I can write something up on it.
Left by George Clingerman on Mar 17, 2008 7:28 AM

# re: XNADevelopment.com - Scrolling a 2D Background (2.0)
Requesting Gravatar...
@Cory F - Thanks, it's great to hear I was a help to getting you started. Thanks for taking the time to say something!

Parallax scrolling is definitely something on the list..if you look at the advanced Scrolling source code, it's really just as simple as declaring a new scrolling background object for each of your layers..think you can figure it out ;)

Yeah, GeeksWithBlogs is pretty tight on keeping spam out of the comments. I bet if they lift their single character domain restriction we would get flooded! Sorry about that and thanks again for the comment!
Left by George Clingerman on Mar 17, 2008 7:32 AM

# re: XNADevelopment.com - Scrolling a 2D Background (2.0)
Requesting Gravatar...
Hey i was wondering if you still had that tutorial on XNA in version 1.0 b/c my school is using 1.0 and i would like a scrolling background in my game.

Thanks!
Left by Computer Student 2 on Apr 07, 2008 7:23 AM

# re: XNADevelopment.com - Scrolling a 2D Background (2.0)
Requesting Gravatar...
Thanks for the tutorial. I had a little blip going from 1.0 to 2.0.(xna)

Did anyone else only have the background only cycle through once?
Left by Brian Johnson on Apr 13, 2008 8:12 AM

# re: XNADevelopment.com - Scrolling a 2D Background (2.0)
Requesting Gravatar...
I was wondering if there is a way to make the animation smoother? I'm using a core 2 quad @ 3ghz with 4 gigs of ram and 8800gtx, and I still see some choppyness with the background scroll with both the beginner and advanced methods that you show here.
Left by Alan on Apr 20, 2008 9:31 PM

# re: XNADevelopment.com - Scrolling a 2D Background (2.0)
Requesting Gravatar...
Hello there George,
this is the first XNA tutorial starting from the real beginnig that I found on the web.
I'm used with c#, but never heard about XNA before these days.I found many tutorials starting from the 3d development, but only now I have idea from what is a sprite, hehe.

The examples are just simple and easy to follow, great didactic.

Keep on this great job, and thanks.
Left by Caio Pavanelli on May 02, 2008 5:56 AM

# re: XNADevelopment.com - Scrolling a 2D Background (2.0)
Requesting Gravatar...
Hey there :)
This site is like the bibel :D
I love it (and im not even religious)
...

I was wondering if you could release a tutorial for the advanced version of the scrolling 2d Background?

Thanks in advance for this great site :)
sign Soaban
Left by Soaban Ramachandran on May 16, 2008 2:52 PM

# re: XNADevelopment.com - Scrolling a 2D Background (2.0)
Requesting Gravatar...
one thing I noticed is you are drawing images that are not even on the screen yet. maybe i am a noob to xna and they dont go into memory until they are rendered, but coming from ogre and axiom, i wouldnt have loaded the images until they could be seen by having if statements in the Draw method
Left by chad on May 20, 2008 8:56 AM

# re: XNADevelopment.com - Scrolling a 2D Background (2.0)
Requesting Gravatar...
@chad

You are correct, I am drawing things that are not shown on the screen. This really isn't that expensive because the images are already loaded into memory. (it's more expensive to destroy and re-create the images) and I'm not drawing hundreds of things not off the screen.

When computers were slower, making sure you weren't drawing things not on the screen was more of a concern. Now it's not that big of a deal, especially with 2D games.

But, if I wanted to enhance the code later (due to performance issues), I would simply just check to see if the sprite (in this case our background) is in the viewable area first before I drew it.

Good point.
Left by George Clingerman on May 20, 2008 9:04 AM

# re: XNADevelopment.com - Scrolling a 2D Background (2.0)
Requesting Gravatar...
Hi, thanks for the great tutorials, they have really helped me alot, one problem i am having tho with the 2D Scrolling Background is that only the first Background image scrolls, the other images don't appear (i'm sure its a mistake i've made somewere in the code but i am having trouble spotting it as i have followed your code, eventually copying and pasting it to make sure) any ideas? thanks
Left by Ricky on Jun 20, 2008 10:21 AM

# re: XNADevelopment.com - Scrolling a 2D Background (2.0)
Requesting Gravatar...
Hi.
First, Thanks for your tutorial! It gave me a good start to xna.

While i have managed to adjust the simpleExample to scroll vertically with little effort,
i'm somewhat stuck on the advanced code for days now
But i don't go to the next chapter, befor i got what i want.

Eismaus
Left by Eismaus on Jul 25, 2008 6:25 AM

# re: XNADevelopment.com - Scrolling a 2D Background (2.0)
Requesting Gravatar...
Whats the trick for scrolling vertical. Its probably so obvious I'm staring right at it.
Thanks
Mark
Left by Mark Lynch on Aug 22, 2008 3:47 PM

# re: XNADevelopment.com - Scrolling a 2D Background (2.0)
Requesting Gravatar...
Hi, today is the first day of my game development experience and I can say that your tutorials rock :)

By the way, I was playing with this advanced project and found out that there is one little bug when scrolling to the left. When background images are the same width then it is ok, but if you change the width of at least one image there will be a gap between backgrounds.

But hey, man, your tutorials rock!
Left by algiz on Sep 17, 2008 3:12 PM

# re: XNADevelopment.com - Scrolling a 2D Background (2.0)
Requesting Gravatar...
First of all thanks for your great tutorial. Im having little confused with this sample while scrolling left and right using the arrow keys. I wanna scroll the background to the left if the right arrow key is pressed and to the right if the left arrow key is pressed. The code is fantastic if I press only left arrow key or only right arrow key. But if I press left arrow key for few miliseconds and press right arrow key then the background jumps.
Left by Uday Dhakal on Oct 21, 2008 7:50 PM

# re: XNADevelopment.com - Scrolling a 2D Background (2.0)
Requesting Gravatar...
Once again thank you for your rock and roll idea of scrolling a 2D background

I found a small bug in your code that is creating a problem scrolling left and right. I slightly modified HorizontallyScrollingBackground.cs and fixed them. You can download the modified source code from .
You need one of the file decompressors like winRAR, winZIP, 7-ZIP etc.
Left by Uday Dhakal on Oct 24, 2008 12:39 AM

# re: XNADevelopment.com - Scrolling a 2D Background (2.0)
Requesting Gravatar...
Sorry to give the download link. Its http://xna.awardspace.com/AdvancedScrollingA2DBackground.7z

or click here
Left by Uday Dhakal on Oct 24, 2008 12:44 AM

# re: XNADevelopment.com - Scrolling a 2D Background (2.0)
Requesting Gravatar...
First of all ... very very nice tutorials. Second, there is a very slight bug in this tutorial that I think you need to modify. Where ever in Game1 file we are declaring the Sprite class and using (e.g. mBackgroundOne.Size.Width), we need to multiply that value by mBackgroundOne.Scale because we are scaling the background images by 2 and through out the code we are using the actual size of the image as a width which is 1 ... not 2.

So the code should be changed. As an example case

mBackgroundTwo.Position = new Vector2(mBackgroundOne.Position.X + mBackgroundOne.Size.Width, 0);

TO

mBackgroundTwo.Position = new Vector2(mBackgroundOne.Position.X + (mBackgroundOne.Size.Width * mBackgroundOne.Scale), 0);
Left by Syed on Jan 17, 2009 9:41 AM

# re: XNADevelopment.com - Scrolling a 2D Background (2.0)
Requesting Gravatar...
Thanks for the tutorials, but I want to ask if it is 'okay' to use so many if loops.

It looks a lot to handle, and doesn't make it very clear.

I will actually have a look at the advanced src, Im sure my answers are in there.

Keep up the EXCELLENT work!

Matt.
Left by Matt on Feb 18, 2009 8:25 AM

# re: XNADevelopment.com - Scrolling a 2D Background (2.0)
Requesting Gravatar...
Wonderful tutorial. I've completed the side scrolling (using the basic method). Now I can't create a vertical scrolling screen? nuts.

I used the Height values of the 5 instead of Width.

Then lines up the background images on the Y axis (ie replacing all the Xs with Ys.

then changing the 'vector2 adirection' value.

But no luck!

Any help?

Craig
Left by Craig Richardson on Mar 04, 2009 7:25 PM

# re: XNADevelopment.com - Scrolling a 2D Background (2.0)
Requesting Gravatar...
Hey that is the smoothest walkthrough tutorial ever...2 thumbs up and hats off...

I got a noob ? tho...its up and running fine no problems, but the background is only scrolling at like half of the screen...so like the border at the bottom on your example is touching the bottom of the window...my ground is like, halfway...so...how do i fix that?

thanks again man,
Left by BUNK on Mar 27, 2009 1:58 AM

# re: XNADevelopment.com - Scrolling a 2D Background (2.0)
Requesting Gravatar...
Hey great tutorial! I'm having a problem though, the background doesn't fill the entire game screen. Is there a way that I can stretch it? Right now it's only in the top third of the game screen. Any help is appreciated :D
Left by BigLeslie on Apr 03, 2009 9:25 AM

# re: XNADevelopment.com - Scrolling a 2D Background (2.0)
Requesting Gravatar...
to fix the screen height scaling problem, change 2 lines in the HorizonallyScrollingBackground.cs file

from:

aBackgroundSprite.Scale = mViewport.Height / aBackgroundSprite.Size.Height;

to:
aBackgroundSprite.Scale = (float)mViewport.Height / (float)aBackgroundSprite.Size.Height;

mViewport.Height and aBackgroundSprite.Size.Height are both integers, but aBackgroundSprite.Scale is a float, so you need to explicitly cast the integers to a float to get proper scaling.
Left by void on May 26, 2009 7:50 PM

# re: XNADevelopment.com - Scrolling a 2D Background (2.0)
Requesting Gravatar...
Thanks for the tutorial. I used for loops to deal with the backgrounds. Here's the code if anyone wants to deal with backgrounds in a bit cleaner way (still not perfect syntax though):

// Initialize
for (int i = 0; i < background.Length; i++)
{
background[i] = new Sprite();
background[i].scale = 2.0f;
}

// LoadContent
// load each background next to eachother
background[0].LoadContent(this.Content, "Background01");
background[0].position = new Vector2(0, 0);
for (int i = 1; i < background.Length; i++)
{
background[i].LoadContent(this.Content, "Background0"+(i+1));
background[i].position = new Vector2(
background[i - 1].position.X + background[i - 1].size.Width, 0);
}

// Update
// backgrounds
if (background[0].position.X < -background[0].size.Width)
{
background[0].position.X = background[4].position.X +
background[4].size.Width;
}
for (int i = 1; i < background.Length; i++)
{
if (background[i].position.X < -background[i].size.Width)
{
background[i].position.X = background[i - 1].position.X +
background[i - 1].size.Width;
}
}

Vector2 aDirection = new Vector2(-1, 0);
Vector2 aSpeed = new Vector2(160, 0);

for (int i = 0; i < background.Length; i++)
{
background[i].position += aDirection * aSpeed *
(float)gameTime.ElapsedGameTime.TotalSeconds;
}

// Draw
// backgrounds
for (int i = 0; i < background.Length; i++)
{
background[i].Draw(this.spriteBatch);
}

Sorry if the formatting comes out strange, just copy/pasted from the way I wrote this tutorial in VS.
Left by Bryan on Sep 13, 2009 5:13 AM

# re: XNADevelopment.com - Scrolling a 2D Background (2.0)
Requesting Gravatar...
This line is killing me!

mBackgroundOne.LoadContent(this.Content, "Background01");

The advice says NullReferenceException ...
Left by Cristian on Nov 04, 2009 1:51 AM

# re: XNADevelopment.com - Scrolling a 2D Background (2.0)
Requesting Gravatar...
^ Did you remember to add an image named Background01 as a content in the Solution Explorer?

I think this error means that something you are referencing does not exist so either the instance mBackgroundOne, the method LoadContent in the sprite class or Background01 doesn't exist...maybe check spelling mistakes etc.
Left by Becky on Nov 21, 2009 11:22 AM

# re: XNADevelopment.com - Scrolling a 2D Background (2.0)
Requesting Gravatar...
Hi, first, thanks, you are a saint for this site!

Your tutorials are extremely easy to follow for a beginner and understand.

I have done the sprite moving and jumping tutorial with the object orientation. I have also been using some books.

How would I substitute say the 'walking' state with a 'rotating' state? My main problem is that I'm not understanding where to incorporate the origin and rotation arguments to the Sprite class.

I hope that made sense, thanks

-justin
Left by justin on May 20, 2010 11:55 AM

# re: XNADevelopment.com - Scrolling a 2D Background (2.0)
Requesting Gravatar...
Great tutorial!

I'm very familiar with C#, but I do a lot (as in all I ever do) is database work, but I love the idea of writing a game. Your tutorials got me started, they were great!

Unfortunately, I am very bad at math, so it took me a while, but I got a much more realistic jump going with some trig functions, etc.

Either way, it got me off to a good start. I would not mind seeing a tutorial on moving the background with the player, rather than automatically; I'm finding a lot of conflicting information on this (some people advocate a Matrix translation, others say the whole thing moves instead of your character...).

But for a beginner, this is a great introduction.
Left by Wesley Fonvergne on Oct 03, 2010 1:34 AM

# re: XNADevelopment.com - Scrolling a 2D Background (2.0)
Requesting Gravatar...
i dont know if i missed it? but is there tutorial how to make the background scrolling, but only in the case when your character is geting close to the edge of the screen, and other ways dont move the backgound. there is one more thing id love to ask about collision detection, when u get u sprite died and u make it draw again in different vector on the screen so it want get into the same hole again unless u move it in there, is there a way that for first lets say 10 seconds it won`t have any collisions with the enemy or fireballs, so just after yr sprite is brought back to live it can die for this amount of time. i am not to complicated way so i can understand this.
there is one more thing how to display game over screen or message when the game is finished.
Thanks m8
Left by simon on Feb 17, 2011 8:06 AM

# re: XNADevelopment.com - Scrolling a 2D Background (2.0)
Requesting Gravatar...
anyone know what the code is for making the background move vertically tried many times changing width to height and x to y but no luck ?
Left by M on Feb 20, 2011 1:07 PM

# re: XNADevelopment.com - Scrolling a 2D Background (2.0)
Requesting Gravatar...
I am following your article content. I think this is very helpful and will be an advantages for my work. Thank you so much again for sharing these useful one.
Left by Poh on Mar 22, 2011 3:16 AM

# re: XNADevelopment.com - Scrolling a 2D Background (2.0)
Requesting Gravatar...
These tutorials are awesome they give a very good approach to teaching users how to XNA to start with and into the future. I have a programming background and all of the other sites fail in comparison to this one.

The object orientation idea is so much better than the MSDN pages! Here lies the best XNA tut on the net.
Left by Dan on Mar 26, 2011 3:25 AM

# re: XNADevelopment.com - Scrolling a 2D Background (2.0)
Requesting Gravatar...
Another great post, Thanks for the tutorial link, I hadn't checked out your tutorials until now & I've gotta say thanks, They're all very helpful, Thanks again, Keep on posting more......
Left by Free Cell Phone Spy Software on Apr 09, 2011 2:52 AM

# SONIA
Requesting Gravatar...
Thanks for posting this. i really had good time reading this.Great,
Left by mexican flower on Apr 14, 2011 7:21 AM

# sonia
Requesting Gravatar...
I think one of your commercials triggered my internet browser to resize, you may well want to put that on your blacklist.
Left by send flowers berlin on May 09, 2011 5:25 AM

# re: XNADevelopment.com - Scrolling a 2D Background (2.0)
Requesting Gravatar...
Simply desire to say your article is as astonishing. The clearness to your put up is just excellent and that i could think you are knowledgeable in this subject. Fine together with your permission allow me to seize your RSS feed to stay updated with drawing close post. Thank you 1,000,000 and please keep up the rewarding work.......

clubmz reviews
Left by janifer jonathan on Jul 22, 2011 2:12 AM

# re: XNADevelopment.com - Scrolling a 2D Background (2.0)
Requesting Gravatar...
We have added a whole lot of parameters to pass into the Draw method of the SpriteBatch, but the one we are tracking is “Scale”. This will tell the SpriteBatch object to increase or decrease the size of the sprite proportionally.
clubmz reviews
Left by janie oplero on Oct 22, 2011 2:04 AM

# Great Post
Requesting Gravatar...
Great information you got here. I've been reading about this topic for one week now for my papers in school and thank God I found it here in your blog. I had a great time reading this.
Left by Caverta on Nov 23, 2011 1:42 AM

# re: XNADevelopment.com - Scrolling a 2D Background (2.0)
Requesting Gravatar...
Another great post, Thanks for the tutorial link, I hadn't checked out your tutorials until now & I've gotta say thanks, They're all very helpful, Thanks again, Keep on posting more...... ahf s
Left by what are capers on Feb 13, 2012 1:16 AM

# re: XNADevelopment.com - Scrolling a 2D Background (2.0)
Requesting Gravatar...
I'm combining the Wizard fireball sprite example and the scrolling background example but I'm not sure where to specify the layer depth so that the wizard is always on top of the background. Any help would be awesome.
Left by Phillip Mengel on Feb 26, 2012 3:34 PM

# re: XNADevelopment.com - Scrolling a 2D Background (2.0)
Requesting Gravatar...
Thank you so much you help me, i love your Site, but why have we used 5 backgrounds and not two ?
Left by Younes on Apr 05, 2012 10:43 AM

# re: XNADevelopment.com - Scrolling a 2D Background (2.0)
Requesting Gravatar...
Excellent post and people around the world will certainly get much through reading it. I'll come back again and again to read such articles. Thanks
Left by Business Development Services on Apr 16, 2012 12:53 AM

Your comment:
 (will show your gravatar)


Copyright © George Clingerman | Powered by: GeeksWithBlogs.net