Resources > Coding

[GML to XNA] Tutorial Series Part 1

(1/2) > >>

  Legend of Zelda XNA – Tutorial 1
   Welcome to the first tutorial in what should be an extensive on going series of tutorials dealing with XNA, C#, and the Legend of Zelda.  These tutorials are more meant for those who have some previous experience in Game Maker as I will be making comparisons of ways to look at C# in a Game Maker way.  That being said, even complete new users should be able to understand(I hope)with some questions asked.

Well, let's get down and dirty.  In this first tutorial, we will cover several things:
1. Installing Microsoft Visual C# 2010 Express and XNA
2. Images
   a. Loading PNGs
   b. Displaying Images
3. Thoughts

   Final goal after everything is said and done: A Zelda fan-game/engine based upon the original Legend of Zelda.

   I decided to make these tutorials with an “instant gratification” approach.  Instead of boring the  coders away with int, classes, structures, methods, inheritance, etc., we will be learning as we go.  We will also be learning by directly implementing these into what will become a full working game/engine.  So there should be nothing not related to the final project in these tutorials except maybe the first couple at best.  The things I hope you learn from my blabbing will help get you out of RAD(not that they are bad) and into more of a real language.

Enough crap from my mouth, let's install some necessary software.
If you want to go ahead and do this yourself:
~Microsoft Visual C# Express 2010
~XNA 4.0
Extra software:, Game Maker 7 or 8( useful for setting up images on a nice grid)


   This is the first place we shall go.  You'll notice you can download it all in one ISO file or a piece at a time.  For now, I suggest just selecting Visual C# 2010 Express.  Select your language and you should get download request to save or open the file depending on browser.  I recommend saving as if your internet poops out during the main installation, you still have the starter program.
   After you have downloaded what I call the “starter program”, go ahead and open it.  You may have to disable your firewall settings.  Follow the directions provided.  I usually install most options, the choice is upto you.  If installation goes well, we are done with this part of installation.
   Whew, this is the next place we want to go.  It's only in English from what I see.  Just click the download button and follow the directions.  It will ask during installation if you want to setup communications in the firewall with an XBOX 360.  I leave that choice at this time for you.  I, personally, do not deploy my games to a 360 but if you want to and have paid the $100 to do so, then by all means, knock yourself out.  Follow the directions and everything should be good.

   Ok, now, you kinda have to register the product.  It's free and painless...  If you already have a MSN ID(hotmail is one for example), then log in with that ID and you can register the product.  Start up Visual C# 2010 Express from your start menu on Windows.  Once it is open, click on the Help tab.  There should be an option for registering the product.  Follow the instructions given and you should not have any issues.

If you want to skip that for now or have it done, we can continue.

   Well, we want to make sure installation went well.  Open up Visual C# 2010 Express and make a new project, the option should be on the left side of the Start Page.  From the templates given, select Windows Game 4.0 (or 3.x if you want to use the older XNA).  Let's call it testgame1.  Type that in the bottom before you create it.  Let it create a directory solution.  If you want to delete it later, just remember the main folder it is in.  Click OK and it'll set everything up for us with a new project.  After everything is loaded, press F5.  This will compile everything into an executable that runs much like Game Maker.
   If you see a nice big blue screen appear, everything went well.  If not either something went wrong during installation, or your pc hardware is really old. :)

   Let's dive right into loading images.  Go to the solution explorer on the right side of Visual C#.  Right click on testgame1(Content) near the bottom of the list.  Let's make a new folder called Images.  This is very helpful in keeping everything nice and organized.  Later on in further tutorials, we will add more folders such as  Sounds, Classes, and so on.  For now, let's just add Images.
   Once you have created a Images folder, let's now right click on the Images folder in the solution explorer.  Select Add Existing Item.  This is what you want to select for adding images to your project.

NOTE:  I ALWAYS USE PNG WITH THE TRANSPARENCY COLOR OF 255,0,255.  You can use alphas with PNG and XNA but I choose not to.

   Anyway, select Add Existing Item.  Find where you saved the linktest.png and select that.  You'll see that the image is now added to the solution explorer, but we aren't done with this part yet.  Right click on the image and select Properties.  You should see a window open up with some property information.  There is a option for COPY TO OUTPUT DIRECTORY.  For now, drop the menu and select ALWAYS.  This will ensure that we should not have problems when compiling.
   Once that is done, to make sure everything is added correctly, press F5.  You should see just a blue screen as usual.  This means that XNA recognized the image format and is ready to use it(there is more technical stuff going on; you can look into it at your own leisure.).

Now, look through the code on the left side of Visual C#.  If not yet open you want to double click on game1.cs on the solution explorer so you can view the code.  Find public class Game1 : Microsoft.Xna.Framework.Game Right underneath it you should see:

--- Code: --- GraphicsDeviceManager graphics;
            SpriteBatch spriteBatch;

--- End code ---
Now, right after that I want you type in:

--- Code: --- Texture2D sprite1;
Texture2D sprite2;
Texture2D sprite3;

--- End code ---
   What we are doing here is telling Visual C# that we are setting aside Texture2D variables called sprite1,2, and 3.  Much as in Game Maker when you have something say ammo = 100.  Ammo is a variable that is an integer or int as it is usually named.  Game Maker does not require you to use int as it automatically understands since you are assigning it a numerical value that it is an int(it could be floats as well, doubles, and so on.)
   So basically, we are saying there is var ( as in Game Maker) that is sprite1.  To let Visual C# know what kind of variable it is , we use Texture2D.  Though we won't discuss it at this point in the tutorials, Texture2D is actually a class built into XNA.  All you need to understand at this point is that it is similar to a variable.
   Anytime you want to draw some two dimensional images, you use Texture2D variablename.  For learning purposes, we are just going to call them sprite1,2, and 3.
   Okay, so we have some Texture2D variables.  If you hit F5, everything should still compile but you don't see anything on screen...why?  Well, we have not drawn them yet, of course.

As you look over the code you see a section called protected override void LoadContent()

This is where we load most everything we will use such as sound and images.  You can see we already have a spriteBatch doing something there.  We will not worry about that for now.  Instead, we are going to put in some fancy code:

--- Code: --- sprite1 = Content.Load<Texture2D>(@”Images\linktest”);
sprite2 = Content.Load<Texture2D>(@”Images\linktest”);
sprite3 = Content.Load<Texture2D>(@”Images\linktest”);

--- End code ---
   Here, we are now using our sprite variables we declared earlier to actually load images into them.  Anytime you want to display an image, you have to load the content manually.  Game Maker let's you add sprites which can then be used in an object.  Instead of having an oh-so-fancy GUI, we have to code it ourselves.  Nothing too difficult.
   In regards to Content.Load<Texture2D> we are telling the compiler that we want to load some content, which is a method.  However, what kind of content are we loading? Well, a Texture2D or simply, a sprite or image.  The (@”Images\linktest”) is telling the compiler what image we want to load.

So, let's recap a bit since we have yet to do so:
   We made the compiler set aside some variables which are all Texture2D but do not contain anything.  Just as in Game Maker when you use var image.  You have yet to set it equal to anything.  You are just declaring the variable.
   Then we move down to the LoadContent method(section) of the code.  This is where we now set our previously empty variables equal to something.  Since Visual C# already understands them as Texture2D because we declared them as such, we can set them equal to the images we want to load.
   In a nutshell, we are telling the compiler:
   sprite1 = linktest.png
   But, unfortunately, we cannot just type that.  We have to load the content through XNA.  Something I will elaborate on in later tutorials.

   However, we still do not see the images themselves no matter how many times we hit that damn F5 key.  We need to now tell the compiler to draw the images similar to the Draw Event in Game Maker.
   Look over the code again.  You will see near the bottom protected override void Draw(GameTime gameTime).  That is where for now we will do our drawing.  It will become more complicated in time but for now, all you need to understand is that this is where all the drawing takes place.  Nothing more, nothing less.
   You can see something there already:
   That line of code is clearing the entire screen into the color of blue.  To experiement, try changing just the color itself.  Color.Black, Color.White, Color.Red, and so on.  After you change the color, press F5 to compile and run.  This is something you will learn to do often.  F5 is your friend...sometimes...  Let's move on.
   So, we want to draw our images instead of just changing the color of the screen.  Remember the spriteBatch way back near the beginning of our code?  Now, we use it.  Add this code after the GraphicsDevice.Clear(Color.CornflowerBlue); line:

--- Code: --- spriteBatch.Begin();
spriteBatch.Draw(sprite1, Vector2.Zero, Color.White);

--- End code ---
   Here, we use the spriteBatch to draw our sprites.
   spriteBatch,Begin(); is letting the compiler know that we want to start drawing but we still aren't actually drawing anything yet.
   SpriteBatch.Draw is saying “Ok, we already started our spriteBatch.  Now, we want to actually draw something.”
   Then we have to tell it what we want to draw, in this case, sprite1.
    Vector2.Zero is just a fancy way that we use to say 0,0 that is x coordinate 0 and y coordinate 0.  In XNA, the X and Y coordinate system works from top to bottom.  As you go down the screen, y increases; as you go right, x increases.  The reverse is also true in regards to going up, y decreases; going left, x decreases.  For now, we just want to draw it at 0,0.  We will learn more in the next tutorial about changing position and moving around an image.
   Color.White is letting the compiler know that we do not want to blend the image with any other color.  It will leave our image exactly as it is.
   Finally, spriteBatch.End(); is telling the compiler to stop drawing our spriteBatch.  This is essential.  If you forget this, you'll get errors.
   Press F5.  If you typed in everything correctly, you should see Link in the upper left corner of the screen.  You'll notice no pink color.  That is because the pink color is 255,0,255 in RGB which XNA automatically understands as the transparent color(discussed earlier).

   Whew...that sure was a lot.  You installed Visual C# Express 2010 and XNA 4.  You learned about Texture2D, where and how to load images, where and how to draw an image, and how to add folders and images using the Solution Explorer.
   Though this first part was going to add a lot more, I now think that this is enough for your brain to digest.  If you have any questions or are getting errors, feel free to post.  I am sure if I cannot answer the question or am away with school work, some of our other much better coders can help.

Next tutorial we will actually make the sprites move and learn about using the keyboard for movement.  We may even go into making animated sprites.  It is not as simple as using a gif, though it would be nice(unless XNA 4.0 added that feature).  I will also discuss methods and how they relate to scripts in Game Maker.  We will also start to make some classes as well.

Until next time!

REMINDER: Download the attached rar file.  It contains a copy of this tutorial in a doc, the source code for Game1.cs, and the image we use.

Stickying!  If another mod objects, feel free to change it :P

Busy at work on the second tutorial.  My patient proofreader will be going over the first part soon I hope(thanks).  I thought I would give you guys a taste of what is coming via an outline.

1. Explanation of Positioning Images
      a. Further Explanation of the Coordinate System used
      b. Introduction of Window.ClientBounds and image properties
      c. Vector 2
   2.  Moving Images
      a. Making Link move on his own
         I. int,floats,doubles
         II. The Update Method
      b. Introduction of the keyboard
   3.  Making Animated Sprites
      a. Setting a New Resolution
      b. Making Link Animate while walking
      c. Setting animation speed
   4.  Exercises and Thoughts

Once everything looks good to my "mentor", I will be editing this post into Tutorial Part 2. :3

Animated sprites huh? I'm assuming you're providing the class for that, considering how tricky they are compared to just calling structs like Vector2 :p


--- Quote from: walnut100 on March 19, 2011, 09:59:23 pm ---Animated sprites huh? I'm assuming you're providing the class for that, considering how tricky they are compared to just calling structs like Vector2 :p

--- End quote ---
For learning purposes now: no.  For tutorial 3, yes.  In tutorial 3 I will be actually going over classes extensively to the best of my ability.


[0] Message Index

[#] Next page

Contact Us | Legal | Advertise Here
2013 © ZFGC, All Rights Reserved

Go to full version