George Clingerman

# re: XNADevelopment.com - Scrolling a 2D Background (2.0)

Great tutorial!!How about parallax scrolling?

# re: XNADevelopment.com - Scrolling a 2D Background (2.0)

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

# re: XNADevelopment.com - Scrolling a 2D Background (2.0)

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

# re: XNADevelopment.com - Scrolling a 2D Background (2.0)

@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!

# re: XNADevelopment.com - Scrolling a 2D Background (2.0)

@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.

# re: XNADevelopment.com - Scrolling a 2D Background (2.0)

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

# re: XNADevelopment.com - Scrolling a 2D Background (2.0)

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. :)

# re: XNADevelopment.com - Scrolling a 2D Background (2.0)

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.

# re: XNADevelopment.com - Scrolling a 2D Background (2.0)

@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.

# re: XNADevelopment.com - Scrolling a 2D Background (2.0)

@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.

# re: XNADevelopment.com - Scrolling a 2D Background (2.0)

@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!

# re: XNADevelopment.com - Scrolling a 2D Background (2.0)

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!

# re: XNADevelopment.com - Scrolling a 2D Background (2.0)

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?

# re: XNADevelopment.com - Scrolling a 2D Background (2.0)

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.

# re: XNADevelopment.com - Scrolling a 2D Background (2.0)

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.

# re: XNADevelopment.com - Scrolling a 2D Background (2.0)

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

# re: XNADevelopment.com - Scrolling a 2D Background (2.0)

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

# re: XNADevelopment.com - Scrolling a 2D Background (2.0)

@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.

# re: XNADevelopment.com - Scrolling a 2D Background (2.0)

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

# re: XNADevelopment.com - Scrolling a 2D Background (2.0)

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

# re: XNADevelopment.com - Scrolling a 2D Background (2.0)

Whats the trick for scrolling vertical. Its probably so obvious I'm staring right at it.
Thanks
Mark

# re: XNADevelopment.com - Scrolling a 2D Background (2.0)

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!

# re: XNADevelopment.com - Scrolling a 2D Background (2.0)

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.

# re: XNADevelopment.com - Scrolling a 2D Background (2.0)

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.

# re: XNADevelopment.com - Scrolling a 2D Background (2.0)

Sorry to give the download link. Its http://xna.awardspace.com/AdvancedScrollingA2DBackground.7z

or click here

# re: XNADevelopment.com - Scrolling a 2D Background (2.0)

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);

# re: XNADevelopment.com - Scrolling a 2D Background (2.0)

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.

# re: XNADevelopment.com - Scrolling a 2D Background (2.0)

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

# re: XNADevelopment.com - Scrolling a 2D Background (2.0)

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,

# re: XNADevelopment.com - Scrolling a 2D Background (2.0)

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

# re: XNADevelopment.com - Scrolling a 2D Background (2.0)

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.

# re: XNADevelopment.com - Scrolling a 2D Background (2.0)

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.

# re: XNADevelopment.com - Scrolling a 2D Background (2.0)

This line is killing me!

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

The advice says NullReferenceException ...