Scrolling background tutorial and/or advice?

Summary:

I am sure any platform or 2d game would make use of side-or-vertical scrolling

Scrolling background tutorial and/or advice?

WindwalkerDM 23 Aug 2011 22:32

Hello there.

I am an excited newbie on the thrill run at the moment. Been working on c# for about three months and XNA 4.0 for a month. I did some tutorials, I have a book and did some examples… All seems fine. Then I found your site and I wish I had found it sooner. It is excellent, easygoing and detailed. Exceptionally newbie friendly. So I went through it all (except 3d parts-they are for later in my menu) and it was like an in-tern course which made things firm in my head.

I was trying to say thank you. Why do I keep it that long? I hope I won't do the same with my codes.

Anyway, now as for c#, I am chipping the idea of classes, inheritance and such things for a month now and along with your 2d tutorials it suddenly made alot of sense. Now my belief about what I was trying to do is stronger. As I have the chance now I would like to ask for; (be warned, extremely newbie questions on tail)

Scrolling background? The basic idea seems to be changing the location of background image according to the user input, right? But how will I make it infinite if the player keeps going in the same direction? Some kind of special background image that looks continous when we add them together as tiles? And how to do that?

What about the other details of the level? Like walls and such? Do I have to load all the map/level onto memory as soon as the level fires up? And trace all the objects/sprites in the level and move their positions according to player movement? To clear up, imagine each line below is one screen high and each double-char is one screen wide. I will use "-" s and "I"s to create a pseudo-ruler. X is the player and o's are enemies. B's are buildings.

I I I I I I I I I I I I
-o B
-o
-
- o x
-
- B
-

The question is, the player is moving upwards towards B. The buildings are stationary, but enemies are moving on their own patrol routes untill they see the player. So player is moving upwards, approaching the building. How do I handle this? By reducing the "Y" property of B.location each update per player speed?

How do I tile the background?

I know I sound like a crazy cat on catnip but could make use of some pointers…
PS: you know a good source to learn some sql easy way?

Brian (guest) 24 Aug 2011 03:22

Hey WindWalker,

I'm not the site owner, just another dev… but I may be able to point you in the right direction.

First of all you sound exactly like me. I type way to much when asking questions and what not. :) Anyways, the short of my answer is to get yourself the book "Building XNA 2.0 Games" by James Silva and John Sedlak. I realize the book is for XNA 2.0 but the differences are very minor because they don't touch on 3D at all… just 2D. The book basically walks you through creating a side-scrolling action game complete with combos, animation, particle effects, AI, weapons, collision detection, game states, sounds, etc from beginning to end while explaining it all. The book took me quite a while to get through but I learned a ton from it about basic game development (aka making your own tools to speed development) and about project structure. For someone new to C# you may not be very familiar with encapsulation and keeping your code clean… this could lead to a huge mess when creating larger games.

Saying all that…. to scroll the background, draw walls, enemies, etc… the best practice would be to create an object for each. Create a background object (read class) and pass it a loaded background image or give it its own loadContent method which you'll call from your game. Now that it has a large image also give it a scroll property as Vector2. Finally give the background class a Draw method. Now, in your game class in the update method if the user is going up (I'm guessing from your drawing) then you'll do something like (background.Scroll.Y -= elapsedGameTime * .03f) or something like that. The same goes for the other direction with += and side to side will use Scroll.X. In your game's Draw method you will call background.Draw which will draw the background image at normal position (0, 0) adjusted by the scroll amount. If you update the background less than the amount your character moves you can give the appearance of depth and it's called paralax scrolling I think if you wanted to google it. But to answer your questions 'Yes' you must redraw everything brand new every frame and update all of their positions based on the character position if you're making a side scroller. It sounds like a pain, but it's really not if you have a decent design. Create an Enemy class with it's own Update and Draw method. Create an array of these in your game class and simply iterate through the array calling Update on them all and pass the character position, this makes keeping the code clean much easier. Do the same for drawing them. Give Enemy a property which flags if it's on the screen currently or not… this will keep down the number of update and draw commands you make. I'm just throwing out ideas here, there are many ways of doing this, so there isn't really 1 answer. But, check out the book and you'll learn this type of stuff really quickly. Also, just read as many different books as you can on XNA. I've found they all cover something another missed or explain it in a way that makes it click.

Let me know if that made sense. and Good Luck.

Brian (guest) 24 Aug 2011 03:29

Just looked up that book btw…. it's on Amazon for $0.01 + $3.99 shipping. I think that's what I paid over a year ago which is not right :)

Tell more about your game btw. Right now I'm writing a 3D dungeon crawler type game where all levels are procedurely generated and treasure is scattered throughout. There are many more details but that gets the basic idea across.

WindwalkerDM 24 Aug 2011 10:22

Hey there!

Thank you for all the information! I found the book you mentioned in a bookstore here (living in Turkey) however they have it in their main warehouse. I will have the book friday, hopefully.

I didn't know about the scroll function? (or is it called a property? one of the downsides is that thinking in another language sometimes messes things up when you are trying to learn something complicated as programming. and while discussing such things in forums.) Now I will toy around with the idea. I have been able to create classes (with success) for player and other sprites… I think I can do it for background too. The basic tutorials here were the spark that opened the last gate that prevented me from understanding what all these "classes" and "object oriented" were about. Strange, actually, as you would think to believe you would find such information in a C# book rather than XNA training. I found them in books, actually, but they weren't easy enough for me to understand… Maybe I'm not "that" clever after all. Or too old for this thing. (28?)

I swear to you I had the idea of loading all of them into a list (an array you say) and iterate the movement to all of them… But I thought that would be so clumsy that it would slow down the game. Would the game be able to handle moving everything in such a fashion in a game area of, say, 16 screen squares?

The game I have in mind is a shooter / shoot'em up. There was a game called "the swarm", I do not know if you have ever played it. Basically a small spaceship flying in a large zone filled with asteroids, enemies and power ups. When you gather enough, you move to next level. You were trying to get something called ezium or sth like that. If not, maybe you heard of subspace: commanders chair. A mmo shoot em up. Thus I want a big background image filled with nebulas and stars and all that beautifull things you can see in space.

Will have more information and - hopfeully -discussion soon. Gotta emergency -go.

Brian (guest) 24 Aug 2011 17:41

That wouldn't be clumsy at all. I've updated 10's of thousands of things in a loop without too much issue…. really depends on how much logic is involved in each update call though. Just remember, anytime you move something to do it using the gametime as part of the equation. Tons of examples of this are on the .net. The reason for this is so slower pcs will run your game at the same speed as faster pcs. You wouldn't want your game to run great on your pc but then load it on a fast new pc and have the game run way faster… you would want it to look the same.

I'm familiar with what you're working towards and it's a great place to start learning basics of XNA. That book should definately help.

As for the scroll funtion… it's not built in. It's something you would add yourself to your background class/object. I prefer to add it as a property which you can then change from your game's update call based on character position. I know I'm not giving you 100% of the details or code but it's been done quite a bit and there are a lot of examples on the web and it's done line by line in that book so no sense in me writing it all out ;) Just remember… you can draw things that are outside of the boundaries of the screen. This means you can draw a huge image off the screen and it will only display the part that should be on screen. So, if you have an extra large image you can just move the position where you draw the image and it will appear as though the background is scrolling….. no tiling needed (unless your levels are huge or your image takes up too much space).

GL… and 28 is not too old. I'm 30 :D

WindwalkerDM 24 Aug 2011 20:14

Thank you very much for the pointers, sir!
I am working on mouse+keyboard control, as in, wsad moves player sprite, but it's direction (or rather, angle) is always towards the mouse position. Some math I am going to do! That should keep me busy till I get my hands on that book.
I love this site… It should be more active!

Re: Scrolling background tutorial and/or advice?

WindwalkerDM 27 Aug 2011 00:28

Hey everyone… (Brian?)

I got the book you mentioned… dived right into it, great book really. First up was the xna pong for xbox, it was a thrilling adventure to try to debug/refactor codes as the book was xna2.0 and we have 4.0 now. Things went smooth and replacing gamepad controls with mouse equivalents were easy. Now I have a pong game!

Then we went to some more serious shit and thats where my learning began. Class mentality coupled with some simple but effective pieces of code… I was conquering new grounds and was feeling like Alexander the Great… We created a text class which was nice… Got some problems but debugged them. I liked those problems as debugging them gave me much more to learn and made me say; "hell yeah, I'm born for this thing!" Now I have a fully functional text class that writes beautifull, clickable text on my game. Will be usefull perhaps when I gotta prepare game menus…

Next step was the start of a dream; we were going to create a level-editor for our game! Seriously great idea. But lots of new and complex approaches… All handled, factored and rationalized by my beautiful synapses… Debugs, this time more challenging yet even more rewarding. This went very very good until I crashed onto a very easy problem which I couldn't move around.

Brian, since you used the book, may I ask you how you handled the problem with zdx file (a text file that keeps the map information as text, then we feed it to our map class to draw it on screen?) xna tells me that zdx file cannot be fed through content manager as it doesnt recognize the format. I tried many things, some rational, some stupid and now stuck. Since this part is very important I will not be able to make use of much of the rest of the book since I will not be able to run my code for tries… At most I will be reading through it. Any idea?

Brian (guest) 30 Aug 2011 02:25

I'm pretty sure the zmx and zdx files are custom file types created for the game. You can give them any extension you want, but I don't think they are loaded by the content pipeline. They are manually written/read in code.

Code from Map.cs for loading zmx file:

"public void Read()
{
BinaryReader file = new BinaryReader(File.Open(@"data/maps/" + path + ".zmx",
FileMode.Open, FileAccess.Read));

for (int i = 0; i < ledge.Length; i++)
{
ledge[i].TotalNodes = file.ReadInt32();
for (int n = 0; n < ledge[i].TotalNodes; n++)
{
ledge[i].Nodes[n] = new Vector2(
file.ReadSingle() * 2f, file.ReadSingle() * 2f);
}
ledge[i].Flags = file.ReadInt32();
}
for (int l = 0; l < 3; l++)
{
for (int i = 0; i < 64; i++)
{
int t = file.ReadInt32();
if (t == -1)
mapSeg[l, i] = null;
else
{
mapSeg[l, i] = new MapSegment();
mapSeg[l, i].SetDefIdx(t);
mapSeg[l, i].SetLoc(new Vector2(
file.ReadSingle(),
file.ReadSingle()));
}
}
}
for (int x = 0; x < 20; x++)
for (int y = 0; y < 20; y++)
col[x, y] = file.ReadInt32();

mapScript = new MapScript(this);

for (int i = 0; i < mapScript.Lines.Length; i++)
{
String s = file.ReadString();
if (s.Length > 0)
mapScript.Lines[i] = new MapScriptLine(s);
else
mapScript.Lines[i] = null;
}

file.Close();

Bucket = null;
Fog = -1;
water = 0f;

for (int i = 0; i < TransitionDestination.Length; i++)
TransitionDestination[i] = "";

if (mapScript.GotoTag("init"))
mapScript.IsReading = true;
}
"

I know that's from a later chapter (sorry). I'll have to go through the first couple chapters and see exactly what he's doing. Let me know if you're still having trouble and I'll take a closer look. For all I know you're already past this :)

WindwalkerDM 30 Aug 2011 15:34

Hey there!

The solution was extremely simple yet I couldn't see it untill I read your post. It was just a small spark that ignited the rest and it all works now! Thanks!
I completed the mouse icon part too. I noticed that these guys have really difficult name choices for ther classes and variables. (rightMouseDown for left click control!)

Not only I wrote the code but then I went back and completed the cycle in my head. How the map sprite and the map.zdx is bought together by code, how the segments are read and stored in segDef and how they are drawn easily with a for cycle. And, I ate very delicious foods my mother prepared over all of these… So this was a perfect day. I will keep coding tonight. Most importantly I AM LEARNING thanks to small but vital clues you give.

PS: oh, I also am working on MyPaint and Paint.NET so I will hopefully be able to make / modify my own visuals for starters, without worrying about copyrights…
This map creation tool is so important that I can't think of making a game without it… unless the map doesnt use a map or does random/semirandom maps.
Delicious…

Last edited on 30 Aug 2011 15:36 by WindwalkerDM Show more

Brian (guest) 30 Aug 2011 20:58

Sounds good. Feel free to email me at moc.liamg|99ggelnairb#moc.liamg|99ggelnairb if you want, I don't check the forums on here too often. I only happened to check back yesterday by chance. I'm not all that far in XNA myself, but I have plenty of years of OO design/coding experience. It shouldn't take too long and I'll probably be asking you for help as well. I'm having a heck of a time with my current game demo and I think I'm just overcomplicating it. :)

GL

Re: Scrolling background tutorial and/or advice?

WindwalkerDM 15 Sep 2011 22:47

Hey…

Been working extensively on XNA for a week now… First;

The example I have been following that book crashed hard, no matter what I did, I couldnt make the map editor scroll the images I put on map… I tried every single solution my potentially limited mind could think of and… gave up! Seriously, I even went far and thougt maybe xna wasnt able to handle my mid mouse button (the example uses it) and replaced it with right mouse button, then tried to bind it to keyboard… Then went all the way back, did everything the same, including the version related debugging… and still… zilch… I thought maybe it will get better when I move forward but I can't!

Thus I decided to put it on hold for now and started searching for new sources, this time I didn't want to dabble with the problems of working on a v2.0 to v4.0 debugs, so searched around and found a good one. It starts real slow and gets fast rapidly over ten courses. Now working on a upwards moving shooter… Taking the example, digesting it and adding/changing whatever I want.

But most important part is, I got myself a working and fine tuned keyboard + mouse input control algorithç! it checks with previous states and all! and my spaceship now moves "crimsonland" or "alien shooter" style. Yummy. I am looking at ways to change all that algorithm into a class on itself, like "inputmanager" or sth, and use it by referencing it from wherever neccessary… Truly learning….

Yet, I am again stuck in an unexplainable (yeah… I believe it is always "unexplainable" for every single programmer hitting a problem) (and I am sure the answer is almost always very simple) situation about collision detection. Whenever an enemy ship spawns (off the screen, by the way) collision detection kills the player (who is on the screen, obviously)… I have gone through every line and couldnt notice out what was causing this… When I turn off collision detection by commenting out the line I call enemytoplayercollisioncheck method, everything is fine… Strange thing is, asteroids check normally. So do bullets… They don't kill the player outright, only when a collision occurs..

While changing the enemy behaviours on my whim, I made their sprites rotating towards player sprite (and I am proud by it- in the future only their turrets will turn…haha!) and I also changed player sprite to rotate towards mouse location, and shoot towards it. Maybe somehow, somewhere (over the rainbow?) playersprite thinks he is off the screen, or it adds itself to enemylist and thus while checking "foreach" enemy collision, it detects a collision with itself…

brian, maybe I should send you everything I've done? could you review it with your objective mind?

Re: Scrolling background tutorial and/or advice?

WindwalkerDM 15 Sep 2011 23:28

Update: I just entered a breakpoint somewhere, and "stepped over" and "into" many lines… and solved my problem. a misplaced bracket. this ==> "}" <==this fella. Nicew job dude… you cost me two days. Yet I learnt a lot from it, whlie stepping over my code in visual studio debug mode. it's actually amazing, how many things are happening in the one thousanth of a brink of an eye. Am I ranting all by myself? Probably. Am I mad? Certainly….

Brian (guest) 22 Sep 2011 19:44

lol, good to see you're still plugging away at it and grats on finding your bug. Contact me at the email provided above if you ever need me to look through some code or whatnot, I don't mind. Also, I've started writing my own demos and tutorials on various things at www.brianlegg.com. I don't know if Whitaker will appreciate me posting that here but I plan to direct some traffic back here as well so hopefully he doesn't mind. I'm trying to keep things simple as well but I'll have to see what the public says before I can say it's easy to follow.

GL